diff --git a/app/assets/images/check-circle.svg b/app/assets/images/check-circle.svg deleted file mode 100644 index 7e22d1cef..000000000 --- a/app/assets/images/check-circle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/close-circle.svg b/app/assets/images/close-circle.svg deleted file mode 100644 index cb0894a34..000000000 --- a/app/assets/images/close-circle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/reaction.svg b/app/assets/images/reaction.svg index 4f68fcfcb..b6b18b6f2 100644 --- a/app/assets/images/reaction.svg +++ b/app/assets/images/reaction.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/images/remove-med.svg b/app/assets/images/remove-med.svg new file mode 100644 index 000000000..c15d589ec --- /dev/null +++ b/app/assets/images/remove-med.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 33aacc74a..0a42d1f3e 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -4,7 +4,7 @@ --comment-padding-block: var(--block-space-half); --comment-padding-inline: var(--inline-space-double); --comment-max: 70ch; - --reaction-size: 1.6875rem; + --reaction-size: 2rem; display: flex; flex-direction: column; @@ -37,6 +37,8 @@ } .comment__author { + margin-inline-end: calc(var(--comment-padding-inline) * -0.66); + .btn { font-weight: inherit; } @@ -52,7 +54,6 @@ } .comment__body { - padding-inline-end: var(--reaction-size); text-align: start; :first-child { @@ -74,7 +75,7 @@ border-radius: 0.2em; padding: var(--comment-padding-block) - calc(var(--comment-padding-inline) / 2) + var(--comment-padding-inline) calc(var(--comment-padding-block) * 1.5) var(--comment-padding-inline); word-wrap: break-word; @@ -88,8 +89,17 @@ } } - .comment--mine { - .comment__reaction { + .comment__reaction { + background-color: var(--color-ink-lightest); + opacity: 0.66; + + @media (any-hover: hover) { + .comment:not(:hover) & { + opacity: 0; + } + } + + .comment--mine & { display: none; } } @@ -137,7 +147,8 @@ ); } - .reactions { + .reactions, + .quick-reaction { display: none !important; } } diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index c53d9ce5f..61e140007 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -36,11 +36,9 @@ .icon--camera { --svg: url("camera.svg "); } .icon--caret-down { --svg: url("caret-down.svg "); } .icon--check { --svg: url("check.svg "); } - .icon--check-circle { --svg: url("check-circle.svg "); } .icon--check-all { --svg: url("check-all.svg "); } .icon--clipboard { --svg: url("clipboard.svg "); } .icon--close { --svg: url("close.svg "); } - .icon--close-circle { --svg: url("close-circle.svg "); } .icon--collection { --svg: url("collection.svg "); } .icon--collection-add { --svg: url("collection-add.svg "); } .icon--comment { --svg: url("comment.svg "); } @@ -83,6 +81,7 @@ .icon--reaction { --svg: url("reaction.svg "); } .icon--refresh { --svg: url("refresh.svg "); } .icon--refresh--meta { --svg: url("refresh--meta.svg "); } + .icon--remove-med { --svg: url("remove-med.svg "); } .icon--remove { --svg: url("remove.svg "); } .icon--rename { --svg: url("rename.svg "); } .icon--search { --svg: url("search.svg "); } diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 3cecf8bd1..6b49cf4c5 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -12,40 +12,17 @@ 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); - } - - &:not(:has(.reaction)) { - inline-size: auto; - inset-block-end: var(--comment-padding-block); - inset-inline-end: calc(var(--comment-padding-inline) / 2); - margin: 0; - position: absolute; - - .reactions__list { - display: none; - } - - .reactions__trigger { - background-color: var(--color-ink-lightest); - - &:not(:hover) { - opacity: 0.66; - } - } - } } .reactions__list { display: inline-flex; flex-wrap: wrap; gap: var(--column-gap); - } - /* Single reaction - /* -------------------------------------------------------------------------- */ + &:not(:has(.reaction)) { + display: none; + } + } .reaction { --btn-size: 100%; @@ -57,10 +34,10 @@ border: 1px solid var(--reaction-border-color); border-radius: 4rem; display: inline-flex; - gap: 0.25ch; + gap: var(--column-gap); max-inline-size: 100%; opacity: 1; - padding: 0.1em 0.12em; + padding: 0.1em 0.25em 0.1em 0.12em; postion: relative; transition: opacity 100ms ease-in-out, transform 150ms ease-in-out; @@ -74,7 +51,7 @@ cursor: pointer; @media (any-hover: hover) { - &:not(.expanded):hover { + &:not(:active):hover { filter: brightness(var(--reaction-hover-brightness)); @media (prefers-color-scheme: dark) { @@ -93,6 +70,7 @@ .reaction__delete { display: none; + translate: 0.25em; .expanded & { display: grid; @@ -110,7 +88,7 @@ &:has(.input:focus) { outline: var(--focus-ring-size) solid var(--focus-ring-color); - outline-offset: -1px; + outline-offset: var(--focus-ring-offset); } .reaction__form-label:focus { @@ -134,30 +112,25 @@ animation: scale-fade-out 0.2s both; } - .reaction__menu-btn, - .reaction__submit-btn, - .reaction__cancel-btn { - --btn-size: 1.25rem; - --icon-size: var(--btn-size); + .reaction__action { + --btn-border-color: var(--reaction-border-color); + --btn-size: var(--reaction-size); + + font-size: 0.75em; + + .reactions:not(:has(.reaction)) & { + display: none; + } } - .reaction__submit-btn { - color: oklch(var(--lch-green-dark)); - } - - .reaction__cancel-btn { - color: oklch(var(--lch-red-dark)); - } - - - /* Menu + /* Quick reactions /* ------------------------------------------------------------------------ */ - .reaction__menu { + .quick-reaction { position: relative; } - .reaction__popup { + .quick-reaction__popup { --panel-border-radius: 1.2em; --panel-padding: 0.5ch; --offset: calc(-1 * var(--panel-padding)); @@ -167,22 +140,20 @@ transform: none; } - .reaction__emoji-list { + .quick-reaction__emojis { display: grid; - grid-template-columns: repeat(10, 1fr); + grid-template-columns: repeat(3, 1fr); .btn { - --btn-size: 1.5rem; + --btn-icon-size: 1.5ch; + --btn-size: var(--reaction-size); + --btn-border-color: var(--color-canvas); - font-size: 1rem; position: relative; /* Make sure the selection ring sits on top of adjacent buttons on hover */ &:hover, &:focus-visible { - /* box-shadow: var(--shadow); */ - filter: none; - scale: 1.5; z-index: 1; } } diff --git a/app/helpers/emoji_helper.rb b/app/helpers/emoji_helper.rb index 5746071e6..fd959ce8a 100644 --- a/app/helpers/emoji_helper.rb +++ b/app/helpers/emoji_helper.rb @@ -1,54 +1,12 @@ module EmojiHelper REACTIONS = { - "👏" => "Clapping", "👍" => "Thumbs up", - "🙌" => "Hands raised in celebration", - "💪" => "Flexed bicep", - "🤘" => "Sign of the horns", - "✊" => "Raised fist", - "✨" => "Sparkles", - "❤️" => "Red heart", - "💯" => "100 points", - "🎉" => "Party popper", - "🤩" => "Face with starry eyes", - "🥳" => "Partying face", - "😊" => "Smiling face with flush cheeks", - "😀" => "Grinning face", - "😂" => "Face with tears of joy", - "😅" => "Grinning face with sweat drop", - "😎" => "Smiling face with sunglasses", - "😉" => "Winking face", - "😜" => "Winking face with stuck out tongue", - "😬" => "Grimacing face", - "😮" => "Surprised face with open mouth", - "😳" => "Flushed face", - "🤔" => "Thinking face", - "😒" => "Unamused face", - "😢" => "Crying face", - "😭" => "Loudly crying face", - "😱" => "Face screaming in fear", - "👀" => "Eyes", - "🙏" => "Hands pressed together", - "💩" => "Pile of poop", - "👎" => "Thumbs down", - "✌️" => "Peace", - "👈" => "Finger pointing left", - "👆" => "Finger pointing Up", - "✋" => "Raised hand", + "👏" => "Clapping", "👋" => "Waving hand", - "☀️" => "Sun", - "🌙" => "Moon", - "💥" => "Collision", - "🔥" => "Fire", - "🎂" => "Birthday cake", - "🍴" => "Fork and knife", - "💰" => "Money bag", - "🥇" => "Gold medal", - "🚨" => "Red flashing light", - "💡" => "Light bulb", - "🛠" => "Hammer and wrench", - "📈" => "Chart with upward trend", - "✅" => "Check mark", - "📢" => "Public address loudspeaker" + "💪" => "Muscle", + "❤️" => "Red heart", + "😂" => "Face with tears of joy", + "🎉" => "Party popper", + "🔥" => "Fire" } end diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb index c557624be..5dfad5225 100644 --- a/app/helpers/notifications_helper.rb +++ b/app/helpers/notifications_helper.rb @@ -48,7 +48,7 @@ module NotificationsHelper title: "Mark as read", data: { action: "form#submit:stop badge#update:stop", form_target: "submit" }, form: { data: { controller: "form" } } do - concat(icon_tag("remove")) + concat(icon_tag("remove-med")) concat(tag.span("Mark as read", class: "for-screen-reader")) end end diff --git a/app/javascript/controllers/reaction_emoji_controller.js b/app/javascript/controllers/reaction_emoji_controller.js deleted file mode 100644 index b792a2a0c..000000000 --- a/app/javascript/controllers/reaction_emoji_controller.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -export default class extends Controller { - static targets = [ "input" ] - - insertEmoji(event) { - const emojiChar = event.target.getAttribute("data-emoji") - this.inputTarget.value = emojiChar - } -} diff --git a/app/views/cards/comments/_comment.html.erb b/app/views/cards/comments/_comment.html.erb index f0cd8c642..dafdb1c4e 100644 --- a/app/views/cards/comments/_comment.html.erb +++ b/app/views/cards/comments/_comment.html.erb @@ -24,6 +24,13 @@ <%= icon_tag "menu-dots-horizontal" %> Edit this comment <% end %> + + <%= render "cards/comments/reactions/quick_reaction", comment: comment do %> + + <% end %>
diff --git a/app/views/cards/comments/reactions/_menu.html.erb b/app/views/cards/comments/reactions/_menu.html.erb deleted file mode 100644 index 92e9cf03c..000000000 --- a/app/views/cards/comments/reactions/_menu.html.erb +++ /dev/null @@ -1,13 +0,0 @@ -
- - - -
- <% EmojiHelper::REACTIONS.each do |character, title| %> - <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless", data: { action: "reaction-emoji#insertEmoji", emoji: character } %> - <% end %> -
- -
diff --git a/app/views/cards/comments/reactions/_quick_reaction.html.erb b/app/views/cards/comments/reactions/_quick_reaction.html.erb new file mode 100644 index 000000000..7b4054bd7 --- /dev/null +++ b/app/views/cards/comments/reactions/_quick_reaction.html.erb @@ -0,0 +1,25 @@ +
+ <%= yield %> + + +
+ <% 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 %> + <%= character %> + <% end %> + <% end %> + <% end %> + +
+ <%= 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" %> + Add your own reaction + <% end %> +
+
+ +
diff --git a/app/views/cards/comments/reactions/_reaction.html.erb b/app/views/cards/comments/reactions/_reaction.html.erb index 2c9dfc01b..621b8406a 100644 --- a/app/views/cards/comments/reactions/_reaction.html.erb +++ b/app/views/cards/comments/reactions/_reaction.html.erb @@ -19,7 +19,7 @@ method: :delete, class: "reaction__delete btn btn--negative flex-item-justify-end", data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %> - <%= icon_tag "trash" %> + <%= icon_tag "minus" %> Delete this reaction <% end %>
diff --git a/app/views/cards/comments/reactions/_reactions.html.erb b/app/views/cards/comments/reactions/_reactions.html.erb index dde2d18fd..73a79812b 100644 --- a/app/views/cards/comments/reactions/_reactions.html.erb +++ b/app/views/cards/comments/reactions/_reactions.html.erb @@ -5,11 +5,10 @@ <%= turbo_frame_tag comment, :new_reaction do %> - <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button", - class: "reactions__trigger btn btn--circle borderless", action: "soft-keyboard#open", - data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %> - <%= icon_tag "reaction" %> - Add your own reaction + <%= render "cards/comments/reactions/quick_reaction", comment: comment do %> + <% end %> <% end %> diff --git a/app/views/cards/comments/reactions/new.html.erb b/app/views/cards/comments/reactions/new.html.erb index 38c6daf98..5f6f57b03 100644 --- a/app/views/cards/comments/reactions/new.html.erb +++ b/app/views/cards/comments/reactions/new.html.erb @@ -2,25 +2,23 @@ <%= form_with model: [ @comment.card, @comment, Reaction.new ], class: "reaction reaction__form expanded", html: { aria: { label: "New reaction" } }, - data: { controller: "form reaction-emoji", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel submit->form#preventEmptySubmit" } do |form| %> + data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %> - <%= render "cards/comments/reactions/menu", comment: @comment %> - - <%= form.button class: "reaction__submit-btn btn btn--circle borderless", type: "submit", data: { form_target: "submit" } do %> - <%= icon_tag "check-circle" %> Submit + <%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit" do %> + <%= icon_tag "check" %> Submit <% end %> <%= link_to card_comment_reactions_path(@comment.card, @comment), role: "button", - data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "reaction__cancel-btn btn btn--circle borderless" do %> - <%= icon_tag "close-circle" %> Cancel + data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "btn btn--circle borderless btn--negative" do %> + <%= icon_tag "minus" %> Cancel <% end %> <% end %> <% end %> diff --git a/app/views/searches/_results.html.erb b/app/views/searches/_results.html.erb index 7cdd92df9..38364b547 100644 --- a/app/views/searches/_results.html.erb +++ b/app/views/searches/_results.html.erb @@ -1,6 +1,6 @@