[PATCH 0/3] UI: Network Grid View
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 | 6 ++- ui/js/widgets/grid.js | 20 +++++---- ui/pages/tabs/network.html.tmpl | 29 ++++++------ 7 files changed, 56 insertions(+), 99 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 | 20 +++++++++++--------- 2 files changed, 14 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..be16aa1 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; } -- 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 | 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
I can see some differences between the proposed design and the one created by this patch set. Below is the proposed design for the network tab: And then, with this patch set applied: The table headers are in grey and there are the arrows to reorder the grid. When the network is active it appears in bold, otherwise in normal style. The state icon was changed to a 'power green'. And the actions button is very different from the current in use. On 04/02/2015 07:45, 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 | 6 ++- ui/js/widgets/grid.js | 20 +++++---- ui/pages/tabs/network.html.tmpl | 29 ++++++------ 7 files changed, 56 insertions(+), 99 deletions(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Also, in the new UI proposals, the tab content is centred by left and right margin On 27/02/2015 11:07, Aline Manera wrote:
I can see some differences between the proposed design and the one created by this patch set.
Below is the proposed design for the network tab:
And then, with this patch set applied:
The table headers are in grey and there are the arrows to reorder the grid. When the network is active it appears in bold, otherwise in normal style. The state icon was changed to a 'power green'. And the actions button is very different from the current in use.
On 04/02/2015 07:45, 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 | 6 ++- ui/js/widgets/grid.js | 20 +++++---- ui/pages/tabs/network.html.tmpl | 29 ++++++------ 7 files changed, 56 insertions(+), 99 deletions(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (2)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com