diff --git a/models/all/src/version.json b/models/all/src/version.json index 18319d7fb5a..99938f90ab3 100644 --- a/models/all/src/version.json +++ b/models/all/src/version.json @@ -1 +1 @@ -{"major":0,"minor":6,"patch":92} \ No newline at end of file +{ "major": 0, "minor": 6, "patch": 92 } diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte index 821389a612b..201aac07583 100644 --- a/packages/kanban/src/components/KanbanRow.svelte +++ b/packages/kanban/src/components/KanbanRow.svelte @@ -80,7 +80,7 @@
cardDragOver(evt, object)} on:drop|preventDefault={(evt) => cardDrop(evt, object)} > diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index c0c03d12ea8..400b0374ae0 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -85,6 +85,7 @@ --theme-navpanel-icons-divider: rgba(255, 255, 255, .11); --theme-comp-header-color: #1F1F2C; --theme-divider-color: rgba(255, 255, 255, .06); + --theme-bg-divider-color: #282834; --theme-trans-color: rgba(255, 255, 255, .3); --theme-darker-color: rgba(255, 255, 255, .4); @@ -97,10 +98,13 @@ --theme-list-header-color: #C88C65; --theme-list-subheader-color: #262634; --theme-list-row-color: #21212F; - --theme-list-button-color: #262633; - --theme-list-button-hover: #2F2F3A; --theme-list-divider-color: rgba(255, 255, 255, .09); --theme-list-subheader-divider: transparent; + + --theme-list-button-color: #262633; + --theme-list-button-hover: #2F2F3A; + --theme-link-button-color: #262634; + --theme-link-button-hover: #2F2F3B; --theme-table-border-color: rgba(255, 255, 255, .1); --theme-table-header-color: #1C1C29; @@ -109,8 +113,6 @@ --theme-kanban-card-bg-color: rgba(222, 222, 240, .04); --theme-kanban-card-border: transparent; --theme-kanban-card-footer: rgba(217, 217, 217, .07); - --theme-kanban-button-color: #262634; - --theme-kanban-button-hover: #2F2F3B; --theme-tablist-color: rgba(0, 0, 0, .02); --theme-checkbox-color: #000; @@ -244,6 +246,7 @@ --theme-navpanel-icons-divider: rgba(0, 0, 0, .1); --theme-comp-header-color: #FBFBFC; --theme-divider-color: rgba(0, 0, 0, .06); + --theme-bg-divider-color: #E3E3E5; --theme-trans-color: rgba(0, 0, 0, .3); --theme-darker-color: rgba(0, 0, 0, .4); @@ -256,10 +259,13 @@ --theme-list-header-color: red; //#ECD4CA; --theme-list-subheader-color: #EEEEF0; --theme-list-row-color: #F7F7F8; - --theme-list-button-color: #F2F2F4; - --theme-list-button-hover: #E8E8EA; --theme-list-divider-color: rgba(0, 0, 0, .07); --theme-list-subheader-divider: rgba(0, 0, 0, .06); + + --theme-list-button-color: #F2F2F4; + --theme-list-button-hover: #E8E8EA; + --theme-link-button-color: #E5E5E7; + --theme-link-button-hover: #DCDCDE; --theme-table-border-color: rgba(0, 0, 0, .1); --theme-table-header-color: #EFEFF2; @@ -268,8 +274,6 @@ --theme-kanban-card-bg-color: rgba(0, 0, 0, .03); --theme-kanban-card-border: rgba(0, 0, 0, .04); --theme-kanban-card-footer: rgba(0, 0, 0, .04); - --theme-kanban-button-color: #E5E5E7; - --theme-kanban-button-hover: #DCDCDE; --theme-tablist-color: rgba(0, 0, 0, .02); --theme-checkbox-color: #000; diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index e5ef7fe7f2e..1537b5c221a 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -486,6 +486,8 @@ top: 0; height: 3rem; background-color: var(--theme-table-header-color); + + &__tr { height: 3rem; } } .scroller-tfoot { @@ -494,8 +496,9 @@ bottom: 0; height: 2.5rem; background-color: var(--theme-table-header-color); - + tr { + height: 2.5rem; box-shadow: inset 0 1px 0 0 var(--theme-divider-color); } } diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index e140278fe93..08396f03c24 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -366,11 +366,11 @@ &.link-bordered { padding: 0 0.5rem; color: var(--theme-content-color); - background-color: var(--theme-kanban-button-color); + background-color: var(--theme-link-button-color); border-color: var(--theme-button-border); &:hover { color: var(--theme-caption-color); - background-color: var(--theme-kanban-button-hover); + background-color: var(--theme-link-button-hover); border-color: var(--theme-list-divider-color); .btn-icon { color: var(--theme-caption-color); diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 766c1e9160f..d1821445e94 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -73,8 +73,8 @@ let firstScroll: boolean = autoscroll let orientir: 'vertical' | 'horizontal' = 'vertical' - let timer: number - let timerH: number + let timer: any | undefined = undefined + let timerH: any | undefined = undefined const inter = new Set() let hasLastCategories: boolean = false @@ -92,7 +92,7 @@ const scrollH = divScroll.scrollHeight const proc = scrollH / trackH - const newHeight = divScroll.clientHeight / proc + 'px' + const newHeight = (divScroll.clientHeight - 4) / proc + 'px' if (divBar.style.height !== 'newHeight') { divBar.style.height = newHeight } @@ -111,6 +111,7 @@ if (divBar) { if (timer) { clearTimeout(timer) + timer = undefined if (divBar.style.opacity !== '1') { divBar.style.opacity = '1' } @@ -131,17 +132,18 @@ } const checkBarH = (): void => { if (divBarH && divScroll) { - const trackW = divScroll.clientWidth - (mask !== 'none' ? 14 : 4) + const trackW = divScroll.clientWidth - (mask !== 'none' ? 14 : 4) - shiftLeft - shiftRight const scrollW = divScroll.scrollWidth const proc = scrollW / trackW divBarH.style.width = divScroll.clientWidth / proc + 'px' - divBarH.style.left = divScroll.scrollLeft / proc + 2 + 'px' + divBarH.style.left = divScroll.scrollLeft / proc + 2 + shiftLeft + 'px' if (maskH === 'none') divBarH.style.visibility = 'hidden' else { divBarH.style.visibility = 'visible' if (divBarH) { if (timerH) { clearTimeout(timerH) + timerH = undefined divBarH.style.opacity = '1' } timerH = setTimeout(() => { @@ -170,14 +172,15 @@ divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar } else { let X = event.clientX - dXY - if (X < rectScroll.left + 2) X = rectScroll.left + 2 - if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)) { - X = rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) + 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 } divBarH.style.left = X - rectScroll.x + 'px' - const topBar = X - rectScroll.x - (mask !== 'none' ? 12 : 2) - const widthScroll = rectScroll.width - 2 - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - const procBar = topBar / widthScroll + const leftBar = X - rectScroll.x - shiftLeft - 2 + const widthScroll = + rectScroll.width - 2 - (mask !== 'none' ? 12 : 2) - divBarH.clientWidth - shiftLeft - shiftRight + const procBar = leftBar / widthScroll divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar } } @@ -243,10 +246,16 @@ } let checkBarTimeout: any | undefined = undefined + let checkHBarTimeout: any | undefined = undefined - const delayCall = (op: () => void) => { - clearTimeout(checkBarTimeout) - checkBarTimeout = setTimeout(op, 50) + const delayCall = (op: () => void, h?: boolean) => { + if (h) { + clearTimeout(checkHBarTimeout) + checkHBarTimeout = setTimeout(op, 50) + } else { + clearTimeout(checkBarTimeout) + checkBarTimeout = setTimeout(op, 50) + } } const checkFade = (): void => { @@ -270,7 +279,7 @@ renderFade() } if (!isScrolling) delayCall(checkBar) - if (!isScrolling && horizontal) delayCall(checkBarH) + if (!isScrolling && horizontal) delayCall(checkBarH, true) } function checkAutoScroll () { @@ -366,7 +375,7 @@ divScroll.addEventListener('wheel', wheelEvent) divScroll.addEventListener('scroll', checkFade) delayCall(checkBar) - if (horizontal) delayCall(checkBarH) + if (horizontal) delayCall(checkBarH, true) } }) onDestroy(() => { @@ -445,8 +454,10 @@ class:union={buttons === 'union'} class:shrink style:user-select={isScrolling ? 'none' : 'inherit'} - style:--scroller-header-height={`${fade.multipler?.top ?? 0.125}rem`} - style:--scroller-footer-height={`${fade.multipler?.bottom ?? 0.125}rem`} + style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`} + style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + 2}px`} + style:--scroller-left-offset={`${(fade.multipler?.left ?? 0) * fz + 2}px`} + style:--scroller-right-offset={`${(fade.multipler?.right ?? 0) * fz + (mask !== 'none' ? 12 : 2)}px`} >
{ if ($tooltipstore.label !== undefined) closeTooltip() }} @@ -472,7 +482,7 @@ ? 'column-reverse' : 'row'} style:height={contentDirection === 'vertical-reverse' ? 'max-content' : noStretch ? 'auto' : '100%'} - use:resizeObserver={(element) => { + use:resizeObserver={() => { checkAutoScroll() checkFade() }} @@ -529,12 +539,7 @@ on:mousedown={(ev) => onScrollStart(ev, 'vertical')} on:mouseleave={checkFade} /> -
+
{#if horizontal}
onScrollStart(ev, 'horizontal')} on:mouseleave={checkFade} /> -
+
{/if}
@@ -647,12 +648,6 @@ transform: translateY(50%); } } - .overflowXauto { - overflow-x: auto; - } - .overflowXhidden { - overflow-x: hidden; - } .scroller-container { position: relative; display: flex; @@ -746,21 +741,14 @@ border-radius: 0.5rem; } .track { - top: 2px; - bottom: 2px; + top: var(--scroller-header-height, 2px); + bottom: var(--scroller-footer-height, 2px); width: 8px; - - &.fadeTopOffset { - top: var(--scroller-header-height); - } - &.fadeBottomOffset { - bottom: var(--scroller-footer-height); - } } .track-horizontal { - bottom: var(--scroller-footer-height); - left: 2px; - right: 2px; + bottom: var(--scroller-footer-height, 2px); + left: var(--scroller-left-offset, 2px); + right: var(--scroller-right-offset, 2px); height: 8px; } .bar, @@ -807,7 +795,7 @@ } .bar-horizontal { left: 2px; - bottom: var(--scroller-footer-height); + bottom: var(--scroller-footer-height, 2px); height: 8px; min-width: 2rem; max-width: calc(100% - 12px); diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte index 15561654f49..ce250e0017f 100644 --- a/packages/ui/src/components/calendar/DatePresenter.svelte +++ b/packages/ui/src/components/calendar/DatePresenter.svelte @@ -24,7 +24,6 @@ import Label from '../Label.svelte' import DatePopup from './DatePopup.svelte' import DPCalendar from './icons/DPCalendar.svelte' - import DPCalendarOver from './icons/DPCalendarOver.svelte' import { getMonthName } from './internal/DateUtils' export let value: number | null | undefined @@ -90,7 +89,7 @@ > {#if showIcon}
- +
{/if} {#if value !== null && value !== undefined} @@ -262,21 +261,27 @@ background-color: var(--theme-list-button-color); border-color: var(--theme-divider-color); } + &.medium { + height: 1.75rem; + } } &.link-bordered { padding: 0 0.375rem; color: var(--theme-content-color); - background-color: var(--theme-kanban-button-color); + background-color: var(--theme-link-button-color); border-color: var(--theme-button-border); border-radius: 0.25rem; &:hover { color: var(--theme-caption-color); - background-color: var(--theme-kanban-button-hover); + background-color: var(--theme-link-button-hover); border-color: var(--theme-list-divider-color); .btn-icon { color: var(--theme-caption-color); } } + &.small .btn-icon { + margin-right: 0.25rem; + } } &.secondary { padding: 0 0.625rem; diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte index 2cae949e96b..97c89c13cb0 100644 --- a/packages/ui/src/components/calendar/DateRangePresenter.svelte +++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte @@ -22,7 +22,6 @@ import Icon from '../Icon.svelte' import IconClose from '../icons/Close.svelte' import DPCalendar from './icons/DPCalendar.svelte' - import DPCalendarOver from './icons/DPCalendarOver.svelte' import DateRangePopup from './DateRangePopup.svelte' import { DateRangeMode } from '@hcengineering/core' @@ -416,7 +415,7 @@ {/if} {:else}
- +
{#if value !== undefined && value !== null && value.toString() !== ''} {#if labelOver !== undefined} diff --git a/packages/ui/src/components/calendar/icons/DPCalendar.svelte b/packages/ui/src/components/calendar/icons/DPCalendar.svelte index f75f06e60e2..e4b5baccd4b 100644 --- a/packages/ui/src/components/calendar/icons/DPCalendar.svelte +++ b/packages/ui/src/components/calendar/icons/DPCalendar.svelte @@ -3,8 +3,10 @@ export let fill: string = 'currentColor' - + diff --git a/plugins/contact-assets/assets/icons.svg b/plugins/contact-assets/assets/icons.svg index 9c13a0cb95b..401eeef9076 100644 --- a/plugins/contact-assets/assets/icons.svg +++ b/plugins/contact-assets/assets/icons.svg @@ -40,7 +40,7 @@ - + diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte index b885ae4993c..93d23b3b34c 100644 --- a/plugins/hr-resources/src/components/schedule/MonthView.svelte +++ b/plugins/hr-resources/src/components/schedule/MonthView.svelte @@ -140,7 +140,7 @@ {#if departmentStaff.length} - + @@ -284,6 +284,10 @@
{ @@ -323,9 +327,9 @@ th { flex-shrink: 0; padding: 0; - height: 2.5rem; - min-height: 2.5rem; - max-height: 2.5rem; + height: 3rem; + min-height: 3rem; + max-height: 3rem; text-transform: uppercase; font-weight: 500; font-size: 0.75rem; @@ -371,18 +375,24 @@ } } td:not(:last-child) { - border-right: 1px solid var(--theme-divider-color); + border-right: 1px solid var(--theme-bg-divider-color); } - tbody, - tfoot { - tr { - border-bottom: 1px solid var(--theme-divider-color); - } + tbody tr:not(:last-child), + thead th:first-child .fullfill { + border-bottom: 1px solid var(--theme-bg-divider-color); + } + tfoot tr, + tfoot tr td:first-child .fullfill { + box-shadow: inset 0 1px 0 0 var(--theme-divider-color); + } + tfoot tr, + tfoot tr td { + height: 3rem; } tr.scroller-thead__tr:not(:last-child) { - border-right: 1px solid var(--theme-divider-color); + border-right: 1px solid var(--theme-bg-divider-color); } .hovered { diff --git a/plugins/tags-resources/src/components/LabelsPresenter.svelte b/plugins/tags-resources/src/components/LabelsPresenter.svelte index 590c42348a3..2950c90f30d 100644 --- a/plugins/tags-resources/src/components/LabelsPresenter.svelte +++ b/plugins/tags-resources/src/components/LabelsPresenter.svelte @@ -11,7 +11,7 @@ export let object: WithLookup export let full: boolean export let ckeckFilled: boolean = false - export let kind: 'short' | 'full' | 'list' | 'kanban' = 'short' + export let kind: 'short' | 'full' | 'list' | 'link' = 'short' export let isEditable: boolean = false export let action: (evt: MouseEvent) => Promise | void = async () => {} export let compression: boolean = false @@ -46,10 +46,10 @@ }) -{#if kind === 'list' || kind === 'kanban'} +{#if kind === 'list' || kind === 'link'} {#each items as value}
- +
{/each} {:else} @@ -70,7 +70,7 @@ > {#each items as value, i}
- +
{/each} diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte index 8b95ea22b1b..2976e1a04e5 100644 --- a/plugins/tags-resources/src/components/TagReferencePresenter.svelte +++ b/plugins/tags-resources/src/components/TagReferencePresenter.svelte @@ -22,7 +22,7 @@ export let value: TagReference export let isEditable: boolean = false - export let kind: 'labels' | 'kanban-labels' | 'skills' = 'skills' + export let kind: 'list' | 'link' | 'skills' = 'skills' export let realWidth: number | undefined = undefined export let attr: AnyAttribute | undefined export let inline: boolean = false @@ -36,9 +36,9 @@ {:else if kind === 'skills'} - {:else if kind === 'kanban-labels'} + {:else if kind === 'link'} - {:else if kind === 'labels'} + {:else if kind === 'list'}
{ realWidth = element.clientWidth @@ -68,7 +68,7 @@ {/if}