[v2 0/3] UI: Grid View of Network Tab
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Yu Xin Huo (3): UI: Update Framework Style UI: Update Grid Widget UI: Network Grid View ui/css/theme-default/datagrid.css | 11 +--- ui/css/theme-default/framework.css | 4 +- ui/css/theme-default/network.css | 83 ++++++++--------------------------- ui/css/theme-default/reset.css | 2 +- ui/js/src/kimchi.network.js | 14 ++++-- ui/js/widgets/grid.js | 28 ++++++++---- ui/pages/tabs/network.html.tmpl | 29 ++++++------ 7 files changed, 69 insertions(+), 102 deletions(-)
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/framework.css | 4 ++-- ui/css/theme-default/reset.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/css/theme-default/framework.css b/ui/css/theme-default/framework.css index 209949b..c5a2966 100644 --- a/ui/css/theme-default/framework.css +++ b/ui/css/theme-default/framework.css @@ -16,7 +16,7 @@ * limitations under the License. */ body { - background: url(../images/theme-default/bg.png); + background: #FFFFFF; } .tmpl-html { @@ -25,7 +25,7 @@ body { .container { margin: 0 auto; - width: 1024px; + max-width: 1170px; } .hidden { diff --git a/ui/css/theme-default/reset.css b/ui/css/theme-default/reset.css index 3262691..4afeeb5 100644 --- a/ui/css/theme-default/reset.css +++ b/ui/css/theme-default/reset.css @@ -24,7 +24,7 @@ audio,video,button { margin: 0; padding: 0; border: 0; - font-family: Tahoma, Geneva, sans-serif; + font-family: 'Helvetica Neue', Helvetica, Arial; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section -- 1.7.1
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/datagrid.css | 11 +++-------- ui/js/widgets/grid.js | 28 +++++++++++++++++++--------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/ui/css/theme-default/datagrid.css b/ui/css/theme-default/datagrid.css index 583b827..14d28c3 100644 --- a/ui/css/theme-default/datagrid.css +++ b/ui/css/theme-default/datagrid.css @@ -21,7 +21,7 @@ } .grid .header { - padding-bottom: 1px; + padding-bottom: 3px; border-bottom: solid 2px #ededed; } @@ -39,11 +39,6 @@ cursor: pointer; } -.grid .header > span:first-child, -.grid .body .row > span:first-child { - padding-left: 10px; -} - .grid .body .row { height: 46px; line-height: 46px; @@ -55,9 +50,9 @@ } .grid .body .odd { - background-color: #fcfcfc; + background-color: #ffffff; } .grid .body .even { - background-color: #ffffff; + background-color: #f9f9f9; } diff --git a/ui/js/widgets/grid.js b/ui/js/widgets/grid.js index 047fb78..21316fb 100644 --- a/ui/js/widgets/grid.js +++ b/ui/js/widgets/grid.js @@ -64,17 +64,19 @@ $.widget("kimchi.grid", { $('.icon-angle-down', columnCell).removeClass('icon-angle-down').addClass('icon-down-dir'); } var container = $(this.element.children().get(1)); - var keys = [], map = {}; + var nodes = []; container.children().each(function(){ - var key = $($(this).children().get(column)).attr('val'); - keys.push(key); - map[key] = $(this); + nodes.push($(this)); }); - keys.sort(); - if(!assending) keys.reverse(); + nodes.sort(function(a, b){ + aVal = $(a.children().get(column)).attr('val'); + bVal = $(b.children().get(column)).attr('val'); + return aVal.localeCompare(bVal); + }); + if(!assending) nodes.reverse(); container.empty(); - for(var i=0;i<keys.length;i++){ - container.append(map[keys[i]]); + for(var i=0;i<nodes.length;i++){ + container.append(nodes[i]); } this._setRowBackgroud(); }, @@ -84,7 +86,7 @@ $.widget("kimchi.grid", { container.children().each(function(){ var hide = true; $(this).children().each(function(){ - if($(this).attr('val').toLowerCase().indexOf(keyword)!=-1){ + if($(this).attr('val')&&$(this).attr('val').toLowerCase().indexOf(keyword)!=-1){ hide = false; return false; } @@ -93,6 +95,14 @@ $.widget("kimchi.grid", { }); this._setRowBackgroud(); }, + addRow: function(rowNode){ + $(rowNode).addClass('row'); + this._setRowBackgroud(); + }, + deleteRow: function(rowNode){ + $(rowNode).remove(); + this._setRowBackgroud(); + }, _destroy: function() { this.element.removeClass('grid'); var head = $(this.element.children().get(0)); -- 1.7.1
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 | 14 +++++-- ui/pages/tabs/network.html.tmpl | 29 +++++++------ 3 files changed, 44 insertions(+), 82 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..7b3c3e5 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -47,17 +47,23 @@ kimchi.initNetworkListView = function() { network.persistent = data[i].persistent; kimchi.addNetworkItem(network); } + $('#networkGrid').grid({enableSorting: false}); + $('input', $('.grid-control', '#network-content')).on('keyup', function(){ + $('#networkGrid').grid('filter', $(this).val()); + }); }); }; kimchi.addNetworkItem = function(network) { - $("#networkBody").append(kimchi.getNetworkItemHtml(network)); + var itemNode = $.parseHTML(kimchi.getNetworkItemHtml(network)); + $("#networkBody").append(itemNode); if(kimchi.tabMode["network"] === "admin") { $(".column-action").attr("style","display"); } else { $(".column-space").addClass('column-space-no-border-right'); } kimchi.addNetworkActions(network); + return itemNode; }; kimchi.getNetworkItemHtml = function(network) { @@ -149,7 +155,7 @@ kimchi.addNetworkActions = function(network) { }; kimchi.confirm(settings, function() { kimchi.stopNetwork(network, menu); - $(evt.currentTarget).parents(".item").remove(); + $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row")); }, null); } else { @@ -167,7 +173,7 @@ kimchi.addNetworkActions = function(network) { cancel : i18n['KCHAPI6003M'] }, function() { kimchi.deleteNetwork(network.name, function() { - $(evt.currentTarget).parents(".item").remove(); + $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row")); }); }, null); } @@ -211,7 +217,7 @@ kimchi.initNetworkCreation = function() { network.interface = result.interface ? result.interface : i18n["KCHNET6001M"]; network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"]; network.persistent = result.persistent; - kimchi.addNetworkItem(network); + $('#networkGrid').grid('addRow', kimchi.addNetworkItem(network)); $("#networkConfig").dialog("close"); }, function(data) { kimchi.message.error(data.responseJSON.reason); 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
Assuming the button and label styles will be changed later I will apply this one. On 11/02/2015 05:16, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
Yu Xin Huo (3): UI: Update Framework Style UI: Update Grid Widget UI: Network Grid View
ui/css/theme-default/datagrid.css | 11 +--- ui/css/theme-default/framework.css | 4 +- ui/css/theme-default/network.css | 83 ++++++++--------------------------- ui/css/theme-default/reset.css | 2 +- ui/js/src/kimchi.network.js | 14 ++++-- ui/js/widgets/grid.js | 28 ++++++++---- ui/pages/tabs/network.html.tmpl | 29 ++++++------ 7 files changed, 69 insertions(+), 102 deletions(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (3)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com -
Yu Xin Huo