[Kimchi-devel] [PATCH 5/6] UI: Template dialog refine
Wen Wang
wenwang at linux.vnet.ibm.com
Wed Mar 4 10:07:43 UTC 2015
Signed-off-by: Wen Wang <wenwang at 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
More information about the Kimchi-devel
mailing list