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