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

Prevent empty submit on reaction input

Browse Source
This commit is contained in:
Andy Smith
2025-10-27 13:24:30 -05:00
parent 7b432a40f6
commit 9711a8e1e5
4 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/reactions.css
+4
View File
@@ -12,6 +12,10 @@
inline-size: 100%;
margin-block-start: calc(var(--block-space-half) / 2);
margin-inline: calc(var(--column-gap) / -1);
&:has([open]) {
z-index: var(--z-popup);
}
}
.reactions__list {
app/views/cards/comments/reactions/_menu.html.erb
+1 -15
View File
@@ -6,22 +6,8 @@
<dialog class="reactions__popup popup panel fill-white shadow" data-dialog-target="dialog">
<div class="reactions__emoji-list">
<% EmojiHelper::REACTIONS.each do |character, title| %>
<%= form_with model: [ comment.card, comment, Reaction.new ], data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close"} do |form| %>
<%= hidden_field_tag "reaction[content]", character %>
<%= form.button type: "submit", title: title, class: "reaction__quick-emoji-btn btn btn--circle", data: { emoji: character } do %>
<span><%= character %></span>
<% end %>
<% end %>
<%= tag.button character, title: title, class: "reactions__emoji-btn btn btn--circle", data: { emoji: character } %>
<% end %>
<div class="flex-inline" data-controller="soft-keyboard">
<%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
class: "btn btn--circle", action: "soft-keyboard#open",
data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
<%= icon_tag "reaction" %>
<span class="for-screen-reader">Add your own reaction</span>
<% end %>
</div>
</div>
</dialog>
</div>
app/views/cards/comments/reactions/_reactions.html.erb
+6 -1
View File
@@ -5,7 +5,12 @@
</div>
<%= turbo_frame_tag comment, :new_reaction do %>
<%= render "cards/comments/reactions/menu", comment: comment %>
<%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
class: "btn btn--circle", action: "soft-keyboard#open",
data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
<%= icon_tag "reaction" %>
<span class="for-screen-reader">Add your own reaction</span>
<% end %>
<% end %>
</div>
<% end %>
app/views/cards/comments/reactions/new.html.erb
+5 -3
View File
@@ -2,17 +2,19 @@
<%= form_with model: [ @comment.card, @comment, Reaction.new ],
class: "reaction reaction__form expanded",
html: { aria: { label: "New reaction" } },
data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %>
data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel submit->form#preventEmptySubmit" } do |form| %>
<label class="reaction__form-label flex gap" style="--column-gap: 0.4ch;">
<figure class="reaction__avatar margin-none flex-item-no-shrink">
<%= avatar_tag Current.user %>
</figure>
<%= form.text_field :content, autofocus: true, autocomplete: "off", autocorrect: "off", maxlength: 16,
required: true, pattern: /\S+.*/, class: "input reaction__input txt-small", aria: { label: "Add a reaction" } %>
pattern: /\S+.*/, class: "input reaction__input txt-small", data: { form_target: "input" }, aria: { label: "Add a reaction" } %>
</label>
<%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit" do %>
<%= render "cards/comments/reactions/menu", comment: @comment %>
<%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit", data: { form_target: "submit" } do %>
<%= icon_tag "check" %> <span class="for-screen-reader">Submit</span>
<% end %>