mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 11:50:56 +00:00
UI and separation fixes. (#7045)
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov
GitHub
parent
db4e6e1945
commit
84ab130470
@ -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);
|
||||
|
||||
@ -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')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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}
|
||||
</div>
|
||||
@ -864,9 +864,11 @@
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
&::-webkit-scrollbar:vertical {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -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<string, string> => {
|
||||
const result = new Map<string, string>()
|
||||
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<string, string>()
|
||||
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<string, string> = 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}
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ export interface PanelProps {
|
||||
_class: string
|
||||
element?: PopupAlignment
|
||||
rightSection?: AnyComponent
|
||||
refit?: () => void
|
||||
}
|
||||
|
||||
export const panelstore = writable<{ panel?: PanelProps | undefined }>({ panel: undefined })
|
||||
|
||||
@ -152,9 +152,9 @@
|
||||
}}
|
||||
>
|
||||
{#if personInfo}
|
||||
<Avatar name={person?.name ?? personInfo.name} {person} size={'full'} />
|
||||
<Avatar name={person?.name ?? personInfo.name} {person} size={'full'} showStatus={false} />
|
||||
{:else if hoveredRoomX === x && hoveredRoomY === y}
|
||||
<Avatar name={meName} person={meAvatar} size={'full'} />
|
||||
<Avatar name={meName} person={meAvatar} size={'full'} showStatus={false} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: var(--spacing-2) var(--spacing-2) var(--spacing-2_5);
|
||||
min-height: calc(4.75rem + 0.5px);
|
||||
min-height: calc(4.875rem - 0.5px);
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,4 @@
|
||||
import PlanView from './PlanView.svelte'
|
||||
</script>
|
||||
|
||||
<div class="hulyPanels-container">
|
||||
<PlanView on:change />
|
||||
</div>
|
||||
<PlanView on:change />
|
||||
|
||||
@ -86,20 +86,18 @@
|
||||
|
||||
{#if $deviceInfo.navigator.visible}
|
||||
<ToDosNavigator bind:mode bind:tag bind:currentDate />
|
||||
<Separator
|
||||
name={'time'}
|
||||
float={$deviceInfo.navigator.float}
|
||||
index={0}
|
||||
disabledWhen={['panel-aside']}
|
||||
color={'var(--theme-divider-color)'}
|
||||
/>
|
||||
<Separator name={'time'} float={$deviceInfo.navigator.float} index={0} color={'var(--theme-divider-color)'} />
|
||||
{/if}
|
||||
<div class="flex-col w-full clear-mins" class:left-divider={!$deviceInfo.navigator.visible} bind:this={mainPanel}>
|
||||
<ToDos {mode} {tag} bind:currentDate />
|
||||
</div>
|
||||
{#if visibleCalendar}
|
||||
<Separator name={'time'} index={1} color={'transparent'} separatorSize={0} short />
|
||||
<div class="flex-col clear-mins" bind:this={replacedPanel}>
|
||||
<PlanningCalendar {dragItem} bind:currentDate displayedDaysCount={5} on:dragDrop={drop} />
|
||||
</div>
|
||||
<PlanningCalendar
|
||||
{dragItem}
|
||||
bind:element={replacedPanel}
|
||||
bind:currentDate
|
||||
displayedDaysCount={5}
|
||||
on:dragDrop={drop}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@ -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 @@
|
||||
|
||||
<div
|
||||
class="hulyComponent modal"
|
||||
bind:this={element}
|
||||
use:resizeObserver={(element) => {
|
||||
showLabel = showLabel ? element.clientWidth > rem(3.5) + 399 : element.clientWidth > rem(3.5) + 400
|
||||
}}
|
||||
|
||||
@ -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 }
|
||||
]
|
||||
|
||||
/**
|
||||
|
||||
@ -872,7 +872,7 @@
|
||||
application: currentApplication?._id
|
||||
}}
|
||||
/>
|
||||
<div class="workbench-container inner">
|
||||
<div class="workbench-container inner" class:rounded={$sidebarStore.variant === SidebarVariant.EXPANDED}>
|
||||
{#if mainNavigator}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
@ -932,6 +932,7 @@
|
||||
<div
|
||||
bind:this={contentPanel}
|
||||
class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
|
||||
data-id={'contentPanel'}
|
||||
>
|
||||
{#if currentApplication && currentApplication.component}
|
||||
<Component
|
||||
@ -972,11 +973,11 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $sidebarStore.variant === SidebarVariant.EXPANDED}
|
||||
<Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
|
||||
{/if}
|
||||
<WidgetsBar />
|
||||
</div>
|
||||
{#if $sidebarStore.variant === SidebarVariant.EXPANDED}
|
||||
<Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
|
||||
{/if}
|
||||
<WidgetsBar />
|
||||
<Dock />
|
||||
<div bind:this={cover} class="cover" />
|
||||
<TooltipInstance />
|
||||
@ -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 {
|
||||
|
||||
@ -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 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="antiPanel-component antiComponent root size-{size}" id="sidebar">
|
||||
{#if $sidebarStore.variant === SidebarVariant.MINI}
|
||||
<div class="antiPanel-application vertical root" class:mini id="sidebar">
|
||||
{#if mini}
|
||||
<SidebarMini {widgets} {preferences} />
|
||||
{:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
|
||||
<SidebarExpanded {widgets} {preferences} />
|
||||
@ -69,10 +71,11 @@
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
position: relative;
|
||||
background-color: var(--theme-panel-color);
|
||||
flex-direction: row;
|
||||
min-width: 25rem;
|
||||
border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
|
||||
|
||||
&.size-mini {
|
||||
&.mini {
|
||||
width: 3.5rem !important;
|
||||
min-width: 3.5rem !important;
|
||||
max-width: 3.5rem !important;
|
||||
|
||||
@ -96,84 +96,78 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="content">
|
||||
{#if widget?.component}
|
||||
<div class="component" use:resizeObserver={resize}>
|
||||
{#if widget.headerLabel}
|
||||
<Header
|
||||
allowFullsize={false}
|
||||
type="type-aside"
|
||||
hideBefore={true}
|
||||
hideActions={false}
|
||||
hideDescription={true}
|
||||
adaptive="disabled"
|
||||
closeOnEscape={false}
|
||||
on:close={() => {
|
||||
if (widget !== undefined) {
|
||||
closeWidget(widget._id)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Breadcrumbs items={[{ label: widget.headerLabel }]} currentOnly />
|
||||
</Header>
|
||||
{/if}
|
||||
<Component
|
||||
is={widget?.component}
|
||||
props={{ tab, widgetState, height: componentHeight, width: componentWidth, widget }}
|
||||
<div class="content">
|
||||
{#if widget?.component}
|
||||
<div class="component" use:resizeObserver={resize}>
|
||||
{#if widget.headerLabel}
|
||||
<Header
|
||||
allowFullsize={false}
|
||||
type="type-aside"
|
||||
hideBefore={true}
|
||||
hideActions={false}
|
||||
hideDescription={true}
|
||||
adaptive="disabled"
|
||||
closeOnEscape={false}
|
||||
on:close={() => {
|
||||
if (widget !== undefined) {
|
||||
closeWidget(widget._id)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if widget !== undefined && tabs.length > 0}
|
||||
<SidebarTabs
|
||||
{tabs}
|
||||
selected={tab?.id}
|
||||
{widget}
|
||||
on:close={(e) => {
|
||||
void handleTabClose(e.detail, widget)
|
||||
}}
|
||||
on:open={(e) => {
|
||||
handleTabOpen(e.detail, widget)
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Breadcrumbs items={[{ label: widget.headerLabel }]} currentOnly />
|
||||
</Header>
|
||||
{/if}
|
||||
<Component
|
||||
is={widget?.component}
|
||||
props={{ tab, widgetState, height: componentHeight, width: componentWidth, widget }}
|
||||
on:close={() => {
|
||||
if (widget !== undefined) {
|
||||
closeWidget(widget._id)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<WidgetsBar {widgets} {preferences} selected={widgetId} />
|
||||
</div>
|
||||
{#if widget !== undefined && tabs.length > 0}
|
||||
<SidebarTabs
|
||||
{tabs}
|
||||
selected={tab?.id}
|
||||
{widget}
|
||||
on:close={(e) => {
|
||||
void handleTabClose(e.detail, widget)
|
||||
}}
|
||||
on:open={(e) => {
|
||||
handleTabOpen(e.detail, widget)
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<WidgetsBar {widgets} {preferences} selected={widgetId} />
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
border-top: 1px solid transparent; // var(--theme-divider-color);
|
||||
border-right: 1px solid var(--theme-divider-color);
|
||||
overflow: auto;
|
||||
|
||||
flex: 1;
|
||||
width: calc(100% - 3.5rem);
|
||||
height: 100%;
|
||||
background: var(--theme-panel-color);
|
||||
border-right: 1px solid var(--global-ui-BorderColor);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background-color: var(--theme-panel-color);
|
||||
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.component {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(--theme-panel-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -89,9 +89,8 @@
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
max-width: 30px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--theme-divider-color);
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0;
|
||||
|
||||
@ -95,13 +95,12 @@
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-block: var(--spacing-2);
|
||||
height: 100%;
|
||||
padding: 0.5rem 0;
|
||||
width: 3.5rem;
|
||||
min-width: 3.5rem;
|
||||
max-width: 3.5rem;
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user