diff --git a/packages/theme/src/Theme.svelte b/packages/theme/src/Theme.svelte index 7dbe24e74d..1f58293dad 100644 --- a/packages/theme/src/Theme.svelte +++ b/packages/theme/src/Theme.svelte @@ -15,28 +15,36 @@ diff --git a/packages/ui/src/components/internal/Clock.svelte b/packages/ui/src/components/internal/Clock.svelte index ebd81fe305..1f8d879577 100644 --- a/packages/ui/src/components/internal/Clock.svelte +++ b/packages/ui/src/components/internal/Clock.svelte @@ -1,9 +1,12 @@ -
+
+ diff --git a/packages/ui/src/components/internal/ClockFace.svelte b/packages/ui/src/components/internal/ClockFace.svelte new file mode 100644 index 0000000000..bc470f48b1 --- /dev/null +++ b/packages/ui/src/components/internal/ClockFace.svelte @@ -0,0 +1,140 @@ + + + +
+ {#each [...Array(12).keys()] as hour} +
+ {/each} + {#each clock as arrow} +
+ {/each} +
+ + diff --git a/packages/ui/src/components/internal/ClockPopup.svelte b/packages/ui/src/components/internal/ClockPopup.svelte new file mode 100644 index 0000000000..dae6e002c7 --- /dev/null +++ b/packages/ui/src/components/internal/ClockPopup.svelte @@ -0,0 +1,27 @@ + + + +
+
+ + + {getTimeZoneName()} + +
+
diff --git a/packages/ui/src/components/internal/FontSizeButton.svelte b/packages/ui/src/components/internal/FontSizeButton.svelte new file mode 100644 index 0000000000..2a48c43d49 --- /dev/null +++ b/packages/ui/src/components/internal/FontSizeButton.svelte @@ -0,0 +1,55 @@ + + + + + + diff --git a/packages/ui/src/components/internal/FontSizePopup.svelte b/packages/ui/src/components/internal/FontSizePopup.svelte new file mode 100644 index 0000000000..3ada8ccf42 --- /dev/null +++ b/packages/ui/src/components/internal/FontSizePopup.svelte @@ -0,0 +1,43 @@ + + + +
+ {#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 index 7597b7e4e7..52fbcfb639 100644 --- a/packages/ui/src/components/internal/FontSizeSelector.svelte +++ b/packages/ui/src/components/internal/FontSizeSelector.svelte @@ -14,28 +14,45 @@ --> - -
+
+ diff --git a/packages/ui/src/components/internal/LangPopup.svelte b/packages/ui/src/components/internal/LangPopup.svelte index 33fd63df42..8d2b514d3d 100644 --- a/packages/ui/src/components/internal/LangPopup.svelte +++ b/packages/ui/src/components/internal/LangPopup.svelte @@ -15,26 +15,31 @@ -
+
{#each langs as lang}
{ dispatch('close', lang.id) }} > - - - -
+
{@html lang.logo}
+ +
+ {#if lang.id === selected} + + {/if} +
{/each}
diff --git a/packages/ui/src/components/internal/LangSelector.svelte b/packages/ui/src/components/internal/LangSelector.svelte index 8d09c76370..1fcb2ca5fa 100644 --- a/packages/ui/src/components/internal/LangSelector.svelte +++ b/packages/ui/src/components/internal/LangSelector.svelte @@ -17,9 +17,9 @@ import { getMetadata } from '@hcengineering/platform' import { showPopup } from '../..' import LangPopup from './LangPopup.svelte' - import ui from '../../plugin' + import ui, { deviceOptionsStore as deviceInfo } from '../..' - import Flags from './icons/Flags.svelte' + let pressed: boolean = false const { currentLanguage, setLanguage } = getContext('lang') as { currentLanguage: string @@ -27,8 +27,8 @@ } const uiLangs = new Set(getMetadata(ui.metadata.Languages)) const langs = [ - { id: 'en', label: ui.string.English }, - { id: 'ru', label: ui.string.Russian } + { id: 'en', label: ui.string.English, logo: '🇺🇸' }, + { id: 'ru', label: ui.string.Russian, logo: '🇷🇺' } ].filter((lang) => uiLangs.has(lang.id)) if (langs.findIndex((l) => l.id === currentLanguage) < 0 && langs.length !== 0) { @@ -46,28 +46,28 @@ const isSelectable = langs.length > 1 $: selected = langs.find((item) => item.id === currentLanguage) - let trigger: HTMLElement const selectLanguage = (): void => { if (!isSelectable) { return } + pressed = true - showPopup(LangPopup, { langs }, trigger, (result) => { + showPopup(LangPopup, { langs, selected: selected?.id }, 'status', (result) => { if (result) { selected = langs.find((item) => item.id === result) setLanguage(result) } + pressed = false }) } + $: $deviceInfo.language = selected?.id - -{#if selected} - -
- - - -
-{/if} + diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte index f330b2a9e8..5754c09547 100644 --- a/packages/ui/src/components/internal/Root.svelte +++ b/packages/ui/src/components/internal/Root.svelte @@ -12,13 +12,17 @@ import StatusComponent from '../Status.svelte' import Clock from './Clock.svelte' // import Mute from './icons/Mute.svelte' - import { checkMobile, deviceOptionsStore as deviceInfo, networkStatus } from '../../' + import { + checkMobile, + deviceOptionsStore as deviceInfo + // networkStatus + } from '../../' import uiPlugin from '../../plugin' import Label from '../Label.svelte' import FontSizeSelector from './FontSizeSelector.svelte' - import Computer from './icons/Computer.svelte' - import Phone from './icons/Phone.svelte' - import WiFi from './icons/WiFi.svelte' + // import Computer from './icons/Computer.svelte' + // import Phone from './icons/Phone.svelte' + // import WiFi from './icons/WiFi.svelte' import LangSelector from './LangSelector.svelte' import ThemeSelector from './ThemeSelector.svelte' @@ -76,7 +80,7 @@ let docHeight: number = window.innerHeight let isMobile: boolean - let alwaysMobile: boolean = false + const alwaysMobile: boolean = false $: isMobile = alwaysMobile || checkMobile() let isPortrait: boolean $: isPortrait = docWidth <= docHeight @@ -159,17 +163,12 @@
-
+
+ +
-
- -
-
- -
- -
{ @@ -183,7 +182,6 @@ size={'small'} />
-
{ @@ -198,7 +196,7 @@ ? 'var(--theme-warning-color)' : 'currentColor'} /> -
+
-->
@@ -215,10 +213,6 @@ diff --git a/packages/ui/src/components/internal/ThemePopup.svelte b/packages/ui/src/components/internal/ThemePopup.svelte new file mode 100644 index 0000000000..3b36f2beac --- /dev/null +++ b/packages/ui/src/components/internal/ThemePopup.svelte @@ -0,0 +1,43 @@ + + + +
+ {#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 index ae6bacf789..93d26516d1 100644 --- a/packages/ui/src/components/internal/ThemeSelector.svelte +++ b/packages/ui/src/components/internal/ThemeSelector.svelte @@ -1,23 +1,53 @@ - -
- -
+ diff --git a/packages/ui/src/components/internal/icons/CheckCircled.svelte b/packages/ui/src/components/internal/icons/CheckCircled.svelte new file mode 100644 index 0000000000..66e10c08f6 --- /dev/null +++ b/packages/ui/src/components/internal/icons/CheckCircled.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/ui/src/components/internal/icons/Flags.svelte b/packages/ui/src/components/internal/icons/Flags.svelte deleted file mode 100644 index 9a160edeed..0000000000 --- a/packages/ui/src/components/internal/icons/Flags.svelte +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/ui/src/components/internal/icons/FontSize.svelte b/packages/ui/src/components/internal/icons/FontSize.svelte index 52722a5487..bc9774c747 100644 --- a/packages/ui/src/components/internal/icons/FontSize.svelte +++ b/packages/ui/src/components/internal/icons/FontSize.svelte @@ -1,12 +1,13 @@ - - - - - + + + diff --git a/packages/ui/src/components/internal/icons/Mute.svelte b/packages/ui/src/components/internal/icons/Mute.svelte deleted file mode 100644 index 2305a14942..0000000000 --- a/packages/ui/src/components/internal/icons/Mute.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/packages/ui/src/components/internal/icons/Theme.svelte b/packages/ui/src/components/internal/icons/Theme.svelte new file mode 100644 index 0000000000..80368189dc --- /dev/null +++ b/packages/ui/src/components/internal/icons/Theme.svelte @@ -0,0 +1,9 @@ + + + + + diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts index bc48c5d903..8a3e32cedf 100644 --- a/packages/ui/src/plugin.ts +++ b/packages/ui/src/plugin.ts @@ -87,7 +87,12 @@ export const uis = plugin(uiId, { TravelAndPlaces: '' as IntlString, Food: '' as IntlString, MoreCount: '' as IntlString, - Objects: '' as IntlString + Objects: '' as IntlString, + Spacious: '' as IntlString, + Compact: '' as IntlString, + ThemeLight: '' as IntlString, + ThemeDark: '' as IntlString, + ThemeSystem: '' as IntlString }, metadata: { DefaultApplication: '' as Metadata, diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index 69650de32a..19d71ba257 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -329,6 +329,9 @@ export function fitPopupElement ( newProps.bottom = '12px' newProps.right = '12px' show = true + } else if (element === 'status') { + newProps.top = 'calc(var(--status-bar-height) + 7.5px)' + newProps.right = '12px' } } else { if (clientWidth !== undefined && clientHeight !== undefined) { diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 4ed4070057..5050b6bab9 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -157,6 +157,7 @@ export type ButtonShape = | 'circle' | 'round' | 'round2' + | 'round-small' | 'filter' | undefined export type EditStyle = @@ -196,6 +197,7 @@ export type PopupPosAlignment = | 'help-center' | 'centered' | 'center' + | 'status' export function isPopupPosAlignment (x: any): x is PopupPosAlignment { return ( @@ -349,7 +351,8 @@ export interface DeviceOptions { sizes: Record minWidth: boolean twoRows: boolean - theme?: any + theme?: string + language?: string } export interface TimelineItem {