Convert Dropdown menu to component #2009

ZitaNemeckova · 2017-08-28T09:56:43Z

@miq-bot add_label wip

https://www.pivotaltracker.com/story/show/147760695

ZitaNemeckova · 2017-09-01T11:23:05Z

@miq-bot remove_label wip

himdel · 2017-09-21T16:48:50Z

app/assets/javascripts/components/dropdown-menu.js

+    '  </button>' +
+    '  <ul aria-labelledby="{{vm.dropdown_id}}" class="dropdown-menu dropdown-menu-right">' +
+    '    <li ng-repeat="button in vm.buttons">' +
+    '      <a id="{{button.id}}" title="{{button.title}}" data-method="{{button.dataMethod}}" data-remote="{{button.dataRemote}}" confirm="{{button.confirm}}" href="{{button.href}}" data-miq_spark_on="{{button.sparkOn}}">' +


data-miq_sparkle_on ;)

Also, neither sparkOn nor sparkleOn is actually used .. looks like you just skipped them :)

himdel · 2017-09-21T16:51:24Z

app/assets/javascripts/components/dropdown-menu.js

+
+    this.$onInit = function() {
+      vm.dropdown_id = 'btn_' + vm.id;
+      vm.buttons = JSON.parse(vm.buttons);


missing $onChange probably .. or should the binding be @ since we're passing in a string?

himdel · 2017-09-21T16:53:29Z

app/presenters/widget_presenter.rb

+      unless @sb[:dashboards][@sb[:active_db]][:locked]
+        buttons.push(:id         => "w_#{@widget.id}_close",
+                     :title      => _("Remove from Dashboard"),
+                     :name       => _(" Remove Widget"),


extra leading space in " Remove Widget"?

... looks most of the name values have that - please remove it and make sure the component shows a reasonable space when both fonticon and name are used :).

(Most likely, adding a ng-if for fonticon and forcing fa-fw (fixed width) for the icon if it is there is what you want.)

himdel · 2017-09-21T16:55:37Z

app/assets/javascripts/components/dropdown-menu.js

+    '  <ul aria-labelledby="{{vm.dropdown_id}}" class="dropdown-menu dropdown-menu-right">' +
+    '    <li ng-repeat="button in vm.buttons">' +
+    '      <a id="{{button.id}}" title="{{button.title}}" data-method="{{button.dataMethod}}" data-remote="{{button.dataRemote}}" confirm="{{button.confirm}}" href="{{button.href}}" data-miq_spark_on="{{button.sparkOn}}">' +
+    '        <span class="{{button.fonticon}}"></span>' +


himdel · 2017-09-21T16:57:58Z

app/views/dashboard/_widget.html.haml

-              - if %w(chart).include?(presenter.widget.content_type)
-                %li
-                  = presenter.button_zoom
+        %dropdown-menu{:id => 42, :buttons => presenter.widget_buttons}


skateman · 2017-10-10T12:35:56Z

app/assets/javascripts/components/dropdown-menu.js

+      vm.buttons = JSON.parse(vm.buttonsData);
+    };
+  },
+  template: [


@ZitaNemeckova don't we want this in a static HTML?

or HAML 😉

%div.dropdown.pull-right.dropdown-kebab-pf %button.btn.btn-link.dropdown-toggle{'aria-haspopup' => "true", 'data-toggle' => "dropdown", 'id' => "{{vm.dropdown_id}}", 'type' => "button", 'aria-expanded' => "false"} %span.fa.fa-ellipsis-v %ul.dropdown-menu.dropdown-menu-right{'aria-labelledby' => "{{vm.dropdown_id}}"} %li{'ng-repeat' => "button in vm.buttons"} %a{'id' => "{{button.id}}", 'title' => "{{button.title}}", 'data-method' => "{{button.dataMethod}}", 'data-remote' => "{{button.dataRemote}}", 'confirm' => "{{button.confirm}}", 'href' => "{{button.href}}", 'data-miq_spark_on' => "{{button.sparkleOn}}"} %span{'ng-class' => "button.fonticon"} {{button.name}}

ZitaNemeckova · 2017-10-11T14:10:43Z

@miq-bot add_label wip

ZitaNemeckova · 2017-10-13T08:09:57Z

@miq-bot remove_label wip

himdel · 2017-10-17T12:46:40Z

app/views/static/dropdown-menu.html.haml

+         'data-remote'       => "{{button.dataRemote}}",
+         'confirm'           => "{{button.confirm}}",
+         'href'              => "{{button.href}}",
+         'data-miq_spark_on' => "{{button.sparkleOn}}"}


date-miq_sparkle_on ;)

Also ... you're never setting sparkleOn to true, so please do :)

himdel · 2017-10-17T12:49:16Z

app/views/static/dropdown-menu.html.haml

+         'title'             => "{{button.title}}",
+         'data-method'       => "{{button.dataMethod}}",
+         'data-remote'       => "{{button.dataRemote}}",
+         'confirm'           => "{{button.confirm}}",


confirm isn't working.. I'll try to find how it works normally..

update.. it's broken in master too :) but let's fix it.. :)

.. indeed .. make this data-confirm and it works :).

himdel · 2017-10-17T14:31:23Z

Except for data-confirm and miq-sparkle-on, looks like this works just fine :) (I'm seeing the same buttons, causing the same errors 👍 .)

ZitaNemeckova · 2017-10-18T10:04:25Z

@himdel Fixed. Thanks :)

himdel · 2017-10-18T15:03:20Z

app/views/static/dropdown-menu.html.haml

+         'data-remote'         => "{{button.dataRemote}}",
+         'data-confirm'        => "{{button.confirm}}",
+         'href'                => "{{button.href}}",
+         'data-miq_sparkle_on' => true}


Shouldn't this happen just for button close and button zoom?

himdel · 2017-10-18T15:32:47Z

(To address the problem of data-miq_sparkle_on="false" still sparkling.)

miq_ujs_bindings.js line 119:

$(document).on('focus', '[data-miq_observe]', function () {

I don't think you can catch it in the selector, but in the code itself, you could just do something like if (el.data('miq_observe') === "false") return; }.

EDIT: sorry, I confused sparkle and observe, but you found it already :)

Spinner is called for every other possible value including empty string, no value, ...

himdel · 2017-10-19T11:45:54Z

Tested in the UI, merging when green :)

miq-bot · 2017-10-19T11:49:05Z

Checked commits ZitaNemeckova/manageiq-ui-classic@76e9d4d~...7a5787c with ruby 2.3.3, rubocop 0.47.1, and haml-lint 0.20.0
1 file checked, 0 offenses detected
Everything looks fine. 👍

miq-bot changed the title ~~Convert Dropdown menu to component~~ [WIP] Convert Dropdown menu to component Aug 28, 2017

miq-bot added the wip label Aug 28, 2017

ZitaNemeckova force-pushed the dropdown_menu_component branch 5 times, most recently from 30cbe09 to 1fc3f9b Compare September 1, 2017 09:56

miq-bot changed the title ~~[WIP] Convert Dropdown menu to component~~ Convert Dropdown menu to component Sep 1, 2017

miq-bot removed the wip label Sep 1, 2017

dclarizio added dashboards enhancement fine/no labels Sep 19, 2017

dclarizio assigned himdel Sep 19, 2017

himdel reviewed Sep 21, 2017

View reviewed changes

ZitaNemeckova force-pushed the dropdown_menu_component branch 2 times, most recently from b204549 to 49551e5 Compare September 29, 2017 13:17

skateman reviewed Oct 10, 2017

View reviewed changes

Buttons to components

76e9d4d

miq-bot changed the title ~~Convert Dropdown menu to component~~ [WIP] Convert Dropdown menu to component Oct 11, 2017

miq-bot added the wip label Oct 11, 2017

ZitaNemeckova force-pushed the dropdown_menu_component branch 3 times, most recently from fe0bee5 to f278fba Compare October 13, 2017 08:00

miq-bot changed the title ~~[WIP] Convert Dropdown menu to component~~ Convert Dropdown menu to component Oct 13, 2017

miq-bot removed the wip label Oct 13, 2017

himdel reviewed Oct 17, 2017

View reviewed changes

Move template to static

579d7ec

ZitaNemeckova force-pushed the dropdown_menu_component branch from f278fba to 579d7ec Compare October 18, 2017 09:32

himdel reviewed Oct 18, 2017

View reviewed changes

ZitaNemeckova and others added 3 commits October 19, 2017 08:09

Fix data-miq_sparkle_on

d25a596

Spinner is ont called if data-miq_sparkle_on/off is set to false

cfd0b18

Spinner is called for every other possible value including empty string, no value, ...

miq_ujs_bindings - fix wrong spacing of if body

7a5787c

himdel force-pushed the dropdown_menu_component branch from dfafd0b to 7a5787c Compare October 19, 2017 11:45

himdel merged commit 1a9b222 into ManageIQ:master Oct 19, 2017

himdel added this to the Sprint 72 Ending Oct 30, 2017 milestone Oct 19, 2017

ZitaNemeckova deleted the dropdown_menu_component branch October 19, 2017 12:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert Dropdown menu to component #2009

Convert Dropdown menu to component #2009

ZitaNemeckova commented Aug 28, 2017

ZitaNemeckova commented Sep 1, 2017

himdel Sep 21, 2017

himdel Sep 21, 2017

himdel Sep 21, 2017 •

edited

himdel Sep 21, 2017

himdel Sep 21, 2017

himdel Sep 21, 2017

himdel Sep 21, 2017

skateman Oct 10, 2017

skateman Oct 10, 2017

himdel Oct 12, 2017

ZitaNemeckova commented Oct 11, 2017

ZitaNemeckova commented Oct 13, 2017

himdel Oct 17, 2017

himdel Oct 17, 2017 •

edited

himdel Oct 17, 2017

himdel Oct 17, 2017

himdel Oct 17, 2017

himdel commented Oct 17, 2017

ZitaNemeckova commented Oct 18, 2017

himdel Oct 18, 2017

himdel commented Oct 18, 2017 •

edited

himdel commented Oct 19, 2017

miq-bot commented Oct 19, 2017

Convert Dropdown menu to component #2009

Convert Dropdown menu to component #2009

Conversation

ZitaNemeckova commented Aug 28, 2017

ZitaNemeckova commented Sep 1, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

himdel Sep 21, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZitaNemeckova commented Oct 11, 2017

ZitaNemeckova commented Oct 13, 2017

Choose a reason for hiding this comment

himdel Oct 17, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

himdel commented Oct 17, 2017

ZitaNemeckova commented Oct 18, 2017

Choose a reason for hiding this comment

himdel commented Oct 18, 2017 • edited

himdel commented Oct 19, 2017

miq-bot commented Oct 19, 2017

himdel Sep 21, 2017 •

edited

himdel Oct 17, 2017 •

edited

himdel commented Oct 18, 2017 •

edited