From ef25cd223d08e578e85208a65009d652c27dbfc5 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Wed, 8 Apr 2026 11:24:33 +0000 Subject: [PATCH] add 'stop' reaction, improve reaction button layout --- dist/index.css | 7 +++- dist/index.js | 20 +++++++++++ src/Model/Chat/chatModel.ts | 1 + src/View/ChatPages/messagePage.css | 35 +++++++++++-------- src/View/Components/messageReactionButton.tsx | 6 ++++ .../Components/messageReactionButtonRow.tsx | 4 +++ src/View/translations.ts | 3 ++ src/ViewModel/Chat/chatMessageViewModel.ts | 7 ++++ src/ViewModel/Global/coreViewModel.ts | 2 +- 9 files changed, 69 insertions(+), 16 deletions(-) diff --git a/dist/index.css b/dist/index.css index e02bad58..4fa91cdb 100644 --- a/dist/index.css +++ b/dist/index.css @@ -747,7 +747,12 @@ body[showing-chat] #chat-page-wrapper { display: none; } .message-reaction-row { - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + grid-template-columns: repeat(3, minmax(80px, 1fr)); +} +@media (min-width: 100px) { + .message-reaction-row { + grid-template-columns: repeat(3, minmax(80px, 1fr)); + } } /* src/View/ChatPages/taskPage.css */ diff --git a/dist/index.js b/dist/index.js index 86aee9ef..44376132 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1513,6 +1513,7 @@ var ReactionSymbols = /* @__PURE__ */ ((ReactionSymbols2) => { ReactionSymbols2["ThumbsUp"] = "\u{1F44D}"; ReactionSymbols2["Check"] = "\u2705"; + ReactionSymbols2["Stop"] = "\u{1F6D1}"; ReactionSymbols2["Attention"] = "\u2757\uFE0F"; ReactionSymbols2["DoubleAttention"] = "\u203C\uFE0F"; ReactionSymbols2["Question"] = "\u2753"; @@ -2030,6 +2031,7 @@ ); this.reactionsThumbsUp = new MapState(); this.reactionsCheck = new MapState(); + this.reactionsStop = new MapState(); this.reactionsAttention = new MapState(); this.reactionsDoubleAttention = new MapState(); this.reactionsQuestion = new MapState(); @@ -2041,6 +2043,10 @@ [this.reactionsCheck], () => this.reactionsCheck.value.size ); + this.reactionsStopCount = createProxyState( + [this.reactionsStop], + () => this.reactionsStop.value.size + ); this.reactionsAttentionCount = createProxyState( [this.reactionsAttention], () => this.reactionsAttention.value.size @@ -2086,6 +2092,8 @@ return setReaction(this.reactionsThumbsUp); case "\u2705" /* Check */: return setReaction(this.reactionsCheck); + case "\u{1F6D1}" /* Stop */: + return setReaction(this.reactionsStop); case "\u2757\uFE0F" /* Attention */: return setReaction(this.reactionsAttention); case "\u203C\uFE0F" /* DoubleAttention */: @@ -2803,6 +2811,7 @@ // thumbsUpReaction: "Reaction: thumbs up", checkReaction: "Reaction: check", + stopReaction: "Reaction: stop sign", attentionReaction: "Reaction: exclamation mark", doubleAttentionReaction: "Reaction: double exclamation mark", questionReaction: "Reaction: question mark" @@ -2990,6 +2999,7 @@ // thumbsUpReaction: "Reaktion: Daumen hoch", checkReaction: "Reaktion: Haken", + stopReaction: "Reaktion: Stopp", attentionReaction: "Reaktion: Ausrufezeichen", doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen", questionReaction: "Reaktion: Fragezeichen" @@ -3167,6 +3177,7 @@ // thumbsUpReaction: "Reacci\xF3n: pulgar hacia arriba", checkReaction: "Reacci\xF3n: marca de verificaci\xF3n", + stopReaction: "Reacci\xF3n: signo de parada", attentionReaction: "Reaccion: signo de atenci\xF3n", doubleAttentionReaction: "Reaccion: signo de atenci\xF3n doble", questionReaction: "Reaccion: signo de interrogaci\xF3n" @@ -3987,6 +3998,12 @@ reactionState = chatMessageViewModel.reactionsCheck; break; } + case "\u{1F6D1}" /* Stop */: { + audioLabel = translations.chatPage.message.stopReaction; + count = chatMessageViewModel.reactionsStopCount; + reactionState = chatMessageViewModel.reactionsStop; + break; + } case "\u2757\uFE0F" /* Attention */: { audioLabel = translations.chatPage.message.attentionReaction; count = chatMessageViewModel.reactionsAttentionCount; @@ -4032,6 +4049,9 @@ ), MessageReactionButton( chatMessageViewModel, "\u2705" /* Check */ + ), MessageReactionButton( + chatMessageViewModel, + "\u{1F6D1}" /* Stop */ ), MessageReactionButton( chatMessageViewModel, "\u2757\uFE0F" /* Attention */ diff --git a/src/Model/Chat/chatModel.ts b/src/Model/Chat/chatModel.ts index 1e9e8388..e062cdca 100644 --- a/src/Model/Chat/chatModel.ts +++ b/src/Model/Chat/chatModel.ts @@ -436,6 +436,7 @@ export default class ChatModel { export enum ReactionSymbols { ThumbsUp = "👍", Check = "✅", + Stop = "🛑", Attention = "❗️", DoubleAttention = "‼️", Question = "❓", diff --git a/src/View/ChatPages/messagePage.css b/src/View/ChatPages/messagePage.css index 47094227..34b06c5f 100644 --- a/src/View/ChatPages/messagePage.css +++ b/src/View/ChatPages/messagePage.css @@ -40,6 +40,7 @@ } @media (min-width: 700px) { + #message-page #composer .content-width-constraint, #message-page #composer .input-width-constraint { display: flex; @@ -168,27 +169,33 @@ text-align: right; } -.message-bubble > .message-reaction-row { - max-width: var(--max-input-width); - width: 100%; +.message-bubble>.message-reaction-row { + max-width: var(--max-input-width); + width: 100%; - padding: var(--gap-between-tiles); - background: var(--surface); + padding: var(--gap-between-tiles); + background: var(--surface); } -.message-bubble > .message-reaction-row button { - min-height: unset; - height: 100%; - width: 100%; - padding: var(--control-padding-compact); - gap: 0px; - flex: 1 !important; +.message-bubble>.message-reaction-row button { + min-height: unset; + height: 100%; + width: 100%; + padding: var(--control-padding-compact); + gap: 0px; + flex: 1 !important; } -.message-bubble > .message-reaction-row button[zero] { +.message-bubble>.message-reaction-row button[zero] { display: none; } .message-reaction-row { - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + grid-template-columns: repeat(3, minmax(80px, 1fr)); +} + +@media (min-width: 100px) { + .message-reaction-row { + grid-template-columns: repeat(3, minmax(80px, 1fr)); + } } \ No newline at end of file diff --git a/src/View/Components/messageReactionButton.tsx b/src/View/Components/messageReactionButton.tsx index 3f7ce11b..8593ab81 100644 --- a/src/View/Components/messageReactionButton.tsx +++ b/src/View/Components/messageReactionButton.tsx @@ -39,6 +39,12 @@ export function MessageReactionButton( reactionState = chatMessageViewModel.reactionsCheck; break; } + case ReactionSymbols.Stop: { + audioLabel = translations.chatPage.message.stopReaction; + count = chatMessageViewModel.reactionsStopCount; + reactionState = chatMessageViewModel.reactionsStop; + break; + } case ReactionSymbols.Attention: { audioLabel = translations.chatPage.message.attentionReaction; count = chatMessageViewModel.reactionsAttentionCount; diff --git a/src/View/Components/messageReactionButtonRow.tsx b/src/View/Components/messageReactionButtonRow.tsx index 7b351158..32087be2 100644 --- a/src/View/Components/messageReactionButtonRow.tsx +++ b/src/View/Components/messageReactionButtonRow.tsx @@ -17,6 +17,10 @@ export function MessageReactionButtonRow( chatMessageViewModel, ReactionSymbols.Check, )} + {MessageReactionButton( + chatMessageViewModel, + ReactionSymbols.Stop, + )} {MessageReactionButton( chatMessageViewModel, ReactionSymbols.Attention, diff --git a/src/View/translations.ts b/src/View/translations.ts index 7e9619a4..3071911b 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -191,6 +191,7 @@ const englishTranslations = { thumbsUpReaction: "Reaction: thumbs up", checkReaction: "Reaction: check", + stopReaction: "Reaction: stop sign", attentionReaction: "Reaction: exclamation mark", doubleAttentionReaction: "Reaction: double exclamation mark", questionReaction: "Reaction: question mark", @@ -462,6 +463,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = { thumbsUpReaction: "Reaktion: Daumen hoch", checkReaction: "Reaktion: Haken", + stopReaction: "Reaktion: Stopp", attentionReaction: "Reaktion: Ausrufezeichen", doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen", questionReaction: "Reaktion: Fragezeichen", @@ -715,6 +717,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = { thumbsUpReaction: "Reacción: pulgar hacia arriba", checkReaction: "Reacción: marca de verificación", + stopReaction: "Reacción: signo de parada", attentionReaction: "Reaccion: signo de atención", doubleAttentionReaction: "Reaccion: signo de atención doble", questionReaction: "Reaccion: signo de interrogación", diff --git a/src/ViewModel/Chat/chatMessageViewModel.ts b/src/ViewModel/Chat/chatMessageViewModel.ts index 5b62bee5..756f8148 100644 --- a/src/ViewModel/Chat/chatMessageViewModel.ts +++ b/src/ViewModel/Chat/chatMessageViewModel.ts @@ -27,6 +27,7 @@ export default class ChatMessageViewModel { reactionsThumbsUp = new React.MapState(); reactionsCheck = new React.MapState(); + reactionsStop = new React.MapState(); reactionsAttention = new React.MapState(); reactionsDoubleAttention = new React.MapState(); reactionsQuestion = new React.MapState(); @@ -39,6 +40,10 @@ export default class ChatMessageViewModel { [this.reactionsCheck], () => this.reactionsCheck.value.size, ); + reactionsStopCount = React.createProxyState( + [this.reactionsStop], + () => this.reactionsStop.value.size, + ); reactionsAttentionCount = React.createProxyState( [this.reactionsAttention], () => this.reactionsAttention.value.size, @@ -90,6 +95,8 @@ export default class ChatMessageViewModel { return setReaction(this.reactionsThumbsUp); case ReactionSymbols.Check: return setReaction(this.reactionsCheck); + case ReactionSymbols.Stop: + return setReaction(this.reactionsStop); case ReactionSymbols.Attention: return setReaction(this.reactionsAttention); case ReactionSymbols.DoubleAttention: diff --git a/src/ViewModel/Global/coreViewModel.ts b/src/ViewModel/Global/coreViewModel.ts index 8e4c9ece..7d974eee 100644 --- a/src/ViewModel/Global/coreViewModel.ts +++ b/src/ViewModel/Global/coreViewModel.ts @@ -1,7 +1,7 @@ import * as React from "bloatless-react"; export default class CoreViewModel { - readonly BUILD = "Build 26.04.08.A" + readonly BUILD = "Build 26.04.08.B" // DRAG & DROP draggedObject: React.State = new React.State(undefined);