diff --git a/models/all/src/version.json b/models/all/src/version.json
index 18319d7fb5..99938f90ab 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 821389a612..201aac0758 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -80,7 +80,7 @@
<div
bind:this={stateRefs[i]}
transition:slideD|local={{ isDragging }}
- class="p-1 flex-no-shrink clear-mins"
+ class="p-1 flex-no-shrink border-radius-1 clear-mins"
on:dragover|preventDefault={(evt) => 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 c0c03d12ea..400b0374ae 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 e5ef7fe7f2..1537b5c221 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 e140278fe9..08396f03c2 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 766c1e9160..d1821445e9 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<Element>()
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`}
>
<div bind:this={divHScroll} class="horizontalBox flex-col flex-shrink">
<div
@@ -455,8 +466,7 @@
divHeight = element.clientHeight
}}
class="scroll relative flex-shrink"
- class:overflowXauto={horizontal}
- class:overflowXhidden={!horizontal}
+ class:overflow-x={horizontal ? 'auto' : 'hidden'}
on:scroll={() => {
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}
/>
- <div
- class="track"
- class:hovered={isScrolling === 'vertical'}
- class:fadeTopOffset={fade.multipler?.top}
- class:fadeBottomOffset={fade.multipler?.bottom}
- />
+ <div class="track" class:hovered={isScrolling === 'vertical'} />
{#if horizontal}
<div
class="bar-horizontal"
@@ -543,11 +548,7 @@
on:mousedown={(ev) => onScrollStart(ev, 'horizontal')}
on:mouseleave={checkFade}
/>
- <div
- class="track-horizontal"
- class:hovered={isScrolling === 'horizontal'}
- style:right={mask !== 'none' ? '12px' : '2px'}
- />
+ <div class="track-horizontal" class:hovered={isScrolling === 'horizontal'} />
{/if}
</div>
@@ -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 15561654f4..ce250e0017 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}
<div class="btn-icon {icon}" class:buttonIconNoLabel={!shouldShowLabel}>
- <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size="full" />
+ <Icon icon={DPCalendar} size="full" />
</div>
{/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 2cae949e96..97c89c13cb 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}
<div class="btn-icon {icon}">
- <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size={'full'} />
+ <Icon icon={DPCalendar} size={'full'} />
</div>
{#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 f75f06e60e..e4b5baccd4 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'
</script>
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
- d="M11 1C13.2091 1 15 2.79086 15 5V11C15 13.2091 13.2091 15 11 15H5C2.79086 15 1 13.2091 1 11V5C1 2.79086 2.79086 1 5 1H11ZM13.5 6H2.5V11C2.5 12.3807 3.61929 13.5 5 13.5H11C12.3807 13.5 13.5 12.3807 13.5 11V6Z"
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M28 24.0044C28 26.2136 26.2091 28 24 28H8C5.79086 28 4 26.2091 4 24V8C4 5.79086 5.79086 4 8 4H10V3C10 2.44772 10.4477 2 11 2C11.5523 2 12 2.44772 12 3V4H19.9995V3C19.9995 2.44772 20.4472 2 20.9995 2C21.5518 2 21.9995 2.44772 21.9995 3V4H24C26.2091 4 28 5.79086 28 8C28 11.5569 28 19.2641 28 24.0044ZM19.9995 6V7C19.9995 7.55228 20.4472 8 20.9995 8C21.5518 8 21.9995 7.55228 21.9995 7V6H24C25.1046 6 26 6.89543 26 8V12H6V8C6 6.89543 6.89543 6 8 6H10V7C10 7.55228 10.4477 8 11 8C11.5523 8 12 7.55228 12 7V6H19.9995ZM6 14V24C6 25.1046 6.89543 26 8 26H24C25.1046 26 26 25.1046 26 24V14H6Z"
/>
</svg>
diff --git a/plugins/contact-assets/assets/icons.svg b/plugins/contact-assets/assets/icons.svg
index 9c13a0cb95..401eeef907 100644
--- a/plugins/contact-assets/assets/icons.svg
+++ b/plugins/contact-assets/assets/icons.svg
@@ -40,7 +40,7 @@
<path d="M6,10.5c2.5,0,4.5-2,4.5-4.5S8.5,1.5,6,1.5S1.5,3.5,1.5,6c0,0.8,0.2,1.6,0.6,2.2l-0.6,2.3L3.9,10 C4.5,10.3,5.2,10.5,6,10.5z M6,9.8c2.1,0,3.8-1.7,3.8-3.8S8.1,2.2,6,2.2S2.2,3.9,2.2,6c0,0.8,0.3,1.6,0.7,2.2L2.5,9.5l1.3-0.3 C4.5,9.6,5.2,9.8,6,9.8z"/>
</symbol>
<symbol id="skype" viewBox="0 0 24 24">
- <path d="M13.004 18.423a2 2 0 0 1 1.237.207 3.25 3.25 0 0 0 4.389-4.389 2 2 0 0 1-.207-1.237 6.5 6.5 0 0 0-7.427-7.427 2 2 0 0 1-1.237-.207A3.25 3.25 0 0 0 5.37 9.76a2 2 0 0 1 .207 1.237 6.5 6.5 0 0 0 7.427 7.427zM12 20.5a8.5 8.5 0 0 1-8.4-9.81 5.25 5.25 0 0 1 7.09-7.09 8.5 8.5 0 0 1 9.71 9.71 5.25 5.25 0 0 1-7.09 7.09c-.427.066-.865.1-1.31.1zm.053-3.5C9.25 17 8 15.62 8 14.586c0-.532.39-.902.928-.902 1.2 0 .887 1.725 3.125 1.725 1.143 0 1.776-.624 1.776-1.261 0-.384-.188-.808-.943-.996l-2.49-.623c-2.006-.504-2.37-1.592-2.37-2.612C8.026 7.797 10.018 7 11.89 7c1.72 0 3.756.956 3.756 2.228 0 .545-.48.863-1.012.863-1.023 0-.835-1.418-2.9-1.418-1.023 0-1.596.462-1.596 1.126 0 .663.803.876 1.502 1.035l1.836.409C15.49 11.695 16 12.876 16 13.989 16 15.713 14.675 17 12.015 17h.038z"/>
+ <path d="M20.9,13.4C21,12.9,21,12.5,21,12c0-2.4-1-4.7-2.6-6.4C16.7,3.9,14.4,3,12,3c-0.5,0-0.9,0-1.4,0.1c-1-0.6-2.3-0.9-3.5-0.7C5.9,2.5,4.8,3,3.9,3.9c-0.9,0.9-1.4,2-1.6,3.2c-0.1,1.2,0.1,2.4,0.7,3.5C3,11,3,11.5,3,12c0,2.4,1,4.7,2.6,6.4c1.7,1.7,4,2.6,6.4,2.6c0.5,0,0.9,0,1.4-0.1c1,0.6,2.3,0.9,3.5,0.7c1.2-0.1,2.3-0.7,3.2-1.6c0.9-0.9,1.4-2,1.6-3.2C21.8,15.7,21.5,14.5,20.9,13.4L20.9,13.4z M16.3,16.1c-0.4,0.6-1,1-1.7,1.3c-0.8,0.3-1.7,0.5-2.6,0.5c-1,0-2.1-0.2-3-0.6C8.5,17,8,16.5,7.6,16c-0.3-0.4-0.5-1-0.5-1.5c0-0.1,0-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.3c0.2-0.2,0.5-0.3,0.8-0.3c0.2,0,0.5,0.1,0.7,0.2c0.2,0.2,0.4,0.4,0.5,0.7c0.1,0.3,0.3,0.6,0.5,0.9c0.2,0.3,0.5,0.5,0.8,0.6c0.4,0.2,0.8,0.3,1.3,0.2c0.6,0,1.2-0.1,1.8-0.5c0.2-0.1,0.4-0.3,0.5-0.5c0.1-0.2,0.2-0.4,0.2-0.7c0-0.2,0-0.3-0.1-0.5c-0.1-0.2-0.2-0.3-0.3-0.4c-0.3-0.2-0.6-0.4-0.9-0.5c-0.4-0.1-0.9-0.3-1.6-0.4c-0.7-0.2-1.5-0.4-2.2-0.7c-0.6-0.2-1-0.6-1.4-1.1c-0.4-0.5-0.5-1.1-0.5-1.7c0-0.6,0.2-1.2,0.6-1.7c0.4-0.5,1-0.9,1.6-1.1c0.8-0.3,1.6-0.4,2.5-0.4c0.7,0,1.3,0.1,1.9,0.3c0.5,0.1,1,0.4,1.4,0.7c0.3,0.2,0.6,0.6,0.8,0.9c0.2,0.3,0.2,0.6,0.3,0.9c0,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.2-0.4,0.3C15.5,10,15.4,10,15.2,10c-0.2,0-0.5-0.1-0.7-0.2c-0.2-0.2-0.4-0.4-0.5-0.7c-0.2-0.4-0.5-0.7-0.8-1c-0.4-0.3-1-0.4-1.5-0.3c-0.5,0-1,0.1-1.5,0.4C10.2,8.3,10,8.4,9.9,8.6C9.8,8.7,9.8,8.9,9.8,9.1c0,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.3,0.3,0.5,0.4c0.2,0.1,0.5,0.2,0.7,0.3c0.2,0.1,0.6,0.2,1.2,0.3c0.7,0.2,1.3,0.3,1.9,0.5c0.5,0.2,1,0.4,1.4,0.7c0.4,0.2,0.7,0.6,0.9,1c0.2,0.5,0.3,1,0.3,1.5C16.9,14.9,16.7,15.6,16.3,16.1z" />
</symbol>
<symbol id="youtube" viewBox="0 0 12 12">
<path d="M10.4,4.3c0-0.6-0.6-1.1-1.2-1.2C8.3,3.1,7,3,6,3S3.7,3.1,2.8,3.1c-0.6,0-1.1,0.5-1.2,1.2c0,0.6-0.1,1.4-0.1,1.9 s0,1.3,0.1,1.9c0,0.6,0.6,1.1,1.2,1.2C3.7,9.4,5,9.4,6,9.4s2.3-0.1,3.2-0.1c0.6,0,1.1-0.5,1.2-1.2c0-0.6,0.1-1.4,0.1-1.9 S10.5,4.9,10.4,4.3z M5,7.5V4.9l2.6,1.3L5,7.5z"/>
diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte
index b885ae4993..93d23b3b34 100644
--- a/plugins/hr-resources/src/components/schedule/MonthView.svelte
+++ b/plugins/hr-resources/src/components/schedule/MonthView.svelte
@@ -140,7 +140,7 @@
</script>
{#if departmentStaff.length}
- <Scroller fade={{ multipler: { top: 3, bottom: 0, left: colWidthRem } }} horizontal>
+ <Scroller fade={{ multipler: { top: 3, bottom: 3, left: colWidthRem } }} horizontal>
<table class="scroller-first-column">
<thead class="scroller-thead">
<tr class="scroller-thead__tr">
@@ -284,6 +284,10 @@
<td
class="p-1 text-center summary"
class:hovered={i === hoveredIndex}
+ class:holiday={isHoliday(
+ getHolidayDatesForEmployee(staffDepartmentMap, departmentStaff[0]._id, holidays),
+ day
+ )}
class:weekend={isWeekend(day)}
class:today={areDatesEqual(todayDate, day)}
on:mousemove={() => {
@@ -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 590c42348a..2950c90f30 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<Doc>
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> | void = async () => {}
export let compression: boolean = false
@@ -46,10 +46,10 @@
})
</script>
-{#if kind === 'list' || kind === 'kanban'}
+{#if kind === 'list' || kind === 'link'}
{#each items as value}
<div class="label-box no-shrink" title={value.title}>
- <TagReferencePresenter attr={undefined} {value} kind={kind === 'kanban' ? 'kanban-labels' : 'labels'} />
+ <TagReferencePresenter attr={undefined} {value} {kind} />
</div>
{/each}
{:else}
@@ -70,7 +70,7 @@
>
{#each items as value, i}
<div class="label-box wrap-{kind}" title={value.title}>
- <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
+ <TagReferencePresenter attr={undefined} {value} kind={'link'} bind:realWidth={widths[i]} />
</div>
{/each}
</div>
diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
index 8b95ea22b1..2976e1a04e 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 @@
<TagItem tag={value} schema={attr?.schema ?? '0'} inline />
{:else if kind === 'skills'}
<TagItem tag={value} schema={attr?.schema ?? '0'} />
- {:else if kind === 'kanban-labels'}
+ {:else if kind === 'link'}
<button
- class="label-container"
+ class="link-container"
use:resizeObserver={(element) => {
realWidth = element.clientWidth
}}
@@ -46,9 +46,9 @@
<div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
<span class="overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
</button>
- {:else if kind === 'labels'}
+ {:else if kind === 'list'}
<div
- class="tag-container"
+ class="list-container"
style:padding-right={isEditable ? '0' : '0.5rem'}
use:resizeObserver={(element) => {
realWidth = element.clientWidth
@@ -68,7 +68,7 @@
{/if}
<style lang="scss">
- .tag-container {
+ .list-container {
overflow: hidden;
display: flex;
align-items: center;
@@ -96,7 +96,7 @@
}
}
- .label-container {
+ .link-container {
display: flex;
justify-content: center;
align-items: center;
@@ -109,7 +109,7 @@
line-height: 0.75rem;
white-space: nowrap;
color: var(--theme-content-color);
- background-color: var(--theme-kanban-button-color);
+ background-color: var(--theme-link-button-color);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
transition-property: border, background-color, color, box-shadow;
@@ -117,7 +117,7 @@
&: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);
transition-duration: 0;
}
diff --git a/plugins/tags-resources/src/components/TagsAttributeEditor.svelte b/plugins/tags-resources/src/components/TagsAttributeEditor.svelte
index 5c982dce86..da02b0f6b7 100644
--- a/plugins/tags-resources/src/components/TagsAttributeEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsAttributeEditor.svelte
@@ -37,7 +37,7 @@
{attr}
{value}
isEditable={!readonly}
- kind={'labels'}
+ kind={'list'}
on:remove={(res) => removeTag(res.detail)}
/>
</div>
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index 55d9ba7f2d..1dd69d7039 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -82,6 +82,9 @@
$: dontUpdateRank = orderBy[0] !== TaskOrdering.Manual
+ $: lth = $deviceInfo.theme === 'theme-light'
+ const accentColors: AccentColor[] = []
+
const spaceQuery = createQuery()
let currentProject: SpaceWithStates | undefined
@@ -172,7 +175,7 @@
if (accentColors[i] === undefined) {
accentColors[i] = {
textColor: 'var(--theme-caption-color)',
- backgroundColor: '175, 175, 175'
+ backgroundColor: lth ? '230, 230, 230' : '100, 100, 108'
}
}
})
@@ -243,9 +246,6 @@
const getDoneUpdate = (e: any) => ({ doneState: e.detail._id } as DocumentUpdate<Doc>)
- $: lth = $deviceInfo.theme === 'theme-light'
- const accentColors: AccentColor[] = []
-
const setAccentColor = (n: number, ev: CustomEvent) => {
const accColor = rgbToHsl(ev.detail.r, ev.detail.g, ev.detail.b)
const textColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accColor.h, accColor.s, 0.3)
@@ -287,13 +287,13 @@
<!-- {@const status = $statusStore.get(state._id)} -->
{#key lth}
<div
- style:--kanban-header-rgb-color={accentColors[index]?.backgroundColor ?? '175, 175, 175'}
+ style:--kanban-header-rgb-color={accentColors[index].backgroundColor}
class="header flex-row-center"
class:gradient={!lth}
>
<span
class="clear-mins fs-bold overflow-label pointer-events-none"
- style:color={accentColors[index]?.textColor ?? 'var(--theme-caption-color)'}
+ style:color={accentColors[index].textColor}
>
{#if groupByKey === noCategory}
<Label label={view.string.NoGrouping} />
diff --git a/plugins/task-resources/src/components/state/StatePresenter.svelte b/plugins/task-resources/src/components/state/StatePresenter.svelte
index d4287cf7eb..4a8f22fe67 100644
--- a/plugins/task-resources/src/components/state/StatePresenter.svelte
+++ b/plugins/task-resources/src/components/state/StatePresenter.svelte
@@ -16,7 +16,7 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte'
import type { State } from '@hcengineering/task'
- import { getColorNumberByText, getPlatformColor, hexToRgb } from '@hcengineering/ui'
+ import { getColorNumberByText, getPlatformColor, hexToRgb, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
export let value: State | undefined
export let shouldShowAvatar = true
@@ -28,8 +28,12 @@
const defaultFill = 'currentColor'
$: fill = value ? getPlatformColor(value.color ?? getColorNumberByText(value.name)) : defaultFill
+ $: lth = $deviceInfo.theme === 'theme-light'
const dispatchAccentColor = (fill: string) =>
- dispatch('accent-color', fill !== defaultFill ? hexToRgb(fill) : { r: 127, g: 127, b: 127 })
+ dispatch(
+ 'accent-color',
+ fill !== defaultFill ? hexToRgb(fill) : lth ? { r: 220, g: 220, b: 220 } : { r: 100, g: 100, b: 108 }
+ )
$: dispatchAccentColor(fill)
onMount(() => {
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
index 30377e688c..0ec2aa43e5 100644
--- a/plugins/tracker-resources/src/components/issues/KanbanView.svelte
+++ b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
@@ -98,6 +98,9 @@
$: orderBy = viewOptions.orderBy
$: sort = { [orderBy[0]]: orderBy[1] }
+ $: lth = $deviceInfo.theme === 'theme-light'
+ const accentColors: AccentColor[] = []
+
// issuesGroupBySorting[groupByKey]
$: dontUpdateRank = orderBy[0] !== IssuesOrdering.Manual
@@ -199,7 +202,7 @@
if (accentColors[i] === undefined) {
accentColors[i] = {
textColor: 'var(--theme-caption-color)',
- backgroundColor: '175, 175, 175'
+ backgroundColor: lth ? '230, 230, 230' : '100, 100, 108'
}
}
})
@@ -258,9 +261,6 @@
}
}
- $: lth = $deviceInfo.theme === 'theme-light'
- const accentColors: AccentColor[] = []
-
const setAccentColor = (n: number, ev: CustomEvent) => {
const accColor = rgbToHsl(ev.detail.r, ev.detail.g, ev.detail.b)
const textColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accColor.h, accColor.s, 0.3)
@@ -305,14 +305,14 @@
<!-- {@const status = $statusStore.get(state._id)} -->
{#key lth}
<div
- style:--kanban-header-rgb-color={accentColors[index]?.backgroundColor ?? '175, 175, 175'}
+ style:--kanban-header-rgb-color={accentColors[index].backgroundColor}
class="header flex-between"
class:gradient={!lth}
>
<div class="flex-row-center gap-1">
<span
class="clear-mins fs-bold overflow-label pointer-events-none"
- style:color={accentColors[index]?.textColor ?? 'var(--theme-caption-color)'}
+ style:color={accentColors[index].textColor}
>
{#if groupByKey === noCategory}
<Label label={view.string.NoGrouping} />
@@ -349,6 +349,9 @@
<svelte:fragment slot="card" let:object>
{@const issue = toIssue(object)}
{@const issueId = object._id}
+ {@const reports =
+ issue.reportedTime + (issue.childInfo ?? []).map((it) => it.reportedTime).reduce((a, b) => a + b, 0)}
+ {@const estimations = (issue.childInfo ?? []).map((it) => it.estimation).reduce((a, b) => a + b, 0)}
{#key issueId}
<div
class="tracker-card"
@@ -411,22 +414,25 @@
}}
/>
</div>
- <div class="card-footer flex-between">
- <EstimationEditor kind={'list'} size={'small'} value={issue} />
- <div class="flex-row-center gap-3 reverse">
- {#if (object.attachments ?? 0) > 0}
- <AttachmentsPresenter value={object.attachments} {object} />
- {/if}
- {#if (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
+ {#if reports > 0 || estimations > 0 || (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
+ <div class="card-footer flex-between">
+ <EstimationEditor kind={'list'} size={'small'} value={issue} />
+ <!-- {@debug issue} -->
+ <div class="flex-row-center gap-3 reverse">
+ {#if (object.attachments ?? 0) > 0}
+ <AttachmentsPresenter value={object.attachments} {object} />
+ {/if}
{#if (object.comments ?? 0) > 0}
<CommentsPresenter value={object.comments} {object} />
{/if}
{#if object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0}
<CommentsPresenter value={object.$lookup?.attachedTo?.comments} object={object.$lookup?.attachedTo} />
{/if}
- {/if}
+ </div>
</div>
- </div>
+ {:else}
+ <div class="min-h-4 max-h-4 h-4" />
+ {/if}
</div>
{/key}
</svelte:fragment>
@@ -468,6 +474,7 @@
display: flex;
flex-direction: column;
min-height: 6.5rem;
+ border-radius: 0.25rem;
.card-header {
padding: 0.75rem 1rem 0;
diff --git a/plugins/view-resources/src/components/TableBrowser.svelte b/plugins/view-resources/src/components/TableBrowser.svelte
index 16b7c0c3bc..01f61cb0cb 100644
--- a/plugins/view-resources/src/components/TableBrowser.svelte
+++ b/plugins/view-resources/src/components/TableBrowser.svelte
@@ -15,7 +15,7 @@
<script lang="ts">
import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
import { getEmbeddedLabel } from '@hcengineering/platform'
- import { Scroller, tableSP } from '@hcengineering/ui'
+ import { Scroller, tableSP, FadeOptions } from '@hcengineering/ui'
import { BuildModelKey } from '@hcengineering/view'
import { onMount } from 'svelte'
import { ActionContext } from '..'
@@ -33,6 +33,7 @@
export let showFilterBar = true
export let enableChecking = true
export let tableId: string | undefined = undefined
+ export let fade: FadeOptions = tableSP
// If defined, will show a number of dummy items before real data will appear.
export let loadingProps: LoadingProps | undefined = undefined
@@ -83,7 +84,7 @@
mode: 'browser'
}}
/>
-<Scroller fade={tableSP} horizontal={true}>
+<Scroller {fade} horizontal={true}>
<Table
bind:this={table}
{_class}