[PATCH 0/6] Kimchi Dialog refine patch
1) Change radio buttons in all dialogs 2) Change checkboxes in all dialogs 3) Change textbox in all dialogs 4) Change all the buttons in all dialogs 5) Change template display to new kimchi UI Wen Wang (6): UI: complete kimchi dialog exchange for frist 4 tabs UI: kimchi Host dialog Refine. UI: Chnage dialog radio and checkbox to new kimchi style UI: Guest tab dialog refine UI: Template dialog refine UI: Storage dialog refined ui/css/theme-default/guest-edit.css | 38 +++++++-- ui/css/theme-default/network.css | 9 +++ ui/css/theme-default/report-add.css | 4 +- ui/css/theme-default/report-rename.css | 4 +- ui/css/theme-default/repository-add.css | 8 +- ui/css/theme-default/repository-edit.css | 8 +- ui/css/theme-default/storage.css | 6 ++ ui/css/theme-default/template-edit.css | 12 +-- ui/css/theme-default/template_add.css | 100 +++++++++--------------- ui/css/theme-default/window.css | 2 +- ui/js/src/kimchi.guest_edit_main.js | 15 +--- ui/js/src/kimchi.network.js | 18 ++++- 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 | 33 +++++++- ui/js/src/kimchi.template_edit_main.js | 12 +++ ui/pages/guest-edit.html.tmpl | 15 +++- ui/pages/guest-storage-add.html.tmpl | 30 ++++--- ui/pages/i18n.json.tmpl | 2 + 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/tabs/network.html.tmpl | 14 ++-- ui/pages/template-add.html.tmpl | 82 ++++++++++--------- ui/pages/template-edit.html.tmpl | 6 +- 28 files changed, 339 insertions(+), 162 deletions(-) -- 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
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/report-add.css | 4 ++-- ui/css/theme-default/report-rename.css | 4 ++-- ui/css/theme-default/repository-add.css | 4 ++-- ui/css/theme-default/repository-edit.css | 4 ++-- ui/css/theme-default/window.css | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/ui/css/theme-default/report-add.css b/ui/css/theme-default/report-add.css index b1c8ed3..f004f22 100644 --- a/ui/css/theme-default/report-add.css +++ b/ui/css/theme-default/report-add.css @@ -16,8 +16,8 @@ * limitations under the License. */ #report-add-window { - height: 300px; - width: 400px; + height: 250px; + width: 550px; } #report-add-window .field { diff --git a/ui/css/theme-default/report-rename.css b/ui/css/theme-default/report-rename.css index 1bf73d9..0dd254c 100644 --- a/ui/css/theme-default/report-rename.css +++ b/ui/css/theme-default/report-rename.css @@ -16,8 +16,8 @@ * limitations under the License. */ #report-rename-window { - height: 300px; - width: 400px; + height: 250px; + width: 550px; } #report-rename-window .field { diff --git a/ui/css/theme-default/repository-add.css b/ui/css/theme-default/repository-add.css index 2dc072b..6824219 100644 --- a/ui/css/theme-default/repository-add.css +++ b/ui/css/theme-default/repository-add.css @@ -16,8 +16,8 @@ * limitations under the License. */ #repository-add-window { - height: 500px; - width: 1000px; + height: 450px; + width: 550px; } #repository-add-window span.required { diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css index 8a4e679..4be1930 100644 --- a/ui/css/theme-default/repository-edit.css +++ b/ui/css/theme-default/repository-edit.css @@ -17,7 +17,7 @@ */ .yum div#repository-edit-window { height: 680px; - width: 1000px; + width: 550px; } .deb div#repository-edit-window { @@ -29,7 +29,7 @@ .repository-edit-fieldset { float: left; padding: 0 30px; - width: 95%; + width: 92%; } .repository-edit-wrapper-label, .repository-edit-wrapper-controls { diff --git a/ui/css/theme-default/window.css b/ui/css/theme-default/window.css index f699ebd..96d3b46 100644 --- a/ui/css/theme-default/window.css +++ b/ui/css/theme-default/window.css @@ -76,7 +76,7 @@ bottom: 0; overflow-y: auto; overflow-x: hidden; - margin: 48px 0 56px; + margin: 48px 20px 56px 0; } .window>header>.title, -- 2.1.0
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 9 +++++++++ ui/js/src/kimchi.network.js | 18 +++++++++++++++++- ui/pages/tabs/network.html.tmpl | 14 +++++++++----- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index e5a8e47..00e71c2 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -264,4 +264,13 @@ #networkConfig { padding-left: 30px; +} + +.vlan-check-section { + height: 18px; + line-height: 18px; +} + +.vlan-check-section label { + vertical-align: middle; } \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 81d5dd0..3284231 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() { data.connection = "bridge"; data.interface = network.interface; if ($("#enableVlan").prop("checked")) { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); data.vlan_id = network.vlan_id; if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) { kimchi.message.error.code('KCHNET6001E'); @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() { "border-radius": "0", "opacity": "1" }); + $("input:radio[name=networkType]").on("change", function() { + $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled"); + $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty"); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); + }); kimchi.setupNetworkFormEvent(); }; @@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) { $("#networkFormOk span").text(i18n.KCHAPI6008M); okCallback(); }); - $("#enableVlan").on("click", function() { + $("#enableVlan").on("change", function() { $("#networkVlanID").prop("disabled", !this.checked); if (!this.checked) { + $("#enableVlanIcon").removeClass("icon-ok-squared"); + $("#enableVlanIcon").addClass("icon-check-empty-1"); $("#networkVlanID").slideUp(100); $("#labelNetworkVlanID").slideUp(100); $("#networkVlanID").val(""); } else { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); $("#networkVlanID").slideDown(100); $("#labelNetworkVlanID").slideDown(100); } @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { $("#networkTypeBri").prop("checked", isInterfaceAvail); $("#networkTypeBri").prop("disabled", !isInterfaceAvail); $("#networkTypeNat").prop("checked", !isInterfaceAvail); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); $("#networkBriDisabledLabel").show(); diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index e2b1639..727f35d 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -58,16 +58,19 @@ <div class="section-header">2. $_("Network Type")</div> <div class="section-content"> <div class="input-container"> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" hidden /> + <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label> <label for="networkTypeIso">$_("Isolated: no external network connection")</label> </div> <div class="input-container"> - <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" hidden /> + <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label> <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> </div> <div class="input-container"> <div class="bridged-inline"> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden /> + <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label> </div> <div class="bridged-inline"> <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> @@ -91,8 +94,9 @@ </div> </div> </div> - <div> - <input id="enableVlan" type="checkbox" value="" /> + <div class="vlan-check-section"> + <input id="enableVlan" type="checkbox" value="" hidden /> + <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label> <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> </div> <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> -- 2.1.0
I don't think it is working correctly. I can not see the check boxes in the Template Edit dialog or in the Network creation dialog - only the label is shown. On 04/03/2015 07:07, Wen Wang wrote:
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 9 +++++++++ ui/js/src/kimchi.network.js | 18 +++++++++++++++++- ui/pages/tabs/network.html.tmpl | 14 +++++++++----- 3 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index e5a8e47..00e71c2 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -264,4 +264,13 @@
#networkConfig { padding-left: 30px; +} + +.vlan-check-section { + height: 18px; + line-height: 18px; +} + +.vlan-check-section label { + vertical-align: middle; } \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 81d5dd0..3284231 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() { data.connection = "bridge"; data.interface = network.interface; if ($("#enableVlan").prop("checked")) { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); data.vlan_id = network.vlan_id; if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) { kimchi.message.error.code('KCHNET6001E'); @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() { "border-radius": "0", "opacity": "1" }); + $("input:radio[name=networkType]").on("change", function() { + $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled"); + $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty"); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); + }); kimchi.setupNetworkFormEvent(); };
@@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) { $("#networkFormOk span").text(i18n.KCHAPI6008M); okCallback(); }); - $("#enableVlan").on("click", function() { + $("#enableVlan").on("change", function() { $("#networkVlanID").prop("disabled", !this.checked); if (!this.checked) { + $("#enableVlanIcon").removeClass("icon-ok-squared"); + $("#enableVlanIcon").addClass("icon-check-empty-1"); $("#networkVlanID").slideUp(100); $("#labelNetworkVlanID").slideUp(100); $("#networkVlanID").val(""); } else { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); $("#networkVlanID").slideDown(100); $("#labelNetworkVlanID").slideDown(100); } @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { $("#networkTypeBri").prop("checked", isInterfaceAvail); $("#networkTypeBri").prop("disabled", !isInterfaceAvail); $("#networkTypeNat").prop("checked", !isInterfaceAvail); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); $("#networkBriDisabledLabel").show(); diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index e2b1639..727f35d 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -58,16 +58,19 @@ <div class="section-header">2. $_("Network Type")</div> <div class="section-content"> <div class="input-container"> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" hidden /> + <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label> <label for="networkTypeIso">$_("Isolated: no external network connection")</label> </div> <div class="input-container"> - <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" hidden /> + <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label> <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> </div> <div class="input-container"> <div class="bridged-inline"> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden /> + <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label> </div> <div class="bridged-inline"> <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> @@ -91,8 +94,9 @@ </div> </div> </div> - <div> - <input id="enableVlan" type="checkbox" value="" /> + <div class="vlan-check-section"> + <input id="enableVlan" type="checkbox" value="" hidden /> + <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label> <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> </div> <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
Hi Aline, You need to add fontello into the code since we are using their icons On 3/5/2015 12:50 AM, Aline Manera wrote:
I don't think it is working correctly. I can not see the check boxes in the Template Edit dialog or in the Network creation dialog - only the label is shown.
On 04/03/2015 07:07, Wen Wang wrote:
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 9 +++++++++ ui/js/src/kimchi.network.js | 18 +++++++++++++++++- ui/pages/tabs/network.html.tmpl | 14 +++++++++----- 3 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index e5a8e47..00e71c2 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -264,4 +264,13 @@
#networkConfig { padding-left: 30px; +} + +.vlan-check-section { + height: 18px; + line-height: 18px; +} + +.vlan-check-section label { + vertical-align: middle; } \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 81d5dd0..3284231 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() { data.connection = "bridge"; data.interface = network.interface; if ($("#enableVlan").prop("checked")) { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); data.vlan_id = network.vlan_id; if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) { kimchi.message.error.code('KCHNET6001E'); @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() { "border-radius": "0", "opacity": "1" }); + $("input:radio[name=networkType]").on("change", function() { + $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled"); + $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty"); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); + }); kimchi.setupNetworkFormEvent(); };
@@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) { $("#networkFormOk span").text(i18n.KCHAPI6008M); okCallback(); }); - $("#enableVlan").on("click", function() { + $("#enableVlan").on("change", function() { $("#networkVlanID").prop("disabled", !this.checked); if (!this.checked) { + $("#enableVlanIcon").removeClass("icon-ok-squared"); + $("#enableVlanIcon").addClass("icon-check-empty-1"); $("#networkVlanID").slideUp(100); $("#labelNetworkVlanID").slideUp(100); $("#networkVlanID").val(""); } else { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); $("#networkVlanID").slideDown(100); $("#labelNetworkVlanID").slideDown(100); } @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { $("#networkTypeBri").prop("checked", isInterfaceAvail); $("#networkTypeBri").prop("disabled", !isInterfaceAvail); $("#networkTypeNat").prop("checked", !isInterfaceAvail); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); $("#networkBriDisabledLabel").show(); diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index e2b1639..727f35d 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -58,16 +58,19 @@ <div class="section-header">2. $_("Network Type")</div> <div class="section-content"> <div class="input-container"> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" hidden /> + <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label> <label for="networkTypeIso">$_("Isolated: no external network connection")</label> </div> <div class="input-container"> - <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" hidden /> + <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label> <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> </div> <div class="input-container"> <div class="bridged-inline"> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden /> + <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label> </div> <div class="bridged-inline"> <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> @@ -91,8 +94,9 @@ </div> </div> </div> - <div> - <input id="enableVlan" type="checkbox" value="" /> + <div class="vlan-check-section"> + <input id="enableVlan" type="checkbox" value="" hidden /> + <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label> <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> </div> <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
On 05/03/2015 02:17, Wen Wang wrote:
Hi Aline,
You need to add fontello into the code since we are using their icons
The fontello is already merged on next branch, right? Do I need to do something else?
On 3/5/2015 12:50 AM, Aline Manera wrote:
I don't think it is working correctly. I can not see the check boxes in the Template Edit dialog or in the Network creation dialog - only the label is shown.
On 04/03/2015 07:07, Wen Wang wrote:
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 9 +++++++++ ui/js/src/kimchi.network.js | 18 +++++++++++++++++- ui/pages/tabs/network.html.tmpl | 14 +++++++++----- 3 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index e5a8e47..00e71c2 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -264,4 +264,13 @@
#networkConfig { padding-left: 30px; +} + +.vlan-check-section { + height: 18px; + line-height: 18px; +} + +.vlan-check-section label { + vertical-align: middle; } \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 81d5dd0..3284231 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() { data.connection = "bridge"; data.interface = network.interface; if ($("#enableVlan").prop("checked")) { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); data.vlan_id = network.vlan_id; if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) { kimchi.message.error.code('KCHNET6001E'); @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() { "border-radius": "0", "opacity": "1" }); + $("input:radio[name=networkType]").on("change", function() { + $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled"); + $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty"); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); + }); kimchi.setupNetworkFormEvent(); };
@@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) { $("#networkFormOk span").text(i18n.KCHAPI6008M); okCallback(); }); - $("#enableVlan").on("click", function() { + $("#enableVlan").on("change", function() { $("#networkVlanID").prop("disabled", !this.checked); if (!this.checked) { + $("#enableVlanIcon").removeClass("icon-ok-squared"); + $("#enableVlanIcon").addClass("icon-check-empty-1"); $("#networkVlanID").slideUp(100); $("#labelNetworkVlanID").slideUp(100); $("#networkVlanID").val(""); } else { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); $("#networkVlanID").slideDown(100); $("#labelNetworkVlanID").slideDown(100); } @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { $("#networkTypeBri").prop("checked", isInterfaceAvail); $("#networkTypeBri").prop("disabled", !isInterfaceAvail); $("#networkTypeNat").prop("checked", !isInterfaceAvail); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); $("#networkBriDisabledLabel").show(); diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index e2b1639..727f35d 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -58,16 +58,19 @@ <div class="section-header">2. $_("Network Type")</div> <div class="section-content"> <div class="input-container"> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" hidden /> + <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label> <label for="networkTypeIso">$_("Isolated: no external network connection")</label> </div> <div class="input-container"> - <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" hidden /> + <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label> <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> </div> <div class="input-container"> <div class="bridged-inline"> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden /> + <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label> </div> <div class="bridged-inline"> <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> @@ -91,8 +94,9 @@ </div> </div> </div> - <div> - <input id="enableVlan" type="checkbox" value="" /> + <div class="vlan-check-section"> + <input id="enableVlan" type="checkbox" value="" hidden /> + <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label> <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> </div> <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
The fontello folder is already in the folder ./ui/ and the reference is right. I think the problem is caused by the Makefile.am. We need to have fontello folder built in kimchi folder since we are using href to find it. Please try to fix this by changing "Makefile.am". On 3/5/2015 8:05 PM, Aline Manera wrote:
On 05/03/2015 02:17, Wen Wang wrote:
Hi Aline,
You need to add fontello into the code since we are using their icons
The fontello is already merged on next branch, right? Do I need to do something else?
On 3/5/2015 12:50 AM, Aline Manera wrote:
I don't think it is working correctly. I can not see the check boxes in the Template Edit dialog or in the Network creation dialog - only the label is shown.
On 04/03/2015 07:07, Wen Wang wrote:
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 9 +++++++++ ui/js/src/kimchi.network.js | 18 +++++++++++++++++- ui/pages/tabs/network.html.tmpl | 14 +++++++++----- 3 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index e5a8e47..00e71c2 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -264,4 +264,13 @@
#networkConfig { padding-left: 30px; +} + +.vlan-check-section { + height: 18px; + line-height: 18px; +} + +.vlan-check-section label { + vertical-align: middle; } \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 81d5dd0..3284231 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() { data.connection = "bridge"; data.interface = network.interface; if ($("#enableVlan").prop("checked")) { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); data.vlan_id = network.vlan_id; if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) { kimchi.message.error.code('KCHNET6001E'); @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() { "border-radius": "0", "opacity": "1" }); + $("input:radio[name=networkType]").on("change", function() { + $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled"); + $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty"); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); + }); kimchi.setupNetworkFormEvent(); };
@@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) { $("#networkFormOk span").text(i18n.KCHAPI6008M); okCallback(); }); - $("#enableVlan").on("click", function() { + $("#enableVlan").on("change", function() { $("#networkVlanID").prop("disabled", !this.checked); if (!this.checked) { + $("#enableVlanIcon").removeClass("icon-ok-squared"); + $("#enableVlanIcon").addClass("icon-check-empty-1"); $("#networkVlanID").slideUp(100); $("#labelNetworkVlanID").slideUp(100); $("#networkVlanID").val(""); } else { + $("#enableVlanIcon").removeClass("icon-check-empty-1"); + $("#enableVlanIcon").addClass("icon-ok-squared"); $("#networkVlanID").slideDown(100); $("#labelNetworkVlanID").slideDown(100); } @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { $("#networkTypeBri").prop("checked", isInterfaceAvail); $("#networkTypeBri").prop("disabled", !isInterfaceAvail); $("#networkTypeNat").prop("checked", !isInterfaceAvail); + var networkChecked = $("input:radio[name=networkType]:checked").attr("id"); + $("#" + networkChecked + "Icon").removeClass("icon-circle-empty"); + $("#" + networkChecked + "Icon").addClass("icon-dot-circled"); if (!isInterfaceAvail) { kimchi.enableBridgeOptions(false); $("#networkBriDisabledLabel").show(); diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index e2b1639..727f35d 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -58,16 +58,19 @@ <div class="section-header">2. $_("Network Type")</div> <div class="section-content"> <div class="input-container"> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" hidden /> + <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label> <label for="networkTypeIso">$_("Isolated: no external network connection")</label> </div> <div class="input-container"> - <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" hidden /> + <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label> <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> </div> <div class="input-container"> <div class="bridged-inline"> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden /> + <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label> </div> <div class="bridged-inline"> <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> @@ -91,8 +94,9 @@ </div> </div> </div> - <div> - <input id="enableVlan" type="checkbox" value="" /> + <div class="vlan-check-section"> + <input id="enableVlan" type="checkbox" value="" hidden /> + <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label> <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> </div> <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/guest-edit.css | 38 +++++++++++++++++++++++++++++++----- ui/js/src/kimchi.guest_edit_main.js | 15 +++----------- ui/pages/guest-edit.html.tmpl | 15 +++++++++++--- ui/pages/guest-storage-add.html.tmpl | 30 ++++++++++++++++------------ ui/pages/i18n.json.tmpl | 2 ++ 5 files changed, 68 insertions(+), 32 deletions(-) diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css index 2efeed1..3641a28 100644 --- a/ui/css/theme-default/guest-edit.css +++ b/ui/css/theme-default/guest-edit.css @@ -15,10 +15,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +.guest-inline { + display: inline-block; +} + #guest-edit-window { font-size: 13px; height: 420px; - width: 820px; + width: 840px; } #guest-edit-window #action-button-container { @@ -142,6 +147,10 @@ margin-left: 2px; } +#form-guest-edit-snapshot .ui-button-text-only .ui-button-text { + padding: 0; +} + .guest-edit-snapshot .name { width: 400px; } @@ -150,6 +159,13 @@ width: 270px; } +#form-guest-edit-snapshot .add { + background: #FFFFFF; + border: none; + color: #008abf; + width: 95px; +} + #form-guest-edit-storage .cell.dev { width: 60px; } @@ -169,16 +185,19 @@ padding: 0px; } +.guest-attach-action { + width: 150px; + cursor: pointer; + color: #008abf; + padding-bottom: 10px; +} + #form-guest-edit-storage .action-area, .guest-edit-snapshot .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-snapshot button, .guest-edit-interface button { @@ -422,3 +441,12 @@ width: 25%; max-width: 25%; } + +.hidden { + display: none; +} + +.button-disabled { + cursor: default; + color: #999999; +} \ No newline at end of file diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index 9c088aa..3d989be 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -158,10 +158,7 @@ kimchi.guest_edit_main = function() { }; var setupInterface = function() { - $(".add", "#form-guest-edit-interface").button({ - icons: { primary: "ui-icon-plusthick" }, - text: false - }).click(function(evt){ + $(".add", "#form-guest-edit-interface").click(function(evt){ evt.preventDefault(); addItem({ mac: "", @@ -614,8 +611,7 @@ kimchi.guest_edit_main = function() { }; listGeneratingSnapshots(); $(".add", "#form-guest-edit-snapshot").button({ - icons: { primary: "ui-icon-plusthick" }, - text: false + label: i18n["KCHGST6001M"] }).click(function(evt){ evt.preventDefault(); kimchi.createSnapshot(kimchi.selectedGuest, function(task){ @@ -631,12 +627,7 @@ kimchi.guest_edit_main = function() { $('#form-guest-edit-general').fillWithObject(guest); kimchi.thisVMState = guest['state']; refreshCDROMs(); - $('#guest-edit-attach-cdrom-button').button({ - icons: { - primary: "ui-icon-plusthick" - }, - text: false - }).click(function(event) { + $('#guest-edit-attach-cdrom-button').click(function(event) { event.preventDefault(); kimchi.window.open("guest-storage-add.html"); }); diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index f33d889..89c59d2 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -98,18 +98,24 @@ </fieldset> </form> <form id="form-guest-edit-storage"> + <div id="guest-edit-attach-cdrom-button" class="guest-attach-action attach"> + <div class="icon-plus-circled-1 guest-inline"></div> + <span class="guest-inline">$_("Add Storage")</span> + </div> <div class="header"> <span class="cell">$_("Device")</span> <span class="cell">$_("Path")</span> - <button type="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="add guest-attach-action"> + <div class="icon-plus-circled-1 guest-inline"></div> + <span class="guest-inline">$_("Add Interface")</span> + </div> <div class="header"> <span class="cell">$_("Network")</span> <span class="cell">$_("Type")</span> - <button class="add action-area"></button> </div> <div class="body"></div> </form> @@ -172,11 +178,14 @@ </div> </form> <form id="form-guest-edit-snapshot" class="guest-edit-snapshot"> + <div class="guest-attach-action"> + <div class="icon-plus-circled-1 guest-inline"></div> + <button class="add guest-inline"></button> + </div> <div class="header"> <span class="cell sel"></span> <span class="cell name">$_("Name")</span> <span class="cell created">$_("Created")</span> - <button class="add action-area"></button> </div> <div class="task"></div> <div class="body"></div> diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl index 504316c..928b099 100644 --- a/ui/pages/guest-storage-add.html.tmpl +++ b/ui/pages/guest-storage-add.html.tmpl @@ -24,16 +24,12 @@ <div id="guest-storage-add-window" class="window"> <header> <h1 class="title">$_("Add a Storage Device to VM")</h1> - <div class="close">X</div> </header> <div class="content"> <form id="form-guest-storage-add"> <section class="form-section"> <h2>1. $_("Device Type")</h2> <div class="field"> - <p class="text-help"> - $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.") - </p> <div class="btn dropdown popable"> <input id="guest-storage-type" name="type" value="cdrom" type="hidden" /> <span class="text" id="guest-storage-type-label"></span> @@ -42,15 +38,16 @@ <ul class="select-list" id="guest-storage-type-list" data-target="guest-storage-type" data-label="guest-storage-type-label"></ul> </div> </div> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> + $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.") + </p> </div> </section> <div class="volume-section hidden"> <section class="form-section"> <h2>2. $_("Storage Pool")</h2> <div class="field storage-field"> - <p class="text-help"> - $_("Storage pool which volume located in") - </p> <div class="btn dropdown popable"> <input value="default" id="guest-disk-pool" name="pool" type="hidden"/> <span class="text" id="guest-disk-pool-label">default</span><span class="arrow"></span> @@ -58,14 +55,15 @@ <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-pool" data-label="guest-disk-pool-label"></ul> </div> </div> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> + $_("Storage pool which volume located in") + </p> </div> </section> <section class="form-section"> <h2>3. $_("Storage Volume")</h2> <div class="field storage-field"> - <p class="text-help"> - $_("Storage volume to be attached") - </p> <div class="btn dropdown popable" id="guest-disk"> <input id="guest-disk-vol" name="vol" type="hidden"> <span class="text" id="guest-disk-vol-label"></span><span class="arrow"></span> @@ -73,6 +71,10 @@ <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-vol" data-label="guest-disk-vol-label"></ul> </div> </div> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> + $_("Storage volume to be attached") + </p> </div> </section> </div> @@ -80,10 +82,11 @@ <section class="form-section"> <h2>2. $_("File Path")</h2> <div class="field"> - <p class="text-help"> + <input type="text" class="text" name="path" /> + <div class="icon-info-circled light-grey c1 help-inline"></div> + <p class="text-help help-inline"> $_("The ISO file path in the server for CDROM.") </p> - <input type="text" class="text" name="path" /> </div> </section> </div> @@ -95,6 +98,9 @@ <button id="guest-storage-button-add" class="btn-normal" disabled="disabled"> <span class="text">$_("Attach")</span> </button> + <button id="guest-storage-button-add" class="btn-normal close"> + <span class="text">$_("Cancel")</span> + </button> </div> </footer> </div> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index a4a6dd5..bdf4a0f 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -139,6 +139,8 @@ "KCHVMCD6008M": "$_("Successfully detached!")", "KCHVMCD6009M": "$_("This disk will be detached permanently and you can re-attach it. Continue to detach it?")", + "KCHGST6001M": "$_("Add Snapshot")", + "KCHVMED6001M": "$_("interface:")", "KCHVMED6002M": "$_("address:")", "KCHVMED6003M": "$_("link_type:")", -- 2.1.0
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/template-edit.css | 10 ++-- ui/css/theme-default/template_add.css | 95 +++++++++++----------------------- ui/js/src/kimchi.template_add_main.js | 9 +++- ui/pages/template-add.html.tmpl | 73 +++++++++++++------------- 4 files changed, 81 insertions(+), 106 deletions(-) diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css index 4a2afa6..7a1e862 100644 --- a/ui/css/theme-default/template-edit.css +++ b/ui/css/theme-default/template-edit.css @@ -47,17 +47,13 @@ } .template-edit-wrapper-controls input[type="text"] { + border: 1px solid #CCCCCC; height: 38px; line-height: 38px; - background: #fff; -webkit-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; padding: 0 10px; margin-top: 5px; width: 100%; @@ -111,6 +107,7 @@ #form-template-storage .template-tab-body input { width: 56px; height: 17px; + border: 1px solid #CCCCCC; } #form-template-storage .template-tab-body .template-storage-name { @@ -147,6 +144,7 @@ #form-template-processor select, #form-template-processor input[type="text"] { margin-left: 10px; + border: 1px solid #CCCCCC; } #form-template-processor input[type="checkbox"] { @@ -172,4 +170,4 @@ #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 12e95bf..e868b66 100644 --- a/ui/css/theme-default/template_add.css +++ b/ui/css/theme-default/template_add.css @@ -56,6 +56,7 @@ font-size: 18px; font-weight: normal; padding: 15px 10px; + background: #FFFFFF; } .step-choose>li>a { @@ -93,6 +94,7 @@ .custom-iso-field { position: relative; padding: 0 10px 10px; + line-height: 40px; } .custom-iso-field>.input-wrapper { @@ -103,14 +105,8 @@ padding: 10px; color: #333; font-size: 13px; - background: #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; width: 100%; + border: 1px solid #CCCCCC; } .custom-iso-field>button { @@ -129,8 +125,7 @@ position: relative; height: 38px; line-height: 38px; - margin: 5px; - font-size: 13px; + margin: 5px 5px 5px 12px; } .check-all input { @@ -139,27 +134,8 @@ .box { background: #ffffff; - background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: -webkit-gradient(linear, left top, left bottom, - color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); - background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', - endColorstr='#e5e5e5', GradientType=0); - border: 1px solid #ccc; + border: 4px solid rgba(255,255,255,0); color: #333; - text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; -} - -.box:HOVER { - border: 1px solid #aaa; - -webkit-box-shadow: #bbb 0px 0px 5px; - box-shadow: #bbb 0px 0px 5px; } .box-iso { @@ -170,13 +146,12 @@ .iso-icon { float: left; - width: 58px; - height: 58px; - margin: 0 5px 0 0; - border: 1px solid #CCCCCC; - border-radius: 8px; + width: 38px; + height: 38px; + margin: -10px -10px 0 0; background: url(../../images/icon-vm.png) center center no-repeat; - background-size: 58px; + background-size: 100%; + float: right; } .iso-icon.centos { @@ -210,7 +185,7 @@ .list-iso li { float: left; - width: 320px; + width: 240px; } .list-iso>li>label { @@ -223,9 +198,7 @@ } .list-iso>li>label>input[type="checkbox"]:CHECKED+.box-iso { - border: 1px solid rgb(11, 107, 173); - -webkit-box-shadow: rgb(11, 107, 173) 0px 0px 4px; - box-shadow: rgb(11, 107, 173) 0px 0px 4px; + border: 4px solid rgb(11, 107, 173); } .iso-title { @@ -234,12 +207,13 @@ position: relative; height: 23px; line-height: 23px; - font-size: 14px; - font-weight: normal; + font-size: 24px; + font-weight: lighter; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-bottom: 15px; } .iso-title>label>input { @@ -254,32 +228,25 @@ overflow: hidden; } -.iso-info-col { - float: left; - width: 50%; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 0 0 0 5px; -} - -.iso-info-col:FIRST-CHILD { - padding: 0 5px 0 0; - border-right: 1px solid #999; -} - .iso-info-item { font-weight: bold; - color: #999; - font-size: 11px; + font-size: 14px; line-height: 18px; - max-width: 106px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.iso-info-title { + font-size: 14px; + color: #999999; + font-weight: lighter; +} + #iso-search { margin: 10px 15px; + background: #008abf; + color: #FFFFFF; } #iso-search-loading { @@ -290,8 +257,7 @@ } #iso-more-loading { - background: #C0C0C0 url(../../images/theme-default/loading.gif) 7px - center no-repeat; + background: #999999; padding: 0 20px 0 26px; } @@ -300,23 +266,24 @@ } #vm-image-local-box .body input { - background: none repeat scroll 0 0 #FFFFFF; - border-left: 1px solid #BBBBBB; - border-radius: 5px 5px 5px 5px; - border-top: 1px solid #BBBBBB; - box-shadow: 2px 2px 2px #EEEEEE inset; color: #333333; font-size: 13px; padding: 10px; margin-left: 10px; width: 600px; + border: 1px solid #CCCCCC; } #vm-image-local-box .body button { margin-left: 10px; + border-radius: 0; } #iso-file-check-icon, #select-all-remote-iso-icon { cursor: pointer; +} + +.template-avai-container { + background: rgb(238,238,238); } \ No newline at end of file diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index de36bec..b1a6cbe 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -171,7 +171,14 @@ kimchi.template_add_main = function() { $('#local-iso-field').show(); }; - $('#select-all-local-iso').click(function() { + $('#select-all-local-iso').on("change", function() { + if($(this).is(":checked")) { + $("#select-all-local-iso-icon").removeClass("icon-check-empty-1"); + $("#select-all-local-iso-icon").addClass("icon-ok-squared"); + } else { + $("#select-all-local-iso-icon").removeClass("icon-ok-squared"); + $("#select-all-local-iso-icon").addClass("icon-check-empty-1"); + } $('#list-local-iso [type="checkbox"]').prop('checked', $(this).prop('checked')); if ($(this).prop('checked')) { $('#btn-template-local-iso-create').removeAttr('disabled'); diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index ed460e7..cc058a4 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -28,7 +28,7 @@ <header> <h1 class="title h1 grey">$_("Add Template")</h1> </header> - <div class="content" style="margin-bottom: 0"> + <div class="content" style="margin-bottom:0; margin-right:0"> <div class="page-list"> <!-- 1 --> <div class="page" id="iso-type-box" style="left:0"> @@ -47,7 +47,7 @@ </div> <!-- 1-1 --> - <div class="page" id="iso-local-box"> + <div class="page template-avai-container" id="iso-local-box"> <header> <a class="back" id="iso-local-box-back"></a> <h2 class="step-title">$_("Local ISO Image")</h2> @@ -56,13 +56,15 @@ <button class="btn-normal" id="iso-search" style="display: none"><span class="text">$_("Search ISOs")</span></button> <button class="btn-normal" id="iso-search-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button> <!-- 1-1-1 --> + <h3 class="step-subtitle"> + $_("The following ISOs are available:") + </h3> <div id="local-iso-field" class="iso-field" style="display: none;"> - <h3 class="step-subtitle"> - $_("The following ISOs are available:") - </h3> - <div class="toolbar"> + <div> <label class="check-all"> - <input type="checkbox" id="select-all-local-iso">$_("All") + <input type="checkbox" id="select-all-local-iso" hidden > + <span id="select-all-local-iso-icon" class="grey icon-check-empty-1" for="select-all-local-iso"></span> + <span>$_("All")</span> </label> </div> <div> @@ -77,22 +79,23 @@ <div class="box box-iso"> <div class="iso-icon {os_distro}"> </div> - <h3 class="iso-title" title="{name}"> - {name} + <h3 class="iso-title" title="{os_distro}"> + {os_distro} </h3> <div class="iso-info"> - <div class="iso-info-col"> - <div class="iso-info-item" title="{os_distro}"> - $_("OS: "){os_distro} + <div> + <div class="iso-info-item" title="{name}"> + {name} </div> + <div class="iso-info-title" style="margin-bottom: 7px">$_("ISO Image Name")</div> <div class="iso-info-item" title="{os_version}"> - $_("Version: "){os_version} + {os_version} </div> - </div> - <div class="iso-info-col"> + <div class="iso-info-title" style="margin-bottom: 7px">$_("OS Version")</div> <div class="iso-info-item" title="{capacity}"> - $_("Size: "){capacity} + {capacity} </div> + <div class="iso-info-title">$_("Size")</div> </div> </div> </div> @@ -101,9 +104,9 @@ </script> </div> <div class="button-field"> - <button class="btn-normal" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button> - <button class="btn-normal" id="iso-more-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button> - <button class="btn-normal" id="btn-template-local-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button> + <button class="btn-normal-1" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button> + <button class="btn-normal-1" id="iso-more-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button> + <button class="btn-normal-1" id="btn-template-local-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button> </div> </div> @@ -118,7 +121,7 @@ </h3> <div id="iso-file-box" class="custom-iso-field"> <div class="input-wrapper"><input type="text" class="text" id="iso-file" name="iso-file"></div> - <button class="btn-normal" id="btn-template-file-create" disabled="disabled"><span class="text">$_("Create")</span></button> + <button class="btn-normal-1" id="btn-template-file-create" disabled="disabled"><span class="text">$_("Create")</span></button> </div> </div> @@ -152,18 +155,18 @@ </div> <!-- 1-2-1 --> - <div id="remote-iso-field" class="iso-field" style="display: none;"> + <div id="remote-iso-field" class="iso-field template-avai-container" style="display: none;"> <h3 class="step-subtitle"> $_("The following ISOs are available:") </h3> - <div class="toolbar"> + <div> <label class="check-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> + <div class="template-avai-container"> <form id="form-remote-iso"> <ul id="list-remote-iso" class="list-iso"> </ul> @@ -175,23 +178,23 @@ <div class="box box-iso"> <div class="iso-icon {os_distro}"> </div> - <h3 class="iso-title" title="{name}"> - {name} + <h3 class="iso-title" title="{os_distro}"> + {os_distro} </h3> <div class="iso-info"> - <div class="iso-info-col"> - <div class="iso-info-item" title="{os_distro}"> - $_("OS: "){os_distro} + <div> + <div class="iso-info-item" title="{name}"> + {name} </div> + <div class="iso-info-title" style="margin-bottom: 7px">$_("ISO Image Name")</div> <div class="iso-info-item" title="{os_version}"> - $_("Version: "){os_version} + {os_version} </div> - - </div> - <div class="iso-info-col"> + <div class="iso-info-title" style="margin-bottom: 7px">$_("OS Version")</div> <div class="iso-info-item" title="{os_arch}"> - $_("Arch: "){os_arch} + {os_arch} </div> + <div class="iso-info-title">$_("Architecture")</div> </div> </div> </div> @@ -200,7 +203,7 @@ </script> </div> <div class="button-field"> - <button class="btn-normal" id="btn-template-remote-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button> + <button class="btn-normal-1" id="btn-template-remote-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button> </div> </div> @@ -214,7 +217,7 @@ </h3> <div id="iso-url-box" class="custom-iso-field"> <div class="input-wrapper"><input type="text" class="text" id="iso-url" name="iso-url"></div> - <button class="btn-normal" id="btn-template-url-create" disabled="disabled"><span class="text">$_("Create")</span></button> + <button class="btn-normal-1" id="btn-template-url-create" disabled="disabled"><span class="text">$_("Create")</span></button> </div> </div> -- 2.1.0
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/storage.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css index 771cc7f..3cb8764 100644 --- a/ui/css/theme-default/storage.css +++ b/ui/css/theme-default/storage.css @@ -462,6 +462,12 @@ width: 285px; } +#serverComboboxId, +#targetFilterSelectId { + border: 1px solid #CCCCCC; + box-shadow: none; +} + .form-section .storage-field { overflow: visible; } -- 2.1.0
participants (2)
-
Aline Manera -
Wen Wang