From 8ba4a094ede9fe3dec6098c37534f5d40d92ba5e Mon Sep 17 00:00:00 2001 From: andrew nimmo Date: Sun, 18 Aug 2024 14:54:50 -0700 Subject: [PATCH 01/13] Implement tooltips correctly --- app/helpers/link_helper.rb | 24 ++++++-- .../controllers/tooltip_controller.js | 15 +++++ .../application/top_nav/_user_nav.html.erb | 61 ++++++++----------- .../controllers/layouts/application.html.erb | 2 +- 4 files changed, 60 insertions(+), 42 deletions(-) create mode 100644 app/javascript/controllers/tooltip_controller.js diff --git a/app/helpers/link_helper.rb b/app/helpers/link_helper.rb index 3ca7578549..c7a4b18c2a 100644 --- a/app/helpers/link_helper.rb +++ b/app/helpers/link_helper.rb @@ -81,16 +81,17 @@ def modal_link_to(identifier, name, path, args) # Icon link with optional active state. (Tooltip title must be swapped in JS.) # Now also accepts active state options: active_icon, active_content # NOTE: Takes same args as link_to, e.g. *edit_description_tab(desc, type) - # icon_link_to(text, path, **args) + # icon_link_to(text, path, **args). Can also print a button_to. def icon_link_to(text = nil, path = nil, options = {}, &block) return unless text - link = block ? text : path # because positional + link_path = block ? text : path # because positional content = block ? capture(&block) : text opts = block ? path : options # because positional icon_type = opts[:icon] return link_to(link, opts) { content } if icon_type.blank? + # method = opts[:button] ? :button_to : :link_to active_icon = opts[:active_icon] active_content = options[:active_content] stateful = active_icon && active_content @@ -106,14 +107,19 @@ def icon_link_to(text = nil, path = nil, options = {}, &block) data: { toggle: "tooltip", title: content, # needed for swapping only active_title: opts[:active_content] } }.deep_merge(opts.except(:class, :icon, :icon_class, :show_text, - :active_icon, :active_content)) + :active_icon, :active_content, :button_to)) - link_to(link, **link_opts) do + html = capture do concat(link_icon(icon_type, class: icon_class)) concat(link_icon(active_icon, class: icon_active_class)) if stateful concat(tag.span(content, class: label_class)) concat(tag.span(active_content, class: label_active_class)) if stateful end + if opts[:button_to] + button_to(html, link_path, **link_opts) + else + link_to(html, link_path, **link_opts) + end end # NOTE: above re: MO tabs @@ -137,11 +143,11 @@ def link_icon(type, **args) if args[:title].present? title = args[:title] - args[:data] = { toggle: "tooltip", title: }.merge(args[:data] || {}) + args[:data] = { toggle: "tooltip" }.merge(args[:data] || {}) text = tag.span(title, class: "sr-only") end - tag.span(text, **args.except(:title)) + tag.span(text, **args) end # NOTE: Specific to glyphicons @@ -156,6 +162,12 @@ def link_icon(type, **args) x: "remove", remove: "remove-circle", send: "send", + log_in: "log-in", + log_out: "log-out", + admin: "text-background", + inbox: "inbox", + interests: "bullhorn", + settings: "cog", ban: "ban-circle", plus: "plus-sign", minus: "minus-sign", diff --git a/app/javascript/controllers/tooltip_controller.js b/app/javascript/controllers/tooltip_controller.js new file mode 100644 index 0000000000..f6cf8a2092 --- /dev/null +++ b/app/javascript/controllers/tooltip_controller.js @@ -0,0 +1,15 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="tooltip" +// BS3 tooltips are "opt-in", so they require on-page activation +export default class extends Controller { + + connect() { + this.element.dataset.stimulus = "tooltip-connected"; + this.activateTooltips(); + } + + activateTooltips() { + $('[data-toggle="tooltip"]').tooltip() + } +} diff --git a/app/views/controllers/application/top_nav/_user_nav.html.erb b/app/views/controllers/application/top_nav/_user_nav.html.erb index 0893acc1a4..62f3839ad2 100644 --- a/app/views/controllers/application/top_nav/_user_nav.html.erb +++ b/app/views/controllers/application/top_nav/_user_nav.html.erb @@ -14,32 +14,24 @@ <% end %>
  • - <%= link_to( - "", comments_path(for_user: @user.id), - { class: "glyphicon glyphicon-inbox", - id: "user_nav_inbox_link", - title: :app_comments_for_you.t, - data: { toggle: "tooltip", placement: "bottom" } } + <%= icon_link_to( + :app_comments_for_you.l, comments_path(for_user: @user.id), + { icon: :inbox, id: "user_nav_inbox_link", + data: { placement: "bottom" } } ) %>
  • - <%= link_to( - "", - interests_path, - { class: "glyphicon glyphicon-bullhorn", - id: "user_nav_interests_link", - title: :app_your_interests.t, - data: { toggle: "tooltip", placement: "bottom" } } + <%= icon_link_to( + :app_your_interests.l, interests_path, + { icon: :interests, id: "user_nav_interests_link", + data: { placement: "bottom" } } ) %>
  • - <%= link_to( - "", - edit_account_preferences_path, - { class: "glyphicon glyphicon-cog", - id: "user_nav_preferences_link", - title: :app_preferences.t, - data: { toggle: "tooltip", placement: "bottom" } } + <%= icon_link_to( + :app_preferences.l, edit_account_preferences_path, + { icon: :settings, id: "user_nav_preferences_link", + data: { placement: "bottom" } } ) %>
    • -
  • <%= button_to( - account_logout_path, - { class: "btn btn-link navbar-btn", - id: "user_nav_logout_link", - title: :app_logout.t } - ) do - tag.span("", class: "glyphicon glyphicon-log-out") - end %>
    • +
  • + <%= icon_link_to( + :app_logout.l, account_logout_path, + { icon: :log_out, id: "user_nav_logout_link", button_to: true, + class: "btn btn-link navbar-btn", data: { placement: "bottom" } } + ) %> +
    • diff --git a/app/views/controllers/layouts/application.html.erb b/app/views/controllers/layouts/application.html.erb index 5032598c1a..cbb6ecee01 100644 --- a/app/views/controllers/layouts/application.html.erb +++ b/app/views/controllers/layouts/application.html.erb @@ -14,7 +14,7 @@ body_class = class_names(ctrlr_action, theme, location_format, logged_in) <%= render(partial: "application/app/head") %> - + <% if Rails.env == "production" %> <%= render(partial: "application/app/gtm_iframe") %> <% end %> From f10d66f0dd60af93429c0cb011cefa0da3a874e7 Mon Sep 17 00:00:00 2001 From: andrew nimmo Date: Sun, 18 Aug 2024 15:13:33 -0700 Subject: [PATCH 02/13] Update _user_nav.html.erb --- .../application/top_nav/_user_nav.html.erb | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/app/views/controllers/application/top_nav/_user_nav.html.erb b/app/views/controllers/application/top_nav/_user_nav.html.erb index 62f3839ad2..5e6a2cd620 100644 --- a/app/views/controllers/application/top_nav/_user_nav.html.erb +++ b/app/views/controllers/application/top_nav/_user_nav.html.erb @@ -44,20 +44,16 @@
  • <%= link_to(:app_your_observations.l, observations_path(user: @user.id), { class: "" } ) %>
    • -
  • <%= link_to(:app_your_projects.l, - projects_path(member: @user.id), +
  • <%= link_to(:app_your_projects.l, projects_path(member: @user.id), { class: "", id: "user_drop_projects_link" }) %>
    • -
  • <%= link_to(:app_your_lists.l, - species_lists_path(by_user: @user.id), - { class: "", id: "user_drop_species_lists_link" } ) %>
    • -
  • <%= link_to(:app_your_interests.l, - interests_path, +
  • <%= link_to(:app_your_lists.l, species_lists_path(by_user: @user.id), + { class: "", + id: "user_drop_species_lists_link" } ) %>
    • +
  • <%= link_to(:app_your_interests.l, interests_path, { class: "", id: "user_drop_interests_link" }) %>
    • -
  • <%= link_to(:app_your_summary.l, - user_path(@user.id), +
  • <%= link_to(:app_your_summary.l, user_path(@user.id), { class: "", id: "user_drop_profile_link" }) %>
    • -
  • <%= link_to(:app_preferences.l, - edit_account_preferences_path, +
  • <%= link_to(:app_preferences.l, edit_account_preferences_path, { class: "", id: "user_drop_preferences_link" }) %>
  • <%= button_to( From 5531233fdbefeefc804c357ef10d69ad4ab7d9be Mon Sep 17 00:00:00 2001 From: andrew nimmo Date: Sun, 18 Aug 2024 18:52:59 -0700 Subject: [PATCH 03/13] Update _user_nav.html.erb --- .../application/top_nav/_user_nav.html.erb | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/views/controllers/application/top_nav/_user_nav.html.erb b/app/views/controllers/application/top_nav/_user_nav.html.erb index 5e6a2cd620..9e09a717ad 100644 --- a/app/views/controllers/application/top_nav/_user_nav.html.erb +++ b/app/views/controllers/application/top_nav/_user_nav.html.erb @@ -1,16 +1,16 @@ +<% +admin_title = in_admin_mode? ? :app_turn_admin_off.t : :app_turn_admin_on.t +admin_mode_args = in_admin_mode? ? { turn_off: true } : { turn_on: true } +%> +