bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tooltips for icon buttons

Browse Source
This commit is contained in:
Jason Zimdars
2025-11-11 15:33:38 -06:00
parent fa39e83263
commit 68c8c61d56
5 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/helpers/clipboard_helper.rb
+1 -1
View File
@@ -1,7 +1,7 @@
module ClipboardHelper
def button_to_copy_to_clipboard(url, &)
tag.button class: "btn", data: {
controller: "copy-to-clipboard", action: "copy-to-clipboard#copy",
controller: "copy-to-clipboard tooltip", action: "copy-to-clipboard#copy",
copy_to_clipboard_success_class: "btn--success", copy_to_clipboard_content_value: url
}, &
end
app/views/boards/show/menu/_columns.html.erb
+2 -1
View File
@@ -1,6 +1,7 @@
<div class="cards__new-column position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
<button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop" aria-label="Add a new column, etc.">
<button class="btn btn--circle txt-x-small borderless" data-controller="tooltip" data-action="click->dialog#open:stop">
<%= icon_tag "add", class: "translucent" %>
<span class="for-screen-reader">Add a column</span>
</button>
<dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
<%= render "boards/show/menu/column_form", board: board, column: Column.new, label: "Add column" %>
app/views/filters/settings/_toggle.html.erb
+4 -2
View File
@@ -1,11 +1,13 @@
<% filter = user_filtering.filter %>
<% if user_filtering.expanded? %>
<button type="button" class="btn txt-x-small btn--reversed" aria-selected="true" aria-label="Close filter options" data-action="toggle-class#toggle toggle-enable#toggle">
<button type="button" class="btn txt-x-small btn--reversed" aria-selected="true" data-action="toggle-class#toggle toggle-enable#toggle" data-controller="tooltip">
<%= icon_tag "filter" %>
<span class="for-screen-reader">Close filter options</span>
</button>
<% else %>
<button type="button" class="btn txt-x-small filter-toggle" aria-label="Expand filter options" data-action="toggle-class#toggle toggle-enable#toggle">
<button type="button" class="btn txt-x-small filter-toggle" data-action="toggle-class#toggle toggle-enable#toggle" data-controller="tooltip">
<%= icon_tag "filter" %>
<span class="for-screen-reader">Expand filter options</span>
</button>
<% end %>
app/views/users/_transfer.html.erb
+4 -4
View File
@@ -12,18 +12,18 @@
<div class="flex align-center gap">
<div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
<%= tag.button class: "btn", data: { action: "dialog#open" } do %>
<%= tag.button class: "btn", data: { action: "dialog#open", controller: "tooltip" } do %>
<%= icon_tag "qr-code" %>
<span class="for-screen-reader">Show auto-login QR code</span>
<span class="for-screen-reader">Display auto-login QR code</span>
<% end %>
<dialog class="dialog panel shadow" data-dialog-target="dialog">
<%= qr_code_image(url) %>
<form method="dialog" class="margin-block-start flex justify-center">
<button class="btn">
<button class="btn" data-controller="tooltip">
<%= icon_tag "remove" %>
<span class="for-screen-reader">Close</span>
<span class="for-screen-reader">Close dialog</span>
</button>
</form>
</dialog>
app/views/users/show.html.erb
+4 -4
View File
@@ -5,9 +5,9 @@
<section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
<div class="flex flex-column gap position-relative">
<% if Current.user == @user %>
<%= link_to edit_user_path(@user), class: "user-edit-link btn" do %>
<%= link_to edit_user_path(@user), class: "user-edit-link btn", data: { controller: "tooltip" } do %>
<%= icon_tag "pencil" %>
<span class="for-screen-reader">Edit</span>
<span class="for-screen-reader">Edit profile</span>
<% end %>
<% end %>
@@ -27,9 +27,9 @@
</div>
<div class="flex-inline center justify-center flex-wrap gap">
<%= link_to "Which cards are assigned to #{me_or_you}?",
<%= link_to "Which cards are assigned to #{me_or_you}?",
cards_path(assignee_ids: [ @user.id ], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
<%= link_to "Which cards were added by #{me_or_you}?",
<%= link_to "Which cards were added by #{me_or_you}?",
cards_path(creator_ids: [ @user.id ], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
</div>
</div>