hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-22 11:01:54 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

TSK-1324: update popups and colors (#3152)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-05-10 14:40:50 +03:00 committed by GitHub
parent d486dea298
commit 93268d4dbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 293 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/presentation/src/components/DocPopup.svelte
View File

@ -241,29 +241,17 @@
}}
>
{#if (allowDeselect && selected) || multiSelect || selected}
<div class="icon" class:disabled={readonly}>
<div class="check" class:disabled={readonly}>
{#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 }}>
<Icon icon={IconCheck} {size} />
</div>
{:else}
<Icon icon={IconCheck} {size} />
{/if}
<div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
<Icon icon={IconCheck} {size} />
</div>
{/if}
</div>
{/if}
<span class="label" class:disabled={readonly || isDeselectDisabled}>
{#if obj._id === selected}
<div bind:this={selectedDiv}>
<slot name="item" item={obj} />
</div>
{:else}
<slot name="item" item={obj} />
{/if}
<slot name="item" item={obj} />
</span>
</button>
</svelte:fragment>
@ -283,8 +271,4 @@
border-radius: 0.25rem;
box-shadow: none;
}
.whereSelected {
height: 2px;
background-color: var(--theme-caret-color);
}
</style>

19
packages/presentation/src/components/SpaceInfo.svelte
View File

@ -23,11 +23,11 @@
export let size: IconSize
</script>
<div class="flex-row-center">
<div class="flex-center caption-color flex-no-shrink"><IconFolder {size} /></div>
<div class="flex-col ml-2 min-w-0">
<div class="flex-presenter">
<div class="icon medium-gap"><IconFolder {size} /></div>
<div class="flex-col">
{#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
<div class="caption-color overflow-label">
<div class="label no-underline nowrap">
{value.name}
{#if value.archived}
<Label label={presentation.string.Archived} />
@ -35,14 +35,3 @@
</div>
</div>
</div>
<style lang="scss">
.medium {
width: 1.75rem;
height: 1.75rem;
}
.large {
width: 2.25rem;
height: 2.25rem;
}
</style>

6
packages/theme/styles/_colors.scss
View File

@ -123,6 +123,7 @@
--theme-popup-color: #292938;
--theme-popup-hover: #32323F;
--theme-popup-divider: rgba(255, 255, 255, .1);
--theme-popup-header: #3A3A47;
--theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
--theme-panel-color: #1A1A28;
--theme-calendar-today-color: #fff;
@ -133,6 +134,7 @@
--theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
--theme-error-color: #eb5757;
--theme-warning-color: #f2994a;
--theme-lost-color: #eb5757;
--theme-won-color: #34DB80;
--theme-caret-color: #6e5ed2;
@ -161,7 +163,6 @@
--accent-color: #d7d8db;
--caption-color: #f7f8f8;
--white-color: #fff;
--warning-color: #f2994a;
--divider-color: #303236;
--divider-trans-color: rgba(255, 255, 255, .12);
@ -284,6 +285,7 @@
--theme-popup-color: #FFFFFF;
--theme-popup-hover: #F5F5F5;
--theme-popup-divider: rgba(0, 0, 0, .1);
--theme-popup-header: #EBEBEB;
--theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
--theme-panel-color: #FFFFFF;
--theme-calendar-today-color: #000;
@ -294,6 +296,7 @@
--theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
--theme-error-color: #eb5757; // Dark
--theme-warning-color: #f2994a; // Dark
--theme-lost-color: #eb5757; // Dark
--theme-won-color: #34DB80; // Dark
--theme-caret-color: #6e5ed2;
@ -322,7 +325,6 @@
--theme-accent-color: rgba(0, 0, 0, .8);
--caption-color: #131416;
--white-color: #fff;
--warning-color: #f2994a; // Dark
--divider-color: #e0e0e0;
--divider-trans-color: rgba(0, 0, 0, .12);

25
packages/theme/styles/_layouts.scss
View File

@ -268,21 +268,22 @@ input.search {
cursor: pointer;
.icon {
color: var(--dark-color);
color: var(--theme-dark-color);
&.circle {
padding: .25rem;
background-color: var(--avatar-bg-color);
border-radius: 50%;
}
&:not(.small-gap) { margin-right: .5rem; }
&:not(.small-gap, .medium-gap) { margin-right: .5rem; }
&.small-gap { margin-right: .25rem; }
&.medium-gap { margin-right: .375rem; }
}
.label {
min-width: 0;
font-weight: 500;
text-align: left;
color: var(--accent-color);
color: var(--theme-content-color);
overflow: hidden;
visibility: visible;
@ -306,19 +307,19 @@ input.search {
margin-left: .75rem;
}
&:hover {
.icon { color: var(--caption-color); }
.icon { color: var(--theme-caption-color); }
.label {
color: var(--caption-color);
color: var(--theme-caption-color);
&:not(.no-underline) { text-decoration: underline; }
}
.action { visibility: visible; }
}
&.not-selected {
.label { color: var(--content-color); }
.label { color: var(--theme-dark-color); }
&:hover .label,
&:hover .icon {
color: var(--accent-color);
color: var(--theme-content-color);
}
}
}
@ -721,6 +722,7 @@ a.no-line {
}
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-inherit { cursor: inherit; }
.pointer-events-none { pointer-events: none; }
.select-text { user-select: text; }
@ -844,6 +846,15 @@ a.no-line {
}
/* Backgrounds & Colors */
.dark-hover-content-color {
color: var(--theme-dark-color);
&:hover { color: var(--theme-content-color); }
}
.content-hover-caption-color {
color: var(--theme-content-color);
&:hover { color: var(--theme-caption-color); }
}
.background-body-color { background-color: var(--body-color); }
.background-accent-bg-color { background-color: var(--accent-bg-color); }
.background-highlight-select { background-color: var(--highlight-select); }

38
packages/theme/styles/popups.scss
View File

@ -117,7 +117,7 @@
.icon {
width: 1rem;
height: 1rem;
color: var(--theme-caret-color);
color: var(--theme-dark-color);
}
.color {
width: .875rem;
@ -138,20 +138,25 @@
overflow: hidden;
}
.check {
display: flex;
align-items: center;
margin-right: .75rem;
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-right: .375rem;
color: var(--theme-caret-color);
}
.check-right { margin: 0 0 0 2rem; }
&:not(.withList):focus,
&:not(.withList, .no-focus):focus,
&:not(.withList):hover {
color: var(--theme-caption-color);
background-color: var(--theme-popup-hover);
}
&:not(.withList, .no-focus):focus,
&:not(.withList):hover,
&.selected,
&:hover {
color: var(--theme-caption-color);
.icon { color: var(--theme-content-color); }
}
&.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;
@ -173,13 +178,13 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: .125rem .25rem;
padding: .375rem .25rem;
min-height: 1.5rem;
font-weight: 500;
font-size: .75rem;
text-align: left;
color: var(--theme-content-color);
background-color: var(--theme-comp-header-color);
background-color: var(--theme-popup-header);
cursor: pointer;
.icon {
@ -193,6 +198,10 @@
&.show + .menu-group { height: auto; }
}
}
.whereSelected {
height: 2px;
background-color: var(--theme-caret-color);
}
}
.antiPopup {
@ -386,14 +395,18 @@
align-items: center;
flex-shrink: 0;
justify-content: flex-start;
padding: .25rem .75rem;
padding: .25rem .5rem;
min-width: 0;
min-height: 2rem;
text-align: left;
color: var(--theme-content-color);
outline: none;
cursor: pointer;
.icon { color: var(--theme-dark-color); }
.icon {
margin-right: .375rem;
color: var(--theme-dark-color);
}
&:focus .icon,
&.withHover:hover .icon,
&.withIconHover:hover .icon { color: var(--theme-caption-color); }
@ -450,6 +463,7 @@
.notifyPopup .content .mention { margin-top: 0 !important; }
.helpAndSupportPopup {
height: 100%;
min-height: 100%;
min-width: 20rem;
}

21
packages/ui/src/components/ActionIcon.svelte
View File

@ -48,34 +48,33 @@
cursor: pointer;
.icon {
color: var(--dark-color);
color: var(--theme-halfcontent-color);
&.invisible {
opacity: 0;
}
}
&:hover .icon {
color: var(--accent-color);
color: var(--theme-caption-color);
opacity: 1;
}
&:focus-visible {
border: 1px solid var(--primary-button-focused-border);
box-shadow: 0 0 0 3px var(--primary-button-outline);
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
.icon {
color: var(--caption-color);
color: var(--theme-caption-color);
opacity: 1;
}
}
}
.small {
width: 1.143em;
height: 1.143em;
width: 1rem;
height: 1rem;
}
.medium {
width: 1.429em;
height: 1.429em;
width: 1.25rem;
height: 1.25rem;
}
.large {
width: 1.715em;
height: 1.715em;
width: 1.5rem;
height: 1.5rem;
}
</style>

10
packages/ui/src/components/Button.svelte
View File

@ -234,6 +234,9 @@
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
&.sh-filter {
border-radius: 0 0 0.5rem 0.5rem;
}
&.bs-solid {
border-style: solid;
}
@ -254,7 +257,12 @@
}
}
&:focus {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
&:not(.sh-filter) {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
}
&.sh-filter {
border-color: var(--primary-button-focused-border);
}
}
&:disabled {
color: var(--theme-dark-color);

10
packages/ui/src/components/ColorPopup.svelte
View File

@ -19,10 +19,13 @@
import { deviceOptionsStore, resizeObserver } from '..'
import { getPlatformColor } from '../colors'
import ListView from './ListView.svelte'
import Icon from './Icon.svelte'
import IconCheck from './icons/Check.svelte'
export let placeholder: IntlString | undefined = undefined
export let placeholderParam: any | undefined = undefined
export let searchable: boolean = false
export let selected: number | string | undefined = undefined
export let value: Array<{ id: number | string; color: number; label: string }>
let search: string = ''
@ -92,11 +95,16 @@
<svelte:fragment slot="item" let:item>
{@const itemValue = objects[item]}
<button
class="menu-item w-full"
class="menu-item withList w-full"
on:click={() => {
dispatch('close', itemValue)
}}
>
<div class="check">
{#if itemValue.id === selected}
<Icon icon={IconCheck} size={'small'} />
{/if}
</div>
<div class="color" style="background-color: {getPlatformColor(itemValue.color)}" />
<span class="label">{itemValue.label}</span>
</button>

13
packages/ui/src/components/DropdownLabelsPopup.svelte
View File

@ -19,8 +19,9 @@
import { deviceOptionsStore, resizeObserver } from '..'
import plugin from '../plugin'
import type { DropdownTextItem } from '../types'
import CheckBox from './CheckBox.svelte'
import IconCheck from './icons/Check.svelte'
import ListView from './ListView.svelte'
import Icon from './Icon.svelte'
export let placeholder: IntlString = plugin.string.SearchDots
export let items: DropdownTextItem[]
@ -130,10 +131,12 @@
}
}}
>
<div class="flex-grow caption-color lines-limit-2">{item.label}</div>
{#if isSelected(selected, item)}
<div class="check-right"><CheckBox checked primary /></div>
{/if}
<div class="check">
{#if isSelected(selected, item)}
<Icon icon={IconCheck} size={'small'} />
{/if}
</div>
<div class="labels overflow-label">{item.label}</div>
</button>
</svelte:fragment>
</ListView>

24
packages/ui/src/components/EmojiPopup.svelte
View File

@ -131,7 +131,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
use:tooltip={{ label: category.label }}
class="element m-0-5"
class="element"
class:selected={currentCategory === category}
on:click={() => handleScrollToCategory(category.id)}
>
@ -140,7 +140,7 @@
{/each}
</div>
<div class="scrolling">
<Scroller bind:divScroll={div} on:scrolledCategories={handleScrolled} fade={emojiSP} noStretch>
<Scroller bind:divScroll={div} on:scrolledCategories={handleScrolled} fade={emojiSP} noStretch checkForHeaders>
{#each categories as category}
<div id={category.id} class="scroll-header categoryHeader">
<Label label={category.label} />
@ -149,7 +149,7 @@
{#each category.emojis as emoji}
{#if emoji !== undefined}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="element m-0-5" on:click={() => dispatch('close', emoji)}>{emoji}</div>
<div class="element" on:click={() => dispatch('close', emoji)}>{emoji}</div>
{/if}
{/each}
</div>
@ -181,8 +181,8 @@
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
color: var(--dark-color);
background-color: var(--board-bg-color);
color: var(--theme-caption-color);
background-color: var(--theme-popup-header);
border-radius: 0.25rem;
&:first-child {
margin-top: 0;
@ -198,18 +198,22 @@
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
margin: 0.125rem;
padding: 0.25rem;
border-radius: 0.25rem;
color: var(--caption-color);
color: var(--theme-content-color);
cursor: pointer;
&:hover {
background-color: var(--popup-bg-hover);
color: var(--theme-caption-color);
background-color: var(--theme-popup-hover);
}
&.selected {
background-color: var(--popup-bg-hover);
background-color: var(--theme-popup-header);
}
}
</style>

32
packages/ui/src/components/SelectPopup.svelte
View File

@ -15,7 +15,7 @@
<script lang="ts">
import type { Asset, IntlString } from '@hcengineering/platform'
import { createEventDispatcher } from 'svelte'
import { deviceOptionsStore, mouseAttractor, resizeObserver } from '..'
import { deviceOptionsStore, resizeObserver } from '..'
import { createFocusManager } from '../focus'
import type { AnySvelteComponent } from '../types'
import EditBox from './EditBox.svelte'
@ -136,7 +136,9 @@
/>
</div>
{/if}
<div class:background-accent-bg-color={cHeight === 1} style:height={'2px'} />
{#if cHeight === 1}
<div class="whereSelected" />
{/if}
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, filteredObjects)} bind:this={scrollDiv}>
<div class="box">
<ListView
@ -148,15 +150,13 @@
<svelte:fragment slot="item" let:item={itemId}>
{@const item = filteredObjects[itemId]}
<button
class="menu-item w-full"
class="menu-item withList w-full"
class:selected={item.isSelected}
on:click={() => dispatch('close', item.id)}
on:focus={() => dispatch('update', item)}
on:mouseover={mouseAttractor(() => dispatch('update', item))}
on:mouseenter={mouseAttractor(() => dispatch('update', item))}
>
<div class="flex-row-center" class:mt-2={huge} class:mb-2={huge}>
<div class="flex-row-center pointer-events-none" class:mt-2={huge} class:mb-2={huge}>
{#if hasSelected}
<div class="icon">
<div class="check">
{#if item.isSelected}
<div bind:this={selectedDiv}>
<Icon icon={IconCheck} {size} />
@ -186,18 +186,24 @@
<svelte:fragment slot="category" let:item={row}>
{@const obj = filteredObjects[row]}
{#if obj.category && ((row === 0 && obj.category.label !== undefined) || obj.category.label !== filteredObjects[row - 1]?.category?.label)}
<div class="flex p-1">
<div class="icon mr-2">
<div class="menu-group__header">
<div class="flex-row-center pl-1">
{#if obj.category.icon}
<Icon icon={obj.category.icon} size={'small'} />
<div class="clear-mins flex-no-shrink mr-2">
<Icon icon={obj.category.icon} size={'small'} />
</div>
{/if}
<span class="overflow-label">
<Label label={obj.category.label} />
</span>
</div>
<Label label={obj.category.label} />
</div>
{/if}
</svelte:fragment>
</ListView>
</div>
</div>
<div class:background-accent-bg-color={cHeight === -1} style:height={'2px'} />
{#if cHeight === -1}
<div class="whereSelected" />
{/if}
</div>

5
packages/ui/src/components/Submenu.svelte
View File

@ -37,9 +37,12 @@
$: optionsMod = { component: options.component ?? Menu, props, element, kind: 'submenu' }
</script>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
bind:this={element}
on:keydown
on:mouseover
on:click
use:tooltip={optionsMod}
class="antiPopup-submenu"
@ -54,7 +57,7 @@
{/if}
{:else}
{#if icon}
<div class="icon mr-3"><Icon {icon} size={'small'} /></div>
<div class="icon"><Icon {icon} size={'small'} /></div>
{/if}
<span class="overflow-label pr-1">
{#if label}<Label {label} params={labelProps} />

4
packages/ui/src/components/calendar/DatePresenter.svelte
View File

@ -165,7 +165,7 @@
color: var(--theme-content-color);
}
&.warning {
color: var(--warning-color);
color: var(--theme-warning-color);
}
&.critical {
color: var(--theme-error-color);
@ -196,7 +196,7 @@
color: var(--caption-color);
}
&.warning {
color: var(--warning-color);
color: var(--theme-warning-color);
}
&.critical {
color: var(--theme-error-color);

19
packages/ui/src/components/calendar/DateRangePresenter.svelte
View File

@ -293,6 +293,7 @@
<button
bind:this={datePresenter}
class="datetime-button {kind} {size}"
class:notSelected={!value}
class:editable
class:edit
on:click={() => {
@ -411,7 +412,7 @@
{new Date(value).getMinutes().toString().padStart(2, '0')}
{/if}
{:else}
<div class="content-color">
<div class="overflow-label">
<Label label={labelNull} />
</div>
{/if}
@ -459,7 +460,7 @@
color: var(--theme-content-color);
}
&.warning {
color: var(--warning-color);
color: var(--theme-warning-color);
}
&.overdue {
color: var(--theme-error-color);
@ -515,7 +516,7 @@
color: var(--caption-color);
}
&.warning {
color: var(--warning-color);
color: var(--theme-warning-color);
}
&.overdue {
color: var(--theme-error-color);
@ -562,6 +563,7 @@
&.secondary {
padding: 0 0.625rem;
font-weight: 500;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
border-color: var(--theme-button-border);
@ -633,5 +635,16 @@
.separator {
margin: 0 0.1rem;
}
&.notSelected {
color: var(--theme-dark-color);
.btn-icon {
color: var(--theme-darker-color);
}
&:hover,
&:hover .btn-icon {
color: var(--theme-content-color);
}
}
}
</style>

2
packages/ui/src/components/calendar/DueDatePopup.svelte
View File

@ -65,7 +65,7 @@
margin-right: 1rem;
&.mIconContainerWarning {
color: var(--warning-color);
color: var(--theme-warning-color);
}
&.mIconContainerCritical {

6
packages/ui/src/components/internal/Root.svelte
View File

@ -138,7 +138,11 @@
>
<WiFi
size={'small'}
fill={$networkStatus === -1 ? 'red' : $networkStatus % 2 === 1 ? 'blue' : 'currentColor'}
fill={$networkStatus === -1
? 'var(--theme-error-color)'
: $networkStatus % 2 === 1
? 'var(--theme-warning-color)'
: 'currentColor'}
/>
</div>
</div>

2
packages/ui/src/types.ts
View File

@ -126,7 +126,7 @@ export type ButtonKind =
| 'list'
| 'list-header'
export type ButtonSize = 'inline' | 'small' | 'medium' | 'large' | 'x-large'
export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | undefined
export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | 'filter' | undefined
export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style' | 'underline'
export interface PopupPositionElement {
getBoundingClientRect: () => DOMRect

2
plugins/chunter-resources/src/components/Message.svelte
View File

@ -299,7 +299,7 @@
<style lang="scss">
@keyframes highlight {
50% {
background-color: var(--warning-color);
background-color: var(--theme-warning-color);
}
}
.container {

2
plugins/contact-resources/src/components/AssigneeBox.svelte
View File

@ -150,7 +150,7 @@
{getName(selected)}
{/if}
{:else}
<div class="flex-presenter">
<div class="flex-presenter not-selected">
{#if icon}
<div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
<Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />

52
plugins/contact-resources/src/components/AssigneePopup.svelte
View File

@ -193,7 +193,7 @@
<EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
</div>
{#if cHeight === 1}
<div class="background-content-accent-color" style:height={'1px'} />
<div class="whereSelected" />
{/if}
<div
class="scroll"
@ -209,15 +209,13 @@
{@const cl = hierarchy.getClass(contacts[item]._class)}
{#if item === 0 || (item > 0 && categorizedPersons.get(toAny(contacts[item - 1])._id) !== categorizedPersons.get(obj._id))}
<!--Category for first item-->
<div class="category-box">
<div class="flex flex-grow overflow-label">
<span class="fs-medium flex-center mt-2 mb-2 ml-2">
{#if cl.icon}
<Icon icon={cl.icon} size={'small'} />
{/if}
<div class="ml-1">
<Label label={getCategoryTitle(category)} />
</div>
<div class="menu-group__header category-box">
<div class="flex-row-center pl-1">
{#if cl.icon}
<div class="clear-mins mr-2"><Icon icon={cl.icon} size={'small'} /></div>
{/if}
<span class="overflow-label">
<Label label={getCategoryTitle(category)} />
</span>
</div>
</div>
@ -227,49 +225,29 @@
<svelte:fragment slot="item" let:item>
{@const obj = contacts[item]}
<button
class="menu-item w-full"
class:background-button-bg-color={obj._id === selected}
class:border-radius-1={obj._id === selected}
class="menu-item withList no-focus w-full"
class:selected={obj._id === selected}
on:click={() => {
handleSelection(undefined, item)
}}
>
{#if allowDeselect && selected}
<div class="icon">
<div class="check">
{#if obj._id === selected}
<div bind:this={selectedDiv}>
{#if titleDeselect}
<div class="clear-mins" use:tooltip={{ label: titleDeselect }}>
<Icon icon={IconCheck} {size} />
</div>
{:else}
<Icon icon={IconCheck} {size} />
{/if}
<div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
<Icon icon={IconCheck} {size} />
</div>
{/if}
</div>
{/if}
<span class="label">
{#if obj._id === selected}
<div bind:this={selectedDiv}>
<div class="flex flex-grow overflow-label">
<UserInfo size={'x-small'} value={obj} {icon} />
</div>
</div>
{:else}
<div class="flex flex-grow overflow-label">
<UserInfo size={'x-small'} value={obj} {icon} />
</div>
{/if}
</span>
<UserInfo size={'x-small'} value={obj} {icon} />
</button>
</svelte:fragment>
</ListView>
</div>
</div>
{#if cHeight === -1}
<div class="background-content-accent-color" style:height={'3px'} />
<div class="whereSelected" />
{/if}
</div>

4
plugins/contact-resources/src/components/Avatar.svelte
View File

@ -143,7 +143,7 @@
img {
object-fit: cover;
border: 2px solid var(--avatar-border-color);
border: 1px solid var(--avatar-border-color);
}
&.no-img {
border-color: transparent;
@ -195,7 +195,7 @@
}
.ava-mask {
position: absolute;
border: 2px solid var(--avatar-border-color);
border: 1px solid var(--avatar-border-color);
border-radius: 50%;
}

1
plugins/contact-resources/src/components/ChannelsDropdown.svelte
View File

@ -293,6 +293,7 @@
bind:input={addBtn}
icon={contact.icon.SocialEdit}
label={displayItems.length === 0 ? presentation.string.AddSocialLinks : undefined}
notSelected={displayItems.length === 0}
{kind}
{size}
{shape}

2
plugins/contact-resources/src/components/UserInfo.svelte
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-color overflow-label text-left">{getName(value)}</div>
<div class="label overflow-label text-left">{getName(value)}</div>
</div>
</div>

2
plugins/notification-assets/assets/icons.svg
View File

@ -5,7 +5,7 @@
</symbol>
<symbol id="track" viewBox="0 0 24 24">
<path d="M21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.1-0.9c-0.5,0.2-1.1,0.4-1.6,0.4l0.1,0.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2 c0.4,0.6,0.7,1.2,0.7,1.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4 l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1c1,0,1.9,0.3,2.7,0.7c0.4-0.5,0.9-0.9,1.4-1.1C15,1.5,13.5,1,12,1 C8.2,1,5,3.9,4.5,7.7l-0.4,2.7c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3 c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5C10.1,22.6,11,23,12,23s2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3 c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3C22.9,16.8,22.6,16.2,21.7,15z M13.6,20.6c-1,0.8-2.3,0.8-3.2,0 c-0.4-0.2-0.6-0.7-0.8-1.2h4.9C14.2,19.9,14,20.3,13.6,20.6z" />
<circle fill="var(--warning-color)" cx="18" cy="5.9" r="3"/>
<circle fill="var(--theme-warning-color)" cx="18" cy="5.9" r="3"/>
</symbol>
<symbol id="donttrack" viewBox="0 0 24 24">
<path d="M21.7,15l-0.2,0.1L21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.4-2.7C19,3.9,15.8,1,12,1S5,3.9,4.5,7.7l-0.4,2.7 c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5 C10.1,22.6,11,23,12,23c1,0,2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3 C22.9,16.8,22.6,16.2,21.7,15z M14.5,19.4c-0.2,0.5-0.5,0.8-0.8,1.2l0,0c-1,0.8-2.3,0.8-3.2,0c-0.4-0.2-0.6-0.7-0.8-1.2H14.5z M20.9,17.5c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2 l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1s5.4,2.1,5.7,5.1l0.4,2.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2c0.4,0.6,0.7,1.2,0.7,1.3 C21,17.4,20.9,17.4,20.9,17.5z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

2
plugins/recruit-resources/src/components/CreateApplication.svelte
View File

@ -403,7 +403,7 @@
on:click={() => {
showPopup(
ColorPopup,
{ value: states, searchable: true, placeholder: ui.string.SearchDots },
{ value: states, searchable: true, placeholder: ui.string.SearchDots, selected: selectedState?._id },
btn,
(result) => {
if (result && result.id) {

3
plugins/recruit-resources/src/components/CreateCandidate.svelte
View File

@ -702,6 +702,7 @@
focusIndex={103}
label={recruit.string.AddDropHere}
icon={IconAttachment}
notSelected
on:click={() => {
inputFile.click()
}}
@ -727,7 +728,7 @@
<style lang="scss">
.resume {
box-shadow: 0 0 0 0 var(--primary-button-focused-border);
border-radius: 0.5rem;
border-radius: 0.25rem;
transition: box-shadow 0.15s ease-in-out;
&.solid {

9
plugins/recruit-resources/src/components/YesNo.svelte
View File

@ -38,6 +38,7 @@
{justify}
{width}
{disabled}
notSelected={value === undefined}
showTooltip={{ label: tooltip, direction: labelDirection }}
on:click={() => {
if (value === true) value = false
@ -47,7 +48,7 @@
>
<svelte:fragment slot="content">
<div class="flex-row-center flex-no-wrap pointer-events-none">
<span class="overflow-label">
<span class="label overflow-label">
<Label {label} />
</span>
<div class="btn-icon ml-1">
@ -74,14 +75,14 @@
<style lang="scss">
.btn-icon {
color: var(--content-color);
color: var(--theme-content-color);
transition: color 0.15s;
pointer-events: none;
&:hover {
color: var(--caption-color);
color: var(--theme-caption-color);
}
&:disabled:hover {
color: var(--content-color);
color: var(--theme-content-color);
}
}

37
plugins/tags-resources/src/components/TagItem.svelte
View File

@ -50,7 +50,7 @@
</span>
{:else}
<div
class="text-sm flex flex-between tag-item"
class="tag-item"
style={`${getTagStyle(getPlatformColor(tag?.color ?? element?.color ?? 0), selected)}`}
on:click
on:keydown
@ -61,16 +61,16 @@
}}
>
<span class="overflow-label max-w-40">{name}</span>
<span class="ml-1">
{#if tag && tagIcon && schema !== '0'}
{#if tag && tagIcon && schema !== '0'}
<span class="ml-1">
<Icon icon={tagIcon} size={'small'} />
{/if}
</span>
</span>
{/if}
{#if action}
<div class="ml-1">
<div class="flex-center ml-1">
<ActionIcon
icon={action}
size={'medium'}
size={'small'}
action={() => {
dispatch('action')
}}
@ -82,29 +82,28 @@
<style lang="scss">
.tag-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.125rem;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
padding: 0 0.25rem;
min-width: 0;
min-height: 1.5rem;
text-transform: uppercase;
font-weight: 500;
font-size: 0.75rem;
color: var(--theme-content-color);
border-radius: 0.25rem;
text-transform: uppercase;
color: var(--accent-color);
&:hover {
color: var(--caption-color);
color: var(--theme-caption-color);
}
display: flex;
align-items: center;
justify-content: center;
}
.tag-item-inline {
position: relative;
padding-left: 0.75rem;
font-weight: 500;
color: var(--accent-color);
color: var(--theme-content-color);
&::before {
position: absolute;

24
plugins/tags-resources/src/components/TagsPopup.svelte
View File

@ -20,7 +20,7 @@
import { TagCategory, TagElement } from '@hcengineering/tags'
import {
Button,
CheckBox,
IconCheck,
getPlatformColor,
Icon,
IconAdd,
@ -174,19 +174,26 @@
({catObjects.length})
{/if}
</span>
<span class="counter">{getCount(cat)}</span>
<span class="counter">
{#key selected}
{getCount(cat)}
{/key}
</span>
</div>
</button>
<div class="menu-group">
{#each catObjects.slice(0, 50) as element}
<button
class="menu-item"
class="menu-item no-focus"
class:selected={isSelected(selected, element)}
on:click={() => {
checkSelected(selected, element)
}}
>
<div class="check pointer-events-none">
<CheckBox checked={isSelected(selected, element)} primary />
<div class="check">
{#if isSelected(selected, element)}
<Icon icon={IconCheck} size={'small'} />
{/if}
</div>
<div class="tag" style="background-color: {getPlatformColor(element.color)};" />
<span class="lines-limit-2">{element.title}</span>
@ -210,11 +217,12 @@
<style lang="scss">
.counter {
margin-top: -0.125rem;
padding-right: 0.125rem;
min-width: 1.5rem;
text-align: right;
font-size: 0.8125rem;
color: var(--caption-color);
color: var(--theme-caption-color);
}
.empty {
display: flex;
@ -222,7 +230,7 @@
align-items: center;
height: 100%;
font-size: 0.75rem;
color: var(--dark-color);
border-top: 1px solid var(--popup-divider);
color: var(--theme-dark-color);
border-top: 1px solid var(--theme-popup-divider);
}
</style>

14
plugins/tracker-resources/src/components/ComponentSelector.svelte
View File

@ -122,16 +122,14 @@
icon={tracker.icon.Components}
disabled={!isEditable}
{loading}
notSelected={!value}
{short}
on:click={handleComponentEditorOpened}
><svelte:fragment slot="content">
<span
class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
? 'content-color'
: 'caption-color'} pointer-events-none"
>
>
<svelte:fragment slot="content">
<span class="label {enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label pointer-events-none">
<Label label={getEmbeddedLabel(componentText)} />
</span>
</svelte:fragment></Button
>
</svelte:fragment>
</Button>
{/if}

2
plugins/tracker-resources/src/components/CreateIssue.svelte
View File

@ -561,7 +561,7 @@
kind={'secondary'}
size={'large'}
label={tracker.string.NoIssueTemplate}
icon={tracker.icon.Issues}
icon={tracker.icon.IssueTemplates}
searchField={'title'}
allowDeselect={true}
showNavigate={false}

6
plugins/tracker-resources/src/components/components/ComponentStatusSelector.svelte
View File

@ -41,7 +41,11 @@
: tracker.string.Backlog
: undefined
$: statusesInfo = defaultComponentStatuses.map((s) => ({ id: s, ...componentStatusAssets[s] }))
$: statusesInfo = defaultComponentStatuses.map((s) => ({
id: s,
isSelected: componentStatusAssets[s].label === selectedStatusLabel,
...componentStatusAssets[s]
}))
const handleComponentStatusEditorOpened = (event: MouseEvent) => {
if (!isEditable) {

2
plugins/tracker-resources/src/components/issues/IssueNotification.svelte
View File

@ -117,7 +117,7 @@
{params?.subTitlePostfix}
</span>
</div>
<div class="flex-between">
<div class="flex-between gap-2">
<Button label={tracker.string.ViewIssue} on:click={handleIssueOpened} />
<Button icon={tracker.icon.CopyURL} label={tracker.string.CopyIssueUrl} on:click={handleCopyUrl} />
</div>

11
plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
View File

@ -42,7 +42,7 @@
const client = getClient()
const dispatch = createEventDispatcher()
const prioritiesInfo = defaultPriorities.map((p) => ({ id: p, ...issuePriorities[p] }))
let selectedPriority: IssuePriority | undefined = value.priority
const handlePriorityEditorOpened = (event: MouseEvent) => {
event.stopPropagation()
@ -64,12 +64,21 @@
return
}
selectedPriority = newPriority
dispatch('change', newPriority)
if ('_class' in value) {
await client.update(value, { priority: newPriority })
}
}
$: prioritiesInfo = defaultPriorities.map((p) => {
return {
id: p,
isSelected: selectedPriority === p,
...issuePriorities[p]
}
})
</script>
{#if value}

2
plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
View File

@ -132,7 +132,7 @@
color: var(--theme-error-color) !important;
}
.showWarning {
color: var(--warning-color) !important;
color: var(--theme-warning-color) !important;
}
.romColor {
color: var(--theme-content-color) !important;

19
plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
View File

@ -73,19 +73,25 @@
selectedSprint = sprints.find((it) => it._id === newSprintId)
}
const getSprintInfo = (rawSprints: Sprint[]) => {
const getSprintInfo = (rawSprints: Sprint[], sp: Sprint | undefined) => {
return [
{ id: null, icon: tracker.icon.Sprint, label: tracker.string.NoSprint },
{
id: null,
icon: tracker.icon.Sprint,
label: tracker.string.NoSprint,
isSelected: sp === undefined
},
...rawSprints.map((p) => ({
id: p._id,
icon: tracker.icon.Sprint,
text: p.label,
isSelected: sp ? p._id === sp._id : false,
category: sprintStatusAssets[p.status]
}))
]
}
$: sprints = getSprintInfo(rawSprints)
$: sprints = getSprintInfo(rawSprints, selectedSprint)
const handleSprintEditorOpened = async (event: MouseEvent): Promise<void> => {
event.stopPropagation()
@ -138,15 +144,12 @@
{showTooltip}
icon={sprintIcon}
disabled={!isEditable}
notSelected={!value}
{short}
on:click={handleSprintEditorOpened}
>
<svelte:fragment slot="content">
<span
class="{enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label {!value
? 'content-color'
: 'caption-color'} pointer-events-none"
>
<span class="label {enlargedText ? 'text-base' : 'text-md'} fs-bold overflow-label pointer-events-none">
<Label label={getEmbeddedLabel(sprintText)} />
</span>
</svelte:fragment>

6
plugins/tracker-resources/src/components/sprints/SprintStatusSelector.svelte
View File

@ -40,7 +40,11 @@
: tracker.string.Planned
: undefined
$: statusesInfo = defaultSprintStatuses.map((s) => ({ id: s, ...sprintStatusAssets[s] }))
$: statusesInfo = defaultSprintStatuses.map((s) => ({
id: s,
isSelected: sprintStatusAssets[s].label === selectedStatusLabel,
...sprintStatusAssets[s]
}))
const handleSprintStatusEditorOpened = (event: MouseEvent) => {
if (!isEditable) {

1
plugins/tracker-resources/src/components/templates/EstimationEditor.svelte
View File

@ -65,6 +65,7 @@
label={tracker.string.TimeSpendValue}
labelParams={{ value: value.estimation }}
icon={tracker.icon.Estimation}
notSelected={value.estimation === 0}
{justify}
{width}
{size}

5
plugins/view-resources/src/components/StringEditor.svelte
View File

@ -43,6 +43,7 @@
{size}
{justify}
{width}
notSelected={!value}
on:click={(ev) => {
if (!shown && !readonly) {
showPopup(EditBoxPopup, { value }, eventToHTMLElement(ev), (res) => {
@ -57,9 +58,9 @@
>
<svelte:fragment slot="content">
{#if value}
<span class="overflow-label pointer-events-none">{value}</span>
<span class="label overflow-label pointer-events-none">{value}</span>
{:else}
<span class="content-dark-color pointer-events-none"><Label label={placeholder} /></span>
<span class="label pointer-events-none"><Label label={placeholder} /></span>
{/if}
</svelte:fragment>
</Button>

3
plugins/view-resources/src/components/StringPresenter.svelte
View File

@ -18,6 +18,7 @@
import { LabelAndProps, LinkWrapper, tooltip } from '@hcengineering/ui'
export let value: string | string[] | undefined
export let oneLine: boolean = false
$: tooltipParams = getTooltip(value)
@ -35,7 +36,7 @@
}
</script>
<span class="lines-limit-2 select-text" use:tooltip={tooltipParams}>
<span class="{oneLine ? 'overflow-label' : 'lines-limit-2'} select-text" use:tooltip={tooltipParams}>
{#if Array.isArray(value)}
{#each value as str, i}
<span class:ml-1={i !== 0}><LinkWrapper text={str} /></span>

12
plugins/view-resources/src/components/filter/FilterTypePopup.svelte
View File

@ -211,6 +211,8 @@
}
}
}
const elements: HTMLElement[] = []
</script>
<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
@ -218,8 +220,12 @@
{#each getTypes(_class) as type, i}
{#if filter === undefined && type.component === view.component.ObjectFilter && hasNested(type)}
<Submenu
bind:element={elements[i]}
on:keydown={(event) => keyDown(event, i)}
on:click={(event) => {
on:mouseover={() => {
elements[i]?.focus()
}}
on:click={() => {
click(type)
}}
icon={type.icon}
@ -236,7 +242,7 @@
on:mouseover={(event) => {
event.currentTarget.focus()
}}
on:click={(event) => {
on:click={() => {
click(type)
}}
>
@ -245,7 +251,7 @@
<Icon icon={type.icon} size={'small'} />
{/if}
</div>
<div class="pr-1"><Label label={type.label} /></div>
<div class="overflow-label pr-1"><Label label={type.label} /></div>
</button>
{/if}
{/each}

13
plugins/view-resources/src/components/filter/ObjectFilter.svelte
View File

@ -19,7 +19,8 @@
import ui, {
addNotification,
Button,
CheckBox,
Icon,
IconCheck,
deviceOptionsStore,
Label,
Loading,
@ -189,12 +190,14 @@
}}
>
<div class="flex-between w-full">
<div class="flex clear-mins overflow-label">
<div class="flex-row-center">
<div class="check pointer-events-none">
<CheckBox checked={isSelected(value, filter.value)} primary />
{#if isSelected(value, filter.value)}
<Icon icon={IconCheck} size={'small'} />
{/if}
</div>
{#if value}
<svelte:component this={attribute.presenter} {value} {...attribute.props} disabled />
<svelte:component this={attribute.presenter} {value} {...attribute.props} disabled oneLine />
{:else}
<Label label={ui.string.NotSelected} />
{/if}
@ -214,7 +217,7 @@
</div>
</div>
<Button
shape={'round'}
shape={'filter'}
label={view.string.Apply}
on:click={() => {
onChange(filter)

13
plugins/view-resources/src/components/filter/ValueFilter.svelte
View File

@ -16,7 +16,7 @@
import { Class, Doc, FindResult, getObjectValue, Ref, SortingOrder, Space } from '@hcengineering/core'
import { translate } from '@hcengineering/platform'
import presentation, { getClient } from '@hcengineering/presentation'
import ui, { Button, CheckBox, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
import ui, { Button, Icon, IconCheck, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
import { Filter } from '@hcengineering/view'
import { onMount } from 'svelte'
import { getPresenter } from '../../utils'
@ -144,21 +144,24 @@
{#each Array.from(values.keys()) as value}
{@const realValue = [...(realValues.get(value) ?? [])][0]}
<button
class="menu-item"
class="menu-item no-focus"
on:click={() => {
toggle(value)
}}
>
<div class="flex-between w-full">
<div class="flex clear-mins">
<div class="flex-row-center">
<div class="check pointer-events-none">
<CheckBox checked={isSelected(value, selectedValues)} primary />
{#if isSelected(value, selectedValues)}
<Icon icon={IconCheck} size={'small'} />
{/if}
</div>
{#if value !== undefined}
<svelte:component
this={attribute.presenter}
value={typeof value === 'string' ? realValue : value}
{...attribute.props}
oneLine
/>
{:else}
<Label label={ui.string.NotSelected} />
@ -175,7 +178,7 @@
</div>
</div>
<Button
shape={'round'}
shape={'filter'}
label={view.string.Apply}
on:click={() => {
filter.value = Array.from(selectedValues.values()).map((p) => {

2
plugins/workbench-resources/src/components/App.svelte
View File

@ -149,7 +149,7 @@
opacity: 1;
}
&.hidden {
color: var(--warning-color);
color: var(--theme-warning-color);
transform: scale(0.7);
opacity: 0.5;

5
plugins/workbench-resources/src/components/HelpAndSupport.svelte
View File

@ -134,9 +134,10 @@
</div>
</div>
{/each}
<div class="flex-grow" />
{:else}
<!-- Keyboard shortcuts -->
<Scroller padding={'0 .5rem'} fade={topSP}>
<Scroller padding={'0 .5rem'} fade={topSP} noStretch checkForHeaders>
<ListView count={actions.length} noScroll addClass={'rounded'} bind:selection>
<svelte:fragment slot="category" let:item>
{@const action = actions[item]}
@ -220,7 +221,7 @@
display: flex;
justify-content: flex-end;
align-items: flex-end;
margin: 0 1rem;
margin: 0 0.5rem 0.5rem;
padding-top: 0.625rem;
}
.key-box {