VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve highlight style, improve filter button marker

Browse Source
This commit is contained in:
marlon-erler
2026-04-12 12:39:29 +00:00
parent 8d44cef429
commit 4ad92f8dc7
9 changed files with 113 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+5 -13
View File
@@ -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;
dist/index.js
Vendored
+9 -27
View File
@@ -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",
dist/styles.css
Vendored
+31 -14
View File
@@ -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;
@@ -164,6 +167,7 @@ select:not(.tile *),
}
@media (hover: hover) {
button:hover,
select:hover,
button.tile.ghost:hover {
@@ -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 *),
@@ -692,10 +692,7 @@ select {
}
article>div {
padding-bottom: calc(
var(--menu-height-mobile) + var(--control-height) +
var(--content-padding)
);
padding-bottom: calc(var(--menu-height-mobile) + var(--control-height) + var(--content-padding));
}
label:not(.inline) {
@@ -1037,10 +1034,7 @@ menu {
}
article>div {
padding-bottom: calc(
var(--menu-height-mobile) + var(--header-height) +
var(--content-padding)
);
padding-bottom: calc(var(--menu-height-mobile) + var(--header-height) + var(--content-padding));
}
/* overflow */
@@ -1126,6 +1120,7 @@ main {
/* tablet & up */
@media (min-width: 640px) {
/* basic */
.mobile-only {
display: none !important;
@@ -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
*/
src/View/ChatPages/boardPage.tsx
+2 -12
View File
@@ -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}
>
<span
class="icon"
subscribe:innerText={filterIcon}
></span>
<span class="icon">filter_alt</span>
</button>
<button
class="ghost"
src/View/ChatPages/messagePage.tsx
+4 -12
View File
@@ -19,14 +19,6 @@ export function MessagePage(
return ChatMessage(coreViewModel, chatMessageViewModel);
};
const filterIcon = React.createProxyState(
[messagePageViewModel.isFilterActive],
() =>
messagePageViewModel.isFilterActive.value
? "filter_alt"
: "filter_alt_off",
);
const messageContainer = (
<div
id="message-container"
@@ -76,11 +68,11 @@ export function MessagePage(
coreViewModel.translations.chatPage.message
.filterMessagesButtonAudioLabel
}
toggle:selected={
messagePageViewModel.isFilterActive
}
>
<span
class="icon"
subscribe:innerText={filterIcon}
></span>
<span class="icon">filter_alt</span>
</button>
</span>
</div>
src/View/Components/chatEntry.tsx
+2 -2
View File
@@ -5,11 +5,11 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
export function ChatEntry(chatViewModel: ChatViewModel) {
const view = (
<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}
>
<span
class="shadow"
src/View/Components/ribbonButton.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export function RibbonButton(
) {
return (
<button
class="ribbon-button"
class="ribbon-button animate-highlight"
aria-label={label}
toggle:selected={isSelected}
toggle:highlight={isHighlighted}
src/View/chatPage.css
+20 -7
View File
@@ -186,7 +186,15 @@ body[showing-chat] #chat-page-wrapper {
> .pane-wrapper
> .pane
> .toolbar
button.ribbon-button {
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));
@@ -197,6 +205,17 @@ body[showing-chat] #chat-page-wrapper {
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
@@ -214,12 +233,6 @@ body[showing-chat] #chat-page-wrapper {
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);
src/View/homePage.css
-9
View File
@@ -45,15 +45,6 @@
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;