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
+70 -53
View File
@@ -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");
}
}
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;