diff --git a/dist/index.css b/dist/index.css index 86ba5d86..0b61dd0a 100644 --- a/dist/index.css +++ b/dist/index.css @@ -179,8 +179,6 @@ body[theme=black] * { #background-wrapper { position: fixed; inset: 0px; - transform: scale(1.2); - filter: blur(40px); z-index: 1; pointer-events: none; overflow: hidden; @@ -189,18 +187,22 @@ body[theme=black] * { main { z-index: 2; } -#background-wrapper div { - content: ""; +#background-wrapper > div { position: absolute; - inset: 0px; + inset: -100px; z-index: -1; pointer-events: none; + opacity: .3; +} +#background-wrapper > div > div { + position: absolute; + inset: 0px; + filter: blur(80px); } #background-wrapper #sky { left: -100%; bottom: -50%; background-image: radial-gradient(var(--sky-1), var(--sky-2)); - opacity: 0.4; } body { transition: --sky-1 1s, --sky-2 5s; @@ -209,27 +211,25 @@ body { --color-1: hsl(104.61, 100%, 46.85%); --color-2: hsl(37.43, 88.75%, 53.58%); filter: var(--backdrop-grass-filter); - opacity: 0.3; background-image: linear-gradient( 350deg, var(--color-1), var(--color-2) 30%, - transparent 40%); + transparent 50%); } #background-wrapper #grass-2 { --color-1: hsl(110, 60%, 40%); --color-2: hsl(110, 60%, 35%); filter: var(--backdrop-grass-filter); - opacity: 0.3; background-image: linear-gradient( 9deg, var(--color-1), var(--color-2) 30%, - transparent 35%); + transparent 45%); } -body[theme=dark] #background-wrapper { +body[theme=dark] #background-wrapper > div { opacity: 0.5; } body[theme=dark] #background-wrapper #sky { @@ -274,47 +274,51 @@ body[theme=dark] #background-wrapper #grass-2 { transition: all calc(var(--animation-duration) / 2); } body[keystroke-active] [ctkeystroke]::after { - opacity: 1; + opacity: .7; transform: translateY(0px); } /* src/View/homePage.css */ +#home-page { + overflow: auto; + padding: var(--content-padding); + min-width: unset; + max-width: 1000px; +} +#home-page > h1 { + font-size: 3rem; + font-family: IBM Plex Sans Thin; +} #home-page > div { + position: relative; display: flex; flex-direction: row; - gap: var(--large-gap); - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - overflow: hidden; - overflow-x: scroll; + flex-wrap: wrap; padding: 0px; + height: auto; + overflow: visible; } #home-page > div > div { display: flex; flex-direction: column; justify-content: start; - gap: var(--gap-between-tiles); - padding: var(--content-padding); - padding-top: calc(var(--header-height) + var(--content-margin)); width: 100%; min-width: 100%; - height: 100%; - overflow-y: auto; - scroll-snap-align: center; } -#home-page #overview-section, -#home-page #chat-section { - padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom)); +#home-page #overview-section { + gap: var(--gap-between-tiles); +} +#home-page #chat-section > button { + margin-bottom: var(--gap-between-tiles); } #home-page #chat-grid { - margin-top: var(--content-padding); display: grid; gap: var(--gap-between-tiles); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } @media (min-width: 640px) { #home-page > div { - overflow-x: hidden; + gap: var(--content-padding); } #home-page #overview-section { width: 20rem; @@ -325,18 +329,13 @@ body[keystroke-active] [ctkeystroke]::after { min-width: unset; } } -@media (min-width: 1200px) { - #home-page #overview-section, - #home-page #chat-section { - padding-left: 3rem; - padding-right: 3rem; +@media (min-width: 1000px) { + #home-page > div { + gap: var(--large-gap); } - #home-page #chat-grid { - margin-top: 3rem; - } - #home-page #overview-section { - width: var(--max-input-width); - min-width: var(--max-input-width); + #home-page > h1 { + padding-top: 3rem; + padding-bottom: 1rem; } } diff --git a/dist/index.js b/dist/index.js index d9cc8cc1..5fc11a7c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -318,7 +318,7 @@ refreshButton: "Refresh", saveButton: "Save", setButton: "Set", - filterOrCreateLabel: "Search or create", + filterOrCreateLabel: (type) => `Search or create ${type}`, createLabel: (query) => `Create "${query}"`, reloadAppButton: "Reload App", fileVersionLabel: "Version", @@ -344,8 +344,8 @@ }, homePage: { appName: "Coordination Tool", + greeting: (name) => `Hi ${name}`, /// - overviewHeadline: "Overview", serverAddress: "Server address", serverAddressPlaceholder: "wss://192.168.0.69:3000", connectAudioLabel: "connect to server", @@ -355,11 +355,8 @@ manageStorageButton: "Manage storage", transferDataButton: "Transfer or export data", updateButton: (version) => `Update to ${version}`, - scrollToChatButton: "Chats", /// - backToOverviewAudioLabel: "go back to overview", - chatsHeadline: "Chats", - addChatAudioLabel: "name of new chat", + typeChat: "chat", addChatPlaceholder: "Add chat", addChatButton: "Add chat" }, @@ -520,6 +517,7 @@ task: { noBoardSelected: "No board selected", boardNotFound: "Board not found", + typeBoard: "board", /// closeBoardButtonAudioLabel: "close board", toggleBoardButtonAudioLabel: "toggle board list", @@ -593,7 +591,7 @@ refreshButton: "Aktualisieren", saveButton: "Speichern", setButton: "OK", - filterOrCreateLabel: "Suchen oder erstellen", + filterOrCreateLabel: (type) => `${type} suchen oder erstellen`, createLabel: (query) => `"${query}" erstellen`, reloadAppButton: "Neu laden", fileVersionLabel: "Version", @@ -619,7 +617,7 @@ }, homePage: { appName: "Coordination Tool", - overviewHeadline: "\xDCbersicht", + greeting: (name) => `Hi ${name}!`, serverAddress: "Serveradresse", serverAddressPlaceholder: "wss://192.168.0.69:3000", connectAudioLabel: "mit Server verbinden", @@ -629,10 +627,7 @@ manageStorageButton: "Daten verwalten", transferDataButton: "Daten \xFCbertragen", updateButton: (version) => `Aktualisieren: ${version}`, - scrollToChatButton: "Chats", - backToOverviewAudioLabel: "zur\xFCck zur \xFCbersicht", - chatsHeadline: "Chats", - addChatAudioLabel: "Name des neuen Chats", + typeChat: "Chat", addChatPlaceholder: "Chat hinzuf\xFCgen", addChatButton: "Chat hinzuf\xFCgen" }, @@ -784,6 +779,7 @@ task: { noBoardSelected: "Kein Board ausgew\xE4hlt", boardNotFound: "Board nicht gefunden", + typeBoard: "Board", closeBoardButtonAudioLabel: "board schlie\xDFen", toggleBoardButtonAudioLabel: "board-liste ein/ausblenden", showBoardSettingsButtonAudioLabel: "Board-Einstellungen anzeigen", @@ -847,7 +843,7 @@ refreshButton: "Actualizar", saveButton: "Guardar", setButton: "OK", - filterOrCreateLabel: "Buscar o crear", + filterOrCreateLabel: (type) => `Buscar o crear ${type}`, createLabel: (query) => `Crear "${query}"`, reloadAppButton: "Recargar app", fileVersionLabel: "Versi\xF3n", @@ -873,7 +869,7 @@ }, homePage: { appName: "Coordination Tool", - overviewHeadline: "Resumen", + greeting: (name) => `Hola ${name}!`, serverAddress: "Direcci\xF3n del servidor", serverAddressPlaceholder: "wss://192.168.0.69:3000", connectAudioLabel: "conectar al servidor", @@ -883,10 +879,7 @@ manageStorageButton: "Gestionar almacenamiento", transferDataButton: "Enviar o exportar archivos", updateButton: (version) => `Actualizar a ${version}`, - scrollToChatButton: "Chats", - backToOverviewAudioLabel: "volver al resumen", - chatsHeadline: "Chats", - addChatAudioLabel: "nombre del nuevo chat", + typeChat: "chat", addChatPlaceholder: "A\xF1adir chat", addChatButton: "A\xF1adir chat" }, @@ -1038,6 +1031,7 @@ task: { noBoardSelected: "Ning\xFAn tablero seleccionado", boardNotFound: "Tablero no encontrado", + typeBoard: "board", closeBoardButtonAudioLabel: "cerrar tablero", toggleBoardButtonAudioLabel: "mostrar o ocultar lista de tableros", showBoardSettingsButtonAudioLabel: "mostrar configuraci\xF3n del tablero", @@ -1441,12 +1435,21 @@ this.closeContext = (contextId, fromHistoryEvent = false) => { if (!this.contexts.map((context) => context.contextId).includes(contextId)) return; + let exitNext = false; while (this.contexts.length > 0) { const currentContext = this.context; if (!currentContext) return; - currentContext.handleContextClose(fromHistoryEvent); + const response = currentContext.handleContextClose(fromHistoryEvent); + if (response == false) return; this.contextStack.delete(currentContext.contextId); - if (currentContext.contextId == contextId) break; + if (response == true) { + exitNext = true; + continue; + } else if (exitNext == true) { + break; + } else if (currentContext.contextId == contextId) { + break; + } } }; this.handleKeyDown = (e) => { @@ -2838,6 +2841,11 @@ }; this.loadData = () => { }; + // context + this.handleContextClose = (fromHistoryEvent) => { + if (!fromHistoryEvent) return; + return true; + }; this.calendarModel = calendarModel; this.boardsAndTasksModel = boardsAndTasksModel; this.chatViewModel = chatViewModel; @@ -4492,6 +4500,11 @@ this.updateBoardIndices(); this.openLastUsedBoard(); }; + // context + this.handleContextClose = (fromHistoryEvent) => { + if (!fromHistoryEvent) return; + return true; + }; this.loadData(); this.chatViewModel = chatViewModel; implementFilter( @@ -4946,6 +4959,12 @@ if (Object.values(ReactionSymbols).includes(previousFilter)) this.setReactionFilter(previousFilter); }; + // context + this.handleContextClose = (fromHistoryEvent) => { + if (this.replyViewSelectedMessage.value == void 0 && fromHistoryEvent) return true; + this.resetReplyView(); + return false; + }; this.restoreFilter(); this.cannotSendMessage = createProxyState( [ @@ -5231,22 +5250,23 @@ (chatViewModel) => chatViewModel.settingsPageViewModel.name.value ); // state - this.newChatPrimaryChannel = new State(""); + this.chatQuery = new State(""); this.chatViewModels = new ListState(); + this.chatMatches = new ListState(); this.selectedChat = new State( void 0 ); // guards this.cannotCreateChat = createProxyState( - [this.newChatPrimaryChannel], - () => this.newChatPrimaryChannel.value == "" + [this.chatQuery], + () => this.chatQuery.value == "" ); // methods this.createChat = () => { const chatModel = this.coreViewModel.chatListModel.createChat( - this.newChatPrimaryChannel.value + this.chatQuery.value ); - this.newChatPrimaryChannel.value = ""; + this.chatQuery.value = ""; const chatViewModel = this.createChatViewModel(chatModel); this.trackChat(chatViewModel); this.updateIndices(); @@ -5305,6 +5325,7 @@ this.settingsViewModel ); this.loadChats(); + implementFilter(this.chatViewModels, this.chatMatches, this.chatQuery, (chat) => chat.chatModel.info.name); } }; @@ -5324,16 +5345,7 @@ // src/View/Components/homePageButton.tsx function HomePageButton(action, label, icon, key) { - return /* @__PURE__ */ createElement( - "button", - { - class: "tile flex-no", - "on:click": action, - ctkeystroke: key - }, - /* @__PURE__ */ createElement("span", { class: "icon" }, icon), - /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, label)) - ); + return /* @__PURE__ */ createElement("button", { class: "tile flex-no", "on:click": action, ctkeystroke: key }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, label))); } // src/View/Components/chatEntry.tsx @@ -5341,7 +5353,7 @@ const view = /* @__PURE__ */ createElement( "button", { - class: "tile colored-tile chat-entry animate-highlight", + class: "tile colored-tile chat-entry animate-highlight slide-up", "set:color": chatViewModel.settingsPageViewModel.color, style: "height: 8rem", "on:click": chatViewModel.open, @@ -5370,9 +5382,29 @@ return ChatEntry(chatViewModel); }; + // src/View/Components/newItemEntry.tsx + function NewItemEntry(coreViewModel2, query, fn) { + const isHidden = createProxyState([query], () => query.value == ""); + const label = createProxyState( + [query], + () => coreViewModel2.translations.general.createLabel(query.value) + ); + return /* @__PURE__ */ createElement( + "button", + { + class: "standard slide-up", + "toggle:hidden": isHidden, + "on:click": fn + }, + /* @__PURE__ */ createElement("span", { "subscribe:innerText": label }), + /* @__PURE__ */ createElement("span", { class: "icon" }, "add") + ); + } + // src/View/homePage.tsx function HomePage(coreViewModel2, storageViewModel2, settingsViewModel2, connectionViewModel2, fileTransferViewModel2, chatListViewModel2) { - const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.homePage.serverAddress), /* @__PURE__ */ createElement( + const greeting = createProxyState([settingsViewModel2.username], () => coreViewModel2.translations.homePage.greeting(settingsViewModel2.username.value)); + const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.homePage.serverAddress), /* @__PURE__ */ createElement( "input", { list: "previous-connection-list", @@ -5443,38 +5475,25 @@ }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": coreViewModel2.updateText }), /* @__PURE__ */ createElement("span", { class: "icon" }, "update") - ), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, coreViewModel2.translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))))); - const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( + ), /* @__PURE__ */ createElement("hr", { class: "mobile-only" })); + const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( "input", { - placeholder: coreViewModel2.translations.homePage.addChatPlaceholder, - "aria-label": coreViewModel2.translations.homePage.addChatAudioLabel, - "bind:value": chatListViewModel2.newChatPrimaryChannel, + placeholder: coreViewModel2.translations.general.filterOrCreateLabel(coreViewModel2.translations.homePage.typeChat), + "bind:value": chatListViewModel2.chatQuery, "on:enter": chatListViewModel2.createChat } - ), /* @__PURE__ */ createElement( - "button", - { - class: "primary", - "aria-label": coreViewModel2.translations.homePage.addChatButton, - "on:click": chatListViewModel2.createChat, - "toggle:disabled": chatListViewModel2.cannotCreateChat - }, - /* @__PURE__ */ createElement("span", { class: "icon" }, "add") - )), /* @__PURE__ */ createElement( + )), /* @__PURE__ */ createElement("hr", null), NewItemEntry(coreViewModel2, chatListViewModel2.chatQuery, chatListViewModel2.createChat), /* @__PURE__ */ createElement( "div", { id: "chat-grid", "children:append": [ - chatListViewModel2.chatViewModels, + chatListViewModel2.chatMatches, ChatViewModelToChatEntry ] } )); - function scrollToChat() { - chatSection.scrollIntoView(); - } - return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("div", null, overviewSection, chatSection)); + return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("h1", { "subscribe:innerText": greeting }), /* @__PURE__ */ createElement("div", null, overviewSection, chatSection)); } // src/View/Components/ribbonButton.tsx @@ -6413,25 +6432,6 @@ return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary slide-up" }, text)); } - // src/View/Components/newItemEntry.tsx - function NewItemEntry(coreViewModel2, query, fn) { - const isHidden = createProxyState([query], () => query.value == ""); - const label = createProxyState( - [query], - () => coreViewModel2.translations.general.createLabel(query.value) - ); - return /* @__PURE__ */ createElement( - "button", - { - class: "standard slide-up", - "toggle:hidden": isHidden, - "on:click": fn - }, - /* @__PURE__ */ createElement("span", { "subscribe:innerText": label }), - /* @__PURE__ */ createElement("span", { class: "icon" }, "add") - ); - } - // src/View/Components/boardEntry.tsx function BoardEntry(boardViewModel) { const view = /* @__PURE__ */ createElement( @@ -6506,7 +6506,7 @@ class: "no-outline", "bind:value": taskPageViewModel.boardQuery, "on:enter": taskPageViewModel.createBoard, - placeholder: coreViewModel2.translations.general.filterOrCreateLabel + placeholder: coreViewModel2.translations.general.filterOrCreateLabel(coreViewModel2.translations.chatPage.task.typeBoard) } ))), /* @__PURE__ */ createElement("div", { class: "content gap" }, NewItemEntry( coreViewModel2, @@ -8018,15 +8018,7 @@ function toggle() { isSelected.value = !isSelected.value; } - return /* @__PURE__ */ createElement( - "button", - { - class: "tile", - "toggle:selected": isSelected, - "on:click": toggle - }, - /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path))) - ); + return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path)))); } function DirectionSelectionModal(coreViewModel2, connectionViewModel2, fileTransferViewModel2) { const isPresented = createProxyState( @@ -9116,7 +9108,7 @@ ); }); document.body.append( - /* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" })) + /* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" }))) ); document.querySelector("main").append( HomePage( diff --git a/dist/manifest.json b/dist/manifest.json index b356dacb..f0a6f536 100644 --- a/dist/manifest.json +++ b/dist/manifest.json @@ -1,6 +1,6 @@ { "name": "CT", - "display": "fullscreen", + "display": "standalone", "theme_color": "black", "background_color": "black", "icons": [ diff --git a/dist/styles.css b/dist/styles.css index 7e429b8f..257db030 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -8,6 +8,7 @@ BASIC outline: none; margin: 0px; padding: 0px; + font-synthesis: none !important; } html { @@ -325,6 +326,12 @@ body { TYPE */ +@font-face { + font-family: IBM Plex Sans Thin; + src: url("Fonts/IBMPlexSans-Thin.ttf"); + font-weight: thin; +} + @font-face { font-family: IBM Plex Sans; src: url("Fonts/IBMPlexSans-Regular.ttf"); @@ -494,6 +501,11 @@ textarea { display: none !important; } +body > main { + align-items: safe center; + justify-content: safe center; +} + main, .tile, .tile > div { diff --git a/dist/sw.js b/dist/sw.js index b23bf0cf..4a349fc8 100644 --- a/dist/sw.js +++ b/dist/sw.js @@ -1,4 +1,4 @@ -const VERSION = "2610 Beta 20" +const VERSION = "2610 Beta 21.9" function processUrl(event) { const url = event.request.url; diff --git a/dist/version.txt b/dist/version.txt index 3723904c..cd1ac1bf 100644 --- a/dist/version.txt +++ b/dist/version.txt @@ -1 +1 @@ -2610 Beta 20 +2610 Beta 21.9 diff --git a/src/View/translations.ts b/src/View/translations.ts index fbdf1606..e3cf0f16 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -54,7 +54,7 @@ const englishTranslations = { homePage: { appName: "Coordination Tool", - greeting: (name: string) => `Hi ${name}!`, + greeting: (name: string) => `Hi ${name}`, /// diff --git a/src/ViewModel/Global/coreViewModel.ts b/src/ViewModel/Global/coreViewModel.ts index 01b412e5..05091df7 100644 --- a/src/ViewModel/Global/coreViewModel.ts +++ b/src/ViewModel/Global/coreViewModel.ts @@ -52,12 +52,23 @@ export default class CoreViewModel { ) return; + let exitNext: boolean = false; + while (this.contexts.length > 0) { const currentContext: Context | undefined = this.context; if (!currentContext) return; - currentContext.handleContextClose(fromHistoryEvent); + const response = currentContext.handleContextClose(fromHistoryEvent); + if (response == false) return; this.contextStack.delete(currentContext.contextId); - if (currentContext.contextId == contextId) break; + if (response == true) { + exitNext = true; + continue; + } else if (exitNext == true) { + break + } + else if (currentContext.contextId == contextId) { + break; + } } }; @@ -196,7 +207,7 @@ export class Context { }; close = (): void => {}; - handleContextClose = (fromHistoryEvent: boolean): void => {}; + handleContextClose = (fromHistoryEvent: boolean): void|boolean=> {}; registerKeyStroke = (key: string, fn: () => void): void => { this.keystrokes.set(key, fn); diff --git a/src/ViewModel/Pages/calendarPageViewModel.ts b/src/ViewModel/Pages/calendarPageViewModel.ts index 73d24324..3b215cf5 100644 --- a/src/ViewModel/Pages/calendarPageViewModel.ts +++ b/src/ViewModel/Pages/calendarPageViewModel.ts @@ -219,6 +219,12 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel { }; loadData = (): void => {}; + + // context + handleContextClose = (fromHistoryEvent: boolean): void | boolean => { + if (!fromHistoryEvent) return; + return true; + } // init constructor( diff --git a/src/ViewModel/Pages/messagePageViewModel.ts b/src/ViewModel/Pages/messagePageViewModel.ts index 5ebf3569..cdec1bd3 100644 --- a/src/ViewModel/Pages/messagePageViewModel.ts +++ b/src/ViewModel/Pages/messagePageViewModel.ts @@ -196,6 +196,13 @@ export default class MessagePageViewModel extends Context { this.setReactionFilter(previousFilter); }; + // context + handleContextClose = (fromHistoryEvent: boolean):boolean=> { + if (this.replyViewSelectedMessage.value == undefined && fromHistoryEvent) return true; + this.resetReplyView(); + return false; + } + // init constructor( public readonly coreViewModel: CoreViewModel, diff --git a/src/ViewModel/Pages/taskPageViewModel.ts b/src/ViewModel/Pages/taskPageViewModel.ts index 337323cd..7ce9a21e 100644 --- a/src/ViewModel/Pages/taskPageViewModel.ts +++ b/src/ViewModel/Pages/taskPageViewModel.ts @@ -165,6 +165,12 @@ export default class TaskPageViewModel extends ContextHost { this.updateBoardIndices(); this.openLastUsedBoard(); }; + + // context + handleContextClose = (fromHistoryEvent: boolean): void | boolean => { + if (!fromHistoryEvent) return; + return true; + } // init constructor( diff --git a/src/base.css b/src/base.css index 44eb1946..43df30ab 100644 --- a/src/base.css +++ b/src/base.css @@ -9,9 +9,7 @@ /* Gradient */ #background-wrapper { position: fixed; - inset: -80px; - - filter: blur(40px); + inset: 0px; z-index: 1; pointer-events: none; @@ -25,14 +23,20 @@ main { z-index: 2; } -#background-wrapper div { - content: ""; - +#background-wrapper > div { position: absolute; - inset: 0px; + inset: -100px; z-index: -1; pointer-events: none; + + opacity: .3; +} + +#background-wrapper > div > div { + position: absolute; + inset: 0px; + filter: blur(80px); } #background-wrapper #sky { @@ -40,8 +44,6 @@ main { bottom: -50%; background-image: radial-gradient(var(--sky-1), var(--sky-2)); - - opacity: 0.4; } body { @@ -55,13 +57,12 @@ body { --color-2: hsl(37.43, 88.75%, 53.58%); filter: var(--backdrop-grass-filter); - opacity: 0.3; background-image: linear-gradient( 350deg, var(--color-1), var(--color-2) 30%, - transparent 40% + transparent 50% ); } @@ -70,17 +71,16 @@ body { --color-2: hsl(110, 60%, 35%); filter: var(--backdrop-grass-filter); - opacity: 0.3; background-image: linear-gradient( 9deg, var(--color-1), var(--color-2) 30%, - transparent 35% + transparent 45% ); } -body[theme="dark"] #background-wrapper { +body[theme="dark"] #background-wrapper > div { opacity: 0.5; } diff --git a/src/index.tsx b/src/index.tsx index a4c39481..f7130bdf 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -85,30 +85,32 @@ chatListViewModel.selectedChat.subscribe(() => { document.body.append(
-
-
-
+
+
+
+
+
, ); document .querySelector("main")! .append( - HomePage( - coreViewModel, - storageViewModel, - settingsViewModel, - connectionViewModel, - fileTransferViewModel, - chatListViewModel, - ), - ChatPageWrapper(coreViewModel, chatListViewModel), - OnboardingModalWrapper(coreViewModel, onboardingViewModel), - ConnectionModal(coreViewModel, connectionViewModel), - DataTransferModalWrapper( - coreViewModel, - connectionViewModel, - fileTransferViewModel, - ), - StorageModal(coreViewModel, storageViewModel), - SettingsModal(coreViewModel, settingsViewModel), + HomePage( + coreViewModel, + storageViewModel, + settingsViewModel, + connectionViewModel, + fileTransferViewModel, + chatListViewModel, + ), + ChatPageWrapper(coreViewModel, chatListViewModel), + OnboardingModalWrapper(coreViewModel, onboardingViewModel), + ConnectionModal(coreViewModel, connectionViewModel), + DataTransferModalWrapper( + coreViewModel, + connectionViewModel, + fileTransferViewModel, + ), + StorageModal(coreViewModel, storageViewModel), + SettingsModal(coreViewModel, settingsViewModel), );