[Kimchi-devel] [WIP] Guest Edit Storage Tab Styling

5 May 2014

Keep storage tab and interface tab consistent in UI style.

Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-edit.css | 92 ++++++++++---------------------------
 ui/js/src/kimchi.guest_edit_main.js | 23 ++++++++--
 ui/pages/guest-edit.html.tmpl       | 29 ++++++------
 3 files changed, 57 insertions(+), 87 deletions(-)

diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 36f7f75..52c53eb 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -89,74 +89,7 @@
     width: 400px;
 }
 
-.guest-edit-cdrom-button {
-    background: url("../images/theme-default/guest-icon-sprite.png") no-repeat left top transparent;
-    border: none;
-    height: 25px;
-    vertical-align: middle;
-    width: 25px;
-}
-
-.guest-edit-cdrom-button.attach {
-    margin: 15px 0 0 521px;
-}
-
-.guest-edit-cdrom-button.attach:hover {
-    background-position: 0 -27px;
-}
-
-.guest-edit-cdrom-button.attach:focus {
-    background-position: 0 -54px;
-}
-
-.guest-edit-cdrom-button.attach:active {
-    background-position: 0 -81px;
-}
-
-.guest-edit-cdrom-button.attach[disabled] {
-    background-position: 0 -108px;
-}
-
-.guest-edit-cdrom-button.replace {
-    background-position: -27px 0;
-}
-
-.guest-edit-cdrom-button.replace:hover {
-    background-position: -27px -27px;
-}
-
-.guest-edit-cdrom-button.replace:focus {
-    background-position: -27px -54px;
-}
-
-.guest-edit-cdrom-button.replace:active {
-    background-position: -27px -81px;
-}
-
-.guest-edit-cdrom-button.replace[disabled] {
-    background-position: -27px -108px;
-}
-
-.guest-edit-cdrom-button.detach {
-    background-position: -54px 0;
-}
-
-.guest-edit-cdrom-button.detach:hover {
-    background-position: -54px -27px;
-}
-
-.guest-edit-cdrom-button.detach:focus {
-    background-position: -54px -54px;
-}
-
-.guest-edit-cdrom-button.detach:active {
-    background-position: -54px -81px;
-}
-
-.guest-edit-cdrom-button.detach[disabled] {
-    background-position: -54px -108px;
-}
-
+#form-guest-edit-storage .header,
 .guest-edit-interface .header {
     margin-bottom: 8px;
     padding-bottom: 2px;
@@ -165,33 +98,56 @@
     overflow: hidden;
 }
 
+#form-guest-edit-storage .body .item,
 .guest-edit-interface .body .item {
     margin: 5px 0;
 }
 
+#form-guest-edit-storage .cell,
 .guest-edit-interface .cell {
     display: inline-block;
     width: 250px;
 }
 
+#form-guest-edit-storage .cell.dev {
+    width: 60px;
+}
+
+#form-guest-edit-storage .cell.path {
+    width: 440px;
+}
+
+#form-guest-edit-storage .cell.path input {
+    box-sizing: border-box;
+    width: 100%;
+}
+
 .guest-edit-interface .body select {
     width: 180px;
     padding: 0px;
 }
 
+#form-guest-edit-storage .action-area,
 .guest-edit-interface .action-area {
     float: right;
 }
 
+#form-guest-edit-storage .action-area {
+    line-height: 24px;
+}
+
+#form-guest-edit-storage button,
 .guest-edit-interface button {
     width: 20px;
     height: 20px;
 }
 
+#form-guest-edit-storage .header button,
 .guest-edit-interface .header button {
     margin-bottom: 1px;
 }
 
+#form-guest-edit-storage .body button:not(:last-child),
 .guest-edit-interface .body button:not(:last-child) {
     margin-right: 2px;
 }
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 2ba6b79..6b27c78 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -38,7 +38,7 @@ kimchi.guest_edit_main = function() {
             storageType: 'cdrom'
         }, function(storages) {
             var rowHTML = $('#cdrom-row-tmpl').html();
-            var container = $('#guest-edit-cdrom-row-container');
+            var container = $('#form-guest-edit-storage .body');
             $(container).empty();
 
             $.each(storages, function(index, storage) {
@@ -54,9 +54,19 @@ kimchi.guest_edit_main = function() {
             };
 
             $('input[type="text"][name="cdrom"]', container).on('click', replaceCDROM);
-            $('.replace', container).on('click', replaceCDROM);
+            $('.replace', container).button({
+                icons: {
+                    primary: 'ui-icon-pencil'
+                },
+                text: false
+            }).click(replaceCDROM);
 
-            $('.detach', container).on('click', function(e) {
+            $('.detach', container).button({
+                icons: {
+                    primary: 'ui-icon-trash'
+                },
+                text: false
+            }).click(function(e) {
                 e.preventDefault();
                 var settings = {
                     title : i18n['KCHAPI6004M'],
@@ -173,7 +183,12 @@ kimchi.guest_edit_main = function() {
 
         refreshCDROMs();
 
-        $('#guest-edit-attach-cdrom-button').on('click', function(event) {
+        $('#guest-edit-attach-cdrom-button').button({
+            icons: {
+                primary: "ui-icon-plusthick"
+            },
+            text: false
+        }).click(function(event) {
             event.preventDefault();
             kimchi.window.open("guest-storage-add.html");
         });
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 552b4c8..71164d4 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -94,15 +94,12 @@
                 </fieldset>
             </form>
             <form id="form-guest-edit-storage">
-                <fieldset class="guest-edit-fieldset">
-                    <div id="guest-edit-cdrom-row-container" class="guest-edit-cdrom-row-container"></div>
-                    <div>
-                        <button id="guest-edit-attach-cdrom-button"
-                            class="guest-edit-cdrom-button attach"
-                            title='$_("Attach")'>
-                        </button>
-                    </div>
-                </fieldset>
+                <div class="header">
+                    <span class="cell">$_("Device")</span>
+                    <span class="cell">$_("Path")</span>
+                    <button id="guest-edit-attach-cdrom-button"class="add action-area"></button>
+                </div>
+                <div class="body"></div>
             </form>
             <form id="form-guest-edit-interface" class="guest-edit-interface">
                 <div class="header">
@@ -123,14 +120,16 @@
     </footer>
 </div>
 <script id="cdrom-row-tmpl" type="text/html">
-    <div>
-        <div class="guest-edit-wrapper-label">
+    <div class="item" id="cdrom-{dev}">
+        <span class="cell dev">
             <label for="cdrom-{dev}">{dev}</label>
-        </div>
-        <div class="guest-edit-wrapper-controls">
+        </span>
+        <span class="cell path">
             <input id="cdrom-{dev}" name="cdrom" type="text"
                 data-vm="{vm}" data-dev="{dev}"
                 value="{path}" readonly="readonly" />
+        </span>
+        <span class="action-area">
             <button class="guest-edit-cdrom-button replace"
                 data-vm="{vm}" data-dev="{dev}"
                 title='$_("Replace")'>
@@ -139,8 +138,8 @@
                 data-vm="{vm}" data-dev="{dev}"
                 title='$_("Detach")'>
             </button>
-        </div>
-    </div>
+        </span>
+    <div>
 </script>
 <script id="interface-tmpl" type="text/html">
     <div class="item" id="{mac}">
-- 
1.8.1.4

    