From 4ad92f8dc76aa680035ccf180b0a275e144b3bc0 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sun, 12 Apr 2026 12:39:29 +0000 Subject: [PATCH] improve highlight style, improve filter button marker --- dist/index.css | 18 ++-- dist/index.js | 36 ++------ dist/styles.css | 123 +++++++++++++++------------ src/View/ChatPages/boardPage.tsx | 14 +-- src/View/ChatPages/messagePage.tsx | 16 +--- src/View/Components/chatEntry.tsx | 4 +- src/View/Components/ribbonButton.tsx | 2 +- src/View/chatPage.css | 27 ++++-- src/View/homePage.css | 9 -- 9 files changed, 113 insertions(+), 136 deletions(-) diff --git a/dist/index.css b/dist/index.css index 98db2932..33e8e72f 100644 --- a/dist/index.css +++ b/dist/index.css @@ -376,7 +376,8 @@ body[showing-chat] #chat-page-wrapper { justify-content: center; } #chat-page > div > #ribbon button.ribbon-button, -#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button { +#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button, +#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button[selected] { min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); @@ -384,6 +385,9 @@ body[showing-chat] #chat-page-wrapper { height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); color: var(--primary); } +#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button[selected]:not(.ribbon-button) { + margin: var(--gap-between-tiles); +} #chat-page > div > #ribbon button > .icon, #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon { font-size: 1.1rem; @@ -391,11 +395,6 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #ribbon > span { width: 100%; } -#chat-page > div > #ribbon .ribbon-button[highlight] { - background: rgb(255, 217, 0) !important; - color: black; - outline-color: black; -} #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { height: var(--ribbon-size); overflow-x: auto; @@ -447,13 +446,6 @@ body[showing-chat] #chat-page-wrapper { gap: var(--gap-between-tiles); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } -.chat-entry[unread] { - border: var(--outline-width) solid black; -} -.chat-entry[unread]:not(:hover):not(:active) { - background: rgb(255, 217, 0) !important; - color: black; -} @media (min-width: 640px) { #home-page > div { overflow-x: hidden; diff --git a/dist/index.js b/dist/index.js index ebbdb9c1..84254e8c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -3443,7 +3443,7 @@ return /* @__PURE__ */ createElement( "button", { - class: "ribbon-button", + class: "ribbon-button animate-highlight", "aria-label": label, "toggle:selected": isSelected, "toggle:highlight": isHighlighted, @@ -3738,10 +3738,6 @@ const ChatMessageViewModelToView = (chatMessageViewModel) => { return ChatMessage4(coreViewModel2, chatMessageViewModel); }; - const filterIcon = createProxyState( - [messagePageViewModel.isFilterActive], - () => messagePageViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off" - ); const messageContainer = /* @__PURE__ */ createElement( "div", { @@ -3773,15 +3769,10 @@ { class: "ghost", "on:click": messagePageViewModel.openFilterModal, - "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel + "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel, + "toggle:selected": messagePageViewModel.isFilterActive }, - /* @__PURE__ */ createElement( - "span", - { - class: "icon", - "subscribe:innerText": filterIcon - } - ) + /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt") ))), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement( "input", { @@ -4371,10 +4362,6 @@ // src/View/ChatPages/boardPage.tsx function BoardPage(coreViewModel2, boardViewModel) { boardViewModel.loadData(); - const filterIcon = createProxyState( - [boardViewModel.isFilterActive], - () => boardViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off" - ); const mainContent = createProxyState( [boardViewModel.selectedPage], () => { @@ -4459,15 +4446,10 @@ { class: "ghost", "aria-label": coreViewModel2.translations.chatPage.task.filterTasksButtonAudioLabel, - "on:click": boardViewModel.showFilterModal + "on:click": boardViewModel.showFilterModal, + "toggle:selected": boardViewModel.isFilterActive }, - /* @__PURE__ */ createElement( - "span", - { - class: "icon", - "subscribe:innerText": filterIcon - } - ) + /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt") ), /* @__PURE__ */ createElement( "button", { @@ -6279,11 +6261,11 @@ const view = /* @__PURE__ */ createElement( "button", { - class: "tile colored-tile chat-entry", + class: "tile colored-tile chat-entry animate-highlight", "set:color": chatViewModel.settingsPageViewModel.color, style: "height: 8rem", "on:click": chatViewModel.open, - "toggle:unread": chatViewModel.hasUnreadMessages + "toggle:highlight": chatViewModel.hasUnreadMessages }, /* @__PURE__ */ createElement( "span", diff --git a/dist/styles.css b/dist/styles.css index fe2a9757..7914b8da 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -28,7 +28,7 @@ body { --animation-duration: 0.4s; } -.modal > div, +.modal>div, .slide-up { animation: slide-up var(--animation-duration); } @@ -62,6 +62,9 @@ body { --text-error: #da1e28; --text-info: #0043ce; + --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%)); + --highlight-color: black; + --link: #0f62fe; --link-hover: #0043ce; @@ -116,7 +119,7 @@ body { color: var(--text-placeholder); } -.modal > div { +.modal>div { background: var(--background-glass); } @@ -164,6 +167,7 @@ select:not(.tile *), } @media (hover: hover) { + button:hover, select:hover, button.tile.ghost:hover { @@ -336,7 +340,7 @@ select { /* backdrop-filter */ header, menu, -.modal > div { +.modal>div { backdrop-filter: blur(70px); -webkit-backdrop-filter: blur(70px); } @@ -353,9 +357,7 @@ footer { border-top: 1px solid var(--surface-border); } -input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not( - label.tile * - ), +input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(label.tile *), label.tile, select:not(label.tile *), textarea:not(label.tile *) { @@ -370,9 +372,7 @@ hr { border-bottom: 1px solid var(--border) !important; } -input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not( - label.tile * - ):not(.no-outline), +input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(label.tile *):not(.no-outline), label.tile:has(input:focus), label.tile:has(textarea:focus), textarea:focus:not(label.tile *), @@ -437,13 +437,13 @@ input[type="radio"], label.inline, main, .modal[open], -.modal > div, +.modal>div, .tile, -.tile > div { +.tile>div { display: flex; } -header > span, +header>span, .flex-column, .flex-row { display: flex; @@ -470,7 +470,7 @@ textarea { main, .tile, -.tile > div { +.tile>div { flex: 1; } @@ -482,9 +482,9 @@ main, flex: 0 !important; } -.modal > div, +.modal>div, .modal main, -.tile > div { +.tile>div { flex-direction: column; } @@ -507,7 +507,7 @@ label.inline, gap: var(--gap-in-controls); } -header > span, +header>span, .gap { gap: var(--gap-between-tiles) !important; } @@ -619,7 +619,7 @@ input[type="radio"] { padding: 0 !important; } -article > div { +article>div { padding: var(--content-padding); } @@ -643,7 +643,7 @@ textarea, padding: var(--control-padding) !important; } -header > span { +header>span { padding: var(--gap-between-tiles); } @@ -659,7 +659,7 @@ header > span { padding-top: var(--control-padding) !important; } -article > div { +article>div { padding-top: calc(var(--header-height) + var(--content-margin)); } @@ -691,11 +691,8 @@ select { padding-bottom: var(--control-padding) !important; } -article > div { - padding-bottom: calc( - var(--menu-height-mobile) + var(--control-height) + - var(--content-padding) - ); +article>div { + padding-bottom: calc(var(--menu-height-mobile) + var(--control-height) + var(--content-padding)); } label:not(.inline) { @@ -712,10 +709,10 @@ label.tile:has(> span.icon) { } /* position etc */ -article > div, +article>div, footer, header, -select + .icon { +select+.icon { position: absolute; } @@ -746,7 +743,7 @@ label { position: sticky !important; } -article > div, +article>div, header, .modal { top: 0; @@ -756,7 +753,7 @@ header, top: 0 !important; } -article > div, +article>div, footer, header, .modal { @@ -767,7 +764,7 @@ header, left: 0px !important; } -article > div, +article>div, footer, header, .modal { @@ -778,7 +775,7 @@ header, right: 0px !important; } -select + .icon { +select+.icon { right: var(--control-marker-padding); } @@ -790,8 +787,8 @@ body:has(> menu) footer { bottom: var(--menu-height-mobile); } -article > div, -select + .icon, +article>div, +select+.icon, .modal { bottom: 0px; } @@ -803,8 +800,8 @@ select + .icon, /* size */ article, main, -select + .icon, -.modal > div, +select+.icon, +.modal>div, .modal main { height: 100%; } @@ -821,7 +818,7 @@ button:not(.tile):not(header *), footer, input:not([type="checkbox"]):not([type="radio"]), select, -select + .icon { +select+.icon { height: var(--control-height); } @@ -841,7 +838,7 @@ button:not(.tile):not(header *), footer, input:not([type="checkbox"]):not([type="radio"]), select, -.modal > div > :is(button, div.flex-row) { +.modal>div> :is(button, div.flex-row) { min-height: var(--control-height); } @@ -864,9 +861,9 @@ header, main, select, textarea, -.modal > div, +.modal>div, .tile, -.tile > div { +.tile>div { width: 100%; } @@ -920,7 +917,7 @@ code { .error, .warning, .success, -label.tile > div > span:not(.icon) { +label.tile>div>span:not(.icon) { font-size: 0.9rem; } @@ -940,7 +937,7 @@ menu { z-index: 2; } -.modal > div { +.modal>div { z-index: 2; } @@ -1036,11 +1033,8 @@ menu { font-size: 0.5rem; } -article > div { - padding-bottom: calc( - var(--menu-height-mobile) + var(--header-height) + - var(--content-padding) - ); +article>div { + padding-bottom: calc(var(--menu-height-mobile) + var(--header-height) + var(--content-padding)); } /* overflow */ @@ -1060,7 +1054,7 @@ main, overflow: hidden !important; } -article > div, +article>div, .modal main { overflow: auto; } @@ -1112,7 +1106,7 @@ main::-webkit-scrollbar { } main, -article > div { +article>div { scroll-behavior: smooth; } @@ -1126,29 +1120,30 @@ main { /* tablet & up */ @media (min-width: 640px) { + /* basic */ .mobile-only { display: none !important; } /* border, outline, etc */ - .modal > div { + .modal>div { border: 1px solid var(--surface-border); } menu, - main.split > article:first-of-type { + main.split>article:first-of-type { border-right: 1px solid var(--border); } /* size */ - .modal > div { + .modal>div { height: auto; max-height: 100%; } p, - .modal > div { + .modal>div { max-width: var(--max-content-width); } @@ -1177,7 +1172,7 @@ main { grid-template-columns: var(--split-pane-width-desktop) 1fr; } - article > div { + article>div { padding-bottom: calc(var(--content-padding) + var(--control-height)); } @@ -1210,6 +1205,28 @@ main { } } +/* +STATE +*/ + +[highlight]:not(:hover):not(:active) { + color: var(--highlight-color) !important; + background: var(--highlight-background) !important; +} + +[highlight].animate-highlight { + animation: 3s infinite highlight; +} + +@keyframes highlight { + 30%, 60% { + opacity: 1; + } + 0%, 100% { + opacity: .1; + } +} + /* ICONS */ @@ -1238,4 +1255,4 @@ input[type="checkbox"], font-style: normal; font-weight: 300; src: url("Icons/material-icons.woff") format("woff"); -} +} \ No newline at end of file diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx index b3626e31..3ceff4fd 100644 --- a/src/View/ChatPages/boardPage.tsx +++ b/src/View/ChatPages/boardPage.tsx @@ -20,14 +20,6 @@ export function BoardPage( ) { boardViewModel.loadData(); - const filterIcon = React.createProxyState( - [boardViewModel.isFilterActive], - () => - boardViewModel.isFilterActive.value - ? "filter_alt" - : "filter_alt_off", - ); - // main content const mainContent = React.createProxyState( [boardViewModel.selectedPage], @@ -142,11 +134,9 @@ export function BoardPage( .filterTasksButtonAudioLabel } on:click={boardViewModel.showFilterModal} + toggle:selected={boardViewModel.isFilterActive} > - + filter_alt diff --git a/src/View/Components/chatEntry.tsx b/src/View/Components/chatEntry.tsx index e444371b..60da0ca3 100644 --- a/src/View/Components/chatEntry.tsx +++ b/src/View/Components/chatEntry.tsx @@ -5,11 +5,11 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel"; export function ChatEntry(chatViewModel: ChatViewModel) { const view = (