From: Hongliang Wang <hlwang@linux.vnet.ibm.com>
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@linux.vnet.ibm.com>
Signed-off-by: Wen Wang <wenwang@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 | 14 +++--
5 files changed, 81 insertions(+), 83 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..a171b9f 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();