Skip to content

Make toggle switch labels clickable #2009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andyra merged 10 commits into from
Dec 10, 2025
Merged

Make toggle switch labels clickable #2009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a9432ec
Make labels for webhook switches clickable
nqst Dec 8, 2025
a992be8
Make board publication switch icons clickable
nqst Dec 8, 2025
2fb76f1
(Optional) Simpler hint
nqst Dec 8, 2025
00e5319
Fix label text wrapping on narrow screens
nqst Dec 8, 2025
457c615
Cleanup
nqst Dec 8, 2025
7eeee0d
Cleanup
nqst Dec 8, 2025
98d5d31
Don't use IDs, wrap input inside label instead
nqst Dec 8, 2025
f64de1c
Cleanup: apply classes to `<form>`, remove extra div
nqst Dec 8, 2025
7c010ea
Add `cursor-pointer` utility and apply to icon labels
nqst Dec 8, 2025
5846ded
Try using `cursor-pointer` on text labels
nqst Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/assets/stylesheets/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@
pointer-events: none;
}

.cursor-pointer { cursor: pointer; }

/* Padding */
.pad { padding: var(--block-space) var(--inline-space); }
.pad-double { padding: var(--block-space-double) var(--inline-space-double); }
Expand Down
32 changes: 16 additions & 16 deletions app/views/boards/edit/_publication.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@

<% if board.published? %>
<div class="border-radius pad fill-selected">
<div class="flex-inline center justify-between gap">
<span class="txt-large"><%= icon_tag "lock" %></span>
<label class="switch flex align-center justify-between">
<%= form_with url: board_publication_path(board), method: :delete, data: { controller: "form" } do |form| %>
<%= form_with url: board_publication_path(board), method: :delete, class: "flex-inline center justify-between gap", data: { controller: "form" } do |form| %>
<label class="flex gap cursor-pointer">
<span class="txt-large"><%= icon_tag "lock" %></span>
<span class="switch flex align-center justify-between">
<%= form.check_box :published, class: "switch__input", checked: true, data: { action: "change->form#submit" }, disabled: !Current.user.can_administer_board?(@board) %>
<span class="switch__btn round"></span>
<span class="for-screen-reader">Turn off the public link</span>
<% end %>
</span>
<span class="for-screen-reader">Turn off the public link</span>
</label>
<span class="txt-large"><%= icon_tag "world" %></span>
</div>
<span class="txt-large" aria-hidden="true"><%= icon_tag "world" %></span>
<% end %>

<div class="flex align-center gap-half margin-block">
<%= text_field_tag :publication_url, published_board_url(board), readonly: true, class: "full-width input fill-white" %>
Expand All @@ -40,17 +40,17 @@
</div>
<% else %>
<div class="border-radius pad fill-shade">
<div class="flex-inline center justify-between gap">
<span class="txt-large"><%= icon_tag "lock" %></span>
<label class="switch flex align-center justify-between">
<%= form_with url: board_publication_path(board), method: :post, data: { controller: "form" } do |form| %>
<%= form_with url: board_publication_path(board), method: :post, class: "flex-inline center justify-between gap", data: { controller: "form" } do |form| %>
<span class="txt-large" aria-hidden="true"><%= icon_tag "lock" %></span>
<label class="flex gap cursor-pointer">
<span class="switch flex align-center justify-between">
<%= form.check_box :published, class: "switch__input", checked: false, data: { action: "change->form#submit" }, disabled: !Current.user.can_administer_board?(@board) %>
<span class="switch__btn round"></span>
<span class="for-screen-reader">Turn on the public link</span>
<% end %>
</span>
<span class="txt-large"><%= icon_tag "world" %></span>
<span class="for-screen-reader">Turn on the public link</span>
</label>
<span class="txt-large"><%= icon_tag "world" %></span>
</div>
<% end %>
</div>
<% end %>
<% end %>
2 changes: 1 addition & 1 deletion app/views/webhooks/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="flex flex-column gap-half">
<%= form.label :actions do %>
<strong>Events</strong><br>
<p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
<p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when:</p>
<% end %>
<%= render "webhooks/form/actions", form: form %>
</div>
Expand Down
13 changes: 7 additions & 6 deletions app/views/webhooks/form/_actions.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
webhook_action_options,
:first,
:last do |item| %>
<li class="list-style-none margin-none flex align-center gap">
<label class="switch toggler__visible-when-off flex-item-no-shrink txt-x-small">
<%= item.check_box(class: "switch__input") %>
<span class="switch__btn round"></span>
<span class="for-screen-reader"><%= item.text %></span>
<li class="list-style-none margin-none">
<label class="toggler__visible-when-off flex align-center gap cursor-pointer">
Copy link
Contributor Author

@nqst nqst Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<label class="toggler__visible-when-off flex align-center gap cursor-pointer">
<label class="toggler__visible-when-off flex align-center gap">

I'm not entirely sure about using cursor-pointer on the text labels like this — it feels a bit distracting to me. I'd prefer keeping the default cursor there.

That said, it's up to you. Feel free to apply the suggestion if you agree, or leave it as is if you think the pointer cursor works better.

<span class="switch txt-x-small flex-item-no-shrink">
<%= item.check_box(class: "switch__input") %>
<span class="switch__btn round"></span>
</span>
<span class="min-width"><%= item.text %></span>
</label>
<span><%= item.text %></span>
</li>
<% end %>
</ul>
2 changes: 1 addition & 1 deletion app/views/webhooks/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<div class="flex flex-column gap-half">
<%= form.label :actions do %>
<strong>Events</strong><br>
<p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
<p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when:</p>
<% end %>
<%= render "webhooks/form/actions", form: form %>
</div>
Expand Down