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