diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 93894c9e00..8abaa1c5bf 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -19,6 +19,8 @@ import { closeTooltip, tooltipstore } from '../tooltips' import type { FadeOptions } from '../types' import { defaultSP } from '../types' + import IconUpOutline from './icons/UpOutline.svelte' + import IconDownOutline from './icons/DownOutline.svelte' export let padding: string | undefined = undefined export let autoscroll: boolean = false @@ -28,22 +30,24 @@ export let horizontal: boolean = false export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical' export let noStretch: boolean = autoscroll + export let buttons: boolean = false export let divScroll: HTMLElement | undefined = undefined export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') { - if (divScroll && divHScroll) { + if (divScroll) { if (top !== 0) divScroll.scroll({ top, left: 0, behavior }) - if (left !== 0 || left !== undefined) divHScroll.scroll({ top: 0, left, behavior }) + if (left !== 0 || left !== undefined) divScroll.scroll({ top: 0, left, behavior }) } } export function scrollBy (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') { - if (divScroll && divHScroll) { + if (divScroll) { if (top !== 0) divScroll.scrollBy({ top, left: 0, behavior }) - if (left !== 0 || left !== undefined) divHScroll.scrollBy({ top: 0, left, behavior }) + if (left !== 0 || left !== undefined) divScroll.scrollBy({ top: 0, left, behavior }) } } const dispatch = createEventDispatcher() + const stepScroll = 52 let mask: 'top' | 'bottom' | 'both' | 'none' = 'none' let topCrop: 'top' | 'bottom' | 'full' | 'none' = 'none' @@ -54,6 +58,7 @@ let divBox: HTMLElement let divBar: HTMLElement let divBarH: HTMLElement + let divScrollContainer: HTMLElement let isScrolling: 'vertical' | 'horizontal' | false = false let dXY: number let belowContent: number | undefined = undefined @@ -62,6 +67,7 @@ let rightContent: number | undefined = undefined let scrolling: boolean = autoscroll let firstScroll: boolean = autoscroll + let orientir: 'vertical' | 'horizontal' = 'vertical' let timer: number let timerH: number @@ -69,8 +75,9 @@ const inter = new Set() $: fz = $themeOptions.fontSize - $: shiftTop = fade.offset?.top ? (fade.multipler?.top ?? 0) * fz : 0 - $: shiftBottom = fade.offset?.bottom ? fade.multipler?.bottom! * fz : 0 + $: shiftTop = fade.multipler?.top ? fade.multipler?.top * fz : 0 + $: shiftBottom = fade.multipler?.bottom ? fade.multipler?.bottom * fz : 0 + $: orientir = contentDirection === 'horizontal' ? 'horizontal' : 'vertical' const checkBar = (): void => { if (divBar && divScroll) { @@ -78,7 +85,7 @@ const scrollH = divScroll.scrollHeight const proc = scrollH / trackH divBar.style.height = divScroll.clientHeight / proc + 'px' - divBar.style.top = divScroll.scrollTop / proc + shiftTop + shiftBottom + 2 + 'px' + divBar.style.top = divScroll.scrollTop / proc + shiftTop + 2 + 'px' if (mask === 'none') divBar.style.visibility = 'hidden' else { divBar.style.visibility = 'visible' @@ -260,7 +267,7 @@ const checkIntersectionFade = () => { topCrop = 'none' topCropValue = 0 - if (!fade.offset?.top || !divScroll) return + if (!fade.multipler?.top || !divScroll) return const offset = divScroll.getBoundingClientRect().top inter.forEach((el) => { const rect = el.getBoundingClientRect() @@ -320,11 +327,24 @@ let divHeight: number const _resize = (): void => checkFade() + + const tapScroll = (n: number, dir: 'up' | 'down') => { + if (divScroll) { + if (orientir === 'horizontal') divScroll.scrollBy({ top: 0, left: dir === 'up' ? -n : n, behavior: 'smooth' }) + else divScroll.scrollBy({ top: dir === 'up' ? -n : n, left: 0, behavior: 'smooth' }) + } + } -
+
+ {#if buttons} + + + {/if}
{#if horizontal}
diff --git a/plugins/workbench-resources/src/components/HelpAndSupport.svelte b/plugins/workbench-resources/src/components/HelpAndSupport.svelte index ddd8b7ea2a..7228d4adde 100644 --- a/plugins/workbench-resources/src/components/HelpAndSupport.svelte +++ b/plugins/workbench-resources/src/components/HelpAndSupport.svelte @@ -8,7 +8,8 @@ Label, ListView, navigate, - Scroller + Scroller, + topSP } from '@hcengineering/ui' import setting, { settingId } from '@hcengineering/setting' import view, { Action, ActionCategory } from '@hcengineering/view' @@ -134,7 +135,7 @@ {/each} {:else} - + {@const action = actions[item]} diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index f746cff549..68a01dbb7a 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -56,9 +56,11 @@ import NavHeader from './NavHeader.svelte' import Navigator from './Navigator.svelte' import SpaceView from './SpaceView.svelte' + import Settings from './icons/Settings.svelte' export let client: Client let contentPanel: HTMLElement + let shownMenu: boolean = false const { setTheme } = getContext('theme') as any setClient(client) @@ -442,8 +444,12 @@ mini={appsMini} notify={false} /> + +
(shownMenu = !shownMenu)}> + +
- +
+
diff --git a/plugins/workbench-resources/src/components/icons/PreviewOff.svelte b/plugins/workbench-resources/src/components/icons/PreviewOff.svelte new file mode 100644 index 0000000000..3779291423 --- /dev/null +++ b/plugins/workbench-resources/src/components/icons/PreviewOff.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/plugins/workbench-resources/src/components/icons/PreviewOn.svelte b/plugins/workbench-resources/src/components/icons/PreviewOn.svelte new file mode 100644 index 0000000000..328bad524d --- /dev/null +++ b/plugins/workbench-resources/src/components/icons/PreviewOn.svelte @@ -0,0 +1,19 @@ + + + + + + diff --git a/plugins/workbench-resources/src/components/icons/Settings.svelte b/plugins/workbench-resources/src/components/icons/Settings.svelte new file mode 100644 index 0000000000..4bcbcbd5b0 --- /dev/null +++ b/plugins/workbench-resources/src/components/icons/Settings.svelte @@ -0,0 +1,19 @@ + + + + + +