[Kimchi-devel] [PATCH 2/2] UI: complete kimchi dialog exchange for frist 4 tabs
Wen Wang
wenwang at linux.vnet.ibm.com
Thu Feb 12 09:39:16 UTC 2015
Signed-off-by: Wen Wang <wenwang at 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
More information about the Kimchi-devel
mailing list