From samuel.guimaraes at eldorado.org.br Thu Sep 10 16:08:54 2015
Content-Type: multipart/mixed; boundary="===============1832875595953346965=="
MIME-Version: 1.0
From: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at
 eldorado.org.br>
To: kimchi-devel at ovirt.org
Subject: Re: [Kimchi-devel] [PATCH 4/5] [WOK] Updating Kimchi plugin
 with	new-ui
Date: Thu, 10 Sep 2015 20:08:37 +0000
Message-ID: <c1a168cc903345c6a740067613ad18d5@serv030.corp.eldorado.org.br>
In-Reply-To: 55F1DC4C.4030002@linux.vnet.ibm.com

--===============1832875595953346965==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable

I've prefixed all kimchi .btn classes with .kimchi in this file so the styl=
es won't override Wok buttons that use Bootstrap classes (.btn and .btn-pri=
mary) since theme-default.min.css is loaded within Kimchi pages. Once all b=
uttons 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(a)ovirt.org [mailto:kimchi-devel-bounces(a)ovirt=
.org] On Behalf Of Aline Manera
Sent: quinta-feira, 10 de setembro de 2015 16:39
To: sguimaraes943(a)gmail.com; Kimchi Devel <kimchi-devel(a)ovirt.org>
Subject: Re: [Kimchi-devel] [PATCH 4/5] [WOK] Updating Kimchi plugin with n=
ew-ui



On 25/08/2015 17:06, sguimaraes943(a)gmail.com wrote:
> From: samhenri <samuel.guimaraes(a)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(a)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 pl=
ugins.

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 cl=
ass 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=3D"user" mode=3D"none"/>
>
>           <title>Host</title>
> +        <css>host</css>
>           <path>plugins/kimchi/host.html</path>
>       </tab>
>       <tab>
> @@ -12,6 +13,7 @@
>           <access role=3D"user" mode=3D"byInstance"/>
>
>           <title>Guests</title>
> +        <css>guests</css>
>           <path>plugins/kimchi/guests.html</path>
>       </tab>
>       <tab>
> @@ -19,6 +21,7 @@
>           <access role=3D"user" mode=3D"none"/>
>
>           <title>Templates</title>
> +        <css>templates</css>
>           <path>plugins/kimchi/templates.html</path>
>       </tab>
>       <tab>
> @@ -26,13 +29,15 @@
>           <access role=3D"user" mode=3D"read-only"/>
>
>           <title>Storage</title>
> +        <css>storage</css>
>           <path>plugins/kimchi/storage.html</path>
>       </tab>
>       <tab>
>           <access role=3D"admin" mode=3D"admin"/>
>           <access role=3D"user" mode=3D"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 wh=
ite
>                   inset, -3px -3px 3px rgba(0, 0, 0, .25) inset;
>       background: #d5d5d5;
> @@ -69,7 +69,7 @@
>               endColorstr=3D'#eeeeee', GradientType=3D0);
>   }
>
> -.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=3D'#ffffff', GradientType=3D0);
>   }
>
> -.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=3D'#999999', GradientType=3D0);
>   }
>
> -.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=3DsvWSWsTC~_2chuI}=3D`vNP&eNGrXa2F%
> zTD!XM3sgaiS_KzeKtMKuge5EqBtS^WzJBxFX!wDmg(a)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}=3DrD4zWbRBUWl!ox_X(a)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=3D^jYd9`U_tTWKZRFlrW}rm9d!8
> zQa1}mS*fRuw8+iU2LI|Wo=3DB3P+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#=3DxzT<V|?g%TI1?_#~@CwHPyUv&&a&Zec7p=3DOY9S_a(n+wbjH;E
> zKKEXDSQ$>oRWA^^y6*xjP2%Jl(;};033r;MKl6hcS6=3DX|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(a)v6MvEml0&+s+!lz~Qm)
> zhBY_xXNsY4R^#<|y+jTPcIq$ZIBKLz*?QPK(`fi;nf}!KuPL9l+Vq!KL+fT&&27C=3D
> zvY`1dnPkc6Bsz>;z|{G(a)9;8WGm#Bz;dvW)~{x-eS7fGH?>AaR_Z_jTW+dKbZaR3?(
> z8fY}Z-)Xewn;37U(Yi3NL`S3Tc(a)T0Hn2&j_7$_b27#dB7aVn2mXY4RUV4&6~%a2-k
> z{-6KIvM<Jw<vRz}$Ajq#(K%vN`*mV`X94ka=3DPklAeh0E6dEeNQqJ0Z-ExkatA38(a)0
> z_a&3nU-em!2C{otp7<wXoFtb>Y|kflNsEZf@=3DD@{f=3D^^C8;HNCn~7+(h_I}GR(rB#
> zZy+f?ASPu;fs`KuQhcxr^VUSyefP8ZXtjBmY`Z`_f$RQuY_nQkL4dNJ08J|ax=3DsQN
> z-2(a)nwgu<X8_G=3D}CowW>X_Zw8bQR<Trr9A~ChUl)N;<(m>kyf3-%J!?cUlkGp+^;|*
> zBtYNE0;9qm>-Izp?*AJko;kX9pO>g|$+rFeh(a)qA2MhyB)h%skDqW%obm1P`%ReTC(
> z#^8UrXW7Y0iF#Edwz-39vnv?nK5|W)|C#O(a)-#^MLeg2@}`R><>1NhoDzmH8h6GwT}
> z9UDc~eV0bI?yrhcp3uh|vtT})ho$-p;@1>sJqKSqjfQ=3D1+gV6_*i}Y!E9#jBRg)`U
> z-ONr^w}kh!qqAW8D77%qzPp<JmbA##i7KBg`N9Uz15=3D~h53P^uJ|UTB{1MVjm&|GE
> zoMl6)pVAfQ5o6nL5FyeMR+6m3#j&%{#j;-aFQ(a)ai%lOXQtUl|e_x0^IF_J?YXDKrc
> zsiuptM3eJ=3Df4j$>j;{ZHVuIwzjk)@>Fi&@O!%*rg=3DQ`T9tn+=3Dj`OV;fyKnhM{Irqj
> zow@$y=3DZ8`Tr5oFN(a)S}KDhAL6}L&RWhd0a<k`wGv0$k&JRS~o{3i{JLCKL4ik?=3D#Y;
> zxE)P(a)VZe9ru(G3C_NGO59L|YRoqUGUalfb?>v>r>ft{lr(a)Vt1JYezP6Srv+vz93Ey
> zfa<sXuNS}L=3DbP~XG2}Ibs*kMMl|nXr8&AcFA2eQWS9B*ig@(e=3DTlzo6-qQE!&wTEb
> zplYsDZO2MB$kzlw#Tu8&%j(a)WFl<lwikwrUf$h)7}#oqgPwBu3jc;~a4Gj4Z`5Xd(}
> z+&!atc7<`XwcPXEiO=3D5PPPu^RCFoqmftGbXrn0pztF6z6E1gcNorxc{LeDZIgbM)X
> z)texdZ#uB(uEFv?uW~2PzQdiSY2ms+`)Ur<t>=3Di#*1P}ew)e;DbV^Mp&TH#ArACOs
> z`d`KRU+0-VvFhPjb4NMX9>iRCkgoOx!3IA`<wo{M)<2bbUd!{x_9qI=3Du#|67Ew3_K
> z#>I8+OE!hvS9Vu&9iW5j30+u!{d!Jg`9(a)F6nr6i~9O-mglgP@`slsbaFsI%ODP(a)K;
> z%Zl|qYt}99)H!8b`%VeAU%b-GRI}FYZw0(a)bX8Wo8y(d2NF0{;@Ut2$8pK=3Do8tmcAi
> zG4_1}zI(o(a)YR(<Kckl9Yxi3CZ%%#URaEVU^D_E;4RykSDu}A$X!uR-;PVcQdlsF?(
> zJ&BQ}`JR=3DpH*;#t5M5)cNUk&vYCpakE*g6!L~!U_0DsO<>ZEiTUw2Pn>`}~NWT?+N
> z=3DjpmUN{!V4)uzuPN{!U9bWp!LK`m~DK`m|Pe0W3NJFx!ojC~4E#t-TU=3Dc_tjw*tcy
> z-+cXmYu>}a-12XlT@=3Dt_`q7)0f7qk!k!Smdl`)+BJm30-g(a)Mh+8~y_0c(a)FRW9n4#O
> z(a)CVUbp2slYIX8gbG!DP9V#6Ip?~+X6!dRB(a)si9&y(a)52kd86fB`4HiOvK!fa(a)PxZEw
> z-W9~xE`^plv3&0cx?~f6hdG2y6Isr=3DE-&A+37^*fQUtyI(`dU+<t$bgEb^1;(;_-Q
> z`qO&NkoJ%)@2cNk(a)vAE;4Q_#|uvWMm-eSBI#1|d*Dc!S&Q}psHlRKWALGRubPge>e
> z=3D^dG2^tN3Qbn*TeJh>$~s11u;46r851Ru;d!Uu~r<?k#~Od4t*oa0o#QyAE2u8kCf
> zAg&#165Aj(a)t^v-G)jMJNDVumZB|XkwnVV>@f|>SeNODlY0zwDN*d|y%9pJ-x0H1Kp
> z(a)P{|FH#aX<4EgKpq*wXmEB<v?E2j%VkR$=3D&qE2W?l|X({eL?2*N(+}U!(L&R?4bW{
> zzN1l^;%tO8FC(_w2%D1(@ZqaE^S0MDbswZD=3DMA;(R{b;Vdp?(f`FAR33ZY(a)K1j-i)
> z;nGb0w|fJNd%kUw?A2ptJE;Taxu`ZT(a)l}8OMwsdtH(a)f@Vl?k%7>yo>i*DvfG(z(T2
> zw^g1EsbbtsYW_z}O55$i1x;U_pUJbcKI<=3D&rZ?Ek4Q{iI<unbe&i>^V&1$l(Tp)V7
> zU|wTSyZh_>C#Iq2rvMn!2u2$L7-(a)p7M%u=3D$=3D5XUy0CP{!ZiTHffaXSkYu5m-P+>d9
> zseti6bpcE;gPCr|GJCA(+Hmt|S~%EJVcS;NE(f^TQz=3Djz0#c;3Gz>jF#fa_vSm=3DL$
> z|Is}_o_K#0dF~Hm$WtE-Y5(}YZZygNW)$*4VaQ8-jhsLZax<S}+J~&(HKOa%K<#YJ
> zA#B9C#B<17d34?;Vvs*d>MA8jSvlb(a)s~{$#FQCs^VxTg}raiMs(S8xxc^E955+z0Z
> z1n6s6LJA)3Zy2b&!RCoC5zdHxD{>$=3DkZ)`2Dz<P?y6$R1h5T0=3Da#2O924a`0iHOB8
> zexP!Z19=3D{?<|7YxAG_lCeNL<c)1rM+eE!-%cEin+<PqVByAp8&`b?m^3c0g70+6o*
> zP1}7gN#BKhmJEX&IW#$O2>B&e|9Y|C-N=3Dr^?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(a)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(a)+#kQRinRL*BOAEsQ+$N6Q}2UAiDP3m&n?0k0A$apyqG1
> zE(79BS&#(hV1fBOEHNNAsXY7F;o`R1BTxMla<*B>Q-ezIV7zxyK0`OqN;r+$wt)32
> zL6C#&ZqWFS8zE12+z1(a)obvJO5vOX|O+ZOmg>So`X?rN_jYk8C;YrcLS*P1lsb&n&L
> zER9oVz${}nq`(D8Ghc>f+Vh2}($jr-q~7*Jjd$E60y=3DIHccdkRNnXtaMIB48;JX$o
> zYCQ(@ZCcA$w*-%pS9ndA-f{h~^EUHmW11B19Ua|vU~Ww35kZ1F6Bd|qAPo?|?t)}#
> zceaPMoRN@{s{|e2MVhpTwMka)nk=3Dhuoif;Rk;k2ep=3DS*Bx5G9pnjt;bovh7*CFY;t
> zHT?zk5=3DHi}<|q1>|G3kU!o6c+MF;jI$xcCv=3D{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$=3DNuetB2la{uw%2FK4b)2Gfol|FgM
> z9LU4^D_Xe!^BDPYh*h2Z_+dJO%`fHBUu@(OTcj)4waRrNrtY_+LHIio?r!!|=3D5BI5
> za`sKfIf$KgGX158&db5pW!1xbBU_^+2Zea|qK{w7<C5-4^bb7covVA&s{1He$erd|
> z#dXR--q(a)sG=3D?~rMA<(iZ1gbU%))l|wo09(?r^jFQsB(t-jO2awF)8?Ndn8=3D6j7_J#
> z%2BK=3DO{`m<?kM}F{<`0F{lSo{x~SNzx`%!<;Qa`<3a-PgrWLNxjs6bR>Og2*%Z7q<
> zqCS5k>#?l~WXWg0A<O=3D;fvnouvo1SlsN<MFYTMik48W;0K?w5nQFxal?v7zV?)5Tv
> z(ksZBU#>%cMf*xGP$G8e+5jkD!&2m~o|Zb){v3)vS-fL3S+b*N&N5D^e}g=3D0HZxZT
> z9*Et)0f4MCLsFFqkZaDHU23rKRMtAOS3GZveD~jw?}lddcXX`uhA#B?pw9(L*SZ|J
> zy4vn%`=3D{0RaY)8VHH&dtBV=3D9EgBM~BLjOn{`Y0CEnqV>C)ch*nWZ%19?0cVU+{q#w
> zJJ8B?wcu}E>kIsJwzf3gZNT@{+kT|u*#Dl+S(<j2>w4fI{xHO!g!ohIOpwMm(a)lvad
> zQ+wBm*tg@@hZ?Sv#oyDpk^`c2U#QvO-B!B6{b%1Iy=3D@;y9DNj%owGHSZiwFx(a)smg{
> zB_sYc#Qz4*^y9)i`krq*^btOd*soAyr;h84{vr?PTIB<6=3D&P*V=3D+j=3DYk=3D<uKdmMQC
> zm+6$Lo{0Tl;*R4d2=3DT`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(a)lvX*A)u*|zS6rq9_WpF7$1
> z7Wd^H)c9${{+A<u8IFI!8V{&g=3DlbWHo7p}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%=3DmMfE)k{knm*W=3DO>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(a)40A`1;K_O}~qx+ql0y&cjF=3DlpovhHCpLeZ<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=3DJ+><avwYD)rzkn39qr`c5p
> zGTHY=3D^gPG*Zn5$9Xnun2Cmhkfr}{FBUH!^+zlNG396v>Y&2Yu9UY+e-z2+0=3D`~k-%
> z`oLcZrngKR%zFr=3DH;+Sq{mf8%(avxu(dkI0(a)Uv)^&?nVXGGgsG?pgj!u5azN!oVh=3D
> z{Psmb&2Z6|-+qc+nSRWx{Ac%Ag6P5*F?<q67yCuhI|pnd)i!)SA(Y<wSM;x|qU|~$
> zk?4Rq9_=3DufBd%K%BpERd)cvX5HWz*PpWg})SnyYbh(a)dFA3GxE!H0S+!mri<@f3(M=3D
> zIP6Q;!k+KbaJpo5G`*`nj;{DDiY|>uoR0WjeoKWAy2t_VA|yr9r5Q1FnQo(a)N5*9Eu
> z(a)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(a)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(a)S6BYnj858SKghd49F3sxT4MMTwy?p&gp%bU(a)RB4ya!w
> zf#Nw$a50wmLq>RI&wG!ymxU$Rt4iiN7-7DH8G{KHGK`Swir*m|Gpr3Y!{&H^E%VXQ
> zz03(a)st}(&(6<X7KOBGv&gLNR=3DLms8$ayZpr-^P#8DpCaXGbPYGzXOD+ozU`HCsd{g
> z;c`6xYR2(a)6KAcvfgW7qngW;Qbj>h)+P6k-SG{9?~M&Je*VO^vFHYFP1-T69rf3XHW
> zSgMjD_8o68mOu1=3DAp>C>Y+j~U#guGLRc2mjt+^rr?~W{xKx1k<@Rx|;)?5Mn7+3xI
> zZoi+OPZR7Fqmvv}ezTpGzn|x-I`b+=3Db$3~iTChA^)v`RQo4-6(mb)UM>ytIJyF%6`
> zOD%I~u$YFbcf_l7%Gu!RuM6WFmHhc_z+a5>IHd)0XV(^=3DnNj8bOXVfAyT+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=3DWE4YtRY5ZO5Cz~InEfV!C(iT92`NjzVt$(M{v~)DYT|^d+
> zcb<?j5Lo5b`{}&i67?+Ue$t2xDbjYJrQgRP3rC5UsRUI0tq*Wn?o46YD)GV<P|s1`
> zq~sM7*itetY>N#g1=3DDEv<%IiEHfEdUxok|HMQX=3DrE&W3^gwhB41Bt?t?koQZl_DPK
>
> literal 1214
> zcma)*3rLeu6vyu=3DX_;nPV)$&PPF)r(wTQ|dTGOUtnOdf0mZ=3DcR#99xbub1{BqnD9^
> z^Z>PV6h)fUny6#CN{3di2P{*h2ek(a)Oq0a4o*=3DI}2Iv?krbAR`oKi_vQA0faVCr83o
> zF{!X2#Dx$Nz}$(sm^sgR<Jj30yCMGpMl1z837jm3H1$<DU4IV>Tbdw<FM-;Hi<#et
> z=3DI}n~iB^qh8{XzCNyvT<I;$&znmT~?eFXZgAE(a)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=3DT)>5^+BS=3DV54SJ|^z)5I7%kU;>-skiq*{
> z5B^=3DeF<T)pK9+)bV;9UCK>t-HOi+bkR-wK1xpfXL;S<?ho1pQ5gYzxiHR~=3De+XHS(
> zYe7QMZb3IjWV72H-JpD~6z(tbgwn1o$D2s!YteWNJS!i9l%iW?+34Lvr*KL(6{_X|
> zobEjAb{lD|4qsmYvGF;~r0Aunc#>=3Dc)0W4s|D{#(q9~vaX{rGms=3D((Wn*~LeWqIu}
> zkGvlzwaxjL25hey2bVweu<xK*t+(a)Oa_)UKTK^x4IwmKMOjm(a)oL`l)}_NGPy}tdb}w
> zHa>H`ji2N7m}Xsj#j7-`#=3DDv}`)h&)9th^&^dR%>WH_MB8KcIXVf8p&s1xD|_k)R-
> zrk$Z0-|Gf}&4Au$KhU$k?3YR5by~D9M&-q$=3DocNz4!IY&p7%OxuJf&+Ei-G(23hU;
> zHTLhMtjFR9ExVbPQVLzBFlROcIZ|#jmX6fm_hsVa3XP<aKAeAt8dqp&oBW=3DV^+d>Q
> zkcNnm%Ds?ggd^Rv2~9_o82cv;p6LSBD_g_s-n1uZ8#<EeLwTm~LE9J!Zdo(a)M&*jFU
> zoM+Z%F5)(8$8y`Wz~%Pd;Nlx(a)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 =3D (function() {
>           var toolbarButtons =3D this['opts']['toolbarButtons'];
>           var toolbarNode =3D null;
>           if(toolbarButtons) {
> -            toolbarNode =3D $('<div class=3D"grid-toolbar"></div>');
> +            toolbarNode =3D $('<div class=3D"btn-group"></div>');
>               if(titleNode) {
>                   titleNode.after(toolbarNode);
>               }
> @@ -407,16 +407,13 @@ kimchi.widget.Grid.prototype =3D (function() {
>               }
>
>               $.each(toolbarButtons, function(i, button) {
> +
>                   var btnHTML =3D [
> -                    '<button',
> +                    '<li><a data-toggle=3D"modal"',
>                           button['id'] ? (' id=3D"' + button['id'] + '"')=
 : '',
> -                        ' class=3D"grid-toolbar-button',
> -                            button['class'] ? (' ' + button['class']) : =
'',
> -                            '"',
> -                            button['disabled'] =3D=3D=3D true ? ' disabl=
ed' : '',
> -                            '>',
> +                        ' class=3D"', button['class'] ? (' ' + =

> + button['class']) : '', button['disabled'] =3D=3D=3D true ? ' disabled' =
: =

> + '','">',
>                               button['label'],
> -                    '</button>'
> +                    '</a></li>'
>                   ].join('');
>                   var btnNode =3D $(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 =3D 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=3D"guests-root-container">
>       <div class=3D"toolbar">
> -        <div class=3D"tools" style=3D"display:none">
> -            <a id=3D"vm-add" class=3D"btn-tool" href=3D"javascript:void(=
0);"><span class=3D"icon add">+</span></a>
> +        <div class=3D"container">
> +            <div class=3D"tools pull-right" style=3D"display:none">
> +                <a iid=3D"vm-add" href=3D"javascript:void(0);"><i class=
=3D"fa fa-plus-circle"></i><span>Create a Guest</span></a>
> +            </div>
>           </div>
>       </div>
>       <div id=3D"guestListField" style=3D"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=3D"host-root-container">
>       <div class=3D"toolbar">
> -        <div class=3D"tools">
> +        <div class=3D"container">
> +            <div class=3D"tools pull-right">
> +                <a id=3D"host-button-restart" href=3D"javascript:void(0)=
;"><i class=3D"fa fa-refresh"></i><span>$_("Restart")</span></a>
> +                <a id=3D"host-button-shutdown" href=3D"javascript:void(0=
);"><i class=3D"fa fa-ban"></i><span>$_("Shut down")</span></a>
> +                <!-- <a href=3D"javascript:void(0);"><i class=3D"fa fa-d=
esktop"></i><span>$_("Connect")</span></a> -->
> +            </div>
>           </div>
>       </div>
>       <div id=3D"host-content-container" =

> class=3D"empty-when-logged-off"></div>
> @@ -39,25 +44,8 @@
>
>   <script id=3D"host-tmpl" type=3D"kimchi/template">
>       <div class=3D"host-panel">
> -        <div class=3D"logo-container">
> -            <div class=3D"logo" style=3D"background-image: url({logo});"=
></div>
> -        </div>
>           <div id=3D"host-info-container" class=3D"info-container">
>               <h2 class=3D"hostname">{hostname}</h2>
> -            <div class=3D"action-panel">
> -                <button id=3D"host-button-shutdown" class=3D"btn-normal-=
1 stop">
> -                    <div class=3D"button-icon action-icon-stop"></div>
> -                    $_("Shut down")
> -                </button>
> -                <button id=3D"host-button-restart" class=3D"btn-normal-1=
 restart">
> -                    <div class=3D"button-icon action-icon-restart"></div>
> -                    $_("Restart")
> -                </button>
> -                <button class=3D"btn-normal-1 connect" disabled=3D"disab=
led">
> -                    <div class=3D"button-icon action-icon-connect"></div>
> -                    $_("Connect")
> -                </button>
> -            </div>
>               <div class=3D"host-section">
>                   <h3 class=3D"section-header"
>                       aria-expanded=3D"false"
> @@ -123,7 +111,7 @@
>                       </div>
>                   </div>
>               </div>
> -            <div id=3D"software-update-section" class=3D"host-section hi=
dden">
> +            <div id=3D"software-update-section" class=3D"host-section">
>                   <h3 class=3D"section-header"
>                       aria-controls=3D"content-software-update">
>                       $_("Software Updates") @@ -140,7 +128,7 @@
>                       </div>
>                   </div>
>               </div>
> -            <div id=3D"repositories-section" class=3D"host-section hidde=
n">
> +            <div id=3D"repositories-section" class=3D"host-section">
>                   <h3 class=3D"section-header"
>                       aria-controls=3D"content-repositories">
>                       $_("Repositories") @@ -153,7 +141,7 @@
>                       </div>
>                   </div>
>               </div>
> -            <div id=3D"debug-report-section" class=3D"host-section hidde=
n">
> +            <div id=3D"debug-report-section" class=3D"host-section">
>                   <h3 class=3D"section-header"
>                       aria-controls=3D"content-sys-reports">
>                       $_("Debug Reports") @@ -169,7 +157,8 @@
>           </div>
>       </div>
>   </script>
> -
> +<div id=3D"modalWindow" class=3D"modal fade host-modal" tabindex=3D"-1" =

> +role=3D"dialog" aria-labelledby=3D"hostsModalLabel" aria-hidden=3D"true"=
> =

> +</div>
>   <script type=3D"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=3D"plugins/kimchi/js/kimchi.min.js"></script>
>   </head>
>   <body>
> -<div class=3D"toolbar">
> -    <div class=3D"tools" style=3D"display:none">
> -        <a id=3D"networkAdd" class=3D"btn-tool" href=3D"javascript:void(=
0);"><span class=3D"icon add">+</span></a>
> -    </div>
> -</div>
> -<div id=3D"network-content" class=3D"network">
> -    <div class=3D"grid-control"><input type=3D"text" class=3D"filter" pl=
aceholder=3D"$_("Filter")"></div>
> -    <div id=3D"networkGrid" class=3D"list">
> -        <div>
> -        <span class=3D"column-name">$_("Network Name")</span><!--
> -     --><span class=3D"column-state">$_("State")</span><!--
> -     --><span class=3D"column-type">$_("Network Type")</span><!--
> -     --><span class=3D"column-interface">$_("Interface")</span><!--
> -     --><span class=3D"column-space">$_("Address Space")</span><!--
> -     --><span style=3D"display:none">$_("Actions")</span>
> +<div id=3D"network-root-container">
> +    <div class=3D"toolbar">
> +        <div class=3D"container">
> +            <div class=3D"tools pull-right" style=3D"display:none">
> +                <a id=3D"networkAdd" href=3D"javascript:void(0);"><i cla=
ss=3D"fa fa-plus-circle"></i><span>Add a Network</span></a>
> +            </div>
>           </div>
> -        <div id=3D"networkBody" class=3D"empty-when-logged-off"></div>
>       </div>
> -    <div id=3D"networkConfig" class=3D"network-config">
> -        <div class=3D"section-container">
> -            <div class=3D"section-header">1. $_("Network Name")</div>
> -            <div class=3D"section-content">
> -                <input type=3D"text" id=3D"networkName" />
> -                <div class=3D"input-hint">
> -                    <span class=3D"icon-info-circled light-grey c1 help-=
inline"></span>
> -                    <span class=3D"input-hint-text help-inline">$_("Name=
 should not contain '/' and '\"'.")</span>
> -                </div>
> +    <div id=3D"network-content" class=3D"network">
> +        <div class=3D"grid-control"><input type=3D"text" class=3D"filter=
" placeholder=3D"$_("Filter")"></div>
> +        <div id=3D"networkGrid" class=3D"list">
> +            <div>
> +                <span class=3D"column-name">$_("Network Name")</span><!--
> +             --><span class=3D"column-state">$_("State")</span><!--
> +             --><span class=3D"column-type">$_("Network Type")</span><!--
> +             --><span class=3D"column-interface">$_("Interface")</span><=
!--
> +             --><span class=3D"column-space">$_("Address Space")</span><=
!--
> +             --><span style=3D"display:none">$_("Actions")</span>
>               </div>
> +            <div id=3D"networkBody" =

> + class=3D"empty-when-logged-off"></div>
>           </div>
> -        <div class=3D"section-container">
> -            <div class=3D"section-header">2. $_("Network Type")</div>
> -            <div class=3D"section-content">
> -                <div class=3D"input-container">
> -                    <input type=3D"radio" id=3D"networkTypeIso" name=3D"=
networkType" value=3D"isolated" />
> -                    <label for=3D"networkTypeIso">$_("Isolated: no exter=
nal network connection")</label>
> -                </div>
> -                <div class=3D"input-container">
> -                    <input type=3D"radio" id=3D"networkTypeNat" name=3D"=
networkType" value=3D"nat" />
> -                    <label for=3D"networkTypeNat">$_("NAT: outbound phys=
ical network connection only")</label>
> +        <div id=3D"networkConfig" class=3D"network-config">
> +            <div class=3D"section-container">
> +                <div class=3D"section-header">1. $_("Network Name")</div>
> +                <div class=3D"section-content">
> +                    <input type=3D"text" id=3D"networkName" />
> +                    <div class=3D"input-hint">
> +                        <span class=3D"icon-info-circled light-grey c1 h=
elp-inline"></span>
> +                        <span class=3D"input-hint-text help-inline">$_("=
Name should not contain '/' and '\"'.")</span>
> +                    </div>
>                   </div>
> -                <div class=3D"input-container">
> -                    <div class=3D"bridged-inline">
> -                        <input type=3D"radio" id=3D"networkTypeBri" name=
=3D"networkType" value=3D"bridged" />
> +            </div>
> +            <div class=3D"section-container">
> +                <div class=3D"section-header">2. $_("Network Type")</div>
> +                <div class=3D"section-content">
> +                    <div class=3D"input-container">
> +                        <input type=3D"radio" id=3D"networkTypeIso" name=
=3D"networkType" value=3D"isolated" />
> +                        <label for=3D"networkTypeIso">$_("Isolated: no =

> + external network connection")</label>
>                       </div>
> -                    <div class=3D"bridged-inline">
> -                        <label for=3D"networkTypeBri">$_("Bridged: Virtu=
al machines are connected to physical network directly")</label><br />
> -                        <label id=3D"networkBriDisabledLabel" style=3D"d=
isplay:none">$_("(No interfaces found)")</label>
> +                    <div class=3D"input-container">
> +                        <input type=3D"radio" id=3D"networkTypeNat" name=
=3D"networkType" value=3D"nat" />
> +                        <label for=3D"networkTypeNat">$_("NAT: outbound =

> + physical network connection only")</label>
>                       </div>
> -                </div>
> -                <div id=3D"bridgeOptions">
> -                    <div>
> -                        <div class=3D"bridge-option-column">
> -                            <label for=3D"networkInterface">$_("Destinat=
ion"): </label>
> +                    <div class=3D"input-container">
> +                        <div class=3D"bridged-inline">
> +                            <input type=3D"radio" id=3D"networkTypeBri" =
name=3D"networkType" value=3D"bridged" />
> +                        </div>
> +                        <div class=3D"bridged-inline">
> +                            <label for=3D"networkTypeBri">$_("Bridged: V=
irtual machines are connected to physical network directly")</label><br />
> +                            <label id=3D"networkBriDisabledLabel" =

> + style=3D"display:none">$_("(No interfaces found)")</label>
>                           </div>
> -                        <div class=3D"bridge-option-column">
> -                            <div class=3D"network-type-wrapper-controls">
> -                                <div id =3D"networkDestinationID">
> -                                    <input id=3D"networkDestinationInput=
Id" name=3D"type" type=3D"hidden"/>
> -                                    <span id=3D"networkDestinationLabel"=
 type=3D"text"></span><span class=3D"arrow"></span>
> -                                    <div>
> -                                        <ul id=3D"networkInterface"></ul>
> +                    </div>
> +                    <div id=3D"bridgeOptions">
> +                        <div>
> +                            <div class=3D"bridge-option-column">
> +                                <label for=3D"networkInterface">$_("Dest=
ination"): </label>
> +                            </div>
> +                            <div class=3D"bridge-option-column">
> +                                <div class=3D"network-type-wrapper-contr=
ols">
> +                                    <div id =3D"networkDestinationID">
> +                                        <input id=3D"networkDestinationI=
nputId" name=3D"type" type=3D"hidden"/>
> +                                        <span id=3D"networkDestinationLa=
bel" type=3D"text"></span><span class=3D"arrow"></span>
> +                                        <div>
> +                                            <ul id=3D"networkInterface">=
</ul>
> +                                        </div>
>                                       </div>
>                                   </div>
>                               </div>
>                           </div>
> -                    </div>
> -                    <div>
> -                        <input id=3D"enableVlan" type=3D"checkbox" value=
=3D"" />
> -                        <label for=3D"enableVlan" id=3D"labelEnableVlan"=
>$_("Enable VLAN") </label>
> -                    </div>
> -                        <label for=3D"networkVlanID" id=3D"labelNetworkV=
lanID">$_("VLAN ID"): </label>
> -                        <input type=3D"text" id=3D"networkVlanID" class=
=3D"network-label"/>
> +                        <div>
> +                            <input id=3D"enableVlan" type=3D"checkbox" v=
alue=3D"" />
> +                            <label for=3D"enableVlan" id=3D"labelEnableV=
lan">$_("Enable VLAN") </label>
> +                        </div>
> +                            <label for=3D"networkVlanID" id=3D"labelNetw=
orkVlanID">$_("VLAN ID"): </label>
> +                            <input type=3D"text" id=3D"networkVlanID" =

> + class=3D"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 _ =3D t.gettext
>   #silent _t =3D t.gettext
>   <!DOCTYPE html>
> -<div id=3D"report-add-window" class=3D"window">
> -    <header>
> -        <h1 class=3D"title h1 grey">$_("Generate a New Debug Report")</h=
1>
> -    </header>
> -    <div class=3D"content">
> -        <form id=3D"form-report-add">
> -            <section class=3D"form-section">
> -                <h2>
> -                    <label for=3D"report-name-textbox">$_("Report Name")=
</label>
> -                </h2>
> -                <div class=3D"field">
> -                    <input type=3D"text" class=3D"text" id=3D"report-nam=
e-textbox" name=3D"name" />
> -                    <span class=3D"icon-info-circled light-grey c1"></sp=
an>
> -                    <span class=3D"info-add-debug-report">
> -                        $_("The name used to identify the report. If omi=
tted, a name will be chosen based on current time. Name can contain: letter=
s, digits, underscore (\"_\") and hyphen (\"-\").")
> -                    </span>
> -                </div>
> -            </section>
> -        </form>
> -    </div>
> -    <footer>
> -        <div class=3D"btn-group">
> -            <button id=3D"button-report-add" class=3D"btn-normal"><span =
class=3D"text">$_("Generate")</span></button>
> -            <button id=3D"button-report-cancel" class=3D"btn-normal clos=
e" type=3D"button">
> -                <span calss=3D"text">$_("Cancel")</span>
> -            </button>
> +<div class=3D"modal-content">
> +  <div class=3D"modal-header">
> +    <h4 class=3D"modal-title">$_("Generate a New Debug Report")</h4>
> +  </div>
> +  <div class=3D"modal-body">
> +    <form id=3D"form-report-add">
> +        <label for=3D"report-name-textbox">$_("Report Name")</label>
> +        <div class=3D"form-group">
> +            <input type=3D"text" class=3D"form-control" id=3D"report-nam=
e-textbox" name=3D"name" />
> +            <p class=3D"help-block"><i class=3D"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=3D"modal-footer">
> +    <button type=3D"button" id=3D"button-report-add" class=3D"btn btn-de=
fault">$_("Generate")</button>
> +    <button type=3D"button" id=3D"button-report-cancel" class=3D"btn =

> + btn-default" data-dismiss=3D"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=3D"plugins/kimchi/js/kimchi.min.js"></script>
>   </head>
>   <body>
> -<div class=3D"toolbar">
> -    <div class=3D"tools" style=3D"display:none">
> -        <a id=3D"storage-pool-add" class=3D"btn-tool" href=3D"javascript=
:void(0);"><span class=3D"icon add">+</span></a>
> +<div id=3D"storage-root-container">
> +    <div class=3D"toolbar">
> +        <div class=3D"container">
> +            <div class=3D"tools pull-right" style=3D"display:none">
> +                <a id=3D"storage-pool-add" href=3D"javascript:void(0);">=
<i class=3D"fa fa-plus-circle"></i><span>Add Storage</span></a>
> +            </div>
> +        </div>
>       </div>
> -</div>
> -<div class=3D'storage'>
> -<div class=3D"grid-control"><input type=3D"text" class=3D"filter" =

> placeholder=3D"$_("Filter")"></div> -<div id=3D'storageGrid'>
> -    <div>
> -        <span class=3D"storage-name">$_("Name")</span>
> -        <span class=3D"storage-state" >$_("State")</span>
> -        <span class=3D"storage-type">$_("Type")</span>
> -        <span class=3D"storage-capacity">$_("Capacity")</span>
> -        <span class=3D"storage-allocate">$_("Allocated")</span>
> -        <span class=3D"storage-location">$_("Location")</span>
> +    <div class=3D'storage'>
> +    <div class=3D"grid-control"><input type=3D"text" class=3D"filter" pl=
aceholder=3D"$_("Filter")"></div>
> +    <div id=3D'storageGrid'>
> +        <div>
> +            <span class=3D"storage-name">$_("Name")</span>
> +            <span class=3D"storage-state" >$_("State")</span>
> +            <span class=3D"storage-type">$_("Type")</span>
> +            <span class=3D"storage-capacity">$_("Capacity")</span>
> +            <span class=3D"storage-allocate">$_("Allocated")</span>
> +            <span class=3D"storage-location">$_("Location")</span>
> +        </div>
> +        <div id=3D"storagepoolsList" class=3D"list-storage empty-when-lo=
gged-off"></div>
> +    </div>
> +    </div>
> +    <div id=3D"logicalPoolExtend" title=3D"$_("Device path")">
> +         <p id=3D"loading-info" class=3D"text-help">
> +             <img src =3D "plugins/kimchi/images/theme-default/loading.g=
if" />
> +             $_("Looking for available partitions ...")
> +         </p>
> +         <div class=3D"host-partition">
> +         </div>
>       </div>
> -    <div id=3D"storagepoolsList" class=3D"list-storage empty-when-logged=
-off"></div>
> -</div>
> -</div>
> -<div id=3D"logicalPoolExtend" title=3D"$_("Device path")">
> -     <p id=3D"loading-info" class=3D"text-help">
> -         <img src =3D "plugins/kimchi/images/theme-default/loading.gif" =
/>
> -         $_("Looking for available partitions ...")
> -     </p>
> -     <div class=3D"host-partition">
> -     </div>
>   </div>
>   <script id=3D"storageTmpl" type=3D"html/text">
>           <div id=3D"{name}" class=3D"storage-li in" data-name=3D"{name}" =

> data-stat=3D"{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=3D"plugins/kimchi/js/kimchi.min.js"></script>
>   </head>
>   <body>
> -<div class=3D"toolbar">
> -    <div class=3D"tools" style=3D"display:none">
> -        <a id=3D"template-add" class=3D"btn-tool" href=3D"javascript:voi=
d(0);"><span class=3D"icon add">+</span></a>
> -    </div>
> -</div>
> -<div>
> -    <div id=3D"noTemplates" class=3D"list-no-result" style=3D"display: n=
one;">
> -        $_("No templates found.")
> +<div id=3D"templates-root-container">
> +    <div class=3D"toolbar">
> +        <div class=3D"container">
> +            <div class=3D"tools pull-right" style=3D"display:none">
> +                <a id=3D"template-add" href=3D"javascript:void(0);"><i c=
lass=3D"fa fa-plus-circle"></i><span>Add a Template</span></a>
> +            </div>
> +        </div>
>       </div>
> +    <div>
> +        <div id=3D"noTemplates" class=3D"list-no-result" style=3D"displa=
y: none;">
> +            $_("No templates found.")
> +        </div>
>
> -    <ul id=3D"templateList" class=3D"empty-when-logged-off"></ul>
> +        <ul id=3D"templateList" class=3D"empty-when-logged-off"></ul>
>
> -    <script id=3D"templateTmpl" type=3D"html/text">
> +        <script id=3D"templateTmpl" type=3D"html/text">
>
> -        <div class=3D"template-box white-box template-border">
> -            <div class=3D"btn dropdown popable" style=3D"width: 70px">
> -                <span class=3D"text">$_("Actions")</span><span class=3D"=
arrow"></span>
> -                <div class=3D"popover actionsheet right-side" style=3D"w=
idth: 250px">
> -                    <a class=3D"button-big template-edit" data-template=
=3D'{name}'>$_("Edit")</a>
> -                    <a class=3D"button-big template-clone" data-template=
=3D'{name}'>$_("Clone")</a>
> -                    <a class=3D"button-big red template-delete" data-tem=
plate=3D'{name}'>$_("Delete")</a>
> +            <div class=3D"template-box white-box template-border">
> +                <div class=3D"btn dropdown popable" style=3D"width: 70px=
">
> +                    <span class=3D"text">$_("Actions")</span><span class=
=3D"arrow"></span>
> +                    <div class=3D"popover actionsheet right-side" style=
=3D"width: 250px">
> +                        <a class=3D"button-big template-edit" data-templ=
ate=3D'{name}'>$_("Edit")</a>
> +                        <a class=3D"button-big template-clone" data-temp=
late=3D'{name}'>$_("Clone")</a>
> +                        <a class=3D"button-big red template-delete" data=
-template=3D'{name}'>$_("Delete")</a>
> +                    </div>
>                   </div>
> -            </div>
>
> -            <div class=3D"template-icon template-icon-position">
> -                <img alt=3D"" src=3D"{icon}">
> -                <img alt=3D"" src=3D"{location}" class=3D"template-type-=
icon-position">
> -            </div>
> -            <div class=3D"template-general template-title template-title=
-position">
> -                <h2 class=3D"title" title=3D"{name}">{name}</h2>
> -            </div>
> -            <div class=3D"template-os-position">
> -                <div class=3D"template-text">$_("OS"): {os_distro}</div>
> -                <div class=3D"template-text">$_("Version"): {os_version}=
</div>
> -            </div>
> -            <div class=3D"template-cpu-position">
> -                <div class=3D"template-text">$_("CPUs"): {cpus}</div>
> -                <div class=3D"template-text">$_("Memory"): {memory}M</di=
v>
> +                <div class=3D"template-icon template-icon-position">
> +                    <img alt=3D"" src=3D"{icon}">
> +                    <img alt=3D"" src=3D"{location}" class=3D"template-t=
ype-icon-position">
> +                </div>
> +                <div class=3D"template-general template-title template-t=
itle-position">
> +                    <h2 class=3D"title" title=3D"{name}">{name}</h2>
> +                </div>
> +                <div class=3D"template-os-position">
> +                    <div class=3D"template-text">$_("OS"): {os_distro}</=
div>
> +                    <div class=3D"template-text">$_("Version"): {os_vers=
ion}</div>
> +                </div>
> +                <div class=3D"template-cpu-position">
> +                    <div class=3D"template-text">$_("CPUs"): {cpus}</div>
> +                    <div class=3D"template-text">$_("Memory"): {memory}M=
</div>
> +                </div>
>               </div>
> -        </div>
> -    </script>
> +        </script>
> +    </div>
>   </div>
>   <script>
>       kimchi.template_main();

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

--===============1832875595953346965==--