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

Hongliang Wang hlwang at linux.vnet.ibm.com
Tue Jun 17 09:30:53 UTC 2014


On 06/17/2014 03:25 PM, Wen Wang wrote:
> 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>
Reviewed-by: Hongliang Wang <hlwang 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>




More information about the Kimchi-devel mailing list