[PATCH 0/2] Change radios and checkboxes in first 4 dialogs
1) Add icons to the help text 2) Change all the radios and checkboxes in frist 4 tabs of dialog Wen Wang (2): UI Add text help icon to dialog of first 4 tabs UI: complete kimchi dialog exchange for frist 4 tabs ui/css/theme-default/base.css | 4 +++ ui/css/theme-default/button.css | 5 +++ ui/css/theme-default/repository-add.css | 4 +++ ui/css/theme-default/repository-edit.css | 6 ++-- 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/guest-add.html.tmpl | 9 ++++-- ui/pages/report-add.html.tmpl | 1 + ui/pages/report-rename.html.tmpl | 1 + ui/pages/repository-add.html.tmpl | 18 +++++++---- ui/pages/repository-edit.html.tmpl | 6 ++-- ui/pages/storagepool-add-volume.html.tmpl | 14 ++++++--- ui/pages/storagepool-add.html.tmpl | 41 +++++++++++++++---------- ui/pages/template-add.html.tmpl | 9 ++++-- ui/pages/template-edit.html.tmpl | 6 +++- 21 files changed, 196 insertions(+), 38 deletions(-) -- 2.1.0
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/base.css | 4 ++++ ui/css/theme-default/button.css | 5 ++++ ui/css/theme-default/repository-edit.css | 2 -- ui/pages/guest-add.html.tmpl | 9 +++++--- ui/pages/report-add.html.tmpl | 1 + ui/pages/report-rename.html.tmpl | 1 + ui/pages/repository-add.html.tmpl | 15 ++++++++---- ui/pages/storagepool-add-volume.html.tmpl | 8 ++++--- ui/pages/storagepool-add.html.tmpl | 38 +++++++++++++++++++------------ 9 files changed, 55 insertions(+), 28 deletions(-) diff --git a/ui/css/theme-default/base.css b/ui/css/theme-default/base.css index bbcefbb..1104f55 100644 --- a/ui/css/theme-default/base.css +++ b/ui/css/theme-default/base.css @@ -66,3 +66,7 @@ html, body { .light { font-weight: lighter; } + +.help-inline { + display: inline-block; +} \ No newline at end of file diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css index b0589f3..3bd49c0 100644 --- a/ui/css/theme-default/button.css +++ b/ui/css/theme-default/button.css @@ -440,6 +440,11 @@ cursor: pointer; } +.btn-normal span { + font-family: 'Helvetica Neue', Helvetica, Arial; + font-weight: lighter; +} + .btn-normal:not([disabled]):hover { background: #EEEEEE; } diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css index 31fbe30..b754794 100644 --- a/ui/css/theme-default/repository-edit.css +++ b/ui/css/theme-default/repository-edit.css @@ -38,8 +38,6 @@ line-height: 30px; font-size: 14px; vertical-align: top; - font-weight: lighter; - font-family: 'Helvetica Neue', Helvetica, Arial; } .repository-edit-wrapper-label { diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl index c24d850..8a0c60a 100644 --- a/ui/pages/guest-add.html.tmpl +++ b/ui/pages/guest-add.html.tmpl @@ -33,8 +33,9 @@ <section class="form-section"> <h2>1. $_("Virtual Machine Name")</h2> <div class="field"> - <input type="text" class="text" style="width: 300px" name="name"> - <p class="text-help"> + <input type="text" class="text" style="width: 300px" name="name"><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.") </p> </div> @@ -44,12 +45,14 @@ <div class="field"> <div class="text-help"> <div id="prompt-create-template" class="hidden"> - <div class="text-help">$_("Please create a template first.")</div> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <div class="text-help help-inline">$_("Please create a template first.")</div> <a id="btn-create-template" class="btn-normal" href="templates.html"> <span class="text">$_("Create a Template")</span> </a> </div> <div id="prompt-choose-template" class="hidden"> + <span class="icon-info-circled light-grey c1"></span> <span class="text-help">$_("Please choose a template.")</span> </div> </div> diff --git a/ui/pages/report-add.html.tmpl b/ui/pages/report-add.html.tmpl index aad11df..6dc31ca 100644 --- a/ui/pages/report-add.html.tmpl +++ b/ui/pages/report-add.html.tmpl @@ -34,6 +34,7 @@ </h2> <div class="field"> <input type="text" class="text" id="report-name-textbox" name="name" /> + <span class="icon-info-circled light-grey c1"></span> <span class="info-add-debug-report"> $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").") </span> diff --git a/ui/pages/report-rename.html.tmpl b/ui/pages/report-rename.html.tmpl index 03d1f49..d70c279 100644 --- a/ui/pages/report-rename.html.tmpl +++ b/ui/pages/report-rename.html.tmpl @@ -34,6 +34,7 @@ </h2> <div class="field"> <input type="text" class="text" id="report-name-textbox" name="name" /> + <span class="icon-info-circled light-grey c1"></span> <span class="info-debug-report-rename"> $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").") </span> diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl index ca2bcb1..5dae725 100644 --- a/ui/pages/repository-add.html.tmpl +++ b/ui/pages/repository-add.html.tmpl @@ -34,7 +34,8 @@ <div class="textbox-wrapper"> <input type="text" class="text" name="repo_id" /> </div> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Single word, unique identifier for the repository.") </p> </div> @@ -45,7 +46,8 @@ <div class="textbox-wrapper"> <input type="text" class="text" name="config[repo_name]" /> </div> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Textual name for the repository.") </p> </div> @@ -56,7 +58,8 @@ <div class="textbox-wrapper"> <input type="text" class="text required" name="baseurl" /> </div> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("URL to the repository. Supported protocols are http, ftp, and file.") </p> </div> @@ -73,7 +76,8 @@ <div class="textbox-wrapper"> <input type="text" class="text" name="config[dist]" /> </div> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Distribution of the DEB repository.") </p> </div> @@ -84,7 +88,8 @@ <div class="textbox-wrapper"> <input type="text" class="text" name="config[comps]" /> </div> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("List of components in DEB repository.") </p> </div> diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl index e7ea1e8..c8c2492 100644 --- a/ui/pages/storagepool-add-volume.html.tmpl +++ b/ui/pages/storagepool-add-volume.html.tmpl @@ -38,8 +38,9 @@ <div class="field"> <div class="textbox-wrapper"> <input type="text" id="volume-remote-url" class="text volume-input download" name="volumeRemoteURL" /> - </div> - <p class="text-help"> + </div><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Enter the remote URL here.") </p> </div> @@ -52,7 +53,8 @@ </label> </h2> <div class="field"> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Choose the file you want to upload.") </p> <div class="textbox-wrapper"> diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl index 0b07f07..d1bdc84 100644 --- a/ui/pages/storagepool-add.html.tmpl +++ b/ui/pages/storagepool-add.html.tmpl @@ -32,8 +32,9 @@ <section class="form-section"> <h2>1. $_("Storage Pool Name")</h2> <div class="field"> - <input id="poolId" required="required" type="text" class="text storage-base-input-width" name="name"> - <p class="text-help"> + <input id="poolId" required="required" type="text" class="text storage-base-input-width" name="name"><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("The name used to identify the storage pools, and it should not be empty.") </p> </div> @@ -55,10 +56,12 @@ <section class="form-section"> <h2>3. $_("Storage Path")</h2> <div class="field"> - <input id="pathId" type="text" class="text storage-base-input-width"> - <p class="text-help"> - $_("The path of the Storage Pool. Each Storage Pool must have a unique path.")</p> - <p class="text-help"> + <input id="pathId" type="text" class="text storage-base-input-width"><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> + $_("The path of the Storage Pool. Each Storage Pool must have a unique path.")</p><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Kimchi will try to create the directory when it does not already exist in your system.")</p> </div> <div class="clear"></div> @@ -74,8 +77,9 @@ <ul id="nfs-server-used"> </ul> </div> - </div> - <p class="text-help"> + </div><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("NFS server IP or hostname. It can be input or chosen from history.")</p> </div> </section> @@ -88,8 +92,9 @@ <ul id="nfs-server-target"> </ul> </div> - </div> - <p class="text-help">$_("The NFS exported path on NFS server.")</p> + </div><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline">$_("The NFS exported path on NFS server.")</p> </div> </section> </div> @@ -97,7 +102,8 @@ <section class="form-section storageType"> <h2>3. $_("Device path")</h2> <div class="host-partition"> - <p class="text-help"> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("Looking for available partitions ...") <img src = "../images/theme-default/loading.gif" /> </p> @@ -112,8 +118,9 @@ <input id="iscsiserverId" type="text" placeholder="$_("Server")"> <div class="popover"><ul class="option select-list"></ul></div> </span> - <input id="iscsiportId" placeholder="$_("Port")" type="text" class="text storage-port-width" maxlength="4"> - <p class="text-help"> + <input id="iscsiportId" placeholder="$_("Port")" type="text" class="text storage-port-width" maxlength="4"><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("iSCSI server IP or hostname. It should not be empty.")</p> </div> </section> @@ -123,8 +130,9 @@ <span class="filter-select popable" id="iSCSITarget"> <input id="iscsiTargetId" type="text"> <div class="popover"><ul class="option select-list"></ul></div> - </span> - <p class="text-help">$_("The iSCSI target on iSCSI server")</p> + </span><br> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline">$_("The iSCSI target on iSCSI server")</p> </div> </section> <section class="form-section"> -- 2.1.0
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
I could not apply this patch set into next branch to test. Could you, please, rebase it on top of next and resend the patch set? Thanks, Aline Manera On 12/02/2015 07:39, Wen Wang wrote:
1) Add icons to the help text 2) Change all the radios and checkboxes in frist 4 tabs of dialog
Wen Wang (2): UI Add text help icon to dialog of first 4 tabs UI: complete kimchi dialog exchange for frist 4 tabs
ui/css/theme-default/base.css | 4 +++ ui/css/theme-default/button.css | 5 +++ ui/css/theme-default/repository-add.css | 4 +++ ui/css/theme-default/repository-edit.css | 6 ++-- 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/guest-add.html.tmpl | 9 ++++-- ui/pages/report-add.html.tmpl | 1 + ui/pages/report-rename.html.tmpl | 1 + ui/pages/repository-add.html.tmpl | 18 +++++++---- ui/pages/repository-edit.html.tmpl | 6 ++-- ui/pages/storagepool-add-volume.html.tmpl | 14 ++++++--- ui/pages/storagepool-add.html.tmpl | 41 +++++++++++++++---------- ui/pages/template-add.html.tmpl | 9 ++++-- ui/pages/template-edit.html.tmpl | 6 +++- 21 files changed, 196 insertions(+), 38 deletions(-)
Hi Aline, This should be applied after the dialog changes. I have added the help icon in the latest patch and will sent a new version of this patch. Pls ignore this submission. On 2/27/2015 10:23 PM, Aline Manera wrote:
I could not apply this patch set into next branch to test. Could you, please, rebase it on top of next and resend the patch set?
Thanks, Aline Manera
On 12/02/2015 07:39, Wen Wang wrote:
1) Add icons to the help text 2) Change all the radios and checkboxes in frist 4 tabs of dialog
Wen Wang (2): UI Add text help icon to dialog of first 4 tabs UI: complete kimchi dialog exchange for frist 4 tabs
ui/css/theme-default/base.css | 4 +++ ui/css/theme-default/button.css | 5 +++ ui/css/theme-default/repository-add.css | 4 +++ ui/css/theme-default/repository-edit.css | 6 ++-- 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/guest-add.html.tmpl | 9 ++++-- ui/pages/report-add.html.tmpl | 1 + ui/pages/report-rename.html.tmpl | 1 + ui/pages/repository-add.html.tmpl | 18 +++++++---- ui/pages/repository-edit.html.tmpl | 6 ++-- ui/pages/storagepool-add-volume.html.tmpl | 14 ++++++--- ui/pages/storagepool-add.html.tmpl | 41 +++++++++++++++---------- ui/pages/template-add.html.tmpl | 9 ++++-- ui/pages/template-edit.html.tmpl | 6 +++- 21 files changed, 196 insertions(+), 38 deletions(-)
participants (2)
-
Aline Manera -
Wen Wang