[Kimchi-devel] [PATCH 2/2] Eject cdrom: Update html and css for eject cdrom

[lvroyce at linux.vnet.ibm.com]

From: Royce Lv <lvroyce at linux.vnet.ibm.com>

Add new button for eject and add the eject button css.

Signed-off-by: Royce Lv <lvroyce at linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-edit.css  | 40 ++++++++++++++++++++++++++++++++++++
 ui/css/theme-default/guest-media.css |  2 +-
 ui/pages/guest-cdrom-edit.html.tmpl  |  4 ++--
 ui/pages/guest-media.html.tmpl       |  8 ++++++++
 4 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 36f7f75..9db0ccd 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -117,6 +117,26 @@
     background-position: 0 -108px;
 }
 
+.guest-edit-cdrom-button.insert {
+    background-position: -27px 0;
+}
+
+.guest-edit-cdrom-button.insert:hover {
+    background-position: -27px -27px;
+}
+
+.guest-edit-cdrom-button.insert:focus {
+    background-position: -27px -54px;
+}
+
+.guest-edit-cdrom-button.insert:active {
+    background-position: -27px -81px;
+}
+
+.guest-edit-cdrom-button.insert[disabled] {
+    background-position: -27px -108px;
+}
+
 .guest-edit-cdrom-button.replace {
     background-position: -27px 0;
 }
@@ -137,6 +157,26 @@
     background-position: -27px -108px;
 }
 
+.guest-edit-cdrom-button.eject {
+    background-position: -54px 0;
+}
+
+.guest-edit-cdrom-button.eject:hover {
+    background-position: -54px -27px;
+}
+
+.guest-edit-cdrom-button.eject:focus {
+    background-position: -54px -54px;
+}
+
+.guest-edit-cdrom-button.eject:active {
+    background-position: -54px -81px;
+}
+
+.guest-edit-cdrom-button.eject[disabled] {
+    background-position: -54px -108px;
+}
+
 .guest-edit-cdrom-button.detach {
     background-position: -54px 0;
 }
diff --git a/ui/css/theme-default/guest-media.css b/ui/css/theme-default/guest-media.css
index 3aee8ca..9eabebc 100644
--- a/ui/css/theme-default/guest-media.css
+++ b/ui/css/theme-default/guest-media.css
@@ -38,5 +38,5 @@
 }
 
 #form-guest-media .guest-edit-cdrom-row-container input[type="text"] {
-    width: 437px;
+    width: 400px;
 }
diff --git a/ui/pages/guest-cdrom-edit.html.tmpl b/ui/pages/guest-cdrom-edit.html.tmpl
index b95119f..9b74c44 100644
--- a/ui/pages/guest-cdrom-edit.html.tmpl
+++ b/ui/pages/guest-cdrom-edit.html.tmpl
@@ -23,7 +23,7 @@
 #silent _t = t.gettext
 <div id="guest-cdrom-edit-window" class="window">
     <header>
-        <h1 class="title">$_("Replace a CDROM of VM")</h1>
+        <h1 class="title">$_("Insert/Replace a CDROM of VM")</h1>
         <div class="close">X</div>
     </header>
     <div class="content">
@@ -60,7 +60,7 @@
     <footer>
         <div class="btn-group">
             <button id="vm-cdrom-button-edit" class="btn-normal" disabled="disabled">
-                <span class="text">$_("Replace")</span>
+                <span class="text">$_("Submit")</span>
             </button>
         </div>
     </footer>
diff --git a/ui/pages/guest-media.html.tmpl b/ui/pages/guest-media.html.tmpl
index 83ad6ab..4d6d023 100644
--- a/ui/pages/guest-media.html.tmpl
+++ b/ui/pages/guest-media.html.tmpl
@@ -44,10 +44,18 @@
             <input id="cdrom-{dev}" name="cdrom" type="text"
                 data-vm="{vm}" data-dev="{dev}"
                 value="{path}" readonly="readonly" />
+            <button class="guest-edit-cdrom-button eject"
+                data-vm="{vm}" data-dev="{dev}"
+                title="$_("Eject")">
+            </button>
             <button class="guest-edit-cdrom-button replace"
                 data-vm="{vm}" data-dev="{dev}"
                 title="$_("Replace")">
             </button>
+            <button class="guest-edit-cdrom-button insert"
+                data-vm="{vm}" data-dev="{dev}"
+                title="$_("Insert")">
+            </button>
         </div>
     </div>
 </script>
-- 
1.8.3.2