[Kimchi-devel] [PATCH V4] Issue#361:Bugfix disable the action button content when creating network
Wen Wang
wenwang at linux.vnet.ibm.com
Tue Jun 17 07:25:33 UTC 2014
From: Hongliang Wang <hlwang at linux.vnet.ibm.com>
V3 -> V4
Allow window automatically scroll to the bottom when popup list is too long
that part of it is off sight. (Hongliang Wang).
V2 -> V3
Eliminate menu drop down when click "Action" -> "User"(Hongliang Wang)
V1 -> V2
Accroding to Hongliang Wang, fix the bug that tabs keep shown when there
exists more than one network.
Bugfix that disabled the content display of the action button for an
exsiting
network when creating a new network.
Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
ui/css/theme-default/network.css | 4 +
ui/css/theme-default/popover.css | 3 -
ui/js/src/kimchi.network.js | 118 +++++++++++++++++++-------------------
ui/js/src/kimchi.popable.js | 25 ++++-----
ui/pages/tabs/network.html.tmpl | 38 +++++++------
5 files changed, 93 insertions(+), 95 deletions(-)
diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index ec999e2..df66b75 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -303,3 +303,7 @@
padding: 10px;
width: 100%;
}
+
+.ui-state-default a {
+ color: #212121;
+}
\ No newline at end of file
diff --git a/ui/css/theme-default/popover.css b/ui/css/theme-default/popover.css
index 945a5c2..a2ad39d 100644
--- a/ui/css/theme-default/popover.css
+++ b/ui/css/theme-default/popover.css
@@ -65,9 +65,6 @@
left: auto;
right: 22px;
}
-.open>.popover {
- display: block;
-}
/* Generated at http://colorzilla.com/gradient-editor/ */
.actionsheet {
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 54a6594..16b9ca6 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -100,78 +100,76 @@ kimchi.stopNetwork = function(network,menu) {
}
kimchi.addNetworkActions = function(network) {
- $(".menu-container", "#" + network.name).menu({
- position : {
- my : "left top",
- at : "left bottom",
- of : "#" + network.name
- },
- select : function(evt, ui) {
- $(".menu-container", "#" + network.name).toggle(false);
- var menu = $(evt.currentTarget).parent();
- if ($(evt.currentTarget).attr("nwAct") === "start") {
- $(".network-state", $("#" + network.name)).switchClass("down", "nw-loading");
- $("[nwAct='start']", menu).addClass("ui-state-disabled");
- $("[nwAct='delete']", menu).addClass("ui-state-disabled");
- $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true);
- kimchi.toggleNetwork(network.name, true, function() {
- $("[nwAct='start']", menu).addClass("hide-action-item");
- $("[nwAct='start']", menu).removeClass("ui-state-disabled");
- $("[nwAct='stop']", menu).removeClass("hide-action-item");
- if (network.in_use) {
- $("[nwAct='stop']", menu).addClass("ui-state-disabled");
- }
- $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up");
- }, function(err) {
- $(".network-state", $("#" + network.name)).switchClass("nw-loading","down");
- $("[nwAct='start']", menu).removeClass("ui-state-disabled");
- if (!network.in_use) {
- $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
- }
- $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
- kimchi.message.error(err.responseJSON.reason);
- });
- } else if ($(evt.currentTarget).attr("nwAct") === "stop") {
- if (!network.persistent) {
- var settings = {
- title : i18n['KCHAPI6001M'],
- content : i18n['KCHNET6004M'],
- confirm : i18n['KCHAPI6002M'],
- cancel : i18n['KCHAPI6003M']
- };
- kimchi.confirm(settings, function() {
- kimchi.stopNetwork(network, menu);
- $(evt.currentTarget).parents(".item").remove();
- }, null);
+ $(".menu-container", "#" + network.name).menu();
+
+ $('#' + network.name).on('click', '.menu-container li', function(evt) {
+ var menu = $(evt.currentTarget).parent();
+ if ($(evt.currentTarget).attr("nwAct") === "start") {
+ $(".network-state", $("#" + network.name)).switchClass("down", "nw-loading");
+ $("[nwAct='start']", menu).addClass("ui-state-disabled");
+ $("[nwAct='delete']", menu).addClass("ui-state-disabled");
+ $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true);
+ kimchi.toggleNetwork(network.name, true, function() {
+ $("[nwAct='start']", menu).addClass("hide-action-item");
+ $("[nwAct='start']", menu).removeClass("ui-state-disabled");
+ $("[nwAct='stop']", menu).removeClass("hide-action-item");
+ network.state = "up";
+ if (network.in_use) {
+ $("[nwAct='stop']", menu).addClass("ui-state-disabled");
}
- else {
- kimchi.stopNetwork(network, menu);
+ $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up");
+ }, function(err) {
+ $(".network-state", $("#" + network.name)).switchClass("nw-loading","down");
+ $("[nwAct='start']", menu).removeClass("ui-state-disabled");
+ if (!network.in_use) {
+ $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
}
- } else if ($(evt.currentTarget).attr("nwAct") === "delete") {
- kimchi.confirm({
- title : i18n['KCHAPI6006M'],
- content : i18n['KCHNET6002M'],
+ $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
+ kimchi.message.error(err.responseJSON.reason);
+ });
+ } else if ($(evt.currentTarget).attr("nwAct") === "stop") {
+ if (network.in_use) {
+ return false;
+ }
+ if (!network.persistent) {
+ var settings = {
+ title : i18n['KCHAPI6001M'],
+ content : i18n['KCHNET6004M'],
confirm : i18n['KCHAPI6002M'],
cancel : i18n['KCHAPI6003M']
- }, function() {
- kimchi.deleteNetwork(network.name, function() {
- $(evt.currentTarget).parents(".item").remove();
- });
+ };
+ kimchi.confirm(settings, function() {
+ kimchi.stopNetwork(network, menu);
+ $(evt.currentTarget).parents(".item").remove();
}, null);
}
+ else {
+ kimchi.stopNetwork(network, menu);
+ network.state = "down";
+ }
+ } else if ($(evt.currentTarget).attr("nwAct") === "delete") {
+ if (network.state === "up") {
+ return false;
+ }
+ kimchi.confirm({
+ title : i18n['KCHAPI6006M'],
+ content : i18n['KCHNET6002M'],
+ confirm : i18n['KCHAPI6002M'],
+ cancel : i18n['KCHAPI6003M']
+ }, function() {
+ kimchi.deleteNetwork(network.name, function() {
+ $(evt.currentTarget).parents(".item").remove();
+ });
+ }, null);
}
});
- $(".column-action", "#" + network.name).children(":first").button({
+
+ $("#networkBody .column-action .popable").button({
icons : {
secondary : "action-button-icon"
}
- }).click(function() {
- $(".menu-container", "#" + network.name).toggle();
- window.scrollBy(0, 150);
- });
- $(".menu-container", "#" + network.name).mouseleave(function() {
- $(".menu-container", "#" + network.name).toggle(false);
});
+
};
kimchi.initNetworkCreation = function() {
diff --git a/ui/js/src/kimchi.popable.js b/ui/js/src/kimchi.popable.js
index 295eaed..aafcaf4 100644
--- a/ui/js/src/kimchi.popable.js
+++ b/ui/js/src/kimchi.popable.js
@@ -17,21 +17,18 @@
*/
kimchi.popable = function() {
$(document).click(function(e) {
- $('.popable').removeClass('open');
- });
- $(document).on("click", ".popable", function(e) {
- var isOpen = $(this).hasClass('open');
- $(".popable").removeClass('open');
- if (!isOpen && $(this).find('ul').html() !== '') {
- $(this).addClass('open');
- }
+ $('.popable').each(function(i, n) {
+ n === e.target || $.contains(n, e.target) ||
+ $('.popover', n).toggle(false);
+ });
+ });
+ $(document).on('click', '.popable', function(e) {
+ var popup = $('.popover', this)[0];
+ $(popup).toggle();
// Scroll the popup menu into viewport if invisible.
- var popMenu = $('.popover', this).get(0);
- false === kimchi.isElementInViewport(popMenu) &&
- popMenu.scrollIntoView();
-
- e.preventDefault();
- e.stopPropagation();
+ !$(popup).is(':visible') ||
+ kimchi.isElementInViewport(popup) ||
+ popup.scrollIntoView();
});
};
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index 35380f4..30c9f29 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -33,12 +33,12 @@
<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">$_("Actions")</span>
+ <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">$_("Actions")</span>
</div>
<div id="networkBody" class="empty-when-logged-off"></div>
</div>
@@ -99,18 +99,20 @@
</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><!--
- --><span class='column-action'>
- <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 {deleteDisabled}>$_("Stop")</a></li>
- <li nwAct="delete" class='{deleteClass}'><a {deleteDisabled} class='red'>$_("Delete")</a></li>
- </ul>
+ <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>
+ <span class='column-action'>
+ <span class="ui-button-secondary dropdown popable action-button">
+ $_("Actions")
+ <ul class='popover actionsheet right-side menu-container'>
+ <li nwAct="start" class='{startClass}'><a class='button-big'>$_("Start")</a></li>
+ <li nwAct="stop" class='{stopClass}'><a {stopDisabled} class='button-big'>$_("Stop")</a></li>
+ <li nwAct="delete" class='{deleteClass}'><a {deleteDisabled} class='red'>$_("Delete")</a></li>
+ </ul>
+ </span>
</span>
</div>
</script>
--
1.7.1
More information about the Kimchi-devel
mailing list