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

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; 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&gt; --- plugins/kimchi/ui/config/tab-ext.xml

| 7 +- plugins/kimchi/ui/css/theme-default/button.css | 72 +++++++--------

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

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

plugins/kimchi/ui/js/src/kimchi.host.js | 2 + plugins/kimchi/ui/pages/guests.html.tmpl | 6 +- plugins/kimchi/ui/pages/host.html.tmpl | 33 +++---- plugins/kimchi/ui/pages/network.html.tmpl | 123 +++++++++++++------------ plugins/kimchi/ui/pages/report-add.html.tmpl | 46 ++++----- plugins/kimchi/ui/pages/storage.html.tmpl | 52 ++++++----- plugins/kimchi/ui/pages/templates.html.tmpl | 72 ++++++++------- 11 files changed, 211 insertions(+), 215 deletions(-) diff --git a/plugins/kimchi/ui/config/tab-ext.xml b/plugins/kimchi/ui/config/tab-ext.xml index ee88c88..e363ebd 100644 --- a/plugins/kimchi/ui/config/tab-ext.xml +++ b/plugins/kimchi/ui/config/tab-ext.xml @@ -5,6 +5,7 @@ <access role="user" mode="none"/> <title>Host</title> + <css>host</css> <path>plugins/kimchi/host.html</path> </tab> <tab> @@ -12,6 +13,7 @@ <access role="user" mode="byInstance"/> <title>Guests</title> + <css>guests</css> <path>plugins/kimchi/guests.html</path> </tab> <tab> @@ -19,6 +21,7 @@ <access role="user" mode="none"/> <title>Templates</title> + <css>templates</css> <path>plugins/kimchi/templates.html</path> </tab> <tab> @@ -26,13 +29,15 @@ <access role="user" mode="read-only"/> <title>Storage</title> + <css>storage</css> <path>plugins/kimchi/storage.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> - + <title>Network</title> + <css>network</css> <path>plugins/kimchi/network.html</path> </tab> </tabs-ext> diff --git a/plugins/kimchi/ui/css/theme-default/button.css b/plugins/kimchi/ui/css/theme-default/button.css index e774128..9895572 100644 --- a/plugins/kimchi/ui/css/theme-default/button.css +++ b/plugins/kimchi/ui/css/theme-default/button.css @@ -17,7 +17,7 @@ */ /* Generated at http://colorzilla.com/gradient-editor/ */ -.btn { +.kimchi.btn { display: inline-block; height: 42px; margin: 3px; @@ -50,11 +50,11 @@ cursor: pointer; } -.btn[disabled] { +.kimchi.btn[disabled] { opacity: 0.3; } -.btn:not([disabled]):hover { +.kimchi.btn:not([disabled]):hover { box-shadow: -2px -2px 2px #dadada, 2px 2px 2px #fff, 3px 3px 3px white inset, -3px -3px 3px rgba(0, 0, 0, .25) inset; background: #d5d5d5; @@ -69,7 +69,7 @@ endColorstr='#eeeeee', GradientType=0); } -.btn:not([disabled]):active { +.kimchi.btn:not([disabled]):active { box-shadow: -2px -2px 2px #eaeaea, 2px 2px 2px #fff, 3px 3px 3px rgba(0, 0, 0, .25) inset, -3px -3px 3px white inset; background: #ffffff; @@ -84,43 +84,43 @@ endColorstr='#ffffff', GradientType=0); } -.btn.loading { +.kimchi.btn.loading { box-shadow: none; cursor: default; } -.btn.loading .icon { +.kimchi.btn.loading .icon { background: url(../images/theme-default/icon-load.png) center center no-repeat; } -.btn.pause-gray .icon { +.kimchi.btn.pause-gray .icon { background: url(../images/theme-default/ac22_pause_grey.png) center center no-repeat; } -.btn.resume-gray .icon { +.kimchi.btn.resume-gray .icon { background: url(../images/theme-default/ac24_resume_grey.png) center center no-repeat; } -.btn .text { +.kimchi.btn .text { padding: 0 10px; } -.btn .icon { +.kimchi.btn .icon { display: block; width: 42px; height: 42px; } -.btn.dropdown { +.kimchi.btn.dropdown { text-align: left; position: relative; padding-right: 25px; } -.btn.dropdown .arrow { +.kimchi.btn.dropdown .arrow { position: absolute; width: 15px; height: 42px; @@ -132,12 +132,12 @@ right: 10px; } -.btn .input { +.kimchi.btn .input { margin-left: 10px; } /* Generated at http://colorzilla.com/gradient-editor/ */ -.btn-tool { +.kimchi.btn-tool { display: inline-block; height: 38px; margin: 6px 3px; @@ -169,14 +169,14 @@ cursor: pointer; } -.btn-tool:hover { +.kimchi.btn-tool:hover { box-shadow: -1px -1px 1px #777, 1px 1px 1px #eee, 2px 2px 2px rgba(0, 0, 0, .25) inset, -3px -3px 3px rgba(0, 0, 0, .25) inset; } /* Generated at http://colorzilla.com/gradient-editor/ */ -.btn-tool.left,.btn-tool.right { +.kimchi.btn-tool.left,.kimchi.btn-tool.right { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; @@ -192,12 +192,12 @@ endColorstr='#999999', GradientType=0); } -.btn-tool:active,.btn-tool.active { +.kimchi.btn-tool:active,.kimchi.btn-tool.active { box-shadow: -1px -1px 1px #777, 1px 1px 1px #eee, 3px 3px 3px rgba(0, 0, 0, .35) inset; } -.btn-tool.left { +.kimchi.btn-tool.left { -webkit-border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; border-top-left-radius: 5px; @@ -206,7 +206,7 @@ border-bottom-left-radius: 5px; } -.btn-tool.right { +.kimchi.btn-tool.right { -webkit-border-top-right-radius: 5px; -moz-border-top-right-radius: 5px; border-top-right-radius: 5px; @@ -215,7 +215,7 @@ border-bottom-right-radius: 5px; } -.btn-tool .icon { +.kimchi.btn-tool .icon { display: block; width: 48px; height: 38px; @@ -287,7 +287,7 @@ } /* Generated at http://colorzilla.com/gradient-editor/ */ -.btn-tool.tree { +.kimchi.btn-tool.tree { width: 42px; margin: 5px 10px; background: #ffffff; @@ -304,7 +304,7 @@ inset, -3px -3px 3px rgba(0, 0, 0, .25) inset; } -.btn-select { +.kimchi.btn-select { display: inline-block; position: relative; height: 30px; @@ -321,7 +321,7 @@ cursor: pointer; } -.btn-select .input { +.kimchi.btn-select .input { border: 0 solid #CCCCCC; margin-right: 10px; font-size: 16px; @@ -332,10 +332,10 @@ padding: 0 5px; } -.btn-select input.invalid-field { +.kimchi.btn-select input.invalid-field { border: 1px solid #FF4444; } -.btn-select .arrow { +.kimchi.btn-select .arrow { position: absolute; width: 15px; height: 30px; @@ -447,7 +447,7 @@ display: none; } -.btn-normal { +.kimchi.btn-normal { display: inline-block; height: 38px; margin: 9px 3px; @@ -460,25 +460,25 @@ cursor: pointer; } -.btn-normal span { +.kimchi.btn-normal span { font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: lighter; } -.btn-normal:not([disabled]):hover { +.kimchi.btn-normal:not([disabled]):hover { background: #EEEEEE; } -.btn-normal:not([disabled]):active { +.kimchi.btn-normal:not([disabled]):active { background: #999999; } -.btn-normal[disabled] { +.kimchi.btn-normal[disabled] { color: #CCCCCC; cursor: default; } -.btn-normal-1 { +.kimchi.btn-normal-1 { display: inline-block; height: 38px; margin: 9px 3px; @@ -491,26 +491,26 @@ cursor: pointer; } -.btn-normal-1 span { +.kimchi.btn-normal-1 span { font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: lighter; } -.btn-normal-1:not([disabled]):active { +.kimchi.btn-normal-1:not([disabled]):active { background: #999999; } -.btn-normal-1[disabled] { +.kimchi.btn-normal-1[disabled] { background: #999999; cursor: default; } -.btn-group { +.kimchi.btn-group { float: left; padding: 0 10px; } -.btn-small { +.kimchi.btn-small { display: inline-block; height: 25px; margin: 6px 3px; diff --git a/plugins/kimchi/ui/images/logo.ico b/plugins/kimchi/ui/images/logo.ico index 446143f066a60f479b2cb8f8d04ab3c97ff60e56..cb3a3dc2f9c9ce0e5d3e14f0adab 89c28c729ce0 100644 GIT binary patch literal 15086 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 literal 1214 zcma)*3rLeu6vyu=X_;nPV)$&PPF)r(wTQ|dTGOUtnOdf0mZ=cR#99xbub1{BqnD9^ z^Z>PV6h)fUny6#CN{3di2P{*h2ek@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@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+@Oa_)UKTK^x4IwmKMOjm@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@M&*jFU zoM+Z%F5)(8$8y`Wz~%Pd;Nlx@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();