[Kimchi-devel] [PATCH v2 1/2] Adjust Guest Edit Storage Tab Styles

6 Jun 2014

Keep consistent with interface setup tab.

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

diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 36f7f75..3ce48be 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -33,6 +33,12 @@
     padding: 1em;
 }
 
+#form-guest-edit-storage input[readonly] {
+    background: none;
+    border-color: transparent;
+    text-overflow: ellipsis;
+}
+
 .guest-edit-fieldset {
     padding-right: 0;
 }
@@ -89,74 +95,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 +104,57 @@
     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.dev input,
+#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 90dcb32..fdc7891 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -36,7 +36,7 @@ kimchi.guest_edit_main = function() {
         kimchi.listVMStorages({
             vm: kimchi.selectedGuest
         }, function(storages) {
-            var container = $('#guest-edit-cdrom-row-container');
+            var container = $('#form-guest-edit-storage .body');
             $(container).empty();
 
             $.each(storages, function(index, storage) {
@@ -46,35 +46,105 @@ kimchi.guest_edit_main = function() {
                 container.append(templated);
             });
 
-            var replaceCDROM = function(event) {
-                event.preventDefault();
-                kimchi.selectedGuestStorage = $(this).data('dev');
-                kimchi.window.open("guest-cdrom-edit.html");
+            $('.replace', container).button({
+                icons: {
+                    primary: 'ui-icon-pencil'
+                },
+                text: false
+            });
+
+            $('.detach', container).button({
+                icons: {
+                    primary: 'ui-icon-trash'
+                },
+                text: false
+            });
+
+            $('.save', container).button({
+                icons: {
+                    primary: 'ui-icon-disk'
+                },
+                text: false
+            });
+
+            $('.cancel', container).button({
+                icons: {
+                    primary: 'ui-icon-arrowreturnthick-1-w'
+                },
+                text: false
+            });
+        });
+    };
+
+    var initStorageListeners = function() {
+        var container = $('#form-guest-edit-storage .body');
+        var toggleCDROM = function(rowNode, toEdit) {
+            $('button.replace,button.detach', rowNode)
+                [(toEdit ? 'add' : 'remove') + 'Class']('hidden');
+            $('button.save,button.cancel', rowNode)
+                [(toEdit ? 'remove' : 'add') + 'Class']('hidden');
+            var pathBox = $('.path input', rowNode)
+                .prop('readonly', !toEdit);
+            toEdit && pathBox.select();
+        };
+
+        var replaceCDROM = function(event) {
+            event.preventDefault();
+            kimchi.selectedGuestStorage = $(this).data('dev');
+            $('.item', container).each(function(i, n) {
+                toggleCDROM(n);
+            });
+            var rowNode = $('#cdrom-' + kimchi.selectedGuestStorage);
+            toggleCDROM(rowNode, true);
+        };
+
+        $(container).on('click', 'button.replace', replaceCDROM);
+
+        $(container).on('click', 'button.detach', function(e) {
+            e.preventDefault();
+            var settings = {
+                title : i18n['KCHAPI6004M'],
+                content : i18n['KCHVMCD6001M'],
+                confirm : i18n['KCHAPI6002M'],
+                cancel : i18n['KCHAPI6003M']
             };
 
-            $('input[type="text"][name="cdrom"]', container).on('click', replaceCDROM);
-            $('.replace', container).on('click', replaceCDROM);
+            var dev = $(this).data('dev');
+            kimchi.confirm(settings, function() {
+                kimchi.deleteVMStorage({
+                    vm: kimchi.selectedGuest,
+                    dev: dev
+                }, function() {
+                    kimchi.topic('kimchi/vmCDROMDetached').publish();
+                });
+            });
+        });
 
-            $('.detach', container).on('click', function(e) {
-                e.preventDefault();
-                var settings = {
-                    title : i18n['KCHAPI6004M'],
-                    content : i18n['KCHVMCD6001M'],
-                    confirm : i18n['KCHAPI6002M'],
-                    cancel : i18n['KCHAPI6003M']
-                };
+        $(container).on('click', 'button.save', function(event) {
+            event.preventDefault();
+            var path = $('#cdrom-path-' + kimchi.selectedGuestStorage).val();
+            var settings = {
+                vm: kimchi.selectedGuest,
+                dev: kimchi.selectedGuestStorage,
+                path: path
+            };
 
-                var dev = $(this).data('dev');
-                kimchi.confirm(settings, function() {
-                    kimchi.deleteVMStorage({
-                        vm: kimchi.selectedGuest,
-                        dev: dev
-                    }, function() {
-                        kimchi.topic('kimchi/vmCDROMDetached').publish();
-                    });
+            kimchi.replaceVMStorage(settings, function(result) {
+                kimchi.topic('kimchi/vmCDROMReplaced').publish({
+                    result: result
                 });
+            }, function(result) {
+                var errText = result['reason'] ||
+                    result['responseJSON']['reason'];
+                kimchi.message.error(errText);
             });
         });
+
+        $(container).on('click', 'button.cancel', function(event) {
+            event.preventDefault();
+            var rowNode = $('#cdrom-' + kimchi.selectedGuestStorage);
+            toggleCDROM(rowNode);
+        });
     };
 
     var setupInterface = function() {
@@ -172,7 +242,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");
         });
@@ -187,6 +262,8 @@ kimchi.guest_edit_main = function() {
             refreshCDROMs();
         };
 
+        initStorageListeners();
+
         setupInterface();
 
         kimchi.topic('kimchi/vmCDROMAttached').subscribe(onAttached);
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 96d907e..ded892c 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="action-area attach"></button>
+                </div>
+                <div class="body"></div>
             </form>
             <form id="form-guest-edit-interface" class="guest-edit-interface">
                 <div class="header">
@@ -123,14 +120,17 @@
     </footer>
 </div>
 <script id="cdrom-row-tmpl" type="text/html">
-    <div>
-        <div class="guest-edit-wrapper-label">
-            <label for="cdrom-{dev}">{dev}</label>
-        </div>
-        <div class="guest-edit-wrapper-controls">
-            <input id="cdrom-{dev}" name="cdrom" type="text"
+    <div class="item view" id="cdrom-{dev}">
+        <span class="cell dev">
+            <input type="text" readonly="readonly"
+                id="cdrom-dev-{dev}" name="cdrom-dev-{dev}" value="{dev}" />
+        </span>
+        <span class="cell path">
+            <input id="cdrom-path-{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,7 +139,15 @@
                 data-vm="{vm}" data-dev="{dev}"
                 title='$_("Detach")'>
             </button>
-        </div>
+            <button class="guest-edit-cdrom-button save hidden"
+                data-vm="{vm}" data-dev="{dev}"
+                title='$_("Save")'>
+            </button>
+            <button class="guest-edit-cdrom-button cancel hidden"
+                data-vm="{vm}" data-dev="{dev}"
+                title='$_("Cancel")'>
+            </button>
+        </span>
     </div>
 </script>
 <script id="interface-tmpl" type="text/html">
@@ -160,19 +168,22 @@
     <div>
 </script>
 <script id="disk-row-tmpl" type="text/html">
-    <div>
-        <div class="guest-edit-wrapper-label">
-            <label for="disk-{dev}">{dev}</label>
-        </div>
-        <div class="guest-edit-wrapper-controls">
-            <input id="disk-{dev}" name="disk" type="text"
+    <div class="item" id="cdrom-{dev}">
+        <span class="cell dev">
+            <input type="text" readonly="readonly"
+                id="disk-dev-{dev}" name="disk-dev-{dev}" value="{dev}" />
+        </span>
+        <span class="cell path">
+            <input id="disk-path-{dev}" name="path-{dev}" type="text"
                 data-vm="{vm}" data-dev="{dev}"
                 value="{path}" readonly="readonly" />
+        </span>
+        <span class="action-area">
             <button class="guest-edit-cdrom-button detach"
                 data-vm="{vm}" data-dev="{dev}"
                 title="$_("Detach")">
             </button>
-        </div>
+        </span>
     </div>
 </script>
 <script type="text/javascript">
-- 
1.8.1.4

    