Re: [Kimchi-devel] [PATCH V3] Issue#361:Bugfix disable the action button content when creating network

On 06/17/2014 01:59 PM, Wen Wang wrote: > From: Hongliang Wang<hlwang(a)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(a)linux.vnet.ibm.com> > Signed-off-by: Wen Wang<wenwang(a)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();

> }); > }; > 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>