Merge pull request #2688 from tvdeyen/tooltip-title

Use title attribute for link_to_dialog and delete_button tooltip

app/assets/stylesheets/alchemy/filter_field.scss

@@ -14,6 +14,11 @@
     padding-left: 28px;
     padding-right: 24px;
     margin: 0;
+
+    .input & {
+      float: none;
+      width: 100%;
+    }
   }
 
   .js_filter_field_clear {

app/helpers/alchemy/admin/base_helper.rb

@@ -54,11 +54,18 @@ def current_alchemy_user_name
       def link_to_dialog(content, url, options = {}, html_options = {})
         default_options = {modal: true}
         options = default_options.merge(options)
-        link_to content, url,
-          html_options.merge(
-            "data-dialog-options" => options.to_json,
-            :is => "alchemy-dialog-link"
-          )
+        if html_options[:title]
+          tooltip = html_options.delete(:title)
+        end
+        anchor = link_to(content, url, html_options.merge(
+          "data-dialog-options" => options.to_json,
+          :is => "alchemy-dialog-link"
+        ))
+        if tooltip
+          content_tag("sl-tooltip", anchor, content: tooltip)
+        else
+          anchor
+        end
       end
 
       # Used for translations selector in Alchemy cockpit user settings.
@@ -194,16 +201,22 @@ def delete_button(url, options = {}, html_options = {})
           message: Alchemy.t("Are you sure?"),
           icon: "delete-bin-2"
         }.merge(options)
-        button_with_confirm(
+
+        if html_options[:title]
+          tooltip = html_options.delete(:title)
+        end
+        button = button_with_confirm(
           render_icon(options[:icon]),
-          url, {
-            message: options[:message]
-          }, {
+          url, options, {
             method: "delete",
-            title: options[:title],
             class: "icon_button #{html_options.delete(:class)}".strip
           }.merge(html_options)
         )
+        if tooltip
+          content_tag("sl-tooltip", button, content: tooltip)
+        else
+          button
+        end
       end
 
       # (internal) Renders translated Module Names for html title element.

app/views/alchemy/admin/nodes/index.html.erb

@@ -11,6 +11,7 @@
       label: Alchemy.t(:create_menu),
       url: alchemy.new_admin_node_path,
       hotkey: 'alt+n',
+      tooltip_placement: "top-start",
       dialog_options: {
         title: Alchemy.t(:create_menu),
         size: '450x120'

app/views/alchemy/admin/partials/_toolbar_button.html.erb

@@ -7,7 +7,6 @@
         options[:dialog_options],
         {
           class: ["icon_button", options[:active] && "active"].compact,
-          title: options[:title],
           "data-alchemy-hotkey" => options[:hotkey]
         }.merge(options[:link_options])
       ) %>

app/views/layouts/alchemy/admin.html.erb

@@ -55,7 +55,7 @@
           }, {'data-alchemy-hotkey' => 'alt+q'}) %>
         <% else %>
           <%= link_to(alchemy.root_path) do %>
-            <i class="icon ri-logout-r-line ri-fw ri-lg"></i>
+            <i class="icon ri-logout-box-r-line ri-fw ri-lg"></i>
             <label><%= Alchemy.t(:leave) %></label>
           <% end %>
         <% end %>

lib/alchemy/test_support/capybara_helpers.rb

@@ -47,7 +47,7 @@ def select2_search(value, options)
       end
 
       def click_button_with_tooltip(content)
-        find(%([content="#{content}"] > button)).click
+        find(%([content="#{content}"] button)).click
       end
 
       def click_link_with_tooltip(content)

spec/features/admin/resources_integration_spec.rb

@@ -273,7 +273,7 @@
       second_event
       visit "/admin/events"
       within("tr", text: "My second Event") do
-        click_on "Delete"
+        click_button_with_tooltip "Delete"
       end
     end
 

spec/helpers/alchemy/admin/base_helper_spec.rb

@@ -19,6 +19,22 @@ module Alchemy
         link = helper.link_to_dialog("Open", admin_dashboard_path, {}, {id: "my-link"})
         expect(link).to have_css("a#my-link")
       end
+
+      context "with title in html options" do
+        it "passes html title to sl-tooltip" do
+          link = helper.link_to_dialog("Open", admin_dashboard_path, {}, {title: "Open Me"})
+          expect(link).to have_css("sl-tooltip[content='Open Me']")
+          expect(link).to_not have_css("a[title='Open Me']")
+        end
+      end
+
+      context "without title in html options" do
+        it "has no sl-toolip" do
+          link = helper.link_to_dialog("Open", admin_dashboard_path, {}, {})
+          expect(link).to_not have_css("sl-tooltip")
+          expect(link).to_not have_css("a[title]")
+        end
+      end
     end
 
     describe "#toolbar_button" do
@@ -133,6 +149,28 @@ module Alchemy
       it "returns a form tag with method=delete" do
         is_expected.to have_selector('form input[name="_method"][value="delete"]')
       end
+
+      context "with title in html options" do
+        subject(:button) do
+          delete_button("/admin/pages", {}, {title: "Open Me"})
+        end
+
+        it "passes html title to sl-tooltip" do
+          expect(button).to have_css("sl-tooltip[content='Open Me']")
+          expect(button).to_not have_css("button[title='Open Me']")
+        end
+      end
+
+      context "without title in html options" do
+        subject(:button) do
+          delete_button("/admin/pages", {}, {})
+        end
+
+        it "has no sl-toolip" do
+          expect(button).to_not have_css("sl-tooltip")
+          expect(button).to_not have_css("button[title]")
+        end
+      end
     end
 
     describe "#alchemy_datepicker" do