[PATCH] Applying new ui to Admin New Custom Backup

1 Dec 2015

From: Andre Teodoro <andreteodoro.work@gmail.com>

Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com>

---
 ui/css/src/modules/_administration.scss |  30 ++++++++++++----
 ui/js/host-admin.js                     | Bin 35177 -> 34874 bytes
 ui/pages/host-admin.html.tmpl           |  62 ++++++++++++++++++++------------
 3 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/ui/css/src/modules/_administration.scss b/ui/css/src/modules/_administration.scss
index 2a79dce..84479f1 100644
--- a/ui/css/src/modules/_administration.scss
+++ b/ui/css/src/modules/_administration.scss
@@ -17,13 +17,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-
 #administration-root-container {
-    .fa {
-        margin-left: 20px;
-        font-size: 20px;
-        color: #5a595b;
-    }
+    // .fa {
+    //     margin-left: 20px;
+    //     font-size: 20px;
+    //     color: #5a595b;
+    // }
     h3 {
         height: 32px;
         padding: 10px 15px;
@@ -369,4 +368,23 @@
         width: 10%;
         height: auto;
     }
+}
+
+#newBakDialog {
+    .del-label {
+        color: #9e9e9e;
+        font-size: 14px;
+    }
+    .fa {
+        padding: 1px 3px;
+        font-size: 18px;
+        margin-left: 0;
+    }
+    .fa-plus-circle {
+        margin-bottom: 5px;
+    }
+    .path-item {
+        display: flex;
+        margin-bottom: 10px;
+    }
 }
\ No newline at end of file
diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js
index f34fafd05a11a2f0e7e22f2b9c50f1c980bb8d79..d43bd3c9326be081be832fb3c41d0a0e4a43b460 100644
GIT binary patch
delta 1259
zcmZ`(O>Em_7-p5bIL@Errb*g$tK+0~yvz-q1RZOVZVU$MAV615{7u4%zffzAoyJZ#
zeySeeunTJG!v!t~G$Fx-qV9m;01_8Y{M@)8CO9D>F(jlODt<mYiP~+dCF}j($M5(0
z{hsH2zuz|pzStPpxOM2h&u(2Bh{{=uTzy!(@`$0C_REMaPva_6z<)D?h#n8(CNmc@
z8e-mXE@`Hr<AZh@y9|$amf|RPhVlO8v7Vnpm2miYB!-2-BE&!n7v~jhoMynXXR*!>
zqsA)Kp2Ou=NAS{N20LsPx35RB^*n<K?g-Z32;*sv!M~?Mc#q}qdQd^^0*m8?WB5L}
z(2I%SlM#;1<)tZ2*CjkNpAv{7zQ&3B9)jhGBlu^9#rU)A+9GjWB9_J6R7-0+<nhHP
zpUBH4-B=Oprsg<hsinC~s^OBRRFTEP9htnOa>=k-9anT;X_2zzl54Ki-`TL+O|@=Y
zZre6RKS~mdcO_Zt7ABXRmS*)g)@`%Xv{ap#gw|GbE$>xL!@45&Fltm&s}b|SqWZZS
zn%L0PreSp)wQjWQCXp(oqET5OO?!ou7K`4G?<%TaQ<2h8k(Jpy4($o<E*Xx;7qQ$&
zP12-B%#_8BrIUtX5gp5e2~XSy?~R-CS*>bK%6Yjg%2X!RXV|q>!>XGdoyd4QIEouw
zGVFb*+B)$x!e1v7esgRIEG~p2Lt3jvEIofu%<bzjJVhe-^>8xji>vHAz$#sH_>&pK
z`H5uw;LiAbcr2$Ar`|SNu3=lJMcPu?eSqo-U9+!YCvp;M^eC#)G$P3us%Zi1(IS4B
z597P2g5Bs0e$Mee{$gwo|2Edezj|{JTYLaneir?;#Xr<rpTXb!15o1`G{XTr7oVgy
zgB$S?YFW$)L4VYK^L-w?knQ0oU<+rtT)scQIF-7Hucrg}G<6i>{UKC`MmL23z6>ci
z!!erzkJa!*ce$6h+(~qyaa0oNP0IV6kVYXggtrnb-c8KXp^Pv-qc3ph@F7>gkDP=Z
zZU&Eq<Jjg#sedfzbMCd&UOnCWL{_G3D=#k@I>DMgnWVj`wa?R`$@diNs`X1s!OhT#
w)Ik#b5t>FOEYW{T_$ln2B!d|t-n)f(iWR9Z(!yhhR=0N(<MHi}Ccmlu4_xMowEzGB

delta 1501
zcma)6O>7fa5LUvjcfI~w|KK=I>}-~#cq{BWSfYue#A$+%Aguyb6_6;1wRaP*u)WrL
z-Go#rR4Ru`98$hh4@kZj1Qn`~ddjJ%MisrcO}U^-ROM2&J(ai5PVAB#x|f+ZGdu5_
zneWZFTm8S??cdt{`q$<DoAR-mzBaF3KW(TLb5&L{8dXvs3sUD(o3^=B*K2ucMXfaS
z6Z?*;si~E`WLwQ1<C>w_<-9bR&2|IJy0Kce^U|qaqh_hAtLkF0q8~_X=?!B;J<L<8
zm<{~{eVrteFUj2-Oa~wO*f?(4%-N=qZdZ}E4ZETjRVz(@lut-wsRISqRZFkgDMiUx
zde!_$f5*11luZA`qoWaQ9664cS9$!L67cXy0V7xV$#&1qm{xV(u92n{o3?G%QbuE0
ztr(hAkYv5)6d+3ksAe>%u1pJP%?#l_lY=<Mgb0?5s%ZpOUA4<+ZM}-!!T^>OH(N4m
z4N}k80Jc5MaNRPhs&#{;B9$4$m#$Zu4ZCcVuFLqe5XH`D2(1Yge;2~YpCd4@iAc<e
z<Q5)cj={_20lWxGc=xs!Ef??KD><XC*t&bS2)v`@ho>k<4h5r8Oic*aEVtZ?)o
zp2R^sRipO*0A<~f*weUmk;B|150lOH=mMUw8K+`ASRTBa=h5#vMvpBeL}iQ{LTjDf
zhuBUbV9lkFG%oz9jNv=i`>(}{crfFKnHZuyxUccJ6FiPwNXAaE0O!0O_8}39JGLQ*
z^_yL074;R<(ia@wwF#E+b9f$5cxQT=-Y8)-JVBG(3Hoq59K>#v!6S_!Nt0Ah_($<1
zEaKWCgZIQ!Nccs#BP00f42ScgA3un4vG+nsrAA)5+<k%$CPO3h|1a;lD4hVi{VbLi
zd)|d(FI5On9PCNTg)fC++MjO(k=-jGg5QNCwx?KlJ#BBw6T?P!0CPDWFX94J&s)_0
z?@SzDdEzv~FA|6EJz312i|xlHy@$tr?rq0yk>T!m7x2k6Pb80F-_*XY5<Pj6!#&?g
zDu47Pk@=8=<Y(}g?+rrAam@M$iS!~HapS5O#0`3mkcI}}_D4FtSVw0tH_xLlFhxlw
zGF<faH7C=>fTwJPhHOVunET9wrSTXNE;ni$9>gz%Fe~%a??8DTNO$yPXRdAEdGYOz
z-PfKkyJvT1{3dPLKjL(Uz#=5g?cTgXx9O(x_)=sf818JR1@e~6Dp|^8x!?jfi0zwM
V`H;=kS=F+${bXhOu`&L%_zJe6&u;(#

diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl
index 7f4ceda..7e197bf 100644
--- a/ui/pages/host-admin.html.tmpl
+++ b/ui/pages/host-admin.html.tmpl
@@ -87,7 +87,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
                                 <a href="#" id="newDefaultBakBtn"><i class="fa fa-file"></i>$_("Generate Default Backup")</a>
                             </li>
                             <li role="presentation">
-                                <a href="#" id="newCustomBakBtn"><i class="fa fa-file"></i>$_("New Custom Backup")</a>
+                                <a href="#" id="newCustomBakBtn" data-toggle="modal" data-target="#newBakDialog"><i class="fa fa-file"></i>$_("New Custom Backup")</a>
                             </li>
                             <li role="presentation">
                                 <a href="#" id="batDelBtn" data-toggle="modal" data-target="#batDelDialog"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a>
@@ -262,21 +262,43 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 </div>
 
 <!-- Configuration Backup Modal - Create Custom Backup -->
-<div id="newBakDialog" title='$_("Create a backup")' class="ginger-dialog">
-    <div>$_("Description")</div>
-    <div class="crt-bak-section"><input type="text" class="desc"></div>
-    <div class="crt-bak-section">
-        <div class="path-pick">
-            <div>$_("Path Included")</div>
-            <div class="box" id="includeBox"></div>
-        </div>
-        <div class="path-pick">
-            <div>$_("Path Excluded")</div>
-            <div class="box" id="excludeBox"></div>
+<div class="modal fade host-modal" id="newBakDialog" tabindex="-1" role="dialog" labelledby="newBakLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content" >
+            <div class="modal-header">
+                <h4 class="modal-title">$_("Create a backup")</h4>
+            </div>
+            <div class="modal-body">
+                <form id="form-backup-add">
+                    <div class="form-group">
+                        <label for="description-textbox">$_("Description")</label>
+                        <input type="text" class="form-control input" id="description-textbox" name="description" />
+                    </div>
+                </form>
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="col-md-6" >
+                            <label class="col-md-12">$_("Paths Included")</label>
+                            <span class='add-path-to-include'><a  class="add btn btn-link" href="#"><i class="fa fa-plus-circle"></i> $_("Add a Path")</a></span>
+                            <div id="includeBox"></div>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="col-md-12">$_("Paths Excluded")</label>
+                            <span class='add-path-to-exclude'><a  class="add btn btn-link" href="#"><i class="fa fa-plus-circle"></i> $_("Add a Path")</a></span>
+                            <div id="excludeBox"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" id="newBakFormBtn" class="btn btn-default" data-dismiss="modal" disabled>$_("Generate Backup")</button>
+                <button type="button" id="newBakFormCancelBtn" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+            </div>
         </div>
     </div>
 </div>
 
+
 <!-- Configuration Backup Modal - Batch Delete -->
 <div class="modal fade host-modal" id="batDelDialog" tabindex="-1" role="dialog" labelledby="batDelLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
@@ -314,15 +336,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
     </div>
 </div>
 
-<!-- <div id="batDelDialog" class="window modal-content">
-    <div class="del-option">
-        <input type="radio" name="batDelType" value="counts_ago" checked>$_("Preserve the latest") <input type="text" class=""> $_("backups")
-    </div>
-    <div class="del-option">
-        <input type="radio" name="batDelType" value="days_ago">$_("Preserve the latest") <input type="text" class="" disabled> $_("days of backups")
-    </div>
-</div> -->
-
 <!-- SEP Configuration Modal - Add Subscription -->
 <div class="modal fade host-modal" id="subscriptionAdd" tabindex="-1" role="dialog" labelledby="hostsModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
@@ -416,7 +429,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
         <span class="column-file">{file}</span><!--
         --><span class="column-timestamp">{timestamp}</span><!--
         --><span class="column-download btn btn-link btn-download"><i class="fa fa-download"></i>$_("Download")</span><!--
-        --><span class="column-delete btn btn-link btn-delete"><i class="fa fa-minus-circle"></i>$_("Remove")</span>
+        --><span class="column-delete btn btn-link btn-delete "><i class="fa fa-minus-circle"></i>$_("Remove")</span>
     </li>
 </script>
 <script id="backupTooltip" type="text/html">
@@ -428,7 +441,10 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
     </div>
 </script>
 <script id="pathItem" type="text/html">
-    <div class="path-item"><input type="text"><button class="add"></button><button class="delete"></button></div>
+    <div class="path-item">
+        <input type="text" class="form-control input" />
+        <span class="column-delete btn btn-link delete del-label"><i class="fa fa-minus-circle"></i>$_("Remove")</span>
+    </div>
 </script>
 <script id="nicItem" type="text/html">
     <form class="form-inline">
-- 
1.9.3

    

sguimaraes943＠gmail.com

tags

participants (1)