diff --git a/packages/ui/lang/cs.json b/packages/ui/lang/cs.json index c6eb895ff3..498fd985ce 100644 --- a/packages/ui/lang/cs.json +++ b/packages/ui/lang/cs.json @@ -110,6 +110,7 @@ "FullSize": "Plná velikost", "UseMaxWidth": "Maximální šířka", "Sidebar": "Postranní panel", + "FontSize": "Velikost písma", "Language": "Jazyk" } } diff --git a/packages/ui/lang/de.json b/packages/ui/lang/de.json index 084fcd50e0..ed5a5391a3 100644 --- a/packages/ui/lang/de.json +++ b/packages/ui/lang/de.json @@ -110,6 +110,7 @@ "FullSize": "Volle Größe", "UseMaxWidth": "Maximale Breite", "Sidebar": "Seitenleiste", + "FontSize": "Schriftgröße", "Language": "Sprache" } } diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json index 366e5c1498..1b6a9d2254 100644 --- a/packages/ui/lang/en.json +++ b/packages/ui/lang/en.json @@ -111,6 +111,7 @@ "FullSize": "Full size", "UseMaxWidth": "Max width", "Sidebar": "Sidebar", + "FontSize": "Font size", "Language": "Language" } } diff --git a/packages/ui/lang/es.json b/packages/ui/lang/es.json index 14326f5ae6..78baea9d75 100644 --- a/packages/ui/lang/es.json +++ b/packages/ui/lang/es.json @@ -111,6 +111,7 @@ "FullSize": "Tamaño completo", "UseMaxWidth": "Ancho máximo", "Sidebar": "Barra lateral", + "FontSize": "Tamaño de fuente", "Language": "Idioma" } } diff --git a/packages/ui/lang/fr.json b/packages/ui/lang/fr.json index 42353dcf0b..9c7d833b37 100644 --- a/packages/ui/lang/fr.json +++ b/packages/ui/lang/fr.json @@ -111,6 +111,7 @@ "FullSize": "Taille réelle", "UseMaxWidth": "Largeur maximale", "Sidebar": "Barre latérale", + "FontSize": "Taille de police", "Language": "Langue" } } diff --git a/packages/ui/lang/it.json b/packages/ui/lang/it.json index fd1fcad7cd..3b18ec331c 100644 --- a/packages/ui/lang/it.json +++ b/packages/ui/lang/it.json @@ -111,6 +111,7 @@ "FullSize": "Dimensione intera", "UseMaxWidth": "Larghezza massima", "Sidebar": "Barra laterale", + "FontSize ": "Dimensione del carattere", "Language": "Lingua" } } diff --git a/packages/ui/lang/pt.json b/packages/ui/lang/pt.json index efc78425fd..f6bc4fed47 100644 --- a/packages/ui/lang/pt.json +++ b/packages/ui/lang/pt.json @@ -111,6 +111,7 @@ "FullSize": "Tamanho completo", "UseMaxWidth": "Largura máxima", "Sidebar": "Barra lateral", + "FontSize": "Tamanho da fonte", "Language": "Idioma" } } diff --git a/packages/ui/lang/ru.json b/packages/ui/lang/ru.json index 080cd5559d..592410569d 100644 --- a/packages/ui/lang/ru.json +++ b/packages/ui/lang/ru.json @@ -111,6 +111,7 @@ "FullSize": "Полный размер", "UseMaxWidth": "Максимальная ширина", "Sidebar": "Боковая панель", + "FontSize": "Размер шрифта", "Language": "Язык" } } diff --git a/packages/ui/lang/zh.json b/packages/ui/lang/zh.json index 624d283026..f9854e4c72 100644 --- a/packages/ui/lang/zh.json +++ b/packages/ui/lang/zh.json @@ -111,6 +111,7 @@ "FullSize": "全尺寸", "UseMaxWidth": "使用最大宽度", "Sidebar": "侧边栏", + "FontSize": "字体大小", "Language": "语言" } } diff --git a/packages/ui/src/components/ModernPopup.svelte b/packages/ui/src/components/ModernPopup.svelte index ba007929d4..067a352d5d 100644 --- a/packages/ui/src/components/ModernPopup.svelte +++ b/packages/ui/src/components/ModernPopup.svelte @@ -60,7 +60,7 @@ > {#if withIcons}
- {#if item.icon}{/if} + {#if item.icon}{/if}
{/if} {#if item.description} diff --git a/packages/ui/src/components/internal/FontSizeButton.svelte b/packages/ui/src/components/internal/FontSizeButton.svelte deleted file mode 100644 index 12a14bb1a0..0000000000 --- a/packages/ui/src/components/internal/FontSizeButton.svelte +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - diff --git a/packages/ui/src/components/internal/FontSizePopup.svelte b/packages/ui/src/components/internal/FontSizePopup.svelte deleted file mode 100644 index 0166f0a5be..0000000000 --- a/packages/ui/src/components/internal/FontSizePopup.svelte +++ /dev/null @@ -1,50 +0,0 @@ - - - -
- {#each fontsizes as font} - - -
{ - select(font.id) - }} - > - - - -
- {/each} -
diff --git a/packages/ui/src/components/internal/FontSizeSelector.svelte b/packages/ui/src/components/internal/FontSizeSelector.svelte deleted file mode 100644 index 3c34fb3ad0..0000000000 --- a/packages/ui/src/components/internal/FontSizeSelector.svelte +++ /dev/null @@ -1,58 +0,0 @@ - - - - diff --git a/packages/ui/src/components/internal/LangPopup.svelte b/packages/ui/src/components/internal/LangPopup.svelte deleted file mode 100644 index 950a5a5ba6..0000000000 --- a/packages/ui/src/components/internal/LangPopup.svelte +++ /dev/null @@ -1,48 +0,0 @@ - - - -
-
- {#each langs as lang} - - -
{ - dispatch('close', lang.id) - }} - > -
- -
- {#if lang.id === selected} - - {/if} -
-
- {/each} -
-
diff --git a/packages/ui/src/components/internal/LangSelector.svelte b/packages/ui/src/components/internal/LangSelector.svelte deleted file mode 100644 index a6aa99df8f..0000000000 --- a/packages/ui/src/components/internal/LangSelector.svelte +++ /dev/null @@ -1,85 +0,0 @@ - - - - diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte index 1e4f9d0763..0bbe190195 100644 --- a/packages/ui/src/components/internal/Root.svelte +++ b/packages/ui/src/components/internal/Root.svelte @@ -4,14 +4,15 @@ import type { AnyComponent, WidthType } from '../../types' import { deviceSizes, deviceWidths } from '../../types' // import { applicationShortcutKey } from '../../utils' - import { Theme } from '@hcengineering/theme' + import { Theme, themeStore } from '@hcengineering/theme' import { IconArrowLeft, IconArrowRight, checkMobile, deviceOptionsStore as deviceInfo, checkAdaptiveMatching, - getLocalWeekStart + getLocalWeekStart, + updateEmojis } from '../../' import { desktopPlatform, getCurrentLocation, location, locationStorageKeyId, navigate } from '../../location' import uiPlugin from '../../plugin' @@ -19,10 +20,8 @@ import Label from '../Label.svelte' import StatusComponent from '../Status.svelte' import Clock from './Clock.svelte' - import FontSizeSelector from './FontSizeSelector.svelte' - import LangSelector from './LangSelector.svelte' import RootBarExtension from './RootBarExtension.svelte' - import ThemeSelector from './ThemeSelector.svelte' + import Settings from './Settings.svelte' let application: AnyComponent | undefined @@ -89,9 +88,13 @@ $: $deviceInfo.isMobile = isMobile $: $deviceInfo.minWidth = docWidth <= 480 $: $deviceInfo.twoRows = docWidth <= 680 + $: $deviceInfo.language = $themeStore.language + $: $deviceInfo.fontSize = $themeStore.fontSize $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`) + $: void updateEmojis($themeStore.language) + let doubleTouchStartTimestamp = 0 document.addEventListener('touchstart', (event) => { const now = +new Date() @@ -155,7 +158,7 @@
-
+
{#if desktopPlatform}
-
-
- -
+
+ +
{#if !secondRow} {/if} - - -
@@ -282,9 +281,6 @@ font-size: 14px; color: var(--theme-content-color); } - .clock { - margin: 0 12px 0 8px; - } .second-row { display: none; diff --git a/packages/ui/src/components/internal/Settings.svelte b/packages/ui/src/components/internal/Settings.svelte new file mode 100644 index 0000000000..ef6a7640b1 --- /dev/null +++ b/packages/ui/src/components/internal/Settings.svelte @@ -0,0 +1,39 @@ + + + + diff --git a/packages/ui/src/components/internal/SettingsPopup.svelte b/packages/ui/src/components/internal/SettingsPopup.svelte new file mode 100644 index 0000000000..ec4c8c82af --- /dev/null +++ b/packages/ui/src/components/internal/SettingsPopup.svelte @@ -0,0 +1,196 @@ + + + +
+
+
+
+ {#each themes as theme} + {@const selected = currentTheme === theme.id} + + +
{ + selectTheme(theme.id) + }} + > + + + +
+ {/each} +
+ +
+ + + +
+ + +
+
+
diff --git a/packages/ui/src/components/internal/ThemeButton.svelte b/packages/ui/src/components/internal/ThemeButton.svelte index 33da870d17..45e365825b 100644 --- a/packages/ui/src/components/internal/ThemeButton.svelte +++ b/packages/ui/src/components/internal/ThemeButton.svelte @@ -17,33 +17,33 @@ import FontSize from './icons/FontSize.svelte' import CheckCircled from './icons/CheckCircled.svelte' - export let size: string + export let theme: string export let focused: string let btn: HTMLButtonElement onMount(() => { - if (focused === size) btn.focus() + if (focused === theme) btn.focus() }) diff --git a/packages/ui/src/components/internal/ThemePopup.svelte b/packages/ui/src/components/internal/ThemePopup.svelte deleted file mode 100644 index 4f0ea2433d..0000000000 --- a/packages/ui/src/components/internal/ThemePopup.svelte +++ /dev/null @@ -1,50 +0,0 @@ - - - -
- {#each themes as theme} - - -
{ - select(theme.id) - }} - > - - - -
- {/each} -
diff --git a/packages/ui/src/components/internal/ThemeSelector.svelte b/packages/ui/src/components/internal/ThemeSelector.svelte deleted file mode 100644 index 131d387c74..0000000000 --- a/packages/ui/src/components/internal/ThemeSelector.svelte +++ /dev/null @@ -1,53 +0,0 @@ - - - diff --git a/packages/ui/src/components/internal/icons/Language.svelte b/packages/ui/src/components/internal/icons/Language.svelte new file mode 100644 index 0000000000..564d65cfd5 --- /dev/null +++ b/packages/ui/src/components/internal/icons/Language.svelte @@ -0,0 +1,17 @@ + + + + + + diff --git a/packages/ui/src/components/internal/icons/Settings.svelte b/packages/ui/src/components/internal/icons/Settings.svelte new file mode 100644 index 0000000000..5a7c4d409c --- /dev/null +++ b/packages/ui/src/components/internal/icons/Settings.svelte @@ -0,0 +1,13 @@ + + + + + + diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts index 821d887a7c..4f54fdd9d6 100644 --- a/packages/ui/src/plugin.ts +++ b/packages/ui/src/plugin.ts @@ -138,6 +138,7 @@ export const uis = plugin(uiId, { FullSize: '' as IntlString, UseMaxWidth: '' as IntlString, Sidebar: '' as IntlString, + FontSize: '' as IntlString, Language: '' as IntlString }, metadata: {