improve highlight style, improve filter button marker
This commit is contained in:
marlon-erler
Vendored
+5
-13
@@ -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;
|
||||
|
||||
Vendored
+9
-27
@@ -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",
|
||||
|
||||
Vendored
+69
-52
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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}
|
||||
|
||||
+20
-7
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user