[Kimchi-devel] [PATCH V3] Issue#361:Bugfix disable the action button content when creating network
Hongliang Wang
hlwang at linux.vnet.ibm.com
Tue Jun 17 07:04:15 UTC 2014
On 06/17/2014 01:59 PM, Wen Wang wrote:
> From: Hongliang Wang <hlwang at 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 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 | 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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140617/19bf8b14/attachment.html>
More information about the Kimchi-devel
mailing list