From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@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