[Kimchi-devel] [PATCH 3/3] UI: Network Grid View
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Wed Feb 4 09:45:03 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/network.css | 83 +++++++++-----------------------------
ui/js/src/kimchi.network.js | 6 ++-
ui/pages/tabs/network.html.tmpl | 29 +++++++------
3 files changed, 39 insertions(+), 79 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 5d07468..b027f36 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -17,91 +17,46 @@
*/
.network {
- font-size: 12px;
- font-weight: bold;
- color: #666666;
-}
-
-.network .list {
- margin: 0px 10px;
-}
-
-.network .list .header > * {
- margin-right: 2px;
-}
-
-.network .list .item {
- margin-bottom: 10px;
- border-radius: 8px 8px 8px 8px;
- background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat
- scroll 0 0 transparent;
- border: 1px solid #CCCCCC;
- position: relative;
- height: 54px;
-}
-
-.network .list .item > *:first-child {
- border-left: none;
-}
-
-.network .list .item > * {
- border-left: 1px solid #CCCCCC;
- border-right: 1px solid #FFFFFF;
+ margin: 5px;
}
-.network .list .item > *:last-child {
- border-right: none;
+.network .grid-control {
+ height: 40px;
+ padding: 5px 0;
}
-.network .list .column {
- display: inline-block;
- padding: 10px 10px 10px 2px;
- overflow: hidden;
-}
-
-.network .list .item .cell {
- padding: 19px 10px 17px 2px;
- height: 19px;
- color: #999999;
-}
-
-.network .list .item .cell:first-child {
- padding-left: 10px;
- width: 183px;
- max-width: 183px;
- color: #666666;
+.network .grid-control .filter {
+ width: 300px;
+ padding: 5px;
+ float: right;
}
.network .list .column-name {
- width: 190px;
- max-width: 190px;
+ width: 20%;
+ max-width: 20%;
text-overflow: ellipsis;
}
.network .list .column-state {
- width: 70px;
+ width: 10%;
}
.network .list .column-type {
- width: 130px;
+ width: 15%;
}
.network .list .column-interface {
- width: 130px;
+ width: 15%;
}
.network .list .column-space {
- width: 270px;
-}
-
-.network .list .item .column-space-no-border-right {
- border-right: none;
+ width: 25%;
}
.network .list .column-action {
display: inline-block;
- position: absolute;
- height: 55px;
+ float: right;
+ height: 40px;
}
.network .list .hide-action-item {
@@ -115,7 +70,7 @@
.network .list .action-button {
float: right;
- margin-top: 5px;
+ margin-top: 2px;
margin-left: 5px;
}
@@ -133,7 +88,7 @@
height: 16px;
width: 16px;
border-radius: 8px;
- margin-left: 29px;
+ margin-left: 10px;
}
.network .list .nw-loading {
@@ -316,4 +271,4 @@
.ui-state-default a {
color: #212121;
-}
\ No newline at end of file
+}
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index bd91d29..3d130d1 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -47,6 +47,10 @@ kimchi.initNetworkListView = function() {
network.persistent = data[i].persistent;
kimchi.addNetworkItem(network);
}
+ $('#networkGrid').grid();
+ $('input', $('.grid-control', '#network-content')).on('keyup', function(){
+ $('#networkGrid').grid('filter', $(this).val());
+ });
});
};
@@ -167,7 +171,7 @@ kimchi.addNetworkActions = function(network) {
cancel : i18n['KCHAPI6003M']
}, function() {
kimchi.deleteNetwork(network.name, function() {
- $(evt.currentTarget).parents(".item").remove();
+ $(evt.currentTarget).parents(".row").remove();
});
}, null);
}
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index 6eaa4b3..c300a05 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -31,14 +31,15 @@
</div>
</div>
<div id="network-content" class="network">
- <div class="list">
- <div class="header">
- <span class="column column-name">$_("Network Name")</span><!--
- --><span class="column column-state">$_("State")</span><!--
- --><span class="column column-type">$_("Network Type")</span><!--
- --><span class="column column-interface">$_("Interface")</span><!--
- --><span class="column column-space">$_("Address Space")</span><!--
- --><span class="column" style="display:none">$_("Actions")</span>
+ <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
+ <div id="networkGrid" class="list">
+ <div>
+ <span class="column-name">$_("Network Name")</span><!--
+ --><span class="column-state">$_("State")</span><!--
+ --><span class="column-type">$_("Network Type")</span><!--
+ --><span class="column-interface">$_("Interface")</span><!--
+ --><span class="column-space">$_("Address Space")</span><!--
+ --><span style="display:none">$_("Actions")</span>
</div>
<div id="networkBody" class="empty-when-logged-off"></div>
</div>
@@ -103,12 +104,12 @@
</div>
</div>
<script id="networkItem" type="text/html">
- <div id='{name}' class='item remove-when-logged-off'>
- <span class='column column-name cell' title="{name}">{name}</span><!--
- --><span class='column column-state cell'><span class='network-state {state}'></span></span><!--
- --><span class='column column-type cell'>{type}</span><!--
- --><span class='column column-interface cell'>{interface}</span><!--
- --><span class='column column-space cell'>{addrSpace}</span><!--
+ <div id='{name}' class='remove-when-logged-off'>
+ <span class='column-name' title="{name}" val="{name}">{name}</span><!--
+ --><span class='column-state' val="{state}"><span class='network-state {state}'></span></span><!--
+ --><span class='column-type' val="{type}">{type}</span><!--
+ --><span class='column-interface' val="{interface}">{interface}</span><!--
+ --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!--
--><span class='column-action' style="display:none">
<span class="ui-button-secondary dropdown popable action-button">
$_("Actions")
--
1.7.1
More information about the Kimchi-devel
mailing list