[Kimchi-devel] [PATCH 4/5] [WOK] Updating Kimchi plugin with new-ui

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Tue Aug 25 20:06:00 UTC 2015


From: samhenri <samuel.guimaraes at eldorado.org.br>

Added some new-ui markup to Kimchi. Please note that some pages may stop working since the new-ui is not finished yet.

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 plugins/kimchi/ui/config/tab-ext.xml           |   7 +-
 plugins/kimchi/ui/css/theme-default/button.css |  72 +++++++--------
 plugins/kimchi/ui/images/logo.ico              | Bin 1214 -> 15086 bytes
 plugins/kimchi/ui/js/src/kimchi.grid.js        |  13 +--
 plugins/kimchi/ui/js/src/kimchi.host.js        |   2 +
 plugins/kimchi/ui/pages/guests.html.tmpl       |   6 +-
 plugins/kimchi/ui/pages/host.html.tmpl         |  33 +++----
 plugins/kimchi/ui/pages/network.html.tmpl      | 123 +++++++++++++------------
 plugins/kimchi/ui/pages/report-add.html.tmpl   |  46 ++++-----
 plugins/kimchi/ui/pages/storage.html.tmpl      |  52 ++++++-----
 plugins/kimchi/ui/pages/templates.html.tmpl    |  72 ++++++++-------
 11 files changed, 211 insertions(+), 215 deletions(-)

diff --git a/plugins/kimchi/ui/config/tab-ext.xml b/plugins/kimchi/ui/config/tab-ext.xml
index ee88c88..e363ebd 100644
--- a/plugins/kimchi/ui/config/tab-ext.xml
+++ b/plugins/kimchi/ui/config/tab-ext.xml
@@ -5,6 +5,7 @@
         <access role="user" mode="none"/>
 
         <title>Host</title>
+        <css>host</css>
         <path>plugins/kimchi/host.html</path>
     </tab>
     <tab>
@@ -12,6 +13,7 @@
         <access role="user" mode="byInstance"/>
 
         <title>Guests</title>
+        <css>guests</css>
         <path>plugins/kimchi/guests.html</path>
     </tab>
     <tab>
@@ -19,6 +21,7 @@
         <access role="user" mode="none"/>
 
         <title>Templates</title>
+        <css>templates</css>
         <path>plugins/kimchi/templates.html</path>
     </tab>
     <tab>
@@ -26,13 +29,15 @@
         <access role="user" mode="read-only"/>
 
         <title>Storage</title>
+        <css>storage</css>
         <path>plugins/kimchi/storage.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="read-only"/>
-
+        
         <title>Network</title>
+        <css>network</css>
         <path>plugins/kimchi/network.html</path>
     </tab>
 </tabs-ext>
diff --git a/plugins/kimchi/ui/css/theme-default/button.css b/plugins/kimchi/ui/css/theme-default/button.css
index e774128..9895572 100644
--- a/plugins/kimchi/ui/css/theme-default/button.css
+++ b/plugins/kimchi/ui/css/theme-default/button.css
@@ -17,7 +17,7 @@
  */
 
  /* Generated at http://colorzilla.com/gradient-editor/ */
-.btn {
+.kimchi.btn {
     display: inline-block;
     height: 42px;
     margin: 3px;
@@ -50,11 +50,11 @@
     cursor: pointer;
 }
 
-.btn[disabled] {
+.kimchi.btn[disabled] {
     opacity: 0.3;
 }
 
-.btn:not([disabled]):hover {
+.kimchi.btn:not([disabled]):hover {
     box-shadow: -2px -2px 2px #dadada, 2px 2px 2px #fff, 3px 3px 3px white
                 inset, -3px -3px 3px rgba(0, 0, 0, .25) inset;
     background: #d5d5d5;
@@ -69,7 +69,7 @@
             endColorstr='#eeeeee', GradientType=0);
 }
 
-.btn:not([disabled]):active {
+.kimchi.btn:not([disabled]):active {
     box-shadow: -2px -2px 2px #eaeaea, 2px 2px 2px #fff, 3px 3px 3px
                 rgba(0, 0, 0, .25) inset, -3px -3px 3px white inset;
     background: #ffffff;
@@ -84,43 +84,43 @@
             endColorstr='#ffffff', GradientType=0);
 }
 
-.btn.loading {
+.kimchi.btn.loading {
     box-shadow: none;
     cursor: default;
 }
 
-.btn.loading .icon {
+.kimchi.btn.loading .icon {
     background: url(../images/theme-default/icon-load.png) center
                 center no-repeat;
 }
 
-.btn.pause-gray .icon {
+.kimchi.btn.pause-gray .icon {
     background: url(../images/theme-default/ac22_pause_grey.png) center
                 center no-repeat;
 }
 
-.btn.resume-gray .icon {
+.kimchi.btn.resume-gray .icon {
     background: url(../images/theme-default/ac24_resume_grey.png) center
                 center no-repeat;
 }
 
-.btn .text {
+.kimchi.btn .text {
     padding: 0 10px;
 }
 
-.btn .icon {
+.kimchi.btn .icon {
     display: block;
     width: 42px;
     height: 42px;
 }
 
-.btn.dropdown {
+.kimchi.btn.dropdown {
     text-align: left;
     position: relative;
     padding-right: 25px;
 }
 
-.btn.dropdown .arrow {
+.kimchi.btn.dropdown .arrow {
     position: absolute;
     width: 15px;
     height: 42px;
@@ -132,12 +132,12 @@
     right: 10px;
 }
 
-.btn .input {
+.kimchi.btn .input {
     margin-left: 10px;
 }
 
 /* Generated at http://colorzilla.com/gradient-editor/ */
-.btn-tool {
+.kimchi.btn-tool {
     display: inline-block;
     height: 38px;
     margin: 6px 3px;
@@ -169,14 +169,14 @@
     cursor: pointer;
 }
 
-.btn-tool:hover {
+.kimchi.btn-tool:hover {
     box-shadow: -1px -1px 1px #777, 1px 1px 1px #eee, 2px 2px 2px
                 rgba(0, 0, 0, .25) inset, -3px -3px 3px
                 rgba(0, 0, 0, .25) inset;
 }
 
 /* Generated at http://colorzilla.com/gradient-editor/ */
-.btn-tool.left,.btn-tool.right {
+.kimchi.btn-tool.left,.kimchi.btn-tool.right {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
@@ -192,12 +192,12 @@
             endColorstr='#999999', GradientType=0);
 }
 
-.btn-tool:active,.btn-tool.active {
+.kimchi.btn-tool:active,.kimchi.btn-tool.active {
     box-shadow: -1px -1px 1px #777, 1px 1px 1px #eee, 3px 3px 3px
                 rgba(0, 0, 0, .35) inset;
 }
 
-.btn-tool.left {
+.kimchi.btn-tool.left {
     -webkit-border-top-left-radius: 5px;
     -moz-border-top-left-radius: 5px;
     border-top-left-radius: 5px;
@@ -206,7 +206,7 @@
     border-bottom-left-radius: 5px;
 }
 
-.btn-tool.right {
+.kimchi.btn-tool.right {
     -webkit-border-top-right-radius: 5px;
     -moz-border-top-right-radius: 5px;
     border-top-right-radius: 5px;
@@ -215,7 +215,7 @@
     border-bottom-right-radius: 5px;
 }
 
-.btn-tool .icon {
+.kimchi.btn-tool .icon {
     display: block;
     width: 48px;
     height: 38px;
@@ -287,7 +287,7 @@
 }
 
 /* Generated at http://colorzilla.com/gradient-editor/ */
-.btn-tool.tree {
+.kimchi.btn-tool.tree {
     width: 42px;
     margin: 5px 10px;
     background: #ffffff;
@@ -304,7 +304,7 @@
                 inset, -3px -3px 3px rgba(0, 0, 0, .25) inset;
 }
 
-.btn-select {
+.kimchi.btn-select {
     display: inline-block;
     position: relative;
     height: 30px;
@@ -321,7 +321,7 @@
     cursor: pointer;
 }
 
-.btn-select .input {
+.kimchi.btn-select .input {
     border: 0 solid #CCCCCC;
     margin-right: 10px;
     font-size: 16px;
@@ -332,10 +332,10 @@
     padding: 0 5px;
 }
 
-.btn-select input.invalid-field {
+.kimchi.btn-select input.invalid-field {
     border: 1px solid #FF4444;
 }
-.btn-select .arrow {
+.kimchi.btn-select .arrow {
     position: absolute;
     width: 15px;
     height: 30px;
@@ -447,7 +447,7 @@
     display: none;
 }
 
-.btn-normal {
+.kimchi.btn-normal {
     display: inline-block;
     height: 38px;
     margin: 9px 3px;
@@ -460,25 +460,25 @@
     cursor: pointer;
 }
 
-.btn-normal span {
+.kimchi.btn-normal span {
     font-family: 'Helvetica Neue', Helvetica, Arial;
     font-weight: lighter;
 }
 
-.btn-normal:not([disabled]):hover {
+.kimchi.btn-normal:not([disabled]):hover {
     background: #EEEEEE;
 }
 
-.btn-normal:not([disabled]):active {
+.kimchi.btn-normal:not([disabled]):active {
     background: #999999;
 }
 
-.btn-normal[disabled] {
+.kimchi.btn-normal[disabled] {
     color: #CCCCCC;
     cursor: default;
 }
 
-.btn-normal-1 {
+.kimchi.btn-normal-1 {
     display: inline-block;
     height: 38px;
     margin: 9px 3px;
@@ -491,26 +491,26 @@
     cursor: pointer;
 }
 
-.btn-normal-1 span {
+.kimchi.btn-normal-1 span {
     font-family: 'Helvetica Neue', Helvetica, Arial;
     font-weight: lighter;
 }
 
-.btn-normal-1:not([disabled]):active {
+.kimchi.btn-normal-1:not([disabled]):active {
     background: #999999;
 }
 
-.btn-normal-1[disabled] {
+.kimchi.btn-normal-1[disabled] {
     background: #999999;
     cursor: default;
 }
 
-.btn-group {
+.kimchi.btn-group {
     float: left;
     padding: 0 10px;
 }
 
-.btn-small {
+.kimchi.btn-small {
     display: inline-block;
     height: 25px;
     margin: 6px 3px;
diff --git a/plugins/kimchi/ui/images/logo.ico b/plugins/kimchi/ui/images/logo.ico
index 446143f066a60f479b2cb8f8d04ab3c97ff60e56..cb3a3dc2f9c9ce0e5d3e14f0adab89c28c729ce0 100644
GIT binary patch
literal 15086
zcmeHO30PBC+78mXO<TJ-wrXqG!cEvi*mt=svWSWsTC~_2chuI}=`vNP&eNGrXa2F%
zTD!XM3sgaiS_KzeKtMKuge5EqBtS^WzJBxFX!wDmg at W_X{Lkch&hwpf?)RPZo^#K3
z-|vJ*v!U72o_&^v(vG(32^!6hMx)u;-A^CI{N0%6<@F%VpwVJ}OQSJS2Opuu{d^QO
z8tVO;AKA3qmTcbh9ND<r_EGkdD}=rD4zWbRBUWl!ox_X at r*V`%DLI%%N{<wvTo+mY
z-GC_CuMrcw?h;p3jZDyWxSDlRSE;VUeW$LK^K4|t;V($l37DbDl+BT4#0-R?;|4KN
zevio2w6a9HPR<{d^_)a?i|;y}z$-LZu-`ta>*yD=^jYd9`U_tTWKZRFlrW}rm9d!8
zQa1}mS*fRuw8+iU2LI|Wo=B3P+POe??(|Z{**<N^SvFymWTj_N>&DRSw>Gkuo>(_^
z!a#MziVw!b$&YVlX2BS*T-^lUOtlTAcaQ6sDp|#r2-f>#6uiT+`*O{1Mh#?7@^(%Q
zEY5avy>9q2wA`3CyWHq~h5M3A4VS?et>MV-rF&3A<B>ndQ!2X0ErTGT-fURPGc76L
zzLMI&Wg1%7`ZV6#=xzT<V|?g%TI1?_#~@CwHPyUv&&a&Zec7p=OY9S_a(n+wbjH;E
zKKEXDSQ$>oRWA^^y6*xjP2%Jl(;};033r;MKl6hcS6=X|jj-nTmX5o-$2gu*C$MfA
zwggm}f>H|fKkK90{!M$Y_}1_G-nD2nWgAQvjt{1bEPd>6-!d-TsWoVZqsXCmxxM50
z{terUgPS$^Aq{&o0?GqOdRKHTUH)dIUB{w$hwg6{d8riX at v6MvEml0&+s+!lz~Qm)
zhBY_xXNsY4R^#<|y+jTPcIq$ZIBKLz*?QPK(`fi;nf}!KuPL9l+Vq!KL+fT&&27C=
zvY`1dnPkc6Bsz>;z|{G at 9;8WGm#Bz;dvW)~{x-eS7fGH?>AaR_Z_jTW+dKbZaR3?(
z8fY}Z-)Xewn;37U(Yi3NL`S3Tc at T0Hn2&j_7$_b27#dB7aVn2mXY4RUV4&6~%a2-k
z{-6KIvM<Jw<vRz}$Ajq#(K%vN`*mV`X94ka=PklAeh0E6dEeNQqJ0Z-ExkatA38 at 0
z_a&3nU-em!2C{otp7<wXoFtb>Y|kflNsEZf@=D@{f=^^C8;HNCn~7+(h_I}GR(rB#
zZy+f?ASPu;fs`KuQhcxr^VUSyefP8ZXtjBmY`Z`_f$RQuY_nQkL4dNJ08J|ax=sQN
z-2 at nwgu<X8_G=}CowW>X_Zw8bQR<Trr9A~ChUl)N;<(m>kyf3-%J!?cUlkGp+^;|*
zBtYNE0;9qm>-Izp?*AJko;kX9pO>g|$+rFeh at qA2MhyB)h%skDqW%obm1P`%ReTC(
z#^8UrXW7Y0iF#Edwz-39vnv?nK5|W)|C#O at -#^MLeg2@}`R><>1NhoDzmH8h6GwT}
z9UDc~eV0bI?yrhcp3uh|vtT})ho$-p;@1>sJqKSqjfQ=1+gV6_*i}Y!E9#jBRg)`U
z-ONr^w}kh!qqAW8D77%qzPp<JmbA##i7KBg`N9Uz15=~h53P^uJ|UTB{1MVjm&|GE
zoMl6)pVAfQ5o6nL5FyeMR+6m3#j&%{#j;-aFQ at ai%lOXQtUl|e_x0^IF_J?YXDKrc
zsiuptM3eJ=f4j$>j;{ZHVuIwzjk)@>Fi&@O!%*rg=Q`T9tn+=j`OV;fyKnhM{Irqj
zow@$y=Z8`Tr5oFN at S}KDhAL6}L&RWhd0a<k`wGv0$k&JRS~o{3i{JLCKL4ik?=#Y;
zxE)P at VZe9ru(G3C_NGO59L|YRoqUGUalfb?>v>r>ft{lr at Vt1JYezP6Srv+vz93Ey
zfa<sXuNS}L=bP~XG2}Ibs*kMMl|nXr8&AcFA2eQWS9B*ig@(e=Tlzo6-qQE!&wTEb
zplYsDZO2MB$kzlw#Tu8&%j at WFl<lwikwrUf$h)7}#oqgPwBu3jc;~a4Gj4Z`5Xd(}
z+&!atc7<`XwcPXEiO=5PPPu^RCFoqmftGbXrn0pztF6z6E1gcNorxc{LeDZIgbM)X
z)texdZ#uB(uEFv?uW~2PzQdiSY2ms+`)Ur<t>=i#*1P}ew)e;DbV^Mp&TH#ArACOs
z`d`KRU+0-VvFhPjb4NMX9>iRCkgoOx!3IA`<wo{M)<2bbUd!{x_9qI=u#|67Ew3_K
z#>I8+OE!hvS9Vu&9iW5j30+u!{d!Jg`9 at F6nr6i~9O-mglgP@`slsbaFsI%ODP at K;
z%Zl|qYt}99)H!8b`%VeAU%b-GRI}FYZw0 at bX8Wo8y(d2NF0{;@Ut2$8pK=o8tmcAi
zG4_1}zI(o at YR(<Kckl9Yxi3CZ%%#URaEVU^D_E;4RykSDu}A$X!uR-;PVcQdlsF?(
zJ&BQ}`JR=pH*;#t5M5)cNUk&vYCpakE*g6!L~!U_0DsO<>ZEiTUw2Pn>`}~NWT?+N
z=jpmUN{!V4)uzuPN{!U9bWp!LK`m~DK`m|Pe0W3NJFx!ojC~4E#t-TU=c_tjw*tcy
z-+cXmYu>}a-12XlT@=t_`q7)0f7qk!k!Smdl`)+BJm30-g at Mh+8~y_0c at FRW9n4#O
z at CVUbp2slYIX8gbG!DP9V#6Ip?~+X6!dRB at si9&y at 52kd86fB`4HiOvK!fa at PxZEw
z-W9~xE`^plv3&0cx?~f6hdG2y6Isr=E-&A+37^*fQUtyI(`dU+<t$bgEb^1;(;_-Q
z`qO&NkoJ%)@2cNk at vAE;4Q_#|uvWMm-eSBI#1|d*Dc!S&Q}psHlRKWALGRubPge>e
z=^dG2^tN3Qbn*TeJh>$~s11u;46r851Ru;d!Uu~r<?k#~Od4t*oa0o#QyAE2u8kCf
zAg&#165Aj at t^v-G)jMJNDVumZB|XkwnVV>@f|>SeNODlY0zwDN*d|y%9pJ-x0H1Kp
z at P{|FH#aX<4EgKpq*wXmEB<v?E2j%VkR$=&qE2W?l|X({eL?2*N(+}U!(L&R?4bW{
zzN1l^;%tO8FC(_w2%D1(@ZqaE^S0MDbswZD=MA;(R{b;Vdp?(f`FAR33ZY at K1j-i)
z;nGb0w|fJNd%kUw?A2ptJE;Taxu`ZT at l}8OMwsdtH at f@Vl?k%7>yo>i*DvfG(z(T2
zw^g1EsbbtsYW_z}O55$i1x;U_pUJbcKI<=&rZ?Ek4Q{iI<unbe&i>^V&1$l(Tp)V7
zU|wTSyZh_>C#Iq2rvMn!2u2$L7- at p7M%u=$=5XUy0CP{!ZiTHffaXSkYu5m-P+>d9
zseti6bpcE;gPCr|GJCA(+Hmt|S~%EJVcS;NE(f^TQz=jz0#c;3Gz>jF#fa_vSm=L$
z|Is}_o_K#0dF~Hm$WtE-Y5(}YZZygNW)$*4VaQ8-jhsLZax<S}+J~&(HKOa%K<#YJ
zA#B9C#B<17d34?;Vvs*d>MA8jSvlb at s~{$#FQCs^VxTg}raiMs(S8xxc^E955+z0Z
z1n6s6LJA)3Zy2b&!RCoC5zdHxD{>$=kZ)`2Dz<P?y6$R1h5T0=a#2O924a`0iHOB8
zexP!Z19={?<|7YxAG_lCeNL<c)1rM+eE!-%cEin+<PqVByAp8&`b?m^3c0g70+6o*
zP1}7gN#BKhmJEX&IW#$O2>B&e|9Y|C-N=r^?IhxkQX!wFIcee3C{B&ai<TU0oFUvF
z(BE!2Y2+H8LF^ZBYykRe9^htzR?Gywl!Y7^a&RgZm^2u4EHE2TYFYS<S*#JU{Cn3;
zwjHoX{0*c6c}VpM3-%~OCPbM|Lo|jN-6tVYeB^kt at JJsHvv(OojU#q99P45VyQ+a{
z;SF`|h+XD_e5D6sXM?`W3)|y~@50j}we83!N~pjt(26<ep}YUX`Dz;_-1}FQKz1F$
zHsCuj{9xe};~^Vn>9b+J{D-cEof+X)o8e0299?jpw&EBEbqo61+9}?ViMZV`_+UE%
z3~Hf&1M-i#@(Q0bvT~mb at +#kQRinRL*BOAEsQ+$N6Q}2UAiDP3m&n?0k0A$apyqG1
zE(79BS&#(hV1fBOEHNNAsXY7F;o`R1BTxMla<*B>Q-ezIV7zxyK0`OqN;r+$wt)32
zL6C#&ZqWFS8zE12+z1 at obvJO5vOX|O+ZOmg>So`X?rN_jYk8C;YrcLS*P1lsb&n&L
zER9oVz${}nq`(D8Ghc>f+Vh2}($jr-q~7*Jjd$E60y=IHccdkRNnXtaMIB48;JX$o
zYCQ(@ZCcA$w*-%pS9ndA-f{h~^EUHmW11B19Ua|vU~Ww35kZ1F6Bd|qAPo?|?t)}#
zceaPMoRN@{s{|e2MVhpTwMka)nk=huoif;Rk;k2ep=S*Bx5G9pnjt;bovh7*CFY;t
zHT?zk5=Hi}<|q1>|G3kU!o6c+MF;jI$xcCv={zhpoY$l%vj)Y7JZ@}*EkCwlcUZjm
zaMx^HgOZKsI+B&A*@LwmjNa|#^ij3zIAiZ^@Ec#bDSS-Zhp8iaUWws-^9;U&E7Uwd
z|4d<G_sL<;-)qY!jS{SIVYIFFT_N5W`fc;3u$=NuetB2la{uw%2FK4b)2Gfol|FgM
z9LU4^D_Xe!^BDPYh*h2Z_+dJO%`fHBUu@(OTcj)4waRrNrtY_+LHIio?r!!|=5BI5
za`sKfIf$KgGX158&db5pW!1xbBU_^+2Zea|qK{w7<C5-4^bb7covVA&s{1He$erd|
z#dXR--q at sG=?~rMA<(iZ1gbU%))l|wo09(?r^jFQsB(t-jO2awF)8?Ndn8=6j7_J#
z%2BK=O{`m<?kM}F{<`0F{lSo{x~SNzx`%!<;Qa`<3a-PgrWLNxjs6bR>Og2*%Z7q<
zqCS5k>#?l~WXWg0A<O=;fvnouvo1SlsN<MFYTMik48W;0K?w5nQFxal?v7zV?)5Tv
z(ksZBU#>%cMf*xGP$G8e+5jkD!&2m~o|Zb){v3)vS-fL3S+b*N&N5D^e}g=0HZxZT
z9*Et)0f4MCLsFFqkZaDHU23rKRMtAOS3GZveD~jw?}lddcXX`uhA#B?pw9(L*SZ|J
zy4vn%`={0RaY)8VHH&dtBV=9EgBM~BLjOn{`Y0CEnqV>C)ch*nWZ%19?0cVU+{q#w
zJJ8B?wcu}E>kIsJwzf3gZNT@{+kT|u*#Dl+S(<j2>w4fI{xHO!g!ohIOpwMm at lvad
zQ+wBm*tg@@hZ?Sv#oyDpk^`c2U#QvO-B!B6{b%1Iy=@;y9DNj%owGHSZiwFx at smg{
zB_sYc#Qz4*^y9)i`krq*^btOd*soAyr;h84{vr?PTIB<6=&P*V=+j=Yk=<uKdmMQC
zm+6$Lo{0Tl;*R4d2=T`v{`n1NSjIO2`ncZht&ek-j($EtDc24JTqa1lULap}-`9%x
z<>+$@?ydi?h-3eIqHna->xLe}&_9-l_^GkKw8GH%dYPe*4-oNB!B9itZ{o5*#${X9
zP7%)C>h)gy(hVMV{|d~#>%h7Dp7SLga7v62jlR7(jb at lvX*A)u*|zS6rq9_WpF7$1
z7Wd^H)c9${{+A<u8IFI!8V{&g=lbWHo7p}3JA4X$kt6Ai<JZI)M^qk+Yz^P}wgLRG
z?-L%3o#ax(53{c82J|_hpL#0#YY(8WT+zmL1JMdM6>k;uVCfpdau0^WvD3R~(&yfV
zGrsV@^U(e8*Wm4K!#J#ZiE%=mMfE)k{knm*W=O>TpI2kbpL5sX+*`MQ{3dtmQ|NDv
zz&V^&%XKCzS2*<eVkzBY{*`a;^C?}`-)^MRIOge$Gn%8sMXj0g%X;ITfKZ;<G^4_J
zepZRWbvX6h3~Qoa4yiBC4&ZTzQ%-+d^l6S`e6Mg|98{(u{vyUtI$+{?!K>0_^yist
zLn at 40A`1;K_O}~qx+ql0y&cjF=lpovhHCpLeZ<d1{O>UiDKoI|a~XNMEaq*)F3%F<
z8@?q*C%+5YVUN{A?qyGw1PPC#?-;VYtIzFmE9u!g9))eN&lpElw%GS$7&+Q;jGwfl
z8Ala8>&0Npc$6OcnkN<q2#YX4HoK<duzOj^qxApXp5=J+><avwYD)rzkn39qr`c5p
zGTHY=^gPG*Zn5$9Xnun2Cmhkfr}{FBUH!^+zlNG396v>Y&2Yu9UY+e-z2+0=`~k-%
z`oLcZrngKR%zFr=H;+Sq{mf8%(avxu(dkI0 at Uv)^&?nVXGGgsG?pgj!u5azN!oVh=
z{Psmb&2Z6|-+qc+nSRWx{Ac%Ag6P5*F?<q67yCuhI|pnd)i!)SA(Y<wSM;x|qU|~$
zk?4Rq9_=ufBd%K%BpERd)cvX5HWz*PpWg})SnyYbh at dFA3GxE!H0S+!mri<@f3(M=
zIP6Q;!k+KbaJpo5G`*`nj;{DDiY|>uoR0WjeoKWAy2t_VA|yr9r5Q1FnQo at N5*9Eu
z at VcKC(xWx7K0yiVle$mf-GCAMPQ^O|Gx6Snss#I<y0^fKXoH%_HYka}cM-&cBR*xF
zyS<Cw+2>m_n(AA`{#+tmbvBW%2E?ewI~7fMm!S+pDaIS4?WCFnJ0;9@(!r}PMp*7^
zhPPq>wk`zNo at Rs(mue~yf6v}el{uW>Nw13Munm`~cTkP^>!`aAvF%VFkG}snAzX{8
zhcn?-ic_H#Db{)t?3En62T_UlApqkLZ>NAb`)){ZP{14~4WzIPcrU>Os{+mNW;EW5
zm<#ad*YR$|N+WDZ(-h#{h at S6BYnj858SKghd49F3sxT4MMTwy?p&gp%bU at RB4ya!w
zf#Nw$a50wmLq>RI&wG!ymxU$Rt4iiN7-7DH8G{KHGK`Swir*m|Gpr3Y!{&H^E%VXQ
zz03 at st}(&(6<X7KOBGv&gLNR=Lms8$ayZpr-^P#8DpCaXGbPYGzXOD+ozU`HCsd{g
z;c`6xYR2 at 6KAcvfgW7qngW;Qbj>h)+P6k-SG{9?~M&Je*VO^vFHYFP1-T69rf3XHW
zSgMjD_8o68mOu1=Ap>C>Y+j~U#guGLRc2mjt+^rr?~W{xKx1k<@Rx|;)?5Mn7+3xI
zZoi+OPZR7Fqmvv}ezTpGzn|x-I`b+=b$3~iTChA^)v`RQo4-6(mb)UM>ytIJyF%6`
zOD%I~u$YFbcf_l7%Gu!RuM6WFmHhc_z+a5>IHd)0XV(^=nNj8bOXVfAyT+vW$|o%i
zRye#CCMT9gbWK|v(ed<xaPf$(`M-qWY-rUu#6P!sUhA>yMXi_bENuE)UUHqwFWLRO
zJugUVe6n((Xzb-g{zLbve>cqk#WQj}aR0^-_1`Ay*GJ+dB}-ZxPD$AW8J&`Owz3J7
z+-4&iW05qgeAm{JHgB=WE4YtRY5ZO5Cz~InEfV!C(iT92`NjzVt$(M{v~)DYT|^d+
zcb<?j5Lo5b`{}&i67?+Ue$t2xDbjYJrQgRP3rC5UsRUI0tq*Wn?o46YD)GV<P|s1`
zq~sM7*itetY>N#g1=DEv<%IiEHfEdUxok|HMQX=rE&W3^gwhB41Bt?t?koQZl_DPK

literal 1214
zcma)*3rLeu6vyu=X_;nPV)$&PPF)r(wTQ|dTGOUtnOdf0mZ=cR#99xbub1{BqnD9^
z^Z>PV6h)fUny6#CN{3di2P{*h2ek at Oq0a4o*=I}2Iv?krbAR`oKi_vQA0faVCr83o
zF{!X2#Dx$Nz}$(sm^sgR<Jj30yCMGpMl1z837jm3H1$<DU4IV>Tbdw<FM-;Hi<#et
z=I}n~iB^qh8{XzCNyvT<I;$&znmT~?eFXZgAE at Om?1h(6Iq+2e1-ca!zOAO7n3*};
zXq6n?2kF<!f%cez;-Fgx4$e+xo{WR;oqhc_OW;#nF!Zm|JK}m8gi6aC+##`QA5PmJ
zfeZ(o(}%&&1P5#*1vVbnssk~XhN5bNz=T)>5^+BS=V54SJ|^z)5I7%kU;>-skiq*{
z5B^=eF<T)pK9+)bV;9UCK>t-HOi+bkR-wK1xpfXL;S<?ho1pQ5gYzxiHR~=e+XHS(
zYe7QMZb3IjWV72H-JpD~6z(tbgwn1o$D2s!YteWNJS!i9l%iW?+34Lvr*KL(6{_X|
zobEjAb{lD|4qsmYvGF;~r0Aunc#>=c)0W4s|D{#(q9~vaX{rGms=((Wn*~LeWqIu}
zkGvlzwaxjL25hey2bVweu<xK*t+ at Oa_)UKTK^x4IwmKMOjm at oL`l)}_NGPy}tdb}w
zHa>H`ji2N7m}Xsj#j7-`#=Dv}`)h&)9th^&^dR%>WH_MB8KcIXVf8p&s1xD|_k)R-
zrk$Z0-|Gf}&4Au$KhU$k?3YR5by~D9M&-q$=ocNz4!IY&p7%OxuJf&+Ei-G(23hU;
zHTLhMtjFR9ExVbPQVLzBFlROcIZ|#jmX6fm_hsVa3XP<aKAeAt8dqp&oBW=V^+d>Q
zkcNnm%Ds?ggd^Rv2~9_o82cv;p6LSBD_g_s-n1uZ8#<EeLwTm~LE9J!Zdo at M&*jFU
zoM+Z%F5)(8$8y`Wz~%Pd;Nlx at aH{<lk}}CcRMRXZMD&%Uhz3Ze$jpg#uec1IlFMPW
MDQ4iZEk#_;cNAJoqyPW_

diff --git a/plugins/kimchi/ui/js/src/kimchi.grid.js b/plugins/kimchi/ui/js/src/kimchi.grid.js
index fcd9096..bcd045a 100644
--- a/plugins/kimchi/ui/js/src/kimchi.grid.js
+++ b/plugins/kimchi/ui/js/src/kimchi.grid.js
@@ -398,7 +398,7 @@ kimchi.widget.Grid.prototype = (function() {
         var toolbarButtons = this['opts']['toolbarButtons'];
         var toolbarNode = null;
         if(toolbarButtons) {
-            toolbarNode = $('<div class="grid-toolbar"></div>');
+            toolbarNode = $('<div class="btn-group"></div>');
             if(titleNode) {
                 titleNode.after(toolbarNode);
             }
@@ -407,16 +407,13 @@ kimchi.widget.Grid.prototype = (function() {
             }
 
             $.each(toolbarButtons, function(i, button) {
+
                 var btnHTML = [
-                    '<button',
+                    '<li><a data-toggle="modal"',
                         button['id'] ? (' id="' + button['id'] + '"') : '',
-                        ' class="grid-toolbar-button',
-                            button['class'] ? (' ' + button['class']) : '',
-                            '"',
-                            button['disabled'] === true ? ' disabled' : '',
-                            '>',
+                        ' class="', button['class'] ? (' ' + button['class']) : '', button['disabled'] === true ? ' disabled' : '','">',
                             button['label'],
-                    '</button>'
+                    '</a></li>'
                 ].join('');
                 var btnNode = $(btnHTML).appendTo(toolbarNode);
                 button['onClick'] &&
diff --git a/plugins/kimchi/ui/js/src/kimchi.host.js b/plugins/kimchi/ui/js/src/kimchi.host.js
index ab02333..0ef7ba8 100644
--- a/plugins/kimchi/ui/js/src/kimchi.host.js
+++ b/plugins/kimchi/ui/js/src/kimchi.host.js
@@ -497,10 +497,12 @@ kimchi.host_main = function() {
         });
 
         $('#host-button-shutdown').on('click', function(event) {
+            event.preventDefault();
             shutdownHost(null);
         });
 
         $('#host-button-restart').on('click', function(event) {
+            event.preventDefault();
             shutdownHost({
                 reboot: true
             });
diff --git a/plugins/kimchi/ui/pages/guests.html.tmpl b/plugins/kimchi/ui/pages/guests.html.tmpl
index b8a1259..75a8f66 100644
--- a/plugins/kimchi/ui/pages/guests.html.tmpl
+++ b/plugins/kimchi/ui/pages/guests.html.tmpl
@@ -35,8 +35,10 @@
 <body>
 <div id="guests-root-container">
     <div class="toolbar">
-        <div class="tools" style="display:none">
-            <a id="vm-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
+        <div class="container">
+            <div class="tools pull-right" style="display:none">
+                <a iid="vm-add" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Create a Guest</span></a>
+            </div>
         </div>
     </div>
     <div id="guestListField" style="display: none">
diff --git a/plugins/kimchi/ui/pages/host.html.tmpl b/plugins/kimchi/ui/pages/host.html.tmpl
index d87debc..c639478 100644
--- a/plugins/kimchi/ui/pages/host.html.tmpl
+++ b/plugins/kimchi/ui/pages/host.html.tmpl
@@ -31,7 +31,12 @@
 <body>
 <div id="host-root-container">
     <div class="toolbar">
-        <div class="tools">
+        <div class="container">
+            <div class="tools pull-right">
+                <a id="host-button-restart" href="javascript:void(0);"><i class="fa fa-refresh"></i><span>$_("Restart")</span></a>
+                <a id="host-button-shutdown" href="javascript:void(0);"><i class="fa fa-ban"></i><span>$_("Shut down")</span></a>
+                <!-- <a href="javascript:void(0);"><i class="fa fa-desktop"></i><span>$_("Connect")</span></a> -->
+            </div>
         </div>
     </div>
     <div id="host-content-container" class="empty-when-logged-off"></div>
@@ -39,25 +44,8 @@
 
 <script id="host-tmpl" type="kimchi/template">
     <div class="host-panel">
-        <div class="logo-container">
-            <div class="logo" style="background-image: url({logo});"></div>
-        </div>
         <div id="host-info-container" class="info-container">
             <h2 class="hostname">{hostname}</h2>
-            <div class="action-panel">
-                <button id="host-button-shutdown" class="btn-normal-1 stop">
-                    <div class="button-icon action-icon-stop"></div>
-                    $_("Shut down")
-                </button>
-                <button id="host-button-restart" class="btn-normal-1 restart">
-                    <div class="button-icon action-icon-restart"></div>
-                    $_("Restart")
-                </button>
-                <button class="btn-normal-1 connect" disabled="disabled">
-                    <div class="button-icon action-icon-connect"></div>
-                    $_("Connect")
-                </button>
-            </div>
             <div class="host-section">
                 <h3 class="section-header"
                     aria-expanded="false"
@@ -123,7 +111,7 @@
                     </div>
                 </div>
             </div>
-            <div id="software-update-section" class="host-section hidden">
+            <div id="software-update-section" class="host-section">
                 <h3 class="section-header"
                     aria-controls="content-software-update">
                     $_("Software Updates")
@@ -140,7 +128,7 @@
                     </div>
                 </div>
             </div>
-            <div id="repositories-section" class="host-section hidden">
+            <div id="repositories-section" class="host-section">
                 <h3 class="section-header"
                     aria-controls="content-repositories">
                     $_("Repositories")
@@ -153,7 +141,7 @@
                     </div>
                 </div>
             </div>
-            <div id="debug-report-section" class="host-section hidden">
+            <div id="debug-report-section" class="host-section">
                 <h3 class="section-header"
                     aria-controls="content-sys-reports">
                     $_("Debug Reports")
@@ -169,7 +157,8 @@
         </div>
     </div>
 </script>
-
+<div id="modalWindow" class="modal fade host-modal" tabindex="-1" role="dialog" aria-labelledby="hostsModalLabel" aria-hidden="true">
+</div>
 <script type="text/javascript">
     kimchi.host_main();
 </script>
diff --git a/plugins/kimchi/ui/pages/network.html.tmpl b/plugins/kimchi/ui/pages/network.html.tmpl
index 915feac..59e1552 100644
--- a/plugins/kimchi/ui/pages/network.html.tmpl
+++ b/plugins/kimchi/ui/pages/network.html.tmpl
@@ -29,78 +29,81 @@
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
-<div class="toolbar">
-    <div class="tools" style="display:none">
-        <a id="networkAdd" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
-    </div>
-</div>
-<div id="network-content" class="network">
-    <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
-    <div id="networkGrid" class="list">
-        <div>
-        <span class="column-name">$_("Network Name")</span><!--
-     --><span class="column-state">$_("State")</span><!--
-     --><span class="column-type">$_("Network Type")</span><!--
-     --><span class="column-interface">$_("Interface")</span><!--
-     --><span class="column-space">$_("Address Space")</span><!--
-     --><span style="display:none">$_("Actions")</span>
+<div id="network-root-container">
+    <div class="toolbar">
+        <div class="container">
+            <div class="tools pull-right" style="display:none">
+                <a id="networkAdd" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Network</span></a>
+            </div>
         </div>
-        <div id="networkBody" class="empty-when-logged-off"></div>
     </div>
-    <div id="networkConfig" class="network-config">
-        <div class="section-container">
-            <div class="section-header">1. $_("Network Name")</div>
-            <div class="section-content">
-                <input type="text" id="networkName" />
-                <div class="input-hint">
-                    <span class="icon-info-circled light-grey c1 help-inline"></span>
-                    <span class="input-hint-text help-inline">$_("Name should not contain '/' and '\"'.")</span>
-                </div>
+    <div id="network-content" class="network">
+        <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
+        <div id="networkGrid" class="list">
+            <div>
+                <span class="column-name">$_("Network Name")</span><!--
+             --><span class="column-state">$_("State")</span><!--
+             --><span class="column-type">$_("Network Type")</span><!--
+             --><span class="column-interface">$_("Interface")</span><!--
+             --><span class="column-space">$_("Address Space")</span><!--
+             --><span style="display:none">$_("Actions")</span>
             </div>
+            <div id="networkBody" class="empty-when-logged-off"></div>
         </div>
-        <div class="section-container">
-            <div class="section-header">2. $_("Network Type")</div>
-            <div class="section-content">
-                <div class="input-container">
-                    <input type="radio" id="networkTypeIso" name="networkType" value="isolated" />
-                    <label for="networkTypeIso">$_("Isolated: no external network connection")</label>
-                </div>
-                <div class="input-container">
-                    <input type="radio" id="networkTypeNat" name="networkType" value="nat" />
-                    <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
+        <div id="networkConfig" class="network-config">
+            <div class="section-container">
+                <div class="section-header">1. $_("Network Name")</div>
+                <div class="section-content">
+                    <input type="text" id="networkName" />
+                    <div class="input-hint">
+                        <span class="icon-info-circled light-grey c1 help-inline"></span>
+                        <span class="input-hint-text help-inline">$_("Name should not contain '/' and '\"'.")</span>
+                    </div>
                 </div>
-                <div class="input-container">
-                    <div class="bridged-inline">
-                        <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
+            </div>
+            <div class="section-container">
+                <div class="section-header">2. $_("Network Type")</div>
+                <div class="section-content">
+                    <div class="input-container">
+                        <input type="radio" id="networkTypeIso" name="networkType" value="isolated" />
+                        <label for="networkTypeIso">$_("Isolated: no external network connection")</label>
                     </div>
-                    <div class="bridged-inline">
-                        <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br />
-                        <label id="networkBriDisabledLabel" style="display:none">$_("(No interfaces found)")</label>
+                    <div class="input-container">
+                        <input type="radio" id="networkTypeNat" name="networkType" value="nat" />
+                        <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
                     </div>
-                </div>
-                <div id="bridgeOptions">
-                    <div>
-                        <div class="bridge-option-column">
-                            <label for="networkInterface">$_("Destination"): </label>
+                    <div class="input-container">
+                        <div class="bridged-inline">
+                            <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
+                        </div>
+                        <div class="bridged-inline">
+                            <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br />
+                            <label id="networkBriDisabledLabel" style="display:none">$_("(No interfaces found)")</label>
                         </div>
-                        <div class="bridge-option-column">
-                            <div class="network-type-wrapper-controls">
-                                <div id ="networkDestinationID">
-                                    <input id="networkDestinationInputId" name="type" type="hidden"/>
-                                    <span id="networkDestinationLabel" type="text"></span><span class="arrow"></span>
-                                    <div>
-                                        <ul id="networkInterface"></ul>
+                    </div>
+                    <div id="bridgeOptions">
+                        <div>
+                            <div class="bridge-option-column">
+                                <label for="networkInterface">$_("Destination"): </label>
+                            </div>
+                            <div class="bridge-option-column">
+                                <div class="network-type-wrapper-controls">
+                                    <div id ="networkDestinationID">
+                                        <input id="networkDestinationInputId" name="type" type="hidden"/>
+                                        <span id="networkDestinationLabel" type="text"></span><span class="arrow"></span>
+                                        <div>
+                                            <ul id="networkInterface"></ul>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div>
-                        <input id="enableVlan" type="checkbox" value="" />
-                        <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
-                    </div>
-                        <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
-                        <input type="text" id="networkVlanID" class="network-label"/>
+                        <div>
+                            <input id="enableVlan" type="checkbox" value="" />
+                            <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
+                        </div>
+                            <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
+                            <input type="text" id="networkVlanID" class="network-label"/>
                     </div>
                 </div>
             </div>
diff --git a/plugins/kimchi/ui/pages/report-add.html.tmpl b/plugins/kimchi/ui/pages/report-add.html.tmpl
index 25bf0a9..a1085ed 100644
--- a/plugins/kimchi/ui/pages/report-add.html.tmpl
+++ b/plugins/kimchi/ui/pages/report-add.html.tmpl
@@ -22,35 +22,25 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <!DOCTYPE html>
-<div id="report-add-window" class="window">
-    <header>
-        <h1 class="title h1 grey">$_("Generate a New Debug Report")</h1>
-    </header>
-    <div class="content">
-        <form id="form-report-add">
-            <section class="form-section">
-                <h2>
-                    <label for="report-name-textbox">$_("Report Name")</label>
-                </h2>
-                <div class="field">
-                    <input type="text" class="text" id="report-name-textbox" name="name" />
-                    <span class="icon-info-circled light-grey c1"></span>
-                    <span class="info-add-debug-report">
-                        $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").")
-                    </span>
-                </div>
-            </section>
-        </form>
-    </div>
-    <footer>
-        <div class="btn-group">
-            <button id="button-report-add" class="btn-normal"><span class="text">$_("Generate")</span></button>
-            <button id="button-report-cancel" class="btn-normal close" type="button">
-                <span calss="text">$_("Cancel")</span>
-            </button>
+<div class="modal-content">
+  <div class="modal-header">
+    <h4 class="modal-title">$_("Generate a New Debug Report")</h4>
+  </div>
+  <div class="modal-body">
+    <form id="form-report-add">
+        <label for="report-name-textbox">$_("Report Name")</label>
+        <div class="form-group">
+            <input type="text" class="form-control" id="report-name-textbox" name="name" />
+            <p class="help-block"><i class="fa fa-info-circle"></i> $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").")
+            </p>
         </div>
-    </footer>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" id="button-report-add" class="btn btn-default">$_("Generate")</button>
+    <button type="button" id="button-report-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+  </div>
 </div>
 <script>
     kimchi.report_add_main();
-</script>
+</script>
\ No newline at end of file
diff --git a/plugins/kimchi/ui/pages/storage.html.tmpl b/plugins/kimchi/ui/pages/storage.html.tmpl
index 7b51a8b..4a68d1d 100644
--- a/plugins/kimchi/ui/pages/storage.html.tmpl
+++ b/plugins/kimchi/ui/pages/storage.html.tmpl
@@ -28,32 +28,36 @@
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
-<div class="toolbar">
-    <div class="tools" style="display:none">
-        <a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
+<div id="storage-root-container">
+    <div class="toolbar">
+        <div class="container">
+            <div class="tools pull-right" style="display:none">
+                <a id="storage-pool-add" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add Storage</span></a>
+            </div>
+        </div>
     </div>
-</div>
-<div class='storage'>
-<div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
-<div id='storageGrid'>
-    <div>
-        <span class="storage-name">$_("Name")</span>
-        <span class="storage-state" >$_("State")</span>
-        <span class="storage-type">$_("Type")</span>
-        <span class="storage-capacity">$_("Capacity")</span>
-        <span class="storage-allocate">$_("Allocated")</span>
-        <span class="storage-location">$_("Location")</span>
+    <div class='storage'>
+    <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
+    <div id='storageGrid'>
+        <div>
+            <span class="storage-name">$_("Name")</span>
+            <span class="storage-state" >$_("State")</span>
+            <span class="storage-type">$_("Type")</span>
+            <span class="storage-capacity">$_("Capacity")</span>
+            <span class="storage-allocate">$_("Allocated")</span>
+            <span class="storage-location">$_("Location")</span>
+        </div>
+        <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
+    </div>
+    </div>
+    <div id="logicalPoolExtend" title="$_("Device path")">
+         <p id="loading-info" class="text-help">
+             <img src = "plugins/kimchi/images/theme-default/loading.gif" />
+             $_("Looking for available partitions ...")
+         </p>
+         <div class="host-partition">
+         </div>
     </div>
-    <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
-</div>
-</div>
-<div id="logicalPoolExtend" title="$_("Device path")">
-     <p id="loading-info" class="text-help">
-         <img src = "plugins/kimchi/images/theme-default/loading.gif" />
-         $_("Looking for available partitions ...")
-     </p>
-     <div class="host-partition">
-     </div>
 </div>
 <script id="storageTmpl" type="html/text">
         <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}">
diff --git a/plugins/kimchi/ui/pages/templates.html.tmpl b/plugins/kimchi/ui/pages/templates.html.tmpl
index af1cf3f..4504669 100644
--- a/plugins/kimchi/ui/pages/templates.html.tmpl
+++ b/plugins/kimchi/ui/pages/templates.html.tmpl
@@ -28,47 +28,51 @@
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
-<div class="toolbar">
-    <div class="tools" style="display:none">
-        <a id="template-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
-    </div>
-</div>
-<div>
-    <div id="noTemplates" class="list-no-result" style="display: none;">
-        $_("No templates found.")
+<div id="templates-root-container">
+    <div class="toolbar">
+        <div class="container">
+            <div class="tools pull-right" style="display:none">
+                <a id="template-add" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Template</span></a>
+            </div>
+        </div>
     </div>
+    <div>
+        <div id="noTemplates" class="list-no-result" style="display: none;">
+            $_("No templates found.")
+        </div>
 
-    <ul id="templateList" class="empty-when-logged-off"></ul>
+        <ul id="templateList" class="empty-when-logged-off"></ul>
 
-    <script id="templateTmpl" type="html/text">
+        <script id="templateTmpl" type="html/text">
 
-        <div class="template-box white-box template-border">
-            <div class="btn dropdown popable" style="width: 70px">
-                <span class="text">$_("Actions")</span><span class="arrow"></span>
-                <div class="popover actionsheet right-side" style="width: 250px">
-                    <a class="button-big template-edit" data-template='{name}'>$_("Edit")</a>
-                    <a class="button-big template-clone" data-template='{name}'>$_("Clone")</a>
-                    <a class="button-big red template-delete" data-template='{name}'>$_("Delete")</a>
+            <div class="template-box white-box template-border">
+                <div class="btn dropdown popable" style="width: 70px">
+                    <span class="text">$_("Actions")</span><span class="arrow"></span>
+                    <div class="popover actionsheet right-side" style="width: 250px">
+                        <a class="button-big template-edit" data-template='{name}'>$_("Edit")</a>
+                        <a class="button-big template-clone" data-template='{name}'>$_("Clone")</a>
+                        <a class="button-big red template-delete" data-template='{name}'>$_("Delete")</a>
+                    </div>
                 </div>
-            </div>
 
-            <div class="template-icon template-icon-position">
-                <img alt="" src="{icon}">
-                <img alt="" src="{location}" class="template-type-icon-position">
-            </div>
-            <div class="template-general template-title template-title-position">
-                <h2 class="title" title="{name}">{name}</h2>
-            </div>
-            <div class="template-os-position">
-                <div class="template-text">$_("OS"): {os_distro}</div>
-                <div class="template-text">$_("Version"): {os_version}</div>
-            </div>
-            <div class="template-cpu-position">
-                <div class="template-text">$_("CPUs"): {cpus}</div>
-                <div class="template-text">$_("Memory"): {memory}M</div>
+                <div class="template-icon template-icon-position">
+                    <img alt="" src="{icon}">
+                    <img alt="" src="{location}" class="template-type-icon-position">
+                </div>
+                <div class="template-general template-title template-title-position">
+                    <h2 class="title" title="{name}">{name}</h2>
+                </div>
+                <div class="template-os-position">
+                    <div class="template-text">$_("OS"): {os_distro}</div>
+                    <div class="template-text">$_("Version"): {os_version}</div>
+                </div>
+                <div class="template-cpu-position">
+                    <div class="template-text">$_("CPUs"): {cpus}</div>
+                    <div class="template-text">$_("Memory"): {memory}M</div>
+                </div>
             </div>
-        </div>
-    </script>
+        </script>
+    </div>
 </div>
 <script>
     kimchi.template_main();
-- 
1.9.3




More information about the Kimchi-devel mailing list