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'
-