[Kimchi-devel] [V1] Remove jquery-ui customization in network
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Thu Jan 2 06:50:34 UTC 2014
From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
Network UI is built with jquery-ui widgets.
To get network to match kimchi ui style.
jquery-ui widgets style is customized there.
now, we have jquery-ui widgets customized formally by
following offcial jquery-ui themeing structure.
remove customization in network, leverage the
formal cusomization.
Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
ui/css/theme-default/network.css | 154 +------------------------------------
ui/js/src/kimchi.network.js | 3 +-
ui/pages/tabs/network.html.tmpl | 2 +-
3 files changed, 8 insertions(+), 151 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index f7d1e14..257540f 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -108,14 +108,17 @@
.network .list .menu-container {
display: none;
- z-index: 100;
top: 58px;
- width: 250px;
}
.network .list .action-button {
float: right;
margin-top: 5px;
+ margin-left: 5px;
+}
+
+.network .list .action-button-icon {
+ background: url("../images/theme-default/arrow-down-black.png") no-repeat scroll center center transparent;
}
.network .list .ui-state-disabled {
@@ -138,153 +141,6 @@
background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent;
}
-.network .list .ui-menu .ui-menu-item a.red:not([disabled]) {
- background: linear-gradient(to bottom, #FF3019 0%, #CF0404 100%) repeat scroll 0 0 transparent;
- border: 1px solid #B10F14;
- color: #FFFFFF;
- text-shadow: -1px -1px 1px #9E0505, 1px 1px 1px #FC5D4C;
-}
-
-.network .list .ui-menu .ui-menu-item a.red:hover:not([disabled]) {
- background: linear-gradient(to bottom, #EF2009 0%, #BF0404 100%) repeat scroll 0 0 transparent;
-}
-
-.network .list .ui-button-text {
- padding: 12px 18px 0.4em 1em;
-}
-
-.network .list .ui-button-icon-secondary {
- margin-top: 0px;
-}
-
-.network .list .ui-menu .ui-menu-item a {
- background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;
- border: 1px solid #CCCCCC;
- border-radius: 5px 5px 5px 5px;
- box-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #EEEEEE;
- display: block;
- font-size: 13px;
- line-height: 38px;
- margin-bottom: 10px;
- text-align: center;
- text-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #FFFFFF;
- width: 96%;
-}
-
-.network .list .ui-menu .ui-menu-item a.ui-state-focus {
- background: linear-gradient(to bottom, #EEEEEE 0%, #D5D5D5 100%) repeat scroll 0 0 transparent;
- box-shadow: -1px -1px 1px #BBBBBB, 1px 1px 1px #DDDDDD;
- margin: 0px 0px 10px 0px;
-}
-
-.network .list .ui-menu .ui-state-disabled {
- opacity: 1;
-}
-
-.network .list .ui-menu .ui-state-disabled a {
- color: gray;
-}
-
-.ui-widget-overlay {
- background: url("../images/theme-default/bg-mask.png") repeat scroll 0 0 transparent;
- opacity: 1;
-}
-
-.network-ui-dialog {
- background: none;
- background-color: #EEEEEE;
- border: 2px solid #0F71B4;
- border-radius: 8px;
- padding: 0px;
- display: none;
-}
-
-.network-ui-dialog .ui-widget-header {
- border: none;
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
- background: none;
- padding: 13px 0px 13px 10px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 -1px 0 rgba(0,0,0,0.05) inset;
-}
-
-.network-ui-dialog .ui-dialog-title {
- font-size: 18px;
- color: #0066CC;
-}
-
-.network-ui-dialog .ui-dialog-titlebar .ui-button-icon-primary {
- display: none;
-}
-
-.network-ui-dialog .ui-dialog-titlebar .ui-state-default {
- background: none repeat scroll 0 0 #EEEEEE;
- border: 2px solid #CCCCCC;
- border-radius: 35px 35px 35px 35px;
- color: #CCCCCC;
- cursor: pointer;
- font-size: 24px;
- font-weight: bold;
- height: 35px;
- position: absolute;
- right: 7px;
- text-align: center;
- top: 5px;
- width: 35px;
-}
-
-.network-ui-dialog .ui-dialog-titlebar .ui-state-hover {
- border: 2px solid #444444;
- color: #444444;
-}
-
-.network-ui-dialog .ui-dialog-titlebar .ui-button-text {
- font-size: 24px;
- padding: 0px;
- text-indent: 0px;
-}
-
-.network-ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
- margin: 4px 0 0;
-}
-
-.network-ui-dialog .ui-dialog-buttonpane {
- padding: 0px;
- background-color: transparent;
- border-width: 0;
- box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
-}
-
-.network-ui-dialog .ui-dialog-buttonpane .ui-state-default {
- background: none repeat scroll 0 0 #0066FF;
- border-radius: 8px 8px 8px 8px;
- color: #EEEEEE;
- display: inline-block;
- height: 38px;
- line-height: 38px;
- padding: 0 20px;
- vertical-align: top;
-}
-
-.network-ui-dialog .ui-dialog-buttonpane .ui-state-disabled {
- background-color: silver;
- opacity: 1;
-}
-
-.network-ui-dialog .ui-dialog-buttonpane .ui-state-hover {
- background: #0044DD;
-}
-
-.network-ui-dialog .ui-dialog-buttonpane button {
- margin-right: 15px;
- border: 0 none;
-}
-
-.network-ui-dialog .ui-dialog-buttonpane .ui-button-text {
- padding: 5px 0px;
- font-size: 13px;
-}
-
.network-config {
font-family: Arial;
font-size: 12px;
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index f7b7eed..cdcf099 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -118,7 +118,7 @@ kimchi.addNetworkActions = function(network) {
});
$(".column-action", "#" + network.name).children(":first").button({
icons : {
- secondary : "arrow"
+ secondary : "action-button-icon"
}
}).click(function() {
$(".menu-container", "#" + network.name).toggle();
@@ -169,6 +169,7 @@ kimchi.initNetworkDialog = function() {
buttons : [ {
id : "networkFormOk",
text : i18n.action_create,
+ class: "ui-button-primary",
disabled: true,
click : function() {
}
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index d850140..9c2ec2a 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -87,7 +87,7 @@
--><span class='column column-interface cell'>{interface}</span><!--
--><span class='column column-space cell'>{addrSpace}</span><!--
--><span class='column-action'>
- <span class="btn dropdown action-button">$_("Actions")</span>
+ <span class="ui-button-secondary dropdown action-button">$_("Actions")</span>
<ul class='popover actionsheet right-side menu-container'>
<li nwAct="start" class='{startClass}'><a>$_("Start")</a></li>
<li nwAct="stop" class='{stopClass}'><a>$_("Stop")</a></li>
--
1.7.1
More information about the Kimchi-devel
mailing list