3:45 a.m.
From: Yu Xin Huo <huoyuxin(a)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(-)
3:45 a.m.
New subject: [PATCH 1/3] UI: Update Framework Style
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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
3:45 a.m.
New subject: [PATCH 2/3] UI: Update Grid Widget
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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
3:45 a.m.
New subject: [PATCH 3/3] UI: Network Grid View
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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
8:07 a.m.
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(a)linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin(a)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(a)ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel
8:10 a.m.
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(a)linux.vnet.ibm.com wrote:
> From: Yu Xin Huo<huoyuxin(a)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(a)ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>
_______________________________________________
Kimchi-devel mailing list
Kimchi-devel(a)ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel
3382
days inactive
3405
days old
5 comments
2 participants
participants (2)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com