Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- 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(a)linux.vnet.ibm.com&gt; --- 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

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:

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:

Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- 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