[Kimchi-devel] [PATCH 07/10] [new-ui] Kimchi config and Guests tab

Tuesday, 10 November 2015

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt;

Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt;
---
 src/wok/plugins/kimchi/ui/config/tab-ext.xml       |   8 +-
 .../kimchi/ui/css/theme-default/guest-edit.css     |   8 +-
 .../kimchi/ui/js/src/kimchi.guest_add_main.js      |  10 +-
 .../kimchi/ui/js/src/kimchi.guest_edit_main.js     |  63 +++---------
 .../plugins/kimchi/ui/pages/guest-add.html.tmpl    | 114 ++++++++++-----------
 .../plugins/kimchi/ui/pages/guest-edit.html.tmpl   |  97 ++++++------------
 .../kimchi/ui/pages/guest-storage-add.html.tmpl    |  21 ++--
 src/wok/plugins/kimchi/ui/pages/guests.html.tmpl   |  61 +++++++----
 ui/css/src/modules/_guests.scss                    |  92 +++++++++++++++++
 9 files changed, 255 insertions(+), 219 deletions(-)
 create mode 100644 ui/css/src/modules/_guests.scss

diff --git a/src/wok/plugins/kimchi/ui/config/tab-ext.xml
b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
index 48ec9ec..415dbf1 100644
--- a/src/wok/plugins/kimchi/ui/config/tab-ext.xml
+++ b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
@@ -3,28 +3,28 @@
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="byInstance"/>
-
+        <class>guests</class>
         <title>Guests</title>
         <path>plugins/kimchi/guests.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="none"/>
-
+        <class>templates</class>
         <title>Templates</title>
         <path>plugins/kimchi/templates.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="read-only"/>
-
+        <class>storage</class>
         <title>Storage</title>
         <path>plugins/kimchi/storage.html</path>
     </tab>
     <tab>
         <access role="admin" mode="admin"/>
         <access role="user" mode="read-only"/>
-
+        <class>network</class>
         <title>Network</title>
         <path>plugins/kimchi/network.html</path>
     </tab>
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
b/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
index b661159..98901da 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
@@ -10,16 +10,12 @@
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
+ * distributed under the License is distributed on an "AS IS" BASIS,pick
3b4871a Squash with SCSS patch
+
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#guest-edit-window {
-    font-size: 13px;
-    height: 420px;
-    width: 820px;
-}
 
 #guest-edit-window #action-button-container {
     padding-right: 0;
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js
b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js
index 6be6f9a..ef8324a 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js
@@ -22,6 +22,10 @@ kimchi.guest_add_main = function() {
             if (result && result.length) {
                 $('#prompt-create-template').addClass('hidden');
                 $('#prompt-choose-template').removeClass('hidden');
+                $('#guest-add-window .guest-pager').animate({
+                            height: "530px"
+                });
+
                 var html = '';
                 var tmpl = $('#tmpl-template').html();
                 $.each(result, function(index, value) {
@@ -34,13 +38,17 @@ kimchi.guest_add_main = function() {
             $('#btn-create-template').on('click', function(event) {
                 wok.topic('templateCreated').subscribe(showTemplates);
 
-                wok.window.open('plugins/kimchi/template-add.html');
+               
wok.window.open('plugins/kimchi/template-add.html','extendCreateTemplate');
 
                 event.preventDefault();
             });
 
             $('#prompt-choose-template').addClass('hidden');
             $('#prompt-create-template').removeClass('hidden');
+            $('#guest-add-window .guest-pager').animate({
+                height: "90px"
+            });
+
         }, function(err) {
             wok.message.error(err.responseJSON.reason);
         });
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
index 46de868..44dd1fd 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
@@ -50,36 +50,18 @@ kimchi.guest_edit_main = function() {
                 container.append(templated);
             });
 
-            $('.replace', container).button({
-                icons: {
-                    primary: 'ui-icon-pencil'
-                },
-                text: false
-            });
+            $('.replace', container).button();
+
+            $('.detach', container).button();
 
-            $('.detach', container).button({
-                icons: {
-                    primary: 'ui-icon-trash'
-                },
-                text: false
-            });
             if (kimchi.thisVMState === 'running') {
                 $('.detach[data-type="cdrom"]', container).remove();
             }
 
-            $('.save', container).button({
-                icons: {
-                    primary: 'ui-icon-disk'
-                },
-                text: false
-            });
+            $('.save', container).button();
+
+            $('.cancel', container).button();
 
-            $('.cancel', container).button({
-                icons: {
-                    primary: 'ui-icon-arrowreturnthick-1-w'
-                },
-                text: false
-            });
         });
     };
 
@@ -158,10 +140,7 @@ kimchi.guest_edit_main = function() {
     };
 
     var setupInterface = function() {
-        $(".add", "#form-guest-edit-interface").button({
-            icons: { primary: "ui-icon-plusthick" },
-            text: false
-        }).click(function(evt){
+        $(".add",
"#form-guest-edit-interface").button().click(function(evt){
             evt.preventDefault();
             addItem({
                 id: -1,
@@ -189,11 +168,7 @@ kimchi.guest_edit_main = function() {
             if(data.network!==""){
                 $("select", itemNode).val(data.network);
             }
-            $(".edit", itemNode).button({
-                disabled: kimchi.thisVMState === "running",
-                icons: { primary: "ui-icon-pencil" },
-                text: false
-            }).click(function(evt){
+            $(".edit", itemNode).button({ disabled: kimchi.thisVMState ===
"running" }).click(function(evt){
                 evt.preventDefault();
                 toggleEdit($(this).closest('div'), true, data.id);
             });
@@ -207,10 +182,7 @@ kimchi.guest_edit_main = function() {
                     item.remove();
                 });
             });
-            $(".save", itemNode).button({
-                icons: { primary: "ui-icon-disk" },
-                text: false
-            }).click(function(evt){
+            $(".save", itemNode).button().click(function(evt){
                 evt.preventDefault();
                 var item = $(this).parent().parent();
                 var interface = {
@@ -241,10 +213,7 @@ kimchi.guest_edit_main = function() {
                     }
                 }
             });
-            $(".cancel", itemNode).button({
-                icons: { primary: "ui-icon-arrowreturnthick-1-w" },
-                text: false
-            }).click(function(evt){
+            $(".cancel", itemNode).button().click(function(evt){
                 evt.preventDefault();
                 var item = $(this).parent().parent();
                 $("label", item).text()==="" ? item.remove() :
toggleEdit(item, false, data.id);
@@ -269,10 +238,7 @@ kimchi.guest_edit_main = function() {
 
     var setupPermission = function() {
        //set up for LDAP
-       $(".add", "#form-guest-edit-permission").button({
-            icons: { primary: "ui-icon-plusthick" },
-            text: false
-        }).click(function(evt){
+       $(".add",
"#form-guest-edit-permission").button().click(function(evt){
             evt.preventDefault();
             addItem({
                 user: "",
@@ -285,10 +251,7 @@ kimchi.guest_edit_main = function() {
         var addItem = function(data) {
             var itemNode =
$.parseHTML(wok.substitute($('#ldap-user-tmpl').html(),data));
             $(".body", "#form-guest-edit-permission
.ldap").append(itemNode);
-            $(".delete", itemNode).button({
-                icons: { primary: "ui-icon-trash" },
-                text: false
-            }).click(function(evt){
+            $(".delete", itemNode).button().click(function(evt){
                 evt.preventDefault();
                 var item = $(this).parent().parent();
                 item.remove();
@@ -667,7 +630,7 @@ kimchi.guest_edit_main = function() {
                 text: false
             }).click(function(event) {
                 event.preventDefault();
-                wok.window.open("plugins/kimchi/guest-storage-add.html");
+               
wok.window.open('plugins/kimchi/guest-storage-add.html','extendCreateStorage');
             });
         if ((kimchi.thisVMState === "running") || (kimchi.thisVMState ===
"paused")) {
             $("#form-guest-edit-general input").prop("disabled",
true);
diff --git a/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl
b/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl
index 3770d96..614606c 100644
--- a/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl
@@ -24,72 +24,64 @@
 <!DOCTYPE html>
 <html>
 <body>
-<div class="window" style="width: 900px;height: 580px;">
-    <header>
-        <h1 class="title h1 grey">$_("Create a New Virtual
Machine")</h1>
-    </header>
-    <div class="content">
-        <form id="form-vm-add">
-        <section class="form-section">
-            <h2>1. $_("Virtual Machine Name")</h2>
-            <div class="field">
-                <input type="text" class="text" style="width:
300px" name="name"><br>
-                <div class="icon-info-circled light-grey c1
help-inline"></div>
-                <p class="text-help help-inline">
-                    $_("The name used to identify the virtual machine. If omitted, a
name will be chosen based on the template used.")
-                </p>
+<div id="guest-add-window" class="window modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title"
id="guestsModalLabel">$_("Create a New Virtual
Machine")</h4>
             </div>
-        </section>
-        <section class="form-section">
-            <h2>2. $_("Template")</h2>
-            <div class="field">
-                <div class="text-help">
-                    <div id="prompt-create-template"
class="hidden">
-                        <div class="icon-info-circled light-grey c1
help-inline"></div>
-                        <div class="text-help
help-inline">$_("Please create a template first.")</div>
-                        <a id="btn-create-template"
class="btn-normal" href="templates.html">
-                            <span class="text">$_("Create a
Template")</span>
-                        </a>
+            <div class="modal-body">
+                <form id="form-vm-add">
+                    <div class="guest-modal-container">
+                        <div class="form-group">
+                            <label for="guest-vm-name">$_("Virtual
Machine Name")</label>
+                            <input type="text"
class="form-control" name="name" id="guest-vm-name" />
+                            <p class="help-block"><i class="fa
fa-info-circle"></i> $_("The name used to identify the virtual machine.
If omitted, a name will be chosen based on the template used.")
+                            </p>
+                        </div>
                     </div>
-                    <div id="prompt-choose-template"
class="hidden">
-                        <span class="icon-info-circled light-grey
c1"></span>
-                        <span class="text-help">$_("Please choose a
template.")</span>
-                    </div>
-                </div>
-                <ul id="templateTile" class="tile-check
tile-template">
-                </ul>
-                <script type="html/text" id="tmpl-template"
class="tmpl-html">
-                    <li>
-                        <label>
-                            <input type="radio" name="template"
value="/plugins/kimchi/templates/{name}">
-                            <div class="info">
-                                <div class="summary os-icon">
-                                    <img src="{icon}">
-                                    <span
class="title">{name}</span>
-                                </div>
-                                <ul class="list-info">
-                                   
<li><label>$_("OS")</label><span>{os_distro}</span></li>
-                                    <li><label>$_("OS
Version")</label><span>{os_version}</span></li>
-                                   
<li><label>$_("CPUS")</label><span>{cpus}</span></li>
-                                   
<li><label>$_("Memory")</label><span>{memory}M</span></li>
-                                </ul>
+                    <div class="guest-pager">
+                        <div class="page-list">
+                        <div class="page">
+                            <div class="row">
+                                    <div id="prompt-create-template"
class="hidden">
+                                        <p>$_("Please create a template
first.")</p>
+                                        <a id="btn-create-template"
class="btn btn-primary" href="templates.html">$_("Create a
Template")</a>
+                                    </div>
+                                    <p id="prompt-choose-template"
class="hidden">$_("Please choose a template.")</p>
+                            </div>
+                            <ul id="templateTile" class="list-template
tile-check tile-template">
+                            </ul>
+                                <script type="html/text"
id="tmpl-template" class="tmpl-html">
+                                    <li class="col-md-3">
+                                        <label class="box-iso-outer">
+                                            <input type="radio"
name="template" value="/plugins/kimchi/templates/{name}"
class="iso-radio-hidden">
+                                            <span
class="box-iso-border">
+                                                <span
class="box-iso-inner">
+                                                    <h3 class="iso-title
{os_distro}" title="{name}">{name}</h3>
+                                                        <dl
class="iso-info">
+                                                           
<dt>{os_distro}</dt>
+                                                            <dd>$_("OS:
")</dd>
+                                                           
<dt>{os_version}</dt>
+                                                            <dd>$_("Version:
")</dd>
+                                                            <dt>{cpus}</dt>
+                                                           
<dd>$_("CPUS")</dd>
+                                                           
<dt>{memory}M</dt>
+                                                           
<dd>$_("Memory")</dd>
+                                                        </dl>
+                                                </span>
+                                            </span>
+                                        </label>
+                                    </li>
+                                </script>
                             </div>
-                        </label>
-                    </li>
-                </script>
+                        </div>
+                    </div>
+                </form>
             </div>
-        </section>
-        </form>
+    <div class="modal-footer">
+            <button id="vm-doAdd" class="btn btn-default"
disabled="disabled"
href="javascript:void(0);">$_("Create")</button>
+            <button id="vm-doAdding" class="btn btn-default"
disabled="disabled" style="display:none"
href="javascript:void(0);"><span
class="wok-loading-icon"></span>
$_("Creating...")</button>
+            <button id="vm-add=cancel" class="btn btn-default"
data-dismiss="modal"
type="button">$_("Cancel")</button>
     </div>
-    <footer>
-        <div class="btn-group">
-            <button id="vm-doAdd" class="btn-normal"
disabled="disabled" href="javascript:void(0);"><span
class="text">$_("Create")</span></button>
-            <button id="vm-doAdding" class="btn-normal"
disabled="disabled" style="display:none"
href="javascript:void(0);"><span
class="text">$_("Creating...")</span></button>
-            <button id="vm-add=cancel" class="btn-normal close"
type="button">
-                <span class="text">$_("Cancel")</span>
-            </button>
-        </div>
-    </footer>
 </div>
 <script>
     kimchi.guest_add_main();
diff --git a/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
b/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
index 0c47ac8..098f409 100644
--- a/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
@@ -20,12 +20,11 @@
 #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang,
fallback=True)
 #silent _ = t.gettext
 #silent _t = t.gettext
-
-<div id="guest-edit-window" class="window">
-    <header>
-        <h1 class="title h1 grey">$_("Edit Guest")</h1>
-    </header>
-    <div class="content">
+<div id="guest-edit-window" class="window modal-content">
+    <div class="modal-header">
+        <h4 class="modal-title">$_("Edit Guest")</h4>
+    </div>
+    <div class="modal-body">
         <div id="guest-edit-tabs">
             <ul>
                 <li>
@@ -48,54 +47,22 @@
                 </li>
             </ul>
             <form id="form-guest-edit-general">
-                <fieldset class="guest-edit-fieldset">
-                    <div class="edit-general-inline">
-                        <div class="guest-edit-wrapper-label">
-                            <label for="guest-edit-id-textbox">
-                                $_("Name")
-                            </label>
-                        </div>
-                        <div class="guest-edit-wrapper-label">
-                            <label for="guest-edit-cores-textbox">
-                                $_("CPUs")
-                            </label>
-                        </div>
-                        <div class="guest-edit-wrapper-label">
-                            <label for="guest-edit-memory-textbox">
-                                $_("Memory (MB)")
-                            </label>
-                        </div>
-                        <div class="guest-edit-wrapper-label">
-                            <label for="guest-edit-icon-textbox">
-                                $_("Icon")
-                            </label>
-                        </div>
-                    </div>
-                    <div class="edit-general-inline">
-                        <div class="guest-edit-wrapper-controls">
-                            <input id="guest-edit-id-textbox"
-                                name="name" type="text" />
-                        </div>
-                        <div class="guest-edit-wrapper-controls">
-                            <input
-                                id="guest-edit-cores-textbox"
-                                name="cpus"
-                                type="text" />
-                        </div>
-                        <div class="guest-edit-wrapper-controls">
-                            <input id="guest-edit-memory-textbox"
-                                name="memory"
-                                type="text" />
-                        </div>
-                        <div class="guest-edit-wrapper-controls">
-                            <input
-                                id="guest-edit-icon-textbox"
-                                name="icon"
-                                type="text"
-                                disabled="disabled" />
-                        </div>
-                    </div>
-                </fieldset>
+                <div class="form-group">
+                    <label
for="guest-edit-id-textbox">$_("Name")</label>
+                    <input id="guest-edit-id-textbox"
class="form-control" name="name" type="text" />
+                </div>
+                <div class="form-group">
+                    <label
for="guest-edit-cores-textbox">$_("CPUs")</label>
+                    <input id="guest-edit-cores-textbox"
class="form-control" name="cpus" type="text" />
+                </div>
+                <div class="form-group">
+                    <label
for="guest-edit-memory-textbox">$_("Memory (MB)")</label>
+                    <input id="guest-edit-memory-textbox"
class="form-control" name="memory" type="text" />
+                </div>
+                <div class="form-group">
+                    <label
for="guest-edit-icon-textbox">$_("Icon")</label>
+                    <input id="guest-edit-icon-textbox"
class="form-control" name="icon" type="text"
disabled="disabled"  />
+                </div>
             </form>
             <form id="form-guest-edit-storage">
                 <div class="header">
@@ -106,11 +73,11 @@
                 <div class="body"></div>
             </form>
             <form id="form-guest-edit-interface"
class="guest-edit-interface">
+                <button class="add btn btn-primary"><i class="fa
fa-plus-circle"></i> Add</button>
                 <div class="header">
                     <span
class="cell">$_("Network")</span>
                     <span class="cell">$_("Type")</span>
                     <span class="cell">$_("MAC
Address")</span>
-                    <button class="add action-area"></button>
                 </div>
                 <div class="body"></div>
             </form>
@@ -129,8 +96,8 @@
                         </div>
                     </div>
                     <div class="column control">
-                        <button id="permissionGo"> > </button>
-                        <button id="permissionBack"> <
</button>
+                        <button id="permissionGo"> &lt;
</button>
+                        <button id="permissionBack"> &gt;
</button>
                     </div>
                     <div class="column selected">
                         <div class="title">$_("Selected system users
and groups")</div>
@@ -157,7 +124,7 @@
                 <div class="guest-scroll-indent">
                     <div class="filter">
                         <span class="group">
-                            <select class="control">
+                            <select class="control selectpicker">
                                 <option
value="all">$_("All")</option>
                                 <option value="toAdd">$_("To
Add")</option>
                                 <option
value="added">$_("Added")</option>
@@ -184,16 +151,12 @@
             </form>
         </div>
     </div>
-    <footer>
-        <div id="action-button-container" class="btn-group
hidden">
-            <button id="guest-edit-button-save"
class="btn-normal">
-                <span class="text">$_("Save")</span>
-            </button>
+    <div class="modal-footer">
+        <div id="action-button-container" class="hidden">
+            <button id="guest-edit-button-save" class="btn
btn-default">$_("Save")</button>
         </div>
-        <button id="guest-edit-button-cancel" class="btn-normal
close">
-            <span class="text">$_("Cancel")</span>
-        </button>
-    </footer>
+        <button id="guest-edit-button-cancel" class="btn
btn-default">$_("Cancel")</button>
+    </div>
 </div>
 <script id="cdrom-row-tmpl" type="text/html">
     <div class="item view" id="cdrom-{dev}">
diff --git a/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
b/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
index a26e0f9..c8ab96c 100644
--- a/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
@@ -22,11 +22,11 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <div id="guest-storage-add-window" class="window">
-    <header>
-        <h1 class="title">$_("Add a Storage Device to
VM")</h1>
-        <div class="close">X</div>
-    </header>
-    <div class="content">
+    <div class="modal-header">
+        <button type="button" class="close"
data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">$_("Add a Storage Device to
VM")</hh>
+    </div>
+    <div class="modal-body">
         <form id="form-guest-storage-add">
             <section class="form-section">
                 <h2>1. $_("Device Type")</h2>
@@ -90,13 +90,10 @@
             </fieldset>
         </form>
     </div>
-    <footer>
-        <div class="btn-group">
-            <button id="guest-storage-button-add"
class="btn-normal" disabled="disabled">
-            <span class="text">$_("Attach")</span>
-            </button>
-        </div>
-    </footer>
+    <div class="modal-footer">
+            <button id="guest-storage-button-add" class="btn
btn-default" disabled="disabled">$_("Attach")</button>
+            <button class="btn btn-default"
data-dismiss="modal">$_("Cancel")</button>
+    </div>
 </div>
 <script type="text/javascript">
     kimchi.guest_storage_add_main();
diff --git a/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl
b/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl
index 3c3aa32..a5c6846 100644
--- a/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl
@@ -34,27 +34,52 @@
 </head>
 <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>
+    <nav class="navbar navbar-default toolbar">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+              <button type="button" class="navbar-toggle
collapsed" data-toggle="collapse" data-target="#toolbar"
aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+            </div>        
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse"
id="toolbar">
+                <ul class="nav navbar-nav navbar-right tools"
display="none">
+                    <li><a id="vm-add" class="btn-tool"
href="javascript:void(0);"><i class="fa
fa-plus-circle"></i><span>Add a
Guest</span></a></li>
+                </ul>
+            </div>
         </div>
-    </div>
-    <div id="guestListField" style="display: none">
-        <ul class="list-title">
-            <li class="guest-type">$_("Name")</li>
-            <li class="guest-cpu">$_("CPU")</li>
+    </nav>
+    <div id="guest-content-container">
+        <div class="container">
+        <div id="alert-container"></div>
+            <div id="guestListField" style="display: none">
+                <ul class="list-title">
+                    <li
class="guest-type">$_("Name")</li>
+                    <li class="guest-cpu">$_("CPU")</li>
             <li class="guest-memory">$_("Memory")</li>
-            <li class="guest-storage">$_("Disk
I/O")</li>
-            <li class="guest-network">$_("Network
I/O")</li>
-            <li class="guest-tile">$_("Livetile")</li>
-            <li class="guest-actions">$_("Actions")</li>
-        </ul>
-        <ul id="guestList" class="list-vm
empty-when-logged-off">
-        </ul>
-    </div>
-    <div id="noGuests" class="list-no-result" style="display:
none;">
-        $_("No guests found.")
+                    <li class="guest-storage">$_("Disk
I/O")</li>
+                    <li class="guest-network">$_("Network
I/O")</li>
+                    <li
class="guest-tile">$_("Livetile")</li>
+                    <li
class="guest-actions">$_("Actions")</li>
+                </ul>
+                <ul id="guestList" class="list-vm
empty-when-logged-off">
+                </ul>
+            </div>
+            <div id="noGuests" class="list-no-result"
style="display: none;">
+                $_("No guests found.")
+            </div>
+        </div>
     </div>
+<div id="modalWindow" class="modal fade host-modal guests-modal"
tabindex="-1" role="dialog"
aria-labelledby="guestsModalLabel" aria-hidden="true">
+</div>
+<div id="extendCreateTemplate" class="modal fade host-modal
templates-modal" tabindex="-1" role="dialog"
aria-labelledby="templateModalLabel" aria-hidden="true">
+</div>
+<div id="extendCreateStorage" class="modal fade host-modal
storage-modal" tabindex="-1" role="dialog"
aria-labelledby="storageModalLabel" aria-hidden="true">
+</div>
     <script id="guest-tmpl" type="kimchi/template">
     $ht(file=$data.ui_dir + "/pages/guest.html.tmpl", searchList=[self,
{'lang':$lang}])
     </script>
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
new file mode 100644
index 0000000..23c361a
--- /dev/null
+++ b/ui/css/src/modules/_guests.scss
@@ -0,0 +1,92 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Code derived from Project Kimchi
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Create Guest Modal */
+
+.guests-modal {
+    .modal-dialog {
+        width: 1100px;
+    }
+    .page-list {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+    }
+    .page {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        padding: 10px 30px;
+    }
+}
+
+#guest-add-window {
+    .modal-body {
+        margin: 0;
+        padding: 0;
+    }
+    .modal-footer {
+        margin-top: 0;
+    }
+    .modal-footer .btn + .btn {
+        margin-left: 0;
+    }
+    .modal-footer .btn {
+        margin-right: 5px;
+    }
+    .modal-dialog {
+        width: 900px;
+    }
+    .guest-modal-container {
+        padding: 10px 30px;
+        position: relative;
+    }
+    .guest-pager {
+        background: $table-border-color;
+        overflow: hidden;
+        position: relative;
+        height: 530px;
+    }
+    &.modal-content p {
+        margin: 0 0 10px 0;
+    }
+    &.modal-content h5 {
+        font-size: 13pt;
+        font-weight: 400;
+        margin-top: 0;
+    }
+    &.modal-content label {
+        font-size: 16px;
+        font-weight: 400;
+        font-family: $font-family-sans-serif;
+    }
+    form#form-vm-add {
+        margin: 0;
+    }
+    input#guest-vm-name,
+    p.help-block {
+        width: 592px;
+    }
+}
-- 
1.9.3


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

[Kimchi-devel] [PATCH 07/10] [new-ui] Kimchi config and Guests tab