mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-12 19:30:52 +00:00
TSK-1394,-1407,-1412,-1417,-1422,-1423: minor fixes. Fixed Scroller. (#3124)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
96e77f44b6
commit
d435dbfa2e
@ -1 +1 @@
|
||||
{"major":0,"minor":6,"patch":92}
|
||||
{ "major": 0, "minor": 6, "patch": 92 }
|
||||
|
||||
@ -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)}
|
||||
>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
{attr}
|
||||
{value}
|
||||
isEditable={!readonly}
|
||||
kind={'labels'}
|
||||
kind={'list'}
|
||||
on:remove={(res) => removeTag(res.detail)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user