[Kimchi-devel] [PATCH 1/6] UI: complete kimchi dialog exchange for frist 4 tabs

4 Mar 2015

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/repository-add.css         |  4 ++++
 ui/css/theme-default/repository-edit.css        |  4 ++++
 ui/css/theme-default/template-edit.css          |  4 ++++
 ui/css/theme-default/template_add.css           |  5 +++++
 ui/js/src/kimchi.repository_add_main.js         | 21 +++++++++++++++++++++
 ui/js/src/kimchi.repository_edit_main.js        | 16 ++++++++++++++++
 ui/js/src/kimchi.storagepool_add_main.js        | 11 +++++++++++
 ui/js/src/kimchi.storagepool_add_volume_main.js | 17 +++++++++++++++++
 ui/js/src/kimchi.template_add_main.js           | 24 ++++++++++++++++++++++++
 ui/js/src/kimchi.template_edit_main.js          | 12 ++++++++++++
 ui/pages/repository-add.html.tmpl               |  3 ++-
 ui/pages/repository-edit.html.tmpl              |  6 ++++--
 ui/pages/storagepool-add-volume.html.tmpl       |  6 ++++--
 ui/pages/storagepool-add.html.tmpl              |  3 ++-
 ui/pages/template-add.html.tmpl                 |  9 ++++++---
 ui/pages/template-edit.html.tmpl                |  6 +++++-
 16 files changed, 141 insertions(+), 10 deletions(-)

diff --git a/ui/css/theme-default/repository-add.css b/ui/css/theme-default/repository-add.css
index 36fbd3e..2dc072b 100644
--- a/ui/css/theme-default/repository-add.css
+++ b/ui/css/theme-default/repository-add.css
@@ -39,4 +39,8 @@
     font-size: 14px;
     font-weight: lighter;
     font-family: 'Helvetica Neue', Helvetica, Arial;
+}
+
+#isMirrorIcon {
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css
index b754794..8a4e679 100644
--- a/ui/css/theme-default/repository-edit.css
+++ b/ui/css/theme-default/repository-edit.css
@@ -86,3 +86,7 @@
 .yum .deb{
     display: none;
 }
+
+.repository-edit-gpg-icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css
index 7abee7c..4a2afa6 100644
--- a/ui/css/theme-default/template-edit.css
+++ b/ui/css/theme-default/template-edit.css
@@ -169,3 +169,7 @@
 #form-template-processor .topology select {
     width: 80px;
 }
+
+#cpu-topology-manual-icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/ui/css/theme-default/template_add.css b/ui/css/theme-default/template_add.css
index e7a1bff..12e95bf 100644
--- a/ui/css/theme-default/template_add.css
+++ b/ui/css/theme-default/template_add.css
@@ -315,3 +315,8 @@
 #vm-image-local-box .body button {
     margin-left: 10px;
 }
+
+#iso-file-check-icon,
+#select-all-remote-iso-icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/ui/js/src/kimchi.repository_add_main.js b/ui/js/src/kimchi.repository_add_main.js
index 2a277fd..99e2eb5 100644
--- a/ui/js/src/kimchi.repository_add_main.js
+++ b/ui/js/src/kimchi.repository_add_main.js
@@ -19,6 +19,27 @@ kimchi.repository_add_main = function() {
 
     var addForm = $('#form-repository-add');
     var addButton = $('#button-repository-add');
+    $("#isMirrorIcon").on("click", function() {
+        if($(this).hasClass("icon-check-empty-1")) {
+            $(this).removeClass("icon-check-empty-1");
+            $(this).addClass("icon-ok-squared");
+            $("#isMirror").prop("checked", true);
+        } else {
+            $(this).removeClass("icon-ok-squared");
+            $(this).addClass("icon-check-empty-1");
+            $("#isMirror").prop("checked", false);
+        }
+    });
+
+    $("#isMirror").on("change", function() {
+        if($(this).is(":checked")) {
+            $("#isMirrorIcon").removeClass("icon-check-empty-1");
+            $("#isMirrorIcon").addClass("icon-ok-squared");
+        } else {
+            $("#isMirrorIcon").removeClass("icon-ok-squared");
+            $("#isMirrorIcon").addClass("icon-check-empty-1");
+        }
+    });
 
     var validateField = function(event) {
         var valid=($(this).val()!=='');
diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js
index a9a0ca6..f976b21 100644
--- a/ui/js/src/kimchi.repository_edit_main.js
+++ b/ui/js/src/kimchi.repository_edit_main.js
@@ -21,6 +21,22 @@ kimchi.repository_edit_main = function() {
 
     var saveButton = $('#repository-edit-button-save');
 
+    var radioOnChange = function() {
+        if($("#repository-edit-gpgcheck-radio-true").is(":checked")) {
+            $("#repository-edit-gpgcheck-radio-icon-true").removeClass("icon-circle-empty");
+            $("#repository-edit-gpgcheck-radio-icon-true").addClass("icon-dot-circled");
+            $("#repository-edit-gpgcheck-radio-icon-false").removeClass("icon-dot-circled");
+            $("#repository-edit-gpgcheck-radio-icon-false").addClass("icon-circle-empty");
+        } else {
+            $("#repository-edit-gpgcheck-radio-icon-false").removeClass("icon-circle-empty");
+            $("#repository-edit-gpgcheck-radio-icon-false").addClass("icon-dot-circled");
+            $("#repository-edit-gpgcheck-radio-icon-true").removeClass("icon-dot-circled");
+            $("#repository-edit-gpgcheck-radio-icon-true").addClass("icon-circle-empty");
+        }
+    };
+
+    $(".repository-edit-gpg").on("change", radioOnChange);
+
     if(kimchi.capabilities['repo_mngt_tool']=="yum") {
         editForm.find('input.deb').prop('disabled', true);
     }
diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 7615e36..4f4426c 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -18,6 +18,17 @@
 
 kimchi.storagepool_add_main = function() {
     kimchi.initStorageAddPage();
+
+    var iscsiAuthOnChange = function() {
+        if($("#authId").is(":checked")) {
+            $("#authIdIcon").removeClass("icon-check-empty-1");
+            $("#authIdIcon").addClass("icon-ok-squared");
+        } else {
+            $("#authIdIcon").removeClass("icon-ok-squared");
+            $("#authIdIcon").addClass("icon-check-empty-1");
+        }
+    };
+    $("#authId").on("change", iscsiAuthOnChange);
     $('#form-pool-add').on('submit', kimchi.addPool);
     $('#pool-doAdd').on('click', kimchi.addPool);
     // 'pool-doAdd' button starts as disabled.
diff --git a/ui/js/src/kimchi.storagepool_add_volume_main.js b/ui/js/src/kimchi.storagepool_add_volume_main.js
index 590ccde..5c31d57 100644
--- a/ui/js/src/kimchi.storagepool_add_volume_main.js
+++ b/ui/js/src/kimchi.storagepool_add_volume_main.js
@@ -24,6 +24,23 @@ kimchi.sp_add_volume_main = function() {
     var localFileBox = $('#volume-input-file');
     var typeRadios = $('input.volume-type');
 
+    //Fix me:
+    //When Upload is enabled, uncomment these line to enbale radio function
+    // var volumeTypeChange = function() {
+    //     if($("#volume-type-download").is(":checked")) {
+    //         $("#volume-type-download-icon").removeClass("icon-circle-empty");
+    //         $("#volume-type-download-icon").addClass("icon-dot-circled");
+    //         $("#volume-type-upload-icon").removeClass("icon-dot-circled");
+    //         $("#volume-type-upload-icon").addClass("icon-circle-empty");
+    //     } else {
+    //         $("#volume-type-download-icon").removeClass("icon-dot-circled");
+    //         $("#volume-type-download-icon").addClass("icon-circle-empty");
+    //         $("#volume-type-upload-icon").removeClass("icon-circle-empty");
+    //         $("#volume-type-upload-icon").addClass("icon-dot-circled");
+    //     }
+    // };
+    // $(".volume-type").on("change", volumeTypeChange);
+
     var isValidURL = function() {
         var url = $(remoteURLBox).val();
         return kimchi.template_check_url(url);
diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 6223c96..de36bec 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -143,6 +143,18 @@ kimchi.template_add_main = function() {
         $('#list-local-iso').empty();
     };
 
+    var isoCheckOnChange = function() {
+        if($("#iso-file-check").is(":checked")) {
+            $("#iso-file-check-icon").removeClass("icon-check-empty-1");
+            $("#iso-file-check-icon").addClass("icon-ok-squared");
+        } else {
+            $("#iso-file-check-icon").removeClass("icon-ok-squared");
+            $("#iso-file-check-icon").addClass("icon-check-empty-1");
+        }
+    };
+
+    $("#iso-file-check").on("change", isoCheckOnChange);
+
     var showLocalIsoField = function(isos) {
         var html = '';
         var template = $('#tmpl-list-local-iso').html();
@@ -251,6 +263,18 @@ kimchi.template_add_main = function() {
     });
 
     //1-2-1 remote iso list
+    var allIsoOnChange = function() {
+        if($("#select-all-remote-iso").is(":checked")) {
+            $("#select-all-remote-iso-icon").removeClass("icon-check-empty-1");
+            $("#select-all-remote-iso-icon").addClass("icon-ok-squared");
+        } else {
+            $("#select-all-remote-iso-icon").removeClass("icon-ok-squared");
+            $("#select-all-remote-iso-icon").addClass("icon-check-empty-1");
+        }
+    };
+
+    $("#select-all-remote-iso").on("change", allIsoOnChange);
+
     var initRemoteIsoField = function() {
         $('#load-remote-iso').show();
         $('#remote-iso-field').hide();
diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index 1149541..c0089d2 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -24,6 +24,18 @@ kimchi.template_edit_main = function() {
     $('#template-name', templateEditMain).val(kimchi.selectedTemplate);
     templateEditMain.tabs();
 
+    var manualOnChange = function() {
+        if($("#cpu-topology-manual-checkbox").is(":checked")) {
+            $("#cpu-topology-manual-icon").removeClass("icon-check-empty-1");
+            $("#cpu-topology-manual-icon").addClass("icon-ok-squared");
+        } else {
+            $("#cpu-topology-manual-icon").removeClass("icon-ok-squared");
+            $("#cpu-topology-manual-icon").addClass("icon-check-empty-1");
+        }
+    };
+
+    $("#cpu-topology-manual-checkbox").on("change", manualOnChange);
+
     var initTemplate = function(template) {
         origDisks =  template.disks;
         origPool = template.storagepool;
diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl
index 5dae725..24ffae3 100644
--- a/ui/pages/repository-add.html.tmpl
+++ b/ui/pages/repository-add.html.tmpl
@@ -65,7 +65,8 @@
                     </div>
                     <div class="field yum">
                         <p class="yum">
-                            <input type="checkbox" name="isMirror" value="true" id="isMirror" />
+                            <input type="checkbox" name="isMirror" value="true" id="isMirror" hidden />
+                            <span id="isMirrorIcon" class="icon-check-empty-1"></span>
                             <label id="isMirrorLabel" for="isMirror">$_("Repository is a mirror")</label>
                         </p>
                     </div>
diff --git a/ui/pages/repository-edit.html.tmpl b/ui/pages/repository-edit.html.tmpl
index 846ff30..a5812b1 100644
--- a/ui/pages/repository-edit.html.tmpl
+++ b/ui/pages/repository-edit.html.tmpl
@@ -91,9 +91,11 @@
                             <label>$_("GPG Check")</label>
                         </div>
                         <div class="repository-edit-wrapper-controls">
-                            <input id="repository-edit-gpgcheck-radio-true" class="yum" name="config[gpgcheck]" type="radio" value="true" />
+                            <input id="repository-edit-gpgcheck-radio-true" class="yum repository-edit-gpg" name="config[gpgcheck]" type="radio" value="true" hidden/>
+                            <label id="repository-edit-gpgcheck-radio-icon-true" class="icon-dot-circled repository-edit-gpg-icon" for="repository-edit-gpgcheck-radio-true"></label>
                             <label for="repository-edit-gpgcheck-radio-true">$_("Yes")</label>
-                            <input id="repository-edit-gpgcheck-radio-false" class="yum" name="config[gpgcheck]" type="radio" value="false" />
+                            <input id="repository-edit-gpgcheck-radio-false" class="yum repository-edit-gpg" name="config[gpgcheck]" type="radio" value="false" hidden/>
+                            <label id="repository-edit-gpgcheck-radio-icon-false" class="icon-circle-empty repository-edit-gpg-icon" for="repository-edit-gpgcheck-radio-false"></label>
                             <label for="repository-edit-gpgcheck-radio-false">$_("No")</label>
                         </div>
                     </div>
diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl
index c8c2492..098a355 100644
--- a/ui/pages/storagepool-add-volume.html.tmpl
+++ b/ui/pages/storagepool-add-volume.html.tmpl
@@ -30,7 +30,8 @@
             <div class="content">
                 <div class="form-section">
                     <h2>
-                        <input type="radio" id="volume-type-download" class="volume-type" name="volumeType" value="download" checked="checked" />
+                        <input type="radio" id="volume-type-download" class="volume-type" name="volumeType" value="download" checked="checked" hidden/>
+                        <label id="volume-type-download-icon" for="volume-type-download" class="icon-dot-circled" style="cursor:pointer"></label>
                         <label for="volume-type-download">
                             $_("Fetch from remote URL")
                         </label>
@@ -47,7 +48,8 @@
                 </div>
                 <div class="form-section">
                     <h2>
-                        <input type="radio" id="volume-type-upload" class="volume-type" name="volumeType" value="upload" disabled/>
+                        <input type="radio" id="volume-type-upload" class="volume-type" name="volumeType" value="upload" hidden disabled/>
+                        <label id="volume-type-upload-icon" for="volume-type-upload" class="icon-circle-empty light-grey" style="cursor:pointer"></label>
                         <label for="volume-type-upload">
                         $_("Upload a file")
                         </label>
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index d1bdc84..fcd1ab3 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -137,7 +137,8 @@
                     </section>
                     <section class="form-section">
                         <div class="field">
-                            <input type="checkbox" id="authId" name="authname">
+                            <input type="checkbox" id="authId" name="authname" hidden>
+                            <label id="authIdIcon" class="icon-check-empty-1" for="authId" style="cursor:pointer"></label>
                             <label for="authId">$_("Add iSCSI Authentication")</label>
                         </div>
                     </section>
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 83b70ea..ed460e7 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -111,8 +111,9 @@
                 <div id="iso-file-field">
                     <h3 class="step-subtitle">
                         <label>
-                            <input type="checkbox" id="iso-file-check">
-                            $_("I want to use a specific ISO file")
+                            <input type="checkbox" id="iso-file-check" hidden>
+                            <label class="icon-check-empty-1 grey" id="iso-file-check-icon" for="iso-file-check"></label>
+                            <label for="iso-file-check">$_("I want to use a specific ISO file")</label>
                         </label>
                     </h3>
                     <div id="iso-file-box" class="custom-iso-field">
@@ -157,7 +158,9 @@
                     </h3>
                     <div class="toolbar">
                         <label class="check-all">
-                            <input type="checkbox" id="select-all-remote-iso">$_("All")
+                            <input type="checkbox" id="select-all-remote-iso" hidden>
+                            <label class="icon-check-empty-1" for="select-all-remote-iso" id="select-all-remote-iso-icon"></label>
+                            <lebel for="select-all-remote-iso">$_("All")</label>
                         </label>
                     </div>
                     <div>
diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
index 53eab25..6108fe8 100644
--- a/ui/pages/template-edit.html.tmpl
+++ b/ui/pages/template-edit.html.tmpl
@@ -118,7 +118,11 @@
             </form>
             <form id="form-template-processor">
                 <div>$_("CPU Number"):<input type="text" value="1" id="cpus"></div>
-                <div class="manual"><input type="checkbox">$_("Manually set CPU topology")</div>
+                <div class="manual">
+                    <input id="cpu-topology-manual-checkbox" type="checkbox" hidden >
+                    <label id="cpu-topology-manual-icon" class="icon-check-empty-1" for="cpu-topology-manual-checkbox"></label>
+                    <label class="text" for="cpu-topology-manual-checkbox">$_("Manually set CPU topology")</label>
+                </div>
                 <div class="topology hide">
                     <div>$_("Cores"):<input type="text" value="1"  id="cores"></div>
                     <div>$_("Threads"):<select id="threads"></select></div>
-- 
2.1.0

    