WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-12 12:47:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

TSK-1324. Update popups and colors (#3145)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2023-05-05 12:21:40 +07:00
committed by GitHub
parent 01f6c38daf
commit 6d7b2f4bf6
94 changed files with 366 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/presentation/src/components/DocPopup.svelte
+19 -14
View File
@@ -17,7 +17,6 @@
import type { IntlString } from '@hcengineering/platform'
import {
Button,
CheckBox,
EditBox,
FocusHandler,
Icon,
@@ -28,7 +27,8 @@
deviceOptionsStore,
resizeObserver,
showPopup,
tooltip
tooltip,
closeTooltip
} from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import presentation from '..'
@@ -140,6 +140,7 @@
let selectedDiv: HTMLElement | undefined
let scrollDiv: HTMLElement | undefined
let cHeight = 0
let timer: any = null
const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
const objIt = objects?.find((it) => it._id === selected)
@@ -162,6 +163,13 @@
}
}
}
if (!timer) {
timer = setTimeout(() => {
closeTooltip()
clearTimeout(timer)
timer = null
}, 50)
}
}
$: updateLocation(scrollDiv, selectedDiv, objects, selected)
@@ -206,7 +214,7 @@
{/if}
</div>
{#if cHeight === 1}
<div class="background-content-accent-color" style:height={'2px'} />
<div class="whereSelected" />
{/if}
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
<div class="box">
@@ -226,17 +234,15 @@
{@const obj = objects[item]}
{@const isDeselectDisabled = selectedElements.has(obj._id) && forbiddenDeselectItemIds.has(obj._id)}
<button
class="menu-item w-full flex-row-center"
class:background-button-bg-color={!allowDeselect && obj._id === selected}
class:border-radius-1={!allowDeselect && obj._id === selected}
class="menu-item withList w-full flex-row-center"
disabled={readonly || isDeselectDisabled}
on:click={() => {
handleSelection(undefined, objects, item)
}}
>
{#if allowDeselect && selected}
{#if (allowDeselect && selected) || multiSelect || selected}
<div class="icon" class:disabled={readonly}>
{#if obj._id === selected}
{#if obj._id === selected || selectedElements.has(obj._id)}
<div bind:this={selectedDiv}>
{#if titleDeselect}
<div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
@@ -259,18 +265,13 @@
<slot name="item" item={obj} />
{/if}
</span>
{#if multiSelect}
<div class="check-right pointer-events-none">
<CheckBox checked={selectedElements.has(obj._id)} primary readonly={readonly || isDeselectDisabled} />
</div>
{/if}
</button>
</svelte:fragment>
</ListView>
</div>
</div>
{#if cHeight === -1}
<div class="background-content-accent-color" style:height={'2px'} />
<div class="whereSelected" />
{/if}
</div>
@@ -282,4 +283,8 @@
border-radius: 0.25rem;
box-shadow: none;
}
.whereSelected {
height: 2px;
background-color: var(--theme-caret-color);
}
</style>
packages/presentation/src/components/DraggableList.svelte
+4 -2
View File
@@ -109,8 +109,10 @@
>
<div class="draggable-container">
<div class="caption mb-0 flex flex-grow flex-row-center">
<div class="draggable-mark fs-title dark-color whitespace-nowrap mr-2"><IconMoreV size={'small'} /></div>
<div class="fs-title dark-color whitespace-nowrap mr-2">
<div class="draggable-mark fs-title content-dark-color whitespace-nowrap mr-2">
<IconMoreV size={'small'} />
</div>
<div class="fs-title content-dark-color whitespace-nowrap mr-2">
{`${index + 1}.`}
</div>
<slot name="object" {index} />
packages/presentation/src/components/MessageBox.svelte
+3 -3
View File
@@ -77,10 +77,10 @@
padding: 2rem 1.75rem 1.75rem;
width: 30rem;
max-width: 40rem;
background: var(--theme-bg-color);
border-radius: 1.25rem;
background: var(--theme-popup-color);
border-radius: 0.5rem;
user-select: none;
box-shadow: var(--popup-shadow);
box-shadow: var(--theme-popup-shadow);
.message {
margin-bottom: 1.75rem;
packages/presentation/src/components/SpaceInfo.svelte
+1 -1
View File
@@ -27,7 +27,7 @@
<div class="flex-center caption-color flex-no-shrink"><IconFolder {size} /></div>
<div class="flex-col ml-2 min-w-0">
{#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
<div class="content-accent-color overflow-label">
<div class="caption-color overflow-label">
{value.name}
{#if value.archived}
<Label label={presentation.string.Archived} />
packages/presentation/src/components/SpaceSelect.svelte
+4 -2
View File
@@ -46,6 +46,7 @@
export let labelDirection: TooltipAlignment | undefined = undefined
export let kind: ButtonKind = 'no-border'
export let size: ButtonSize = 'large'
export let itemSize: ButtonSize = 'small'
export let justify: 'left' | 'center' = 'center'
export let width: string | undefined = undefined
export let allowDeselect = false
@@ -84,7 +85,7 @@
{
_class,
label,
size,
size: itemSize,
allowDeselect,
spaceOptions: { ...(spaceOptions ?? {}), sort: { ...(spaceOptions?.sort ?? {}), modifiedOn: -1 } },
selected: selected?._id,
@@ -121,10 +122,11 @@
{kind}
{justify}
{width}
notSelected={value == null}
showTooltip={{ label, direction: labelDirection }}
on:click={showSpacesPopup}
>
<span slot="content" class="overflow-label disabled text" class:dark-color={value == null}>
<span slot="content" class="overflow-label disabled text">
{#if selected}{selected.name}{:else}<Label {label} />{/if}
</span>
</Button>
packages/presentation/src/components/SpacesPopup.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
export let spaceQuery: DocumentQuery<Space> | undefined = {}
export let spaceOptions: FindOptions<Space> | undefined = {}
export let create: ObjectCreate | undefined = undefined
export let size: ButtonSize = 'large'
export let size: ButtonSize = 'small'
export let allowDeselect = false
export let component: AnySvelteComponent | undefined = undefined
export let componentProps: any | undefined = undefined
packages/theme/styles/_colors.scss
+3 -7
View File
@@ -99,7 +99,7 @@
--theme-list-subheader-color: #262634;
--theme-list-row-color: #21212F;
--theme-list-divider-color: rgba(255, 255, 255, .09);
--theme-list-subheader-divider: transparent;
--theme-list-subheader-divider: rgba(255, 255, 255, .06);
--theme-list-button-color: #262633;
--theme-list-button-hover: #2F2F3A;
@@ -135,6 +135,7 @@
--theme-error-color: #eb5757;
--theme-lost-color: #eb5757;
--theme-won-color: #34DB80;
--theme-caret-color: #6e5ed2;
--body-color: #1f2023;
--body-accent: #222326;
@@ -154,15 +155,12 @@
--scrollbar-bar-hover: #8a8aa5;
--scrollbar-track-color: #35354a;
--trans-color: rgba(255, 255, 255, .3);
--darker-color: rgba(255, 255, 255, .4);
--dark-color: #62666d;
--content-color: #8a8f98;
--theme-accent-color: rgba(255, 255, 255, .8);
--accent-color: #d7d8db;
--caption-color: #f7f8f8;
--white-color: #fff;
--caret-color: #6e5ed2;
--warning-color: #f2994a;
--divider-color: #303236;
@@ -298,6 +296,7 @@
--theme-error-color: #eb5757; // Dark
--theme-lost-color: #eb5757; // Dark
--theme-won-color: #34DB80; // Dark
--theme-caret-color: #6e5ed2;
--body-color: #fff;
--body-accent: #fafafa; // HZ
@@ -317,15 +316,12 @@
--scrollbar-bar-hover: #90959d;
--scrollbar-track-color: #e0e0e0;
--trans-color: rgba(0, 0, 0, .3);
--darker-color: rgba(0, 0, 0, .4);
--dark-color: #90959d;
--content-color: #3c4149;
--accent-color: #282a30;
--theme-accent-color: rgba(0, 0, 0, .8);
--caption-color: #131416;
--white-color: #fff;
--caret-color: #6e5ed2;
--warning-color: #f2994a; // Dark
--divider-color: #e0e0e0;
packages/theme/styles/_layouts.scss
+12 -7
View File
@@ -161,11 +161,14 @@ input.search {
margin: 0;
color: var(--accent-color);
border: none;
caret-color: var(--caret-color);
caret-color: var(--theme-caret-color);
&.padding { padding: .625rem .75rem; }
}
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
/* Flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
@@ -661,6 +664,10 @@ input.search {
.square-36 { width: 2.25rem; height: 2.25rem; }
/* --------- */
.svg-tiny {
width: .75rem;
height: .75rem;
}
.svg-16px {
width: 16px;
height: 16px;
@@ -847,12 +854,10 @@ a.no-line {
.background-content-accent-color { background-color: var(--accent-color); }
.content-trans-color { color: var(--theme-trans-color); }
.dark-color,
.content-dark-color { color: var(--dark-color); }
.content-color { color: var(--content-color); }
.content-accent-color { color: var(--accent-color); }
.caption-color { color: var(--caption-color); }
.content-darker-color { color: var(--theme-darker-color); }
.content-dark-color { color: var(--theme-dark-color); }
.content-color { color: var(--theme-content-color); }
.caption-color { color: var(--theme-caption-color); }
.red-color { color: var(--highlight-red); }
.error-color { color: var(--theme-error-color); }
packages/theme/styles/common.scss
+10 -10
View File
@@ -97,7 +97,7 @@
.top {
font-size: .6875rem;
color: var(--trans-color);
color: var(--theme-trans-color);
}
.bottom {
margin-top: .25rem;
@@ -127,7 +127,7 @@
.an-element__icon {
margin-right: .5rem;
min-width: 1rem;
color: var(--darker-color);
color: var(--theme-dark-color);
&.indent-2 { margin-left: 1.75rem; }
&.indent-4 { margin-left: 3.25rem; }
@@ -142,14 +142,14 @@
user-select: none;
font-weight: 400;
&:not(.content-color) { color: var(--caption-color); }
&:not(.content-color) { color: var(--theme-caption-color); }
&.title {
// font-weight: 500;
color: var(--caption-color);
color: var(--theme-caption-color);
}
&.bold {
font-weight: 600;
color: var(--caption-color);
color: var(--theme-caption-color);
}
}
.an-element__icon-arrow {
@@ -171,13 +171,13 @@
margin-left: .75rem;
font-weight: 600;
font-size: .75rem;
color: var(--accent-color);
color: var(--theme-content-color);
}
&:hover, &.hovered, &.selected {
// background-color: var(--theme-navpanel-hovered);
.an-element__icon,
.an-element__label { color: var(--caption-color); }
.an-element__label { color: var(--theme-caption-color); }
.an-element__icon-arrow { opacity: 1; }
}
&:hover, &.hovered { background-color: var(--theme-navpanel-hovered); }
@@ -192,11 +192,11 @@
font-weight: 500;
font-size: .625rem;
line-height: 1.5rem;
color: var(--content-color);
color: var(--theme-content-color);
}
&:hover {
.an-element__label,
.an-element__icon-arrow { color: var(--caption-color); }
.an-element__icon-arrow { color: var(--theme-caption-color); }
}
&.collapsed .an-element__icon-arrow,
&:hover .an-element__icon-arrow { opacity: 1; }
@@ -217,7 +217,7 @@
}
.an-element__label {
color: rgb(var(--caption-color) / 40%);
color: rgb(var(--theme-caption-color) / 40%);
}
}
}
packages/theme/styles/components.scss
+1 -1
View File
@@ -529,7 +529,7 @@
// THead background-color in Tooltip and Popups
.popup-tooltip .antiTable .scroller-thead,
.popup .antiTable .scroller-thead { background-color: var(--accent-bg-color); }
.popup .antiTable .scroller-thead { background-color: var(--theme-table-header-color); }
// Hide row menu in Tooltip
.popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }
packages/theme/styles/global.scss
+3
View File
@@ -71,6 +71,9 @@
--timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--timing-rotate: cubic-bezier(.28,1.92,.39,.56);
// transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
&::after,
&::before { box-sizing: border-box; }
}
:root {
--app-height: 100%;
packages/theme/styles/popups.scss
+12 -12
View File
@@ -57,7 +57,7 @@
padding: .625rem .75rem;
color: #d6d6d6;
border: none;
caret-color: var(--caret-color);
caret-color: var(--theme-caret-color);
}
.clear-btn {
display: flex;
@@ -102,8 +102,8 @@
.menu-item {
flex-shrink: 0;
justify-content: flex-start;
padding: .25rem .75rem;
min-height: 2rem;
padding: .25rem .5rem;
min-height: 2.25rem;
text-align: left;
color: var(--theme-content-color);
cursor: pointer;
@@ -112,12 +112,12 @@
.icon, .color, .tag {
flex-shrink: 0;
margin-right: .75rem;
margin-right: .375rem;
}
.icon {
width: 1rem;
height: 1rem;
color: var(--theme-dark-color);
color: var(--theme-caret-color);
}
.color {
width: .875rem;
@@ -137,27 +137,27 @@
text-overflow: ellipsis;
overflow: hidden;
}
.check, .check-right {
.check {
display: flex;
align-items: center;
margin-right: .75rem;
}
.check-right { margin: 0 0 0 2rem; }
&:focus,
&:hover {
&:not(.withList):focus,
&:not(.withList):hover {
color: var(--theme-caption-color);
background-color: var(--theme-popup-hover);
.icon { color: var(--theme-content-color); }
}
&.no-focus:focus { background-color: var(--theme-popup-hover); }
&.no-focus:hover { background-color: var(--theme-popup-hover); }
&.no-focus:not(.withList):focus { background-color: var(--theme-popup-hover); }
&.no-focus:not(.withList):hover { background-color: var(--theme-popup-hover); }
}
.sticky-wrapper {
display: flex;
flex-direction: column;
&:not(:first-child) { margin-top: 1px; }
&:not(:first-child) { margin-top: 1px; }
}
.menu-group {
overflow: hidden;
@@ -294,7 +294,7 @@
padding: 0 .5rem;
width: 100%;
height: 3rem;
color: var(--caption-color);
color: var(--theme-caption-color);
text-align: left;
cursor: pointer;
packages/ui/src/components/Button.svelte
+5 -2
View File
@@ -426,11 +426,14 @@
}
&.notSelected {
color: var(--content-color);
color: var(--theme-dark-color);
.btn-icon {
color: var(--theme-darker-color);
}
&:hover,
&:hover .btn-icon {
color: var(--accent-color);
color: var(--theme-content-color);
}
}
packages/ui/src/components/EditBox.svelte
+1 -1
View File
@@ -136,7 +136,7 @@
<!-- {focusIndex} -->
<div class="hidden-text {kind}" bind:this={text} />
{#if label}
<div class="mb-1 text-sm font-medium content-accent-color select-text">
<div class="mb-1 text-sm font-medium caption-color select-text">
<Label {label} />
{#if required}<span class="error-color">&ast</span>{/if}
</div>
packages/ui/src/components/EmojiPopup.svelte
+3 -1
View File
@@ -173,9 +173,11 @@
}
.scroll-header {
position: sticky;
top: 0;
flex-shrink: 0;
margin: 0.75rem 0.75rem 0.25rem;
padding: 0.25rem 0.75rem;
top: 0;
height: 1.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
packages/ui/src/components/Expandable.svelte
+2 -2
View File
@@ -70,8 +70,8 @@
}
&.bordered {
padding: 0.25rem 0.5rem;
background-color: var(--body-accent);
border: 1px solid var(--divider-color);
background-color: var(--theme-comp-header-color);
border: 1px solid var(--theme-divider-color);
border-radius: 0.25rem;
}
}
packages/ui/src/components/Like.svelte
+2 -2
View File
@@ -45,14 +45,14 @@
}
.icon {
margin-left: 0.25rem;
color: var(--trans-color);
color: var(--theme-trans-color);
cursor: pointer;
&:hover {
color: var(--dark-color);
}
&:active {
color: var(--darker-color);
color: var(--theme-darker-color);
}
}
packages/ui/src/components/ListView.svelte
+3 -2
View File
@@ -86,14 +86,15 @@
<style lang="scss">
.list-container {
min-width: 0;
// border-radius: 0.25rem;
user-select: none;
.list-item {
border-radius: 0.25rem;
min-width: 0;
}
.selection {
background-color: var(--theme-button-focused);
background-color: var(--theme-popup-hover);
}
}
</style>
packages/ui/src/components/PopupInstance.svelte
+2
View File
@@ -184,6 +184,8 @@
display: flex;
flex-direction: column;
// justify-content: center;
min-width: 0;
min-height: 0;
max-height: calc(100vh - 32px);
background-color: transparent;
transform-origin: center;
packages/ui/src/components/StepsDialog.svelte
+1 -1
View File
@@ -159,7 +159,7 @@
{/each}
</ol>
{#if stepsDescription}
<span class="dark-color"><Label label={stepsDescription} /></span>
<span class="content-dark-color"><Label label={stepsDescription} /></span>
{/if}
</div>
</Scroller>
packages/ui/src/components/StylishEdit.svelte
+1 -1
View File
@@ -75,7 +75,7 @@
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
border-radius: 0.75rem;
caret-color: var(--caret-color);
caret-color: var(--theme-caret-color);
&:focus-within {
background-color: var(--theme-button-focused);
packages/ui/src/components/TimeSince.svelte
+1 -1
View File
@@ -72,6 +72,6 @@
: undefined
</script>
<span use:tooltip={{ label: ui.string.TimeTooltip, props: { value: tooltipValue } }} style="white-space: nowrap;">
<span use:tooltip={{ label: ui.string.TimeTooltip, props: { value: tooltipValue } }} class="overflow-label">
{time}
</span>
packages/ui/src/components/TooltipInstance.svelte
+12 -12
View File
@@ -257,11 +257,11 @@
flex-direction: column;
padding: 0.5rem;
max-width: 50vw;
color: var(--caption-color);
background-color: var(--accent-bg-color);
border: 1px solid var(--divider-color);
color: var(--theme-content-color);
background-color: var(--theme-popup-color);
border: 1px solid var(--theme-popup-divider);
border-radius: 0.75rem;
box-shadow: var(--popup-aside-shadow);
box-shadow: var(--theme-popup-shadow);
user-select: none;
z-index: 10000;
@@ -284,12 +284,12 @@
height: 7px;
}
&::before {
background-color: var(--accent-bg-color);
background-color: var(--theme-popup-color);
clip-path: url('#nub-bg');
z-index: 1;
}
&::after {
background-color: var(--divider-color);
background-color: var(--theme-popup-divider);
clip-path: url('#nub-border');
z-index: 2;
}
@@ -346,11 +346,11 @@
position: fixed;
padding: 0.5rem 0.75rem;
text-align: center;
color: var(--caption-color);
background-color: var(--accent-bg-color);
border: 1px solid var(--divider-color);
color: var(--theme-content-color);
background-color: var(--theme-popup-color);
border: 1px solid var(--theme-popup-divider);
border-radius: 0.75rem;
box-shadow: var(--popup-aside-shadow);
box-shadow: var(--theme-popup-shadow);
user-select: none;
z-index: 10000;
@@ -362,12 +362,12 @@
height: 7px;
}
&::before {
background-color: var(--accent-bg-color);
background-color: var(--theme-popup-color);
clip-path: url('#nub-bg');
z-index: 1;
}
&::after {
background-color: var(--divider-color);
background-color: var(--theme-popup-divider);
clip-path: url('#nub-border');
z-index: 2;
}
packages/ui/src/components/calendar/DatePopup.svelte
+20 -20
View File
@@ -389,17 +389,16 @@
width: max-content;
height: max-content;
color: var(--caption-color);
background: var(--board-card-bg-color);
border: 1px solid var(--divider-color);
background: var(--theme-popup-color);
border-radius: 0.5rem;
box-shadow: var(--card-shadow);
box-shadow: var(--theme-popup-shadow);
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem 1rem 2rem;
border-bottom: 1px solid var(--divider-color);
border-bottom: 1px solid var(--theme-popup-divider);
}
.content {
@@ -413,16 +412,16 @@
padding-left: 2px;
margin-bottom: 0.25rem;
font-size: 0.8125rem;
color: var(--content-color);
color: var(--theme-content-color);
.bold {
font-weight: 500;
color: var(--accent-color);
color: var(--theme-caption-color);
}
.divider {
margin: 0 0.25rem;
line-height: 1.4375rem;
color: var(--dark-color);
color: var(--theme-darker-color);
}
}
@@ -435,7 +434,7 @@
.footer {
padding: 1rem 2rem;
border-top: 1px solid var(--divider-color);
border-top: 1px solid var(--theme-popup-divider);
}
}
@@ -449,17 +448,17 @@
height: 3rem;
font-family: inherit;
font-size: 1rem;
color: var(--content-color);
background-color: var(--body-color);
border: 1px solid var(--button-border-color);
color: var(--theme-content-color);
background-color: var(--theme-bg-color);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
transition: border-color 0.15s ease;
&:hover {
border-color: var(--button-border-hover);
border-color: var(--theme-button-enabled);
}
&:focus-within {
color: var(--caption-color);
color: var(--theme-caption-color);
border-color: var(--primary-edit-border-color);
}
@@ -470,15 +469,15 @@
margin: 0 0.25rem;
width: 0.75rem;
height: 0.75rem;
color: var(--content-color);
background-color: var(--button-bg-color);
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
outline: none;
border-radius: 50%;
cursor: pointer;
&:hover {
color: var(--accent-color);
background-color: var(--button-bg-hover);
color: var(--theme-caption-color);
background-color: var(--theme-button-hovered);
}
}
@@ -487,12 +486,13 @@
padding: 0 0.125rem;
height: 1.5rem;
line-height: 1.5rem;
color: var(--accent-color);
color: var(--theme-caption-color);
outline: none;
border-radius: 0.125rem;
&:focus {
background-color: var(--primary-bg-color);
color: var(--primary-button-color);
background-color: var(--primary-button-enabled);
}
&::after {
position: absolute;
@@ -510,7 +510,7 @@
width: 1px;
min-width: 1px;
height: 0.75rem;
background-color: var(--button-border-color);
background-color: var(--theme-button-border);
}
.separator {
margin: 0 0.1rem;
packages/ui/src/components/calendar/DatePresenter.svelte
+16 -1
View File
@@ -75,7 +75,7 @@
showPopup(
DatePopup,
{ currentDate, mondayStart, withTime, label, detail },
undefined,
'top',
() => {
opened = false
},
@@ -118,6 +118,7 @@
flex-shrink: 0;
font-weight: 400;
width: auto;
min-width: 0;
white-space: nowrap;
color: var(--theme-content-color);
cursor: default;
@@ -301,6 +302,20 @@
// padding: 0 0.5rem;
// }
}
&.transparent {
padding: 0 0.625rem;
border-radius: 0.25rem;
&:hover {
background-color: var(--theme-button-hovered);
}
&.selected {
background-color: var(--highlight-select);
}
&.selected:hover {
background-color: var(--highlight-select-hover);
}
}
.time-divider {
flex-shrink: 0;
packages/ui/src/components/calendar/DateRangePresenter.svelte
+9 -1
View File
@@ -30,7 +30,7 @@
export let editable: boolean = false
export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
export let labelNull: IntlString = ui.string.NoDate
export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
export let kind: 'default' | 'no-border' | 'link' | 'secondary' = 'default'
export let size: 'small' | 'medium' | 'large' = 'small'
export let noShift: boolean = false
@@ -466,6 +466,14 @@
}
}
&.default {
padding: 0;
color: var(--theme-content-color);
&:hover {
color: var(--theme-caption-color);
}
}
&.no-border {
font-weight: 400;
color: var(--theme-content-color);
packages/ui/src/components/calendar/Shifts.svelte
+6 -6
View File
@@ -85,10 +85,10 @@
width: fit-content;
width: 12rem;
min-width: 12rem;
background: var(--popup-bg-color);
border: 1px solid var(--divider-color);
background: var(--theme-navpanel-color);
border: 1px solid var(--theme-divider-color);
border-radius: 0.5rem;
box-shadow: var(--popup-shadow);
box-shadow: var(--theme-popup-shadow);
z-index: -1;
.btn {
@@ -100,8 +100,8 @@
cursor: pointer;
&:hover {
color: var(--caption-color);
background-color: var(--button-bg-hover);
color: var(--theme-caption-color);
background-color: var(--theme-navpanel-hovered);
}
}
@@ -109,7 +109,7 @@
margin: 0.25rem 0.75rem 0.25rem 0;
height: 1px;
min-height: 1px;
background-color: var(--divider-color);
background-color: var(--theme-divider-color);
}
}
</style>
packages/ui/src/components/icons/Check.svelte
+7 -2
View File
@@ -3,6 +3,11 @@
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8.3324L6.65721 13L14 3" stroke={fill} stroke-linecap="round" stroke-linejoin="round" />
<svg class="svg-{size}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
{fill}
d="M29.7071 6.29314C30.0976 6.68366 30.0976 7.31683 29.7071 7.70735L13.7071 23.7074C13.3166 24.0979 12.6834 24.0979 12.2929 23.7074L4.29289 15.7074C3.90237 15.3168 3.90237 14.6837 4.29289 14.2931C4.68342 13.9026 5.31658 13.9026 5.70711 14.2931L13 21.586L28.2929 6.29314C28.6834 5.90261 29.3166 5.90261 29.7071 6.29314Z"
/>
</svg>
packages/ui/src/components/icons/Folder.svelte
+4 -3
View File
@@ -4,9 +4,10 @@
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
d="M10.7,4.1H9.1C8.8,4.1,8.6,4,8.4,3.8L7.9,3.2C7.5,2.8,7,2.5,6.4,2.5H5.3C3.1,2.5,2,3.7,2,6v4.1c0,2.2,1.4,3.5,3.8,3.5h4.5 c2.3,0,3.8-1.3,3.8-3.5l0-2.6C14,5.2,12.9,4.1,10.7,4.1z M13,10.1C13,10.1,13,10.1,13,10.1c0,1.6-1,2.5-2.8,2.5H5.8 C4,12.7,3,11.8,3,10.1V6c0-1.8,0.7-2.5,2.3-2.5h1.1c0.3,0,0.5,0.1,0.7,0.3l0.5,0.6C8,4.9,8.5,5.1,9.1,5.1h1.6c1.7,0,2.3,0.7,2.3,2.4 L13,10.1z"
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 9C2 6.23858 4.23858 4 7 4H10.6716C11.4672 4 12.2303 4.31607 12.7929 4.87868L15.6213 7.70711C15.8089 7.89464 16.0632 8 16.3284 8H25C27.7614 8 30 10.2386 30 13V23C30 25.7614 27.7614 28 25 28H7C4.23858 28 2 25.7614 2 23V9ZM7 6C5.34315 6 4 7.34315 4 9V23C4 24.6569 5.34315 26 7 26H25C26.6569 26 28 24.6569 28 23V13C28 11.3431 26.6569 10 25 10H16.3284C15.5328 10 14.7697 9.68393 14.2071 9.12132L11.3787 6.29289C11.1911 6.10536 10.9368 6 10.6716 6H7Z"
/>
<path d="M10.6,9.1H5.3C5,9.1,4.8,9.3,4.8,9.6s0.2,0.5,0.5,0.5h5.3c0.3,0,0.5-0.2,0.5-0.5S10.8,9.1,10.6,9.1z" />
</svg>
packages/ui/src/popups.ts
+5
View File
@@ -205,6 +205,11 @@ export function fitPopupElement (
newProps.left = '60%'
newProps.right = '4px'
show = true
} else if (element === 'center') {
newProps.top = '50%'
newProps.left = '50%'
newProps.transform = 'translate(-50%, -50%)'
show = true
} else if (element === 'centered') {
newProps.top = newProps.bottom = '15%'
newProps.left = newProps.right = '25%'
packages/ui/src/types.ts
+3 -1
View File
@@ -151,6 +151,7 @@ export type PopupPosAlignment =
| 'middle'
| 'help-center'
| 'centered'
| 'center'
export function isPopupPosAlignment (x: any): x is PopupPosAlignment {
return (
@@ -163,7 +164,8 @@ export function isPopupPosAlignment (x: any): x is PopupPosAlignment {
x === 'content' ||
x === 'middle' ||
x === 'help-center' ||
x === 'centered')
x === 'centered' ||
x === 'center')
)
}
plugins/activity-resources/src/components/TxView.svelte
+3 -3
View File
@@ -382,14 +382,14 @@
margin-right: 1rem;
width: 2.25rem;
min-width: 2.25rem;
color: var(--darker-color);
color: var(--theme-darker-color);
}
.msgactivity-icon {
height: 1.75rem;
}
.msgactivity-avatar {
height: 2.25rem;
// background-color: var(--darker-color);
// background-color: var(--theme-darker-color);
border: 1px dashed var(--divider-trans-color);
border-radius: 50%;
}
@@ -486,7 +486,7 @@
.time {
font-size: 0.75rem;
color: var(--trans-color);
color: var(--theme-trans-color);
&.top {
align-self: flex-start;
plugins/activity-resources/src/components/TxViewTx.svelte
+2 -2
View File
@@ -24,7 +24,7 @@
{#each filterTx([...tx.txes, tx], core.class.TxCreateDoc) as ctx, i}
{#if i === 0 && !presentersOnly}
<IconAdd size={'x-small'} fill={'var(--trans-color)'} />
<IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if}
{#if typeof viewlet?.component === 'string'}
<Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} />
@@ -34,7 +34,7 @@
{/each}
{#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
{#if i === 0 && !presentersOnly}
<IconDelete size={'x-small'} fill={'var(--trans-color)'} />
<IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if}
{#if typeof viewlet?.component === 'string'}
<Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} />
plugins/attachment-resources/src/components/Attachments.svelte
+3 -3
View File
@@ -84,15 +84,15 @@
{attachmentClassOptions}
>
<div class="antiSection-empty attachments flex-col mt-3" class:solid={dragover}>
<div class="flex-center content-accent-color">
<div class="flex-center caption-color">
<UploadDuo size={'large'} />
</div>
<div class="text-sm dark-color" style:pointer-events="none">
<div class="text-sm content-dark-color" style:pointer-events="none">
<Label label={attachment.string.NoAttachments} />
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="over-underline text-sm content-accent-color"
class="over-underline text-sm caption-color"
style:pointer-events={dragover ? 'none' : 'all'}
on:click={() => inputFile.click()}
>
plugins/chunter-resources/src/components/CommentPresenter.svelte
+2 -2
View File
@@ -51,7 +51,7 @@
</div>
<span class="label nowrap">Message</span>
</a>
&nbsp;<span class="dark-color">#{cutId(value._id.toString())}</span>
&nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
{:else}
<div class="flex-row-top">
{#await getEmployee(value, $employeeByIdStore, $employeeAccountByIdStore) then employee}
@@ -63,7 +63,7 @@
<div class="fs-title">
{#if employee}{getName(employee)}{/if}
</div>
<div class="dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
<div class="content-dark-color ml-4"><TimeSince value={value.modifiedOn} /></div>
</div>
<ShowMore fixed>
<MessageViewer message={value.message} />
plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+1 -1
View File
@@ -59,7 +59,7 @@
let loading = false
</script>
<div class:editing class="content-accent-color">
<div class:editing class="content-color">
{#if edit}
<AttachmentRefInput
bind:loading
plugins/contact-resources/src/components/ChannelEditor.svelte
+9 -8
View File
@@ -207,12 +207,13 @@
left: 0;
width: 100%;
height: 100%;
background-color: var(--board-bg-color);
background-color: var(--theme-popup-hover);
border: 1px solid transparent;
border-radius: 0.25rem;
opacity: 0.95;
}
&.show.copied::before {
background-color: var(--body-accent);
border-color: var(--theme-divider-color);
}
&.show::after {
content: attr(data-tooltip);
@@ -226,17 +227,17 @@
width: calc(100% - 0.5rem);
text-align: center;
font-size: 0.75rem;
color: var(--content-color);
color: var(--theme-content-color);
transform: translate(-50%, -50%);
}
}
.editor-container {
padding: 0.5rem;
background-color: var(--accent-bg-color);
border: 1px solid var(--divider-color);
background-color: var(--theme-popup-color);
border: 1px solid var(--theme-popup-divider);
border-radius: 0.75rem;
box-shadow: var(--popup-aside-shadow);
box-shadow: var(--theme-popup-shadow);
&.top {
transform: translate(calc(-50% + 0.75rem), -0.5rem);
@@ -258,13 +259,13 @@
}
&.top::before,
&.bottom::before {
background-color: var(--accent-bg-color);
background-color: var(--theme-popup-color);
clip-path: url('#nub-bg');
z-index: 1;
}
&.top::after,
&.bottom::after {
background-color: var(--divider-color);
background-color: var(--theme-popup-divider);
clip-path: url('#nub-border');
z-index: 2;
}
plugins/contact-resources/src/components/Members.svelte
+2 -2
View File
@@ -125,11 +125,11 @@
/>
{:else}
<div class="antiSection-empty solid flex-col mt-3">
<span class="dark-color">
<span class="content-dark-color">
<Label label={contact.string.NoMembers} />
</span>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span class="over-underline content-accent-color" on:click={createApp}>
<span class="over-underline content-color" on:click={createApp}>
<Label label={contact.string.AddMember} />
</span>
</div>
plugins/contact-resources/src/components/SpaceMembers.svelte
+1 -1
View File
@@ -106,7 +106,7 @@
<div class="item fs-title">
<div class="flex-row-center" on:click={openAddMembersPopup}>
<div class="flex-center ml-1 mr-1"><IconAdd size={'large'} /></div>
<div class="flex-col ml-2 min-w-0 content-accent-color">
<div class="flex-col ml-2 min-w-0 content-color">
<Label label={presentation.string.Add} />
</div>
</div>
plugins/contact-resources/src/components/UserInfo.svelte
+1 -1
View File
@@ -30,6 +30,6 @@
<Avatar avatar={value.avatar} {size} {icon} on:accent-color />
<div class="flex-col min-w-0 {size === 'tiny' || size === 'inline' ? 'ml-1' : 'ml-2'}">
{#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
<div class="content-accent-color overflow-label text-left">{getName(value)}</div>
<div class="content-color overflow-label text-left">{getName(value)}</div>
</div>
</div>
plugins/gmail-resources/src/components/Chats.svelte
+1 -1
View File
@@ -132,7 +132,7 @@
{:else}
<div class="flex-col-center justify-center h-full">
<Icon icon={IconInbox} size={'full'} />
<div class="mt-4 fs-bold dark-color"><Label label={plugin.string.Incoming} /></div>
<div class="mt-4 fs-bold content-dark-color"><Label label={plugin.string.Incoming} /></div>
</div>
{/if}
</div>
plugins/gmail-resources/src/components/FullMessage.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
<div class="overflow-label" use:tooltip={{ label: getEmbeddedLabel(currentMessage.subject) }}>
{currentMessage.subject}
</div>
<span class="content-accent-color">
<span class="content-color">
<Label label={currentMessage.incoming ? gmail.string.From : gmail.string.To} />
<b>{title}</b>
</span>
plugins/gmail-resources/src/components/Message.svelte
+6 -6
View File
@@ -36,18 +36,18 @@
>
<div class="flex-col message" class:selected>
<div class="flex-between text-sm mb-1">
<div class="dark-color overflow-label mr-4">
<div class="content-dark-color overflow-label mr-4">
<Label label={gmail.string.From} />
<span class="content-accent-color">{message.sender}</span>
<span class="content-color">{message.sender}</span>
</div>
<div class="dark-color flex">
<div class="content-dark-color flex">
<AttachmentsPresenter value={message.attachments} object={message} />
<span class="content-accent-color">{getTime(message.sendOn)}</span>
<span class="content-color">{getTime(message.sendOn)}</span>
</div>
</div>
<div class="dark-color text-sm overflow-label mr-4 mb-4">
<div class="content-dark-color text-sm overflow-label mr-4 mb-4">
<Label label={gmail.string.To} />
<span class="content-accent-color">{message.receiver}</span>
<span class="content-color">{message.receiver}</span>
</div>
<div class="fs-title overflow-label mb-1">
{message.subject}
plugins/gmail-resources/src/components/NewMessage.svelte
+2 -2
View File
@@ -179,7 +179,7 @@
/>
<div class="flex-grow flex-col">
<Label label={plugin.string.NewMessage} />
<span class="content-accent-color"><b>{getName(object)} ({channel.value})</b></span>
<span class="content-color"><b>{getName(object)} ({channel.value})</b></span>
</div>
</div>
<div class="buttons-group small-gap">
@@ -249,7 +249,7 @@
padding: 1rem;
background-color: var(--outcoming-msg);
color: #d6d6d6;
caret-color: var(--caret-color);
caret-color: var(--theme-caret-color);
min-height: 0;
margin-bottom: 2rem;
height: 100%;
plugins/gmail-resources/src/components/NewMessages.svelte
+2 -2
View File
@@ -272,7 +272,7 @@
<div class="buttons-group">
<div class="flex-grow flex-col">
<Label label={plugin.string.NewMessage} />
<div class="content-accent-color targets">
<div class="caption-color targets">
<b>
{#each channels as channel, i}
<div>
@@ -365,7 +365,7 @@
padding: 1rem;
background-color: var(--outcoming-msg);
color: #d6d6d6;
caret-color: var(--caret-color);
caret-color: var(--theme-caret-color);
min-height: 0;
height: 100%;
margin-bottom: 2rem;
plugins/hr-resources/src/components/DepartmentStaff.svelte
+2 -2
View File
@@ -125,10 +125,10 @@
</Scroller>
{:else}
<div class="antiSection-empty solid flex-col-center mt-3">
<span class="text-sm dark-color">
<span class="text-sm content-dark-color">
<Label label={hr.string.NoMembers} />
</span>
<span class="text-sm content-accent-color over-underline" on:click={add}>
<span class="text-sm content-color over-underline" on:click={add}>
<Label label={hr.string.AddMember} />
</span>
</div>
plugins/inventory-resources/src/components/Variants.svelte
+3 -3
View File
@@ -45,13 +45,13 @@
/>
{:else}
<div class="antiSection-empty solid flex-col-center mt-3">
<div class="content-accent-color">
<div class="content-color">
<Icon size={'large'} icon={inventory.icon.Variant} />
</div>
<span class="text-sm dark-color mt-2">
<span class="text-sm content-dark-color mt-2">
<Label label={inventory.string.NoVariantsForProduct} />
</span>
<span class="text-sm content-accent-color over-underline" on:click={create}>
<span class="text-sm content-color over-underline" on:click={create}>
<Label label={inventory.string.CreateVariant} />
</span>
</div>
plugins/lead-resources/src/components/Leads.svelte
+2 -2
View File
@@ -57,10 +57,10 @@
{/if}
{:else}
<div class="antiSection-empty solid flex-col-center mt-3">
<span class="text-sm dark-color">
<span class="text-sm content-dark-color">
<Label label={lead.string.NoLeadsForDocument} />
</span>
<span class="text-sm content-accent-color over-underline" on:click={createLead}>
<span class="text-sm content-color over-underline" on:click={createLead}>
<Label label={lead.string.CreateLead} />
</span>
</div>
plugins/recruit-resources/src/components/Applications.svelte
+2 -2
View File
@@ -85,11 +85,11 @@
<div class="caption-color">
<FileDuo size={'large'} />
</div>
<span class="dark-color">
<span class="content-dark-color">
<Label label={recruit.string.NoApplicationsForTalent} />
</span>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span class="over-underline content-accent-color" on:click={createApp}>
<span class="over-underline content-color" on:click={createApp}>
<Label label={recruit.string.CreateAnApplication} />
</span>
</div>
plugins/recruit-resources/src/components/VacancyApplications.svelte
+2 -2
View File
@@ -97,10 +97,10 @@
<div class="caption-color">
<FileDuo size={'large'} />
</div>
<span class="dark-color">
<span class="content-dark-color">
<Label label={recruit.string.NoApplicationsForVacany} />
</span>
<span class="over-underline content-accent-color" on:click={createApp}>
<span class="over-underline content-color" on:click={createApp}>
<Label label={recruit.string.CreateAnApplication} />
</span>
</div>
plugins/recruit-resources/src/components/VacancyList.svelte
+2 -2
View File
@@ -68,10 +68,10 @@
<div class="caption-color">
<FileDuo size={'large'} />
</div>
<span class="dark-color">
<span class="content-dark-color">
<Label label={getEmbeddedLabel('No Vacancies')} />
</span>
<span class="over-underline content-accent-color" on:click={createApp}>
<span class="over-underline content-color" on:click={createApp}>
<Label label={recruit.string.CreateVacancy} />
</span>
</div>
plugins/recruit-resources/src/components/review/Opinions.svelte
+3 -3
View File
@@ -45,13 +45,13 @@
/>
{:else}
<div class="antiSection-empty solid flex-col-center mt-3">
<div class="content-accent-color">
<div class="content-color">
<FileDuo size={'large'} />
</div>
<div class="text-sm dark-color mt-2">
<div class="text-sm content-dark-color mt-2">
<Label label={recruit.string.NoReviewForCandidate} />
</div>
<span class="text-sm content-accent-color over-underline" on:click={createApp}>
<span class="text-sm content-color over-underline" on:click={createApp}>
<Label label={recruit.string.CreateAnReview} />
</span>
</div>
plugins/recruit-resources/src/components/review/Reviews.svelte
+2 -2
View File
@@ -92,11 +92,11 @@
<div class="caption-color">
<FileDuo size={'large'} />
</div>
<span class="dark-color mt-2">
<span class="content-dark-color mt-2">
<Label label={recruit.string.NoReviewForCandidate} />
</span>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span class="over-underline content-accent-color" on:click={createApp}>
<span class="over-underline content-color" on:click={createApp}>
<Label label={recruit.string.CreateAnReview} />
</span>
</div>
plugins/setting-resources/src/components/ClassHierarchy.svelte
+2 -2
View File
@@ -71,11 +71,11 @@
<div class="mr-2 flex">
<Icon icon={clazz.icon} size={'medium'} />
{#if clazz.kind === ClassifierKind.MIXIN && hierarchy.hasMixin(clazz, settings.mixin.UserMixin)}
<Icon icon={IconAdd} size={'x-small'} />
<Icon icon={IconAdd} size={'x-small'} fill={'var(--theme-dark-color)'} />
{/if}
</div>
{/if}
<span class="overflow-label content-accent-color"><Label label={clazz.label} /></span>
<span class="overflow-label caption-color"><Label label={clazz.label} /></span>
</div>
</div>
{#if desc.length}
plugins/tags-resources/src/components/TagsEditor.svelte
+1 -1
View File
@@ -116,7 +116,7 @@
<div class="flex flex-grow flex-col" class:tag-items-scroll={!showTitle}>
{#if items.length === 0}
{#if keyLabel}
<div class="text-sm dark-color w-full flex-center">
<div class="text-sm content-dark-color w-full flex-center">
<Label label={tags.string.NoItems} params={{ word: keyLabel }} />
</div>
{/if}
plugins/tags-resources/src/components/TagsFilter.svelte
+1 -1
View File
@@ -196,7 +196,7 @@
<div class="tag" style="background-color: {getPlatformColor(element.color)};" />
{element.title}
</div>
<div class="dark-color ml-2">
<div class="content-dark-color ml-2">
{element.refCount ?? 0}
</div>
</div>
plugins/task-resources/src/components/state/DoneStateEditor.svelte
+1 -1
View File
@@ -80,7 +80,7 @@
<div class="pointer-events-none"><DoneStatePresenter value={state} showTitle /></div>
{:else}
<div class="flex-row-center pointer-events-none">
<div class="dark-color mr-2"><Unknown size={'small'} /></div>
<div class="content-dark-color mr-2"><Unknown size={'small'} /></div>
<span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
</div>
{/if}
plugins/task-resources/src/components/state/DoneStatesPopup.svelte
+1 -1
View File
@@ -68,7 +68,7 @@
dispatch('close', null)
}}
>
<div class="dark-color mr-2"><Unknown size={'small'} /></div>
<div class="content-dark-color mr-2"><Unknown size={'small'} /></div>
<span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
</button>
</div>
plugins/tracker-resources/src/components/ComponentSelector.svelte
+1 -1
View File
@@ -128,7 +128,7 @@
<span
class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
? 'content-color'
: 'content-accent-color'} pointer-events-none"
: 'caption-color'} pointer-events-none"
>
<Label label={getEmbeddedLabel(componentText)} />
</span>
plugins/tracker-resources/src/components/CreateIssue.svelte
+7 -9
View File
@@ -544,15 +544,13 @@
on:changeContent
>
<svelte:fragment slot="header">
<div class="flex-row-center">
<SpaceSelector
_class={tracker.class.Project}
label={tracker.string.Project}
bind:space={_space}
kind={'secondary'}
size={'large'}
/>
</div>
<SpaceSelector
_class={tracker.class.Project}
label={tracker.string.Project}
bind:space={_space}
kind={'secondary'}
size={'large'}
/>
<ObjectBox
_class={tracker.class.IssueTemplate}
value={templateId}
plugins/tracker-resources/src/components/SpaceInfo.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
<div class="flex-center {size} caption-color flex-no-shrink"><IconFolder size={'small'} /></div>
<div class="flex-col ml-2 min-w-0">
{#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
<div class="content-accent-color overflow-label">{value.name}</div>
<div class="content-color overflow-label">{value.name}</div>
</div>
</div>
plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+2 -2
View File
@@ -81,7 +81,7 @@
}
.icon {
margin-right: 0.5rem;
color: var(--dark-color);
color: var(--theme-dark-color);
}
&.inline {
@@ -93,7 +93,7 @@
}
.select-text {
font-weight: 500;
color: var(--accent-color);
color: var(--theme-caption-color);
}
}
}
plugins/tracker-resources/src/components/issues/IssuePreview.svelte
+1 -1
View File
@@ -97,7 +97,7 @@
<MessageViewer message={issue.description} />
</div>
{:else}
<div class="ml-2 dark-color">
<div class="ml-2 content-dark-color">
<Label label={tracker.string.NoDescription} />
</div>
{/if}
plugins/tracker-resources/src/components/issues/Move.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
<div class="overflow-label fs-title">
<Label label={tracker.string.MoveIssues} />
</div>
<div class="content-accent-color mt-4 mb-4">
<div class="caption-color mt-4 mb-4">
<Label label={tracker.string.MoveIssuesDescription} />
</div>
<div class="spaceSelect">
plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
</span>
{/if}
<span class="overflow-label ml-2">
<span class="content-accent-color">{title}</span>
<span class="caption-color">{title}</span>
{value.title}
</span>
</div>
plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
+1 -3
View File
@@ -81,9 +81,7 @@
</div>
{#if shouldShowLabel}
<span
class="{kind === 'list'
? 'ml-2 text-md'
: 'ml-3 text-base'} overflow-label disabled fs-bold content-accent-color"
class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled fs-bold content-color"
>
<Label label={issuePriorities[value.priority]?.label} />
</span>
plugins/tracker-resources/src/components/issues/StatusEditor.svelte
+1 -3
View File
@@ -121,9 +121,7 @@
</div>
{#if selectedStatusLabel}
<span
class="{kind === 'list'
? 'ml-1 text-md'
: 'ml-2 text-base'} overflow-label disabled fs-bold content-accent-color"
class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled fs-bold content-color"
>
{selectedStatusLabel}
</span>
plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte
+3 -3
View File
@@ -55,14 +55,14 @@
<SubIssueList bind:viewOptions {viewlet} issues={subIssues} {projects} {disableHeader} />
{:else}
<div class="antiSection-empty solid flex-col mt-3">
<div class="flex-center content-accent-color">
<div class="flex-center content-color">
<AddIssueDuo size={'large'} />
</div>
<div class="text-sm dark-color" style:pointer-events="none">
<div class="text-sm content-dark-color" style:pointer-events="none">
<Label label={tracker.string.RelatedIssuesNotFound} />
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="over-underline text-sm content-accent-color" on:click={() => dispatch('add-issue')}>
<div class="over-underline text-sm content-color" on:click={() => dispatch('add-issue')}>
<Label label={tracker.string.NewRelatedIssue} />
</div>
</div>
plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
+1 -1
View File
@@ -51,7 +51,7 @@
</span>
{#if headerRemoval}
<div in:fade|local={{ duration: 150 }} class="antiSection-header__header flex-between">
<span class="dark-color"><Label label={viewplg.string.NoGrouping} /></span>
<span class="content-dark-color"><Label label={viewplg.string.NoGrouping} /></span>
<div class="buttons-group font-normal text-normal">
{#if extraHeaders}
{#each extraHeaders as extra}
plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
+1 -1
View File
@@ -124,7 +124,7 @@
<svelte:fragment slot="buttons">
<Button
icon={IconAdd}
size={'small'}
size={'large'}
on:click={() => {
showPopup(
TimeSpendReportPopup,
plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
+17 -14
View File
@@ -40,7 +40,7 @@
{@const issue = issues[item]}
{@const currentProject = projects.get(issue.space)}
<div
class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2 clear-mins"
on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
on:mouseover={() => {
listProvider.updateFocus(issue)
@@ -60,19 +60,22 @@
</span>
</div>
<FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
<AssigneeBox
width={'100%'}
label={tracker.string.Assignee}
_class={contact.class.Employee}
value={issue.assignee}
readonly
showNavigate={false}
/>
</FixedColumn>
<FixedColumn key={'estimation'} justify={'left'}>
<EstimationEditor value={issue} kind={'list'} />
</FixedColumn>
<div class="flex-row-center clear-mins gap-2 self-end flex-no-shrink" class:p-text={twoRows}>
<FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
<AssigneeBox
width={'100%'}
kind={'transparent'}
label={tracker.string.Assignee}
_class={contact.class.Employee}
value={issue.assignee}
readonly
showNavigate={false}
/>
</FixedColumn>
<FixedColumn key={'estimation'} justify={'left'}>
<EstimationEditor value={issue} kind={'list'} />
</FixedColumn>
</div>
</div>
</svelte:fragment>
</ListView>
plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte
+7 -6
View File
@@ -75,7 +75,7 @@
{/if}
</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
<div class="add-action">
<ActionIcon icon={IconAdd} size={'small'} action={addTimeReport} />
@@ -89,7 +89,7 @@
{/if}
</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
<style lang="scss">
@@ -98,7 +98,8 @@
align-items: center;
padding: 0 0.875rem;
width: 100%;
height: 2rem;
height: 2.25rem;
color: var(--theme-caption-color);
border: 1px solid transparent;
border-radius: 0.25rem;
cursor: pointer;
@@ -108,9 +109,9 @@
}
&:hover {
color: var(--caption-color);
background-color: var(--body-color);
border-color: var(--divider-color);
background-color: var(--theme-bg-color);
border-color: var(--theme-divider-color);
.add-action {
visibility: visible;
}
plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
+3 -1
View File
@@ -15,13 +15,14 @@
<script lang="ts">
import { TimeReportDayType } from '@hcengineering/tracker'
import { DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
import type { ButtonKind } from '@hcengineering/ui'
import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
import tracker from '../../../plugin'
import TimeReportDayIcon from './TimeReportDayIcon.svelte'
export let label = tracker.string.TimeReportDayTypeLabel
export let selected: TimeReportDayType | undefined
export let kind: ButtonKind = 'link-bordered'
export let size: ButtonSize = 'small'
const workDaysDropdownItems: DropdownIntlItem[] = [
{
@@ -37,6 +38,7 @@
<DropdownLabelsIntl
{kind}
{size}
icon={TimeReportDayIcon}
shouldUpdateUndefined={false}
{label}
plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
+6 -2
View File
@@ -132,18 +132,22 @@
<UserBox
_class={contact.class.Employee}
label={contact.string.Employee}
kind={'no-border'}
kind={'secondary'}
size={'large'}
bind:value={data.employee}
showNavigate={false}
/>
<TimeReportDayDropdown
kind={'no-border'}
kind={'secondary'}
size={'large'}
bind:selected={selectedTimeReportDay}
on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
/>
<DatePresenter
bind:value={data.date}
editable
kind={'secondary'}
size={'large'}
on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
/>
</svelte:fragment>
plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+4 -3
View File
@@ -70,7 +70,7 @@
{@const report = reports[item]}
{@const currentProject = projects.get(toProjectId(report.space))}
<div
class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2 clear-mins"
on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
on:mouseenter={() => {
listProvider.updateFocus(report)
@@ -92,10 +92,11 @@
</span>
{/if}
</div>
<div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
<div class="flex-row-center clear-mins gap-2 self-end flex-no-shrink" class:p-text={twoRows}>
<FixedColumn key={'timespend_assignee'} justify={'left'}>
<UserBox
width={'100%'}
kind={'transparent'}
label={tracker.string.Assignee}
_class={contact.class.Employee}
value={report.employee}
@@ -107,7 +108,7 @@
<TimePresenter value={report.value} />
</FixedColumn>
<FixedColumn key={'timespend_date'} justify={'left'}>
<DatePresenter value={report.date} />
<DatePresenter value={report.date} kind={'transparent'} size={'small'} />
</FixedColumn>
</div>
</div></svelte:fragment
plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+1 -1
View File
@@ -145,7 +145,7 @@
<span
class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label {!value
? 'content-color'
: 'content-accent-color'} pointer-events-none"
: 'caption-color'} pointer-events-none"
>
<Label label={getEmbeddedLabel(sprintText)} />
</span>
plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte
+2 -2
View File
@@ -241,13 +241,13 @@
position: absolute;
content: '';
inset: 0;
border-top: 1px solid var(--caret-color);
border-top: 1px solid var(--theme-caret-color);
}
&.is-dragged-over-down::before {
position: absolute;
content: '';
inset: 0;
border-bottom: 1px solid var(--caret-color);
border-bottom: 1px solid var(--theme-caret-color);
}
}
</style>
plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
+2 -2
View File
@@ -236,13 +236,13 @@
position: absolute;
content: '';
inset: 0;
border-top: 1px solid var(--caret-color);
border-top: 1px solid var(--theme-caret-color);
}
&.is-dragged-over-down::before {
position: absolute;
content: '';
inset: 0;
border-bottom: 1px solid var(--caret-color);
border-bottom: 1px solid var(--theme-caret-color);
}
}
</style>
plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte
+2 -3
View File
@@ -60,10 +60,9 @@
max-width: 15rem;
font-size: 0.8125rem;
color: var(--content-color);
cursor: pointer;
&.noPointer {
cursor: default;
&:not(.noPointer) {
cursor: pointer;
}
&.noUnderline {
plugins/tracker-resources/src/components/workflow/StatusPresenter.svelte
+1 -1
View File
@@ -38,7 +38,7 @@
<div class="flex-no-shrink ml-2">
<IssueStatusIcon {value} size="small" />
</div>
<span class="content-accent-color ml-2">{value.name}</span>
<span class="caption-color ml-2">{value.name}</span>
{#if value.description}
<span>&nbsp;·&nbsp;{value.description}</span>
{/if}
plugins/tracker-resources/src/components/workflow/Statuses.svelte
+2 -2
View File
@@ -316,14 +316,14 @@
position: absolute;
content: '';
inset: 0;
border-top: 1px solid var(--caret-color);
border-top: 1px solid var(--theme-caret-color);
}
&.is-dragged-over-down::before {
position: absolute;
content: '';
inset: 0;
border-bottom: 1px solid var(--caret-color);
border-bottom: 1px solid var(--theme-caret-color);
}
}
plugins/view-resources/src/components/ActionsPopup.svelte
+13 -13
View File
@@ -271,11 +271,11 @@
</svelte:fragment>
<svelte:fragment slot="item" let:item>
{@const action = filteredActions[item]}
<div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base">
<div class="mr-4">
<div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base cursor-pointer">
<div class="mr-4 {selection === item ? 'caption-color' : 'content-dark-color'}">
<Icon icon={action.icon ?? IconArrowLeft} size={'small'} />
</div>
<div class="flex-grow">
<div class="flex-grow {selection === item ? 'caption-color' : 'content-color'}">
<Label label={action.label} />
</div>
<div class="mr-2 text-md flex-row-center">
@@ -309,11 +309,11 @@
<style lang="scss">
.key-box {
background-color: var(--button-bg-color);
color: var(--caption-color);
min-width: 1.5rem;
padding: 0 0.5rem;
border: 1px solid var(--button-border-color);
min-width: 1.5rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-divider-color);
border-radius: 0.25rem;
}
.key-box + .key-box {
@@ -321,15 +321,15 @@
}
.item-box {
display: inline-block;
background-color: var(--divider-color);
color: var(--caption-color);
border-radius: 0.5rem;
padding: 0.5rem;
padding: 0.25rem 0.5rem;
color: var(--theme-caption-color);
background-color: var(--theme-divider-color);
border-radius: 0.25rem;
}
.category-box {
display: inline-block;
background-color: var(--divider-color);
color: var(--caption-color);
color: var(--theme-caption-color);
background-color: var(--theme-comp-header-color);
padding: 0.5rem;
}
</style>
plugins/view-resources/src/components/ClassAttributeBar.svelte
+1 -1
View File
@@ -67,7 +67,7 @@
<Label {label} />
</span>
<div class="icon-arrow">
<svg fill="var(--dark-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<svg fill="var(--theme-dark-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<path d="M0,0L6,3L0,6Z" />
</svg>
</div>
plugins/view-resources/src/components/MarkupEditor.svelte
+3 -3
View File
@@ -53,11 +53,11 @@
}}
>
<svelte:fragment slot="content">
<div class="lines-limit-4" style:text-align={'left'} class:dark-color={readonly}>
<div class="lines-limit-4" style:text-align={'left'} class:content-dark-color={readonly}>
{#if value}
<MessageViewer message={value} />
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
</div>
</svelte:fragment>
@@ -66,6 +66,6 @@
{#if value}
<span class="overflow-label">{value}</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
{/if}
plugins/view-resources/src/components/Move.svelte
+1 -1
View File
@@ -104,7 +104,7 @@
<Label label={view.string.MoveClass} params={{ class: label }} />
</div>
<StatusControl {status} />
<div class="content-accent-color mt-4 mb-4">
<div class="caption-color mt-4 mb-4">
<Label label={view.string.SelectToMove} params={{ class: label, classLabel }} />
</div>
<div class="spaceSelect">
plugins/view-resources/src/components/NumberEditor.svelte
+2 -2
View File
@@ -63,7 +63,7 @@
{#if value !== undefined}
<span class="overflow-label">{value}</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
</svelte:fragment>
</Button>
@@ -71,7 +71,7 @@
{#if value !== undefined}
<span class="overflow-label">{value}</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
{:else}
<EditBox {placeholder} bind:value format={'number'} {focus} on:change={_onchange} />
plugins/view-resources/src/components/ObjectBox.svelte
+15 -11
View File
@@ -25,7 +25,6 @@
ButtonSize,
getEventPositionElement,
getFocusManager,
Icon,
IconOpen,
Label,
LabelAndProps,
@@ -115,11 +114,23 @@
<div {id} bind:this={container} class="min-w-0" class:w-full={width === '100%'} class:h-full={$$slots.content}>
{#if $$slots.content}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="w-full h-full flex-streatch" on:click={_click}>
<slot name="content" />
</div>
{:else}
<Button {focusIndex} width={width ?? 'min-content'} {size} {kind} {justify} {showTooltip} on:click={_click}>
<Button
{focusIndex}
width={width ?? 'min-content'}
{icon}
iconProps={{ size: kind === 'link' || kind === 'secondary' ? 'small' : size }}
{size}
{kind}
{justify}
{showTooltip}
on:click={_click}
notSelected={!selected}
>
<span slot="content" class="overflow-label flex-grow" class:flex-between={showNavigate && selected}>
<div
class="disabled flex-row-center"
@@ -132,17 +143,10 @@
objectId={selected._id}
_class={selected._class}
value={selected}
props={{ ...docProps, disabled: true, inline: true, size: 'x-small' }}
props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
/>
{:else}
<div class="flex-row-center">
{#if icon}
<Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
{/if}
<div class="ml-2">
<Label {label} />
</div>
</div>
<Label {label} />
{/if}
</div>
{#if selected && showNavigate}
plugins/view-resources/src/components/ObjectBoxPopup.svelte
+1 -1
View File
@@ -61,7 +61,7 @@
objectId={doc._id}
_class={doc._class}
value={doc}
props={{ ...docProps, disabled: true, inline: true, size: 'x-small' }}
props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
/>
</div>
</svelte:fragment>
plugins/view-resources/src/components/StringEditor.svelte
+3 -3
View File
@@ -57,9 +57,9 @@
>
<svelte:fragment slot="content">
{#if value}
<span class="overflow-label">{value}</span>
<span class="overflow-label pointer-events-none">{value}</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color pointer-events-none"><Label label={placeholder} /></span>
{/if}
</svelte:fragment>
</Button>
@@ -67,7 +67,7 @@
{#if value}
<span class="overflow-label">{value}</span>
{:else}
<span class="dark-color"><Label label={placeholder} /></span>
<span class="content-dark-color"><Label label={placeholder} /></span>
{/if}
{:else}
<EditBox {placeholder} bind:value {focus} on:change={_onchange} />
plugins/view-resources/src/components/filter/DateFilter.svelte
+1 -1
View File
@@ -126,7 +126,7 @@
<Label label={ui.string.NotSelected} />
{/if}
</div>
<div class="dark-color ml-2">
<div class="content-dark-color ml-2">
{values.get(value)}
</div>
</div>
plugins/view-resources/src/components/filter/ObjectFilter.svelte
+1 -1
View File
@@ -199,7 +199,7 @@
<Label label={ui.string.NotSelected} />
{/if}
</div>
<div class="dark-color ml-2">
<div class="content-dark-color ml-2">
{#if isStatus && value}
{getStatusCount(value)}
{:else}
plugins/view-resources/src/components/filter/ValueFilter.svelte
+1 -1
View File
@@ -164,7 +164,7 @@
<Label label={ui.string.NotSelected} />
{/if}
</div>
<div class="dark-color ml-2">
<div class="content-dark-color ml-2">
{values.get(value)}
</div>
</div>
plugins/view-resources/src/components/list/SortableList.svelte
+5 -5
View File
@@ -174,7 +174,7 @@
{/if}
{#if label}
<div class="title-wrapper">
<span class="wrapped-title text-base content-accent-color">
<span class="wrapped-title text-base caption-color">
<Label {label} />
</span>
</div>
@@ -243,16 +243,16 @@
}
&.column.is-dragged-over-before::before {
border-top: 1px solid var(--caret-color);
border-top: 1px solid var(--theme-caret-color);
}
&.column.is-dragged-over-after::before {
border-bottom: 1px solid var(--caret-color);
border-bottom: 1px solid var(--theme-caret-color);
}
&.row.is-dragged-over-before::before {
border-left: 1px solid var(--caret-color);
border-left: 1px solid var(--theme-caret-color);
}
&.row.is-dragged-over-after::before {
border-right: 1px solid var(--caret-color);
border-right: 1px solid var(--theme-caret-color);
}
}
</style>
plugins/workbench-resources/src/components/HelpAndSupport.svelte
+15 -15
View File
@@ -22,6 +22,7 @@
let shortcuts = false
let actions: Action[] = []
let categories: ActionCategory[] = []
let selection: number = 0
const client = getClient()
@@ -136,7 +137,7 @@
{:else}
<!-- Keyboard shortcuts -->
<Scroller padding={'0 .5rem'} fade={topSP}>
<ListView count={actions.length} noScroll>
<ListView count={actions.length} noScroll addClass={'rounded'} bind:selection>
<svelte:fragment slot="category" let:item>
{@const action = actions[item]}
{#if item === 0 || (item > 0 && actions[item - 1].category !== action.category)}
@@ -153,10 +154,10 @@
<svelte:fragment slot="item" let:item>
{@const action = actions[item]}
<div class="flex-row-center flex-between flex-grow ml-2 p-3 text-base clear-mins">
<div class="mr-4">
<div class="mr-4 {selection === item ? 'caption-color' : 'dark-color'}">
<Icon icon={action.icon ?? IconArrowLeft} size={'small'} />
</div>
<div class="flex-grow">
<div class="flex-grow {selection === item ? 'caption-color' : 'content-color'}">
<Label label={action.label} />
</div>
<div class="mr-2 text-md flex-row-center">
@@ -198,9 +199,9 @@
<style lang="scss">
.card {
border: 1px solid var(--button-border-color);
margin: 1rem 1rem 0 1rem;
border: 1px solid var(--theme-button-border);
border-radius: 0.75rem;
margin: 16px 1rem 0 1rem;
}
.container {
display: flex;
@@ -216,19 +217,18 @@
align-self: center;
}
.footer {
align-items: flex-end;
display: flex;
flex: 1;
justify-content: flex-end;
margin: 0 16px;
padding-top: 10px;
align-items: flex-end;
margin: 0 1rem;
padding-top: 0.625rem;
}
.key-box {
background-color: var(--button-bg-color);
color: var(--caption-color);
min-width: 1.5rem;
padding: 0 0.5rem;
border: 1px solid var(--button-border-color);
min-width: 1.5rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-divider-color);
border-radius: 0.25rem;
}
.key-box + .key-box {
@@ -239,8 +239,8 @@
padding: 0.5rem 1rem;
top: 0;
min-height: 2.5rem;
background-color: var(--divider-color);
color: var(--caption-color);
color: var(--theme-caption-color);
background-color: var(--theme-comp-header-color);
border-radius: 0.25rem;
}
</style>