[PATCH V3] Issue#361:Bugfix disable the action button content when creating network
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(); + $(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..e477efb 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -105,12 +105,14 @@ --><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="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
On 06/17/2014 01:59 PM, Wen Wang wrote:
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();
+ $(popup).is(':visible') || + kimchi.isElementInViewport(popup) || + popup.scrollIntoView(); The logic here is: if popup is invisible, then return; or else popup is visible, if popup is totally in viewport, then return; else, scroll popup into viewport totally.
So we should change code to: +*!*$(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..e477efb 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -105,12 +105,14 @@
--><span class='column column-interface cell'>{interface}</span><!-- --><span class='column column-space cell'>{addrSpace}</span><!-- --><span class='column-action'> Seems commented elements can be removed (elements within <!-- -->). - <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="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>
On 06/17/2014 03:04 PM, Hongliang Wang wrote:
On 06/17/2014 01:59 PM, Wen Wang wrote:
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 athttp://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();
+ $(popup).is(':visible') || + kimchi.isElementInViewport(popup) || + popup.scrollIntoView(); The logic here is: if popup is invisible, then return; or else popup is visible, if popup is totally in viewport, then return; else, scroll popup into viewport totally.
So we should change code to:
+*!*$(popup).is(':visible') || + kimchi.isElementInViewport(popup) || + popup.scrollIntoView();
ACK
}); }; diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index 35380f4..e477efb 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -105,12 +105,14 @@
--><span class='column column-interface cell'>{interface}</span><!-- --><span class='column column-space cell'>{addrSpace}</span><!-- --><span class='column-action'> Seems commented elements can be removed (elements within <!-- -->).
ACK
- <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="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>
participants (2)
-
Hongliang Wang -
Wen Wang