From 84ab130470ed237407b4bd3fc9d456785fd28e8f Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Mon, 28 Oct 2024 08:52:17 +0300 Subject: [PATCH] UI and separation fixes. (#7045) Signed-off-by: Alexander Platov --- packages/theme/styles/components.scss | 3 - .../ui/src/components/PanelInstance.svelte | 2 + packages/ui/src/components/Scroller.svelte | 28 +-- packages/ui/src/components/Separator.svelte | 205 ++++++++++-------- packages/ui/src/panelup.ts | 1 + .../src/components/RoomPreview.svelte | 4 +- .../src/components/CreateToDo.svelte | 2 +- .../time-resources/src/components/Me.svelte | 4 +- .../src/components/PlanView.svelte | 18 +- .../src/components/PlanningCalendar.svelte | 2 + plugins/time-resources/src/utils.ts | 2 +- .../src/components/Workbench.svelte | 20 +- .../src/components/sidebar/Sidebar.svelte | 15 +- .../components/sidebar/SidebarExpanded.svelte | 104 +++++---- .../src/components/sidebar/SidebarTabs.svelte | 3 +- .../sidebar/widgets/WidgetsBar.svelte | 5 +- 16 files changed, 222 insertions(+), 196 deletions(-) diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 8799976415..31d53ae85e 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -23,9 +23,6 @@ min-width: 0; border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor); border-radius: var(--small-focus-BorderRadius); - border-bottom-right-radius: 0; - border-top-right-radius: 0; - border-right: 0; &:not(.modal) { background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor); diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte index 887a3dea09..c05d85bd37 100644 --- a/packages/ui/src/components/PanelInstance.svelte +++ b/packages/ui/src/components/PanelInstance.svelte @@ -64,6 +64,7 @@ props = $panelstore.panel }) } + $panelstore.panel.refit = fitPopupInstance } else { props = undefined } @@ -132,6 +133,7 @@ if (!keepSize && props?.element === 'content') { keepSize = true resizeObserver(contentPanel, checkResize) + if (!contentPanel.hasAttribute('data-id')) contentPanel.setAttribute('data-id', 'contentPanel') } } diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 8b9548a68d..2c63f4189e 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -174,7 +174,7 @@ } } - const handleScroll = (event: MouseEvent): void => { + const handleScroll = (event: PointerEvent): void => { scrolling = false if ( (divBar == null && isScrolling === 'vertical') || @@ -185,7 +185,7 @@ } const rectScroll = divScroll.getBoundingClientRect() if (isScrolling === 'vertical') { - let Y = event.clientY - dXY + let Y = Math.round(event.clientY) - dXY if (Y < rectScroll.top + shiftTop + 2) Y = rectScroll.top + shiftTop + 2 if (Y > rectScroll.bottom - divBar.clientHeight - shiftBottom - 2) { Y = rectScroll.bottom - divBar.clientHeight - shiftBottom - 2 @@ -201,7 +201,7 @@ divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar } } else if (isScrolling === 'horizontal') { - let X = event.clientX - dXY + let X = Math.round(event.clientX) - dXY if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) { X = rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight @@ -215,18 +215,18 @@ } } const onScrollEnd = (): void => { - document.removeEventListener('mousemove', handleScroll) + document.removeEventListener('pointermove', handleScroll) document.body.style.userSelect = 'auto' document.body.style.webkitUserSelect = 'auto' - document.removeEventListener('mouseup', onScrollEnd) + document.removeEventListener('pointerup', onScrollEnd) isScrolling = false } - const onScrollStart = (event: MouseEvent, direction: 'vertical' | 'horizontal'): void => { + const onScrollStart = (event: PointerEvent, direction: 'vertical' | 'horizontal'): void => { if (divScroll == null) return scrolling = false - dXY = direction === 'vertical' ? event.offsetY : event.offsetX - document.addEventListener('mouseup', onScrollEnd) - document.addEventListener('mousemove', handleScroll) + dXY = Math.round(direction === 'vertical' ? event.offsetY : event.offsetX) + document.addEventListener('pointerup', onScrollEnd) + document.addEventListener('pointermove', handleScroll) document.body.style.userSelect = 'none' document.body.style.webkitUserSelect = 'none' isScrolling = direction @@ -666,10 +666,10 @@ class:hovered={isScrolling === 'vertical'} class:reverse={scrollDirection === 'vertical-reverse'} bind:this={divBar} - on:mousedown|stopPropagation={(ev) => { + on:pointerdown|stopPropagation={(ev) => { onScrollStart(ev, 'vertical') }} - on:mouseleave={checkFade} + on:pointerleave={checkFade} /> {/if} {#if horizontal && maskH !== 'none'} @@ -687,10 +687,10 @@ class="bar-horizontal" class:hovered={isScrolling === 'horizontal'} bind:this={divBarH} - on:mousedown|stopPropagation={(ev) => { + on:pointerdown|stopPropagation={(ev) => { onScrollStart(ev, 'horizontal') }} - on:mouseleave={checkFade} + on:pointerleave={checkFade} /> {/if} @@ -864,9 +864,11 @@ overscroll-behavior: none; } &::-webkit-scrollbar:vertical { + display: none; width: 0; } &::-webkit-scrollbar:horizontal { + display: none; height: 0; } diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte index 95461bb22d..613177ce66 100644 --- a/packages/ui/src/components/Separator.svelte +++ b/packages/ui/src/components/Separator.svelte @@ -24,6 +24,7 @@ separatorsStore, SeparatorState } from '..' + import { panelstore } from '../panelup' export let prevElementSize: SeparatedItem | undefined = undefined export let nextElementSize: SeparatedItem | undefined = undefined @@ -52,6 +53,7 @@ let isSeparate: boolean = false let excludedIndexes: number[] = [] let correctedIndex: number = index + let realIndex: number = index let offset: number = 0 let separatorsSizes: number[] | null = null const separatorsWide: { before: number, after: number, total: number } = { before: 0, after: 0, total: 0 } @@ -80,7 +82,7 @@ if (prevElementSize !== undefined) prevElSize = prevElementSize if (nextElementSize !== undefined) nextElSize = nextElementSize setTimeout(() => { - if (!parentElement && separator) parentElement = separator.parentElement + if (parentElement === null && separator != null) parentElement = separator.parentElement checkSibling(true) calculateSeparators() }) @@ -109,21 +111,34 @@ const sizePx = direction === 'horizontal' ? rect.width : rect.height element.setAttribute('data-size', `${sizePx}`) if (sState === SeparatorState.NORMAL) { - if (separators) separators[index + (next ? 1 : 0)].size = pxToRem(sizePx) + if (separators != null) separators[index + (next ? 1 : 0)].size = pxToRem(sizePx) if (next) nextElSize.size = typeof size === 'number' ? pxToRem(sizePx) : size else prevElSize.size = typeof size === 'number' ? pxToRem(sizePx) : size } } + const getStyles = ( + element: Element | null, + dropStyles: string[] = ['min-width', 'max-width', 'width'] + ): Map => { + const result = new Map() + const style = element != null ? element.getAttribute('style') : null + if (style !== null) { + style + .replace(/ /g, '') + .split(';') + .filter((f) => f !== '') + .forEach((st) => result.set(st.split(':')[0], st.split(':')[1])) + dropStyles.forEach((key) => result.delete(key)) + } + return result + } + const generateMap = (): void => { - if (parentElement === null) return + if (parentElement == null || separators === null || separatorsSizes === null) return const children: Element[] = Array.from(parentElement.children) - if (children.length > 1 && separators !== null && separatorsSizes !== null) { - const elements = children.filter( - (el) => - !el.classList.contains('antiSeparator') && (el.hasAttribute('data-size') || el.hasAttribute('data-auto')) - ) - const hasSep = elements.filter((el) => el.hasAttribute('data-float')).map((el) => el.getAttribute('data-float')) + if (children.length > 1) { + const hasSep = children.filter((el) => el.hasAttribute('data-float')).map((el) => el.getAttribute('data-float')) const excluded = separators .filter((separ) => separ.float !== undefined && !hasSep.includes(separ.float)) .map((separ) => separ.float) @@ -132,43 +147,49 @@ if (excluded.includes(separ.float)) excludedIndexes.push(i) }) correctedIndex = index - excludedIndexes.filter((i) => i < index).length + realIndex = correctedIndex const sm: SeparatedElement[] = [] let ind: number = 0 - elements.forEach((element, i) => { - if (separators && excluded.includes(separators[i].float)) ind++ - const styles = new Map() - const dropStyles = ['min-width', 'max-width', 'width'] - const style = elements[i] ? elements[i].getAttribute('style') : null - if (style !== null) { - style - .replace(/ /g, '') - .split(';') - .filter((f) => f !== '') - .forEach((st) => styles.set(st.split(':')[0], st.split(':')[1])) - dropStyles.forEach((key) => styles.delete(key)) + let drop: number = 0 + children.forEach((element, i) => { + if (separators != null) { + if (separators[ind]?.float !== undefined && excluded.includes(separators[ind].float)) { + ind++ + drop++ + } + const styles: Map = getStyles(element) + const rect = element.getBoundingClientRect() + const size = direction === 'horizontal' ? rect.width : rect.height + const sep = element.classList.contains('antiSeparator') + const extra = !(sep || element.hasAttribute('data-size') || element.hasAttribute('data-auto')) + if (extra) realIndex++ + if (!sep) { + sm.push({ + id: extra ? -1 : ind, + element, + styles, + minSize: extra + ? size + : typeof separators[ind].minSize === 'number' + ? remToPx(separators[ind].minSize as number) + : remToPx(20), + maxSize: extra + ? size + : typeof separators[ind].maxSize === 'number' + ? remToPx(separators[ind].maxSize as number) + : -1, + size, + begin: ind - drop <= correctedIndex, + resize: false, + float: extra ? undefined : separators[ind].float + }) + if (!extra) ind++ + } } - const rect = element.getBoundingClientRect() - const size = direction === 'horizontal' ? rect.width : rect.height - if (separators) { - sm.push({ - id: ind, - element, - styles, - minSize: - typeof separators[ind].minSize === 'number' ? remToPx(separators[ind].minSize as number) : remToPx(20), - maxSize: typeof separators[ind].maxSize === 'number' ? remToPx(separators[ind].maxSize as number) : -1, - size, - begin: i <= correctedIndex, - resize: false, - float: separators[ind].float - }) - } - ind++ }) separatorMap = sm - const cropIndex = correctedIndex - excludedIndexes.filter((ex) => ex < correctedIndex).length - const startBoxes = separatorMap.filter((_, i) => i < cropIndex + 1) - const endBoxes = separatorMap.slice(cropIndex + 1, sm.length) + const startBoxes = separatorMap.filter((sm) => sm.begin) + const endBoxes = separatorMap.filter((sm) => !sm.begin) containers.minStart = startBoxes.map((box) => box.minSize).reduce((prev, a) => prev + a, 0) containers.minEnd = endBoxes.map((box) => box.minSize).reduce((prev, a) => prev + a, 0) containers.maxStart = @@ -232,7 +253,7 @@ } if (isSeparate) style += 'pointer-events:none;' item.element.setAttribute('style', style) - if (final) { + if (final && item.id !== -1) { const rect = item.element.getBoundingClientRect() item.element.setAttribute( item.maxSize === -1 ? 'data-auto' : 'data-size', @@ -246,7 +267,7 @@ const resizeContainer = (id: number, min: number, max: number, count: number, stretch: boolean = false): number => { const diff = max - min - if (diff) { + if (diff !== 0) { const size = min + (count >= diff ? (stretch ? diff : 0) : stretch ? count : diff - count) separatorMap[id].size = size separatorMap[id].resize = true @@ -260,13 +281,13 @@ return 0 } - function mouseMove (event: MouseEvent) { + function pointerMove (event: PointerEvent): void { if (sState === SeparatorState.NORMAL) normalMouseMove(event) else if (sState === SeparatorState.FLOAT) floatMouseMove(event) } const preparePanel = (): void => { - if (!parentElement || parentSize === null) return + if (parentElement === null || parentSize === null) return setSize(parentElement, panel.size === 'auto' ? 'auto' : remToPx(panel.size)) const s = separator.getBoundingClientRect() if (s) { @@ -282,9 +303,9 @@ parentElement.style.pointerEvents = 'none' } - function floatMouseMove (event: MouseEvent) { + function floatMouseMove (event: PointerEvent): void { if (!isSeparate || parentSize === null || parentElement === null) return - const coord: number = direction === 'horizontal' ? event.x - offset : event.y - offset + const coord: number = Math.round(direction === 'horizontal' ? event.x - offset : event.y - offset) const parentCoord: number = coord - parentSize.start const min = remToPx(panel.minSize === 'auto' ? 10 : panel.minSize) const max = remToPx(panel.maxSize === 'auto' ? 30 : panel.maxSize) @@ -304,9 +325,9 @@ setSize(parentElement, newCoord) } - function normalMouseMove (event: MouseEvent) { - if (!isSeparate || separatorMap === null || parentSize === null || separatorsSizes === null) return - const coord: number = direction === 'horizontal' ? event.x - offset : event.y - offset + function normalMouseMove (event: PointerEvent): void { + if (!isSeparate || separatorMap === undefined || parentSize === null || separatorsSizes === null) return + const coord: number = Math.round(direction === 'horizontal' ? event.x - offset : event.y - offset) let parentCoord: number = coord - parentSize.start let prevCoord: number = separatorMap .filter((f) => f.begin) @@ -330,22 +351,22 @@ if (remains !== 0) { const reverse = remains < 0 if (reverse) remains = Math.abs(remains) - const minusId = correctedIndex + (reverse ? 1 : 0) - const plusId = correctedIndex + (reverse ? 0 : 1) + const minusId = realIndex + (reverse ? 1 : 0) + const plusId = realIndex + (reverse ? 0 : 1) const minusAutoBoxes = separatorMap.filter( - (s, i) => s.maxSize === -1 && ((!reverse && i < correctedIndex) || (reverse && i > correctedIndex + 1)) + (s, i) => s.maxSize === -1 && ((!reverse && i < realIndex) || (reverse && i > realIndex + 1)) ) const minusBoxes = separatorMap.filter( - (s, i) => s.maxSize !== -1 && ((!reverse && i < correctedIndex) || (reverse && i > correctedIndex + 1)) + (s, i) => s.maxSize !== -1 && ((!reverse && i < realIndex) || (reverse && i > realIndex + 1)) ) const minusBox = separatorMap[minusId] const startMinus = separatorMap[minusId].maxSize === -1 const plusAutoBoxes = separatorMap.filter( - (s, i) => s.maxSize === -1 && ((!reverse && i > correctedIndex + 1) || (reverse && i < correctedIndex)) + (s, i) => s.maxSize === -1 && ((!reverse && i > realIndex + 1) || (reverse && i < realIndex)) ) const plusBoxes = separatorMap.filter( - (s, i) => s.maxSize !== -1 && ((!reverse && i > correctedIndex + 1) || (reverse && i < correctedIndex)) + (s, i) => s.maxSize !== -1 && ((!reverse && i > realIndex + 1) || (reverse && i < realIndex)) ) const plusBox = separatorMap[plusId] const startPlus = separatorMap[plusId].maxSize === -1 @@ -354,46 +375,53 @@ if (startMinus && minusBox.size - minusBox.minSize > 0) { remains = resizeContainer(minusId, minusBox.minSize, minusBox.size, remains) } - if (remains && minusAutoBoxes.length > 0) { + if (remains > 0 && minusAutoBoxes.length > 0) { minusAutoBoxes.forEach((box) => { - if (remains) remains = resizeContainer(box.id, box.minSize, box.size, remains) + if (remains > 0) remains = resizeContainer(box.id, box.minSize, box.size, remains) }) } - if (remains && !startMinus && minusBox.size - minusBox.minSize > 0) { + if (remains > 0 && !startMinus && minusBox.size - minusBox.minSize > 0) { remains = resizeContainer(minusId, minusBox.minSize, minusBox.size, remains) } - if (remains && minusBoxes.length > 0) { + if (remains > 0 && minusBoxes.length > 0) { minusBoxes.forEach((box) => { - if (remains) remains = resizeContainer(box.id, box.minSize, box.size, remains) + if (remains > 0) remains = resizeContainer(box.id, box.minSize, box.size, remains) }) } let needAdd: number = Math.abs(diff) - remains // Find for stretch - if (needAdd && startPlus) needAdd = stretchContainer(plusId, plusBox.size + needAdd) - if (needAdd && plusAutoBoxes.length > 0) { + if (needAdd > 0 && startPlus) needAdd = stretchContainer(plusId, plusBox.size + needAdd) + if (needAdd > 0 && plusAutoBoxes.length > 0) { const div = needAdd / plusAutoBoxes.length plusAutoBoxes.forEach((box) => (needAdd = stretchContainer(box.id, box.size + div))) } - if (needAdd && plusBox.maxSize - plusBox.size > 0) { + if (needAdd > 0 && plusBox.maxSize - plusBox.size > 0) { needAdd = resizeContainer(plusId, plusBox.size, plusBox.maxSize, needAdd, true) } - if (needAdd && plusBoxes.length > 0) { + if (needAdd > 0 && plusBoxes.length > 0) { plusBoxes.forEach((box) => { - if (needAdd) needAdd = resizeContainer(box.id, box.size, box.maxSize, needAdd, true) + if (needAdd > 0) needAdd = resizeContainer(box.id, box.size, box.maxSize, needAdd, true) }) } separatorMap = separatorMap } applyStyles() + if ($panelstore.panel?.refit !== undefined) $panelstore.panel.refit() } - function mouseUp () { + function pointerUp (): void { + finalSeparation() + document.removeEventListener('pointermove', pointerMove) + document.removeEventListener('pointerup', pointerUp) + } + function finalSeparation (): void { isSeparate = false if (sState === SeparatorState.NORMAL) { applyStyles(true) - if (index !== -1 && separators && separatorMap) { + if (index !== -1 && separators != null && separatorMap != null) { let ind: number = 0 const sep: SeparatedItem[] = [] + separatorMap = separatorMap.filter((sm) => sm.id !== -1) separators.forEach((sm, i) => { let save = false if (excludedIndexes.includes(i)) { @@ -412,17 +440,20 @@ }) saveSeparator(name, false, sep) } - } else if (sState === SeparatorState.FLOAT && parentElement) { + } else if (sState === SeparatorState.FLOAT && parentElement != null) { parentElement.style.pointerEvents = 'all' saveSeparator(name, float, panel) } document.body.style.cursor = '' - document.removeEventListener('mousemove', mouseMove) - document.removeEventListener('mouseup', mouseUp) } - function mouseDown (event: MouseEvent) { - if (!parentElement) return + function pointerDown (event: PointerEvent): void { + prepareSeparation(event) + document.addEventListener('pointermove', pointerMove) + document.addEventListener('pointerup', pointerUp) + } + function prepareSeparation (event: PointerEvent): void { + if (parentElement == null) return if (sState === SeparatorState.FLOAT && parentElement === null) { checkParent() return @@ -430,7 +461,7 @@ checkSibling() return } - offset = direction === 'horizontal' ? event.offsetX : event.offsetY + offset = Math.round(direction === 'horizontal' ? event.offsetX : event.offsetY) const p = parentElement.getBoundingClientRect() parentSize = direction === 'horizontal' @@ -441,33 +472,31 @@ generateMap() applyStyles(true) } else if (sState === SeparatorState.FLOAT) preparePanel() - document.addEventListener('mousemove', mouseMove) - document.addEventListener('mouseup', mouseUp) document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize' } const checkSibling = (start: boolean = false): void => { if (separator === null) return - if ((prevElement === null || start) && separator) { + if ((prevElement === null || start) && separator != null) { prevElement = separator.previousElementSibling as HTMLElement } - if ((nextElement === null || start) && separator) { + if ((nextElement === null || start) && separator != null) { nextElement = separator.nextElementSibling as HTMLElement } - if (separators && prevElement && separators[index].float !== undefined) { + if (separators != null && prevElement != null && separators[index].float !== undefined) { prevElement.setAttribute('data-float', separators[index].float ?? '') } - if (separators && nextElement && separators[index + 1].float !== undefined) { + if (separators != null && nextElement != null && separators[index + 1].float !== undefined) { nextElement.setAttribute('data-float', separators[index + 1].float ?? '') } } const checkParent = (): void => { - if (parentElement === null && separator) parentElement = separator.parentElement as HTMLElement - if (parentElement && typeof float === 'string') parentElement.setAttribute('data-float', float) + if (parentElement === null && separator != null) parentElement = separator.parentElement as HTMLElement + if (parentElement != null && typeof float === 'string') parentElement.setAttribute('data-float', float) } const calculateSeparators = (): void => { - if (parentElement) { + if (parentElement != null) { const elements: Element[] = Array.from(parentElement.children) separatorsSizes = elements .filter((el) => el.classList.contains('antiSeparator')) @@ -483,7 +512,7 @@ if (parentElement == null || checkElements || sState !== SeparatorState.NORMAL) return checkElements = true setTimeout(() => { - if (parentElement != null && separators) { + if (parentElement != null && separators != null) { const children: Element[] = Array.from(parentElement.children) let totalSize: number = 0 let ind: number = 0 @@ -513,9 +542,9 @@ let ind: number = 0 reverseSep.forEach((separ, i) => { const pass = excluded.includes(separ.float) - if (diff > 0 && !pass && separators) { + if (diff > 0 && !pass && separators != null) { const box = rects.get(reverseSep.length - ind - 1) - if (box) { + if (box != null) { const minSize: number = remToPx(separ.minSize === 'auto' ? 20 : separ.minSize) const forCrop = box.size - minSize if (forCrop > 0) { @@ -545,7 +574,7 @@ } onMount(() => { - if (separator) { + if (separator != null) { parentElement = separator.parentElement as HTMLElement if (sState === SeparatorState.FLOAT) checkParent() else if (sState === SeparatorState.NORMAL) { @@ -586,7 +615,7 @@ class:short class:hovered={isSeparate} data-size={separatorSize} - on:mousedown|stopPropagation={mouseDown} + on:pointerdown|stopPropagation={pointerDown} /> {/if} diff --git a/packages/ui/src/panelup.ts b/packages/ui/src/panelup.ts index f710d7d384..d1434a8c8b 100644 --- a/packages/ui/src/panelup.ts +++ b/packages/ui/src/panelup.ts @@ -8,6 +8,7 @@ export interface PanelProps { _class: string element?: PopupAlignment rightSection?: AnyComponent + refit?: () => void } export const panelstore = writable<{ panel?: PanelProps | undefined }>({ panel: undefined }) diff --git a/plugins/love-resources/src/components/RoomPreview.svelte b/plugins/love-resources/src/components/RoomPreview.svelte index 2a6b516705..534456299c 100644 --- a/plugins/love-resources/src/components/RoomPreview.svelte +++ b/plugins/love-resources/src/components/RoomPreview.svelte @@ -152,9 +152,9 @@ }} > {#if personInfo} - + {:else if hoveredRoomX === x && hoveredRoomY === y} - + {/if} {/each} diff --git a/plugins/time-resources/src/components/CreateToDo.svelte b/plugins/time-resources/src/components/CreateToDo.svelte index 4159b11cd0..06f9e7862c 100644 --- a/plugins/time-resources/src/components/CreateToDo.svelte +++ b/plugins/time-resources/src/components/CreateToDo.svelte @@ -90,7 +90,7 @@ diff --git a/plugins/time-resources/src/components/Me.svelte b/plugins/time-resources/src/components/Me.svelte index 0d4b55b22e..17375fc9c5 100644 --- a/plugins/time-resources/src/components/Me.svelte +++ b/plugins/time-resources/src/components/Me.svelte @@ -2,6 +2,4 @@ import PlanView from './PlanView.svelte' -
- -
+ diff --git a/plugins/time-resources/src/components/PlanView.svelte b/plugins/time-resources/src/components/PlanView.svelte index aef3a51251..c015668bb5 100644 --- a/plugins/time-resources/src/components/PlanView.svelte +++ b/plugins/time-resources/src/components/PlanView.svelte @@ -86,20 +86,18 @@ {#if $deviceInfo.navigator.visible} - + {/if}
{#if visibleCalendar} -
- -
+ {/if} diff --git a/plugins/time-resources/src/components/PlanningCalendar.svelte b/plugins/time-resources/src/components/PlanningCalendar.svelte index 6edc976f34..3a03fd7e1b 100644 --- a/plugins/time-resources/src/components/PlanningCalendar.svelte +++ b/plugins/time-resources/src/components/PlanningCalendar.svelte @@ -27,6 +27,7 @@ export let dragItem: ToDo | null = null export let currentDate: Date = new Date() export let displayedDaysCount = 1 + export let element: HTMLElement | undefined = undefined export let createComponent: AnyComponent | undefined = calendar.component.CreateEvent const q = createQuery() @@ -175,6 +176,7 @@
{ showLabel = showLabel ? element.clientWidth > rem(3.5) + 399 : element.clientWidth > rem(3.5) + 400 }} diff --git a/plugins/time-resources/src/utils.ts b/plugins/time-resources/src/utils.ts index a2e31c49ef..568f4bfc66 100644 --- a/plugins/time-resources/src/utils.ts +++ b/plugins/time-resources/src/utils.ts @@ -28,7 +28,7 @@ export function getNearest (events: WorkSlot[]): WorkSlot | undefined { export const timeSeparators: DefSeparators = [ { minSize: 18, size: 18, maxSize: 22.5, float: 'navigator' }, null, - { minSize: 20, size: 41.25, maxSize: 90 } + { minSize: 25, size: 41.25, maxSize: 90 } ] /** diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index a1ca9db53a..79c1f6a108 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -872,7 +872,7 @@ application: currentApplication?._id }} /> -
+
{#if mainNavigator} @@ -932,6 +932,7 @@
{#if currentApplication && currentApplication.component} {/if}
+ {#if $sidebarStore.variant === SidebarVariant.EXPANDED} + + {/if} +
- {#if $sidebarStore.variant === SidebarVariant.EXPANDED} - - {/if} -
@@ -1002,12 +1003,15 @@ min-height: 0; width: 100%; height: 100%; - background-color: var(--theme-statusbar-color); + background-color: var(--theme-panel-color); touch-action: none; &.inner { background-color: var(--theme-navpanel-color); - border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0; + + &.rounded { + border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0; + } } &:not(.inner)::after { position: absolute; @@ -1015,8 +1019,6 @@ inset: 0; border: 1px solid var(--theme-divider-color); border-radius: var(--medium-BorderRadius); - border-bottom-right-radius: 0; - border-top-right-radius: 0; pointer-events: none; } .antiPanel-application { diff --git a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte index 1a4654dbd2..c8422d2553 100644 --- a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte +++ b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte @@ -17,6 +17,7 @@ import { WidgetPreference, SidebarEvent, TxSidebarEvent, OpenSidebarWidgetParams } from '@hcengineering/workbench' import { Tx } from '@hcengineering/core' import { onMount } from 'svelte' + import { panelstore } from '@hcengineering/ui' import workbench from '../../plugin' import { createWidgetTab, openWidget, sidebarStore, SidebarVariant } from '../../sidebar' @@ -33,7 +34,8 @@ preferences = res }) - $: size = $sidebarStore.variant === SidebarVariant.MINI ? 'mini' : undefined + $: mini = $sidebarStore.variant === SidebarVariant.MINI + $: if ((!mini || mini) && $panelstore.panel?.refit !== undefined) $panelstore.panel.refit() function txListener (tx: Tx): void { if (tx._class === workbench.class.TxSidebarEvent) { @@ -59,8 +61,8 @@ }) -