[Kimchi-devel] [V1] Remove jquery-ui customization in network
Aline Manera
alinefm at linux.vnet.ibm.com
Thu Jan 2 17:25:26 UTC 2014
Reviewed-by: Aline Manera <alinefm at linux.vnet.ibm.com>
But it depends on "[V1 0/3] Customize jquery-ui"
On 01/02/2014 04:50 AM, huoyuxin at linux.vnet.ibm.com wrote:
> 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>
More information about the Kimchi-devel
mailing list