[Kimchi-devel] [PATCH] UI: Storage Grid View
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Thu Feb 12 09:45:12 UTC 2015
From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
ui/css/theme-default/storage.css | 161 +++++++------------------------------
ui/js/src/kimchi.storage_main.js | 21 ++++--
ui/pages/tabs/storage.html.tmpl | 72 +++++++++---------
3 files changed, 82 insertions(+), 172 deletions(-)
diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css
index e0ab290..6231178 100644
--- a/ui/css/theme-default/storage.css
+++ b/ui/css/theme-default/storage.css
@@ -16,101 +16,29 @@
* limitations under the License.
*/
/* STORAGE */
-.handle {
- width: 49px;
+.storage {
+ margin: 5px;
}
-.storage-allocate-padding-user {
- padding-right: 108px;
-}
-.storage-title {
- font-size: 13px;
- height: 18px;
- padding: 10px;
- color: #666;
- float: left;
- max-width: 85px;
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: bold;
- line-height: 18px;
- white-space: nowrap;
+.storage .grid-control {
+ height: 40px;
+ padding: 5px 0;
}
-.usage {
- font-size: 13px;
- height: 18px;
- padding: 10px;
- color: #666;
+.storage .grid-control .filter {
+ width: 300px;
+ padding: 5px;
float: right;
- font-weight: bold;
- line-height: 18px;
-}
-
-.storage-text {
- font-size: 12px;
- height: 18px;
- padding: 10px;
- color: #999999;
- font-weight: bold;
- line-height: 18px;
-}
-
-.list-storage {
- margin: 10px;
-}
-
-.list-storage .storage-li {
- width: 1004px;
- margin-top: 10px;
- 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;
- color: #333;
- -moz-border-top-left-radius: 8px;
- -moz-border-top-right-radius: 8px;
- -webkit-border-top-left-radius: 8px;
- -webkit-border-top-right-radius: 8px;
- -moz-border-bottom-left-radius: 8px;
- -moz-border-bottom-right-radius: 8px;
- -webkit-border-bottom-left-radius: 8px;
- -webkit-border-bottom-right-radius: 8px;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
-}
-
-.list-storage .storage-li>* {
- height: 25px;
- display: table-cell;
- vertical-align: middle;
- position: relative;
- border-left: 1px solid #ccc;
- border-right: 1px solid #fff;
-}
-
-.list-storage .storage-li>*:FIRST-CHILD {
- border-left: none;
}
-.list-storage .storage-li>*:LAST-CHILD {
- border-right: none;
+.storage-allocate-padding-user {
+ padding-right: 108px;
}
-.list-storage .storage-li[data-stat="active"]:hover {
- border: 1px solid rgb(11, 107, 173);
- box-shadow: 0px 0px 5px rgb(11, 107, 173);
- cursor: default;
+.usage {
+ float: right;
+ margin-right: 30px;
}
.list-storage .storage-li>.guest-tile {
@@ -152,62 +80,35 @@
}
.storage-name {
- width: 199px;
+ width: 15%;
}
.storage-state {
- width: 51px;
-}
-
-.storage-location {
- width: 288px;
+ width: 10%;
}
.storage-type {
- width: 98px;
+ width: 10%;
}
.storage-capacity {
- width: 98px;
+ width: 10%;
}
.storage-allocate {
- width: 98px;
-}
-
-
-.storage-button {
- width: 108px;
- text-align: center;
-}
-
-.title-name {
- width: 199px;
-}
-
-.title-state {
- width: 51px;
-}
-
-.title-location {
- width: 288px;
+ width: 10%;
}
-.title-type {
- width: 98px;
-}
-
-.title-capacity {
- width: 98px;
+.storage-location {
+ width: 30%;
}
-.title-allocate {
- width: 98px;
+.storage-button {
+ width: 9%;
}
-
-.title-action {
- width: 108px;
+.handle {
+ width: 2%;
}
.status-dot {
@@ -218,8 +119,8 @@
border-radius: 13px;
box-shadow: 3px 3px 3px #FFFFFF, -3px -3px 3px #DDDDDD;
height: 13px;
- margin: 20px 18px;
width: 13px;
+ margin-left: 10px;
}
.toolable {
@@ -459,22 +360,22 @@
.list-storage .storage-li[data-stat="active"]>.handle>.arrow-down {
background: url(../images/theme-default/arrow-down.png) no-repeat center
center;
- height: 52px;
- width: 45px;
+ height: 18px;
+ width: 18px;
}
.list-storage .storage-li[data-stat="inactive"]>.handle>.arrow-down {
background: url(../images/theme-default/arrow-down-disable.png) no-repeat
center center;
- height: 52px;
- width: 45px;
+ height: 18px;
+ width: 18px;
}
.arrow-up {
background: url(../images/theme-default/arrow-up.png) no-repeat center
center;
- height: 52px;
- width: 45px;
+ height: 18px;
+ width: 18px;
}
.storage-icon {
diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 9a45b65..64a132a 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -29,12 +29,18 @@ kimchi.doListStoragePools = function() {
listHtml += kimchi.substitute(storageHtml, value);
}
});
+ if($('#storageGrid').hasClass('grid'))
+ $('#storageGrid').grid('destroy');
$('#storagepoolsList').html(listHtml);
if(kimchi.tabMode['storage'] === 'admin') {
$('.storage-button').attr('style','display');
} else {
$('.storage-allocate').addClass('storage-allocate-padding-user');
}
+ $('#storageGrid').grid({enableSorting: false});
+ $('input', $('.grid-control', '.storage')).on('keyup', function(){
+ $('#storageGrid').grid('filter', $(this).val());
+ });
kimchi.storageBindClick();
} else {
$('#storagepoolsList').html('');
@@ -169,18 +175,21 @@ kimchi.storageBindClick = function() {
});
}
- $('.storage-li').on('click', function(event) {
+ $('.row').on('click', function(event) {
if (!$(event.target).parents().hasClass('bottom')) {
if ($(this).data('stat') === 'active') {
var that = $(this);
var volumeDiv = $('#volume' + that.data('name'));
- var slide = $(this).next('.volumes');
+ var slide = $('.volumes', this);
if (that.hasClass('in')) {
+ that.css('height','auto');
kimchi.doListVolumes(that);
} else {
- slide.slideUp('slow');
+ slide.slideUp('slow', function(){
+ that.css('height','');
+ });
that.addClass('in');
- kimchi.changeArrow(that.children().last().children());
+ kimchi.changeArrow($('.arrow-up', this));
}
}
}
@@ -226,8 +235,8 @@ kimchi.doListVolumes = function(poolObj) {
var volumeDiv = $('#volume' + poolName);
$(volumeDiv).empty();
- var slide = poolObj.next('.volumes');
- var handleArrow = poolObj.children().last().children();
+ var slide = $('.volumes', poolObj);
+ var handleArrow = $('.arrow-down', poolObj);
kimchi.listStorageVolumes(poolName, function(result) {
var listHtml = '';
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index dbbaef9..320ec16 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -29,17 +29,19 @@
<a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
</div>
</div>
-<div>
- <div class="list-title">
- <li class="title-name">$_("Name")</li>
- <li class="title-state" >$_("State")</li>
- <li class="title-location">$_("Location")</li>
- <li class="title-type">$_("Type")</li>
- <li class="title-capacity">$_("Capacity")</li>
- <li class="title-allocate">$_("Allocated")</li>
- <li class="title-actions" style="display:none">$_("Actions")</li>
+<div class='storage'>
+<div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
+<div id='storageGrid'>
+ <div>
+ <span class="storage-name">$_("Name")</span>
+ <span class="storage-state" >$_("State")</span>
+ <span class="storage-type">$_("Type")</span>
+ <span class="storage-capacity">$_("Capacity")</span>
+ <span class="storage-allocate">$_("Allocated")</span>
+ <span class="storage-location">$_("Location")</span>
</div>
- <ul id="storagepoolsList" class="list-storage empty-when-logged-off"></ul>
+ <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
+</div>
</div>
<div id="logicalPoolExtend" title="$_("Device path")">
<p id="loading-info" class="text-help">
@@ -50,33 +52,32 @@
</div>
</div>
<script id="storageTmpl" type="html/text">
- <li id="{name}">
- <div class="storage-li in" data-name="{name}" data-stat="{state}">
- <div class="storage-name">
- <span class="storage-title" title="{name}">{name}</span>
- <span class="storage-title usage">{usage}%</span>
- </div>
- <div class="storage-state">
+ <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}">
+ <span class="storage-name" val="{name}{usage}%">
+ <span title="{name}">{name}</span>
+ <span class="usage">{usage}%</span>
+ </span>
+ <span class="storage-state">
<div class="status-dot toolable active" data-state="{state}">
<label class="tooltip">$_("active")</label>
</div>
<div class="status-dot toolable inactive" data-state="{state}">
<label class="tooltip">$_("inactive")</label>
</div>
- </div>
- <div class="storage-location">
- <div class="storage-text">{path}</div>
- </div>
- <div class="storage-type">
- <div class="storage-text">{type}</div>
- </div>
- <div class="storage-capacity">
- <div class="storage-text" data-type="{type}">{capacity}</div>
- </div>
- <div class="storage-allocate">
- <div class="storage-text" data-type="{type}">{allocated}</div>
- </div>
- <div class="bottom storage-button" style="display:none">
+ </span>
+ <span class="storage-type" val="{type}">
+ <div>{type}</div>
+ </span>
+ <span class="storage-capacity" val="{capacity}">
+ <div data-type="{type}">{capacity}</div>
+ </span>
+ <span class="storage-allocate" val="{allocated}">
+ <div data-type="{type}">{allocated}</div>
+ </span>
+ <span class="storage-location" val="{path}">
+ <div>{path}</div>
+ </span>
+ <span class="bottom storage-button" style="display:none">
<div class="btn dropdown popable storage-action" data-state="{state}" data-type="{type}" data-name="{name}">
<span class="text">$_("Actions")</span><span class="arrow"></span>
<div class="popover actionsheet right-side" style="width: 250px">
@@ -87,16 +88,15 @@
<button class="button-big red pool-delete" data-stat="{state}" data-name="{name}"><span class="text">$_("Undefine")</span></button>
</div>
</div>
- </div>
- <div class="handle">
+ </span>
+ <span class="handle">
<div class="arrow-down"></div>
- </div>
- </div>
+ </span>
<div class="volumes">
<div id="volume{name}" class="volumeslist" data-name="{name}" ></div>
<div class="clear"></div>
</div>
- </li>
+ </div>
</script>
<script id="volumeTmpl" type="html/text">
<div class="volume-box white-box" data-volume-name="{name}">
--
1.7.1
More information about the Kimchi-devel
mailing list