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

Samuel Henrique De Oliveira Guimaraes samuel.guimaraes at eldorado.org.br
Thu Sep 10 20:08:37 UTC 2015


I've prefixed all kimchi .btn classes with .kimchi in this file so the styles won't override Wok buttons that use Bootstrap classes (.btn and .btn-primary) since theme-default.min.css is loaded within Kimchi pages. Once all buttons are updated with Wok / Bootstrap styles and respective classes, this file will be deleted and I'll keep only the essential modules, moving back some SCSS files to kimchi (right now I've imported hosts.css and grid.css to Wok and removed these files from css/theme-default folder).
This was just a temporary fix to make sure that old pages still inherit old styles and maintain functionality.

Samuel

-----Original Message-----
From: kimchi-devel-bounces at ovirt.org [mailto:kimchi-devel-bounces at ovirt.org] On Behalf Of Aline Manera
Sent: quinta-feira, 10 de setembro de 2015 16:39
To: sguimaraes943 at gmail.com; Kimchi Devel <kimchi-devel at ovirt.org>
Subject: Re: [Kimchi-devel] [PATCH 4/5] [WOK] Updating Kimchi plugin with new-ui



On 25/08/2015 17:06, sguimaraes943 at gmail.com wrote:
> 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 +++++++--------

This CSS file is applied for all the buttons in the application, right? 
If so it should be into wok instead of kimchi...

All the widgets and style related should be on wok and only reuse in the plugins.

So unless, Kimchi wants to change the default button style this file button.css should not exist on kimchi.

Thinking on that direction the CSS should be changed to add 'wok' as CSS class prefix and moved to wok UI directory.

>   plugins/kimchi/ui/images/logo.ico              | Bin 1214 -> 15086 bytes

>   plugins/kimchi/ui/js/src/kimchi.grid.js        |  13 +--

Same I commented above.
It is related to the grid widget, so should be on wok.

>   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..cb3a3dc2f9c9ce0e5d3e14f0adab
> 89c28c729ce0 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();

_______________________________________________
Kimchi-devel mailing list
Kimchi-devel at ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel



More information about the Kimchi-devel mailing list