diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json index 550a0d93b3..48dbcb2140 100644 --- a/packages/presentation/lang/en.json +++ b/packages/presentation/lang/en.json @@ -22,6 +22,7 @@ "NoMatchesInThis": "No matches in this {space}", "NoMatchesFound": "No matches found", "NotInThis": "Not in this {space}", + "Match": "Match", "Add": "Add", "Edit": "Edit", "DocumentPreview": "Preview", diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json index ab991496ce..1c72ee82b7 100644 --- a/packages/presentation/lang/ru.json +++ b/packages/presentation/lang/ru.json @@ -22,6 +22,7 @@ "NoMatchesInThis": "В этом {space} совпадения не обнаружены", "NoMatchesFound": "Не найдено соответствий", "NotInThis": "Не в этом {space}", + "Match": "Совпадение", "Add": "Добавить", "Edit": "Редактировать", "DocumentPreview": "Предпросмотр", diff --git a/packages/presentation/src/plugin.ts b/packages/presentation/src/plugin.ts index 7ddf92fb7f..3d4f0b1067 100644 --- a/packages/presentation/src/plugin.ts +++ b/packages/presentation/src/plugin.ts @@ -62,6 +62,7 @@ export default plugin(presentationId, { NoMatchesInThis: '' as IntlString, NoMatchesFound: '' as IntlString, NotInThis: '' as IntlString, + Match: '' as IntlString, Add: '' as IntlString, Edit: '' as IntlString, DocumentPreview: '' as IntlString, diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 2a68549229..97942a37fd 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -968,6 +968,9 @@ a.no-line { .content-color { color: var(--theme-content-color); } .caption-color { color: var(--theme-caption-color); } +.secondary-textColor { color: var(--global-secondary-TextColor) !important; } +.tertiary-textColor { color: var(--global-tertiary-TextColor) !important; } + .content-primary-color { color: var(--primary-button-color); } .red-color { color: var(--highlight-red); } .error-color { color: var(--theme-error-color); } diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss index e95bff0860..a39c2340e7 100644 --- a/packages/theme/styles/_lumia-colors.scss +++ b/packages/theme/styles/_lumia-colors.scss @@ -48,6 +48,7 @@ --global-accent-TextColor: #4D7FF5; --global-focus-BorderColor: #2A59D6; --global-popover-ShadowColor: #0E131E59; + --global-modal-ShadowColor: #0E131E73; /** Buttons **/ --button-subtle-LabelColor: #fff; @@ -102,6 +103,7 @@ --global-accent-TextColor: #3566E2; --global-focus-BorderColor: #204DC8; --global-popover-ShadowColor: #0E131E1F; + --global-modal-ShadowColor: #0E131E14; /** Buttons **/ --button-subtle-LabelColor: #000; diff --git a/packages/theme/styles/_vars.scss b/packages/theme/styles/_vars.scss index a48d1f169f..d621e265a6 100644 --- a/packages/theme/styles/_vars.scss +++ b/packages/theme/styles/_vars.scss @@ -20,6 +20,7 @@ --spacing-0_5: 0.25rem; --spacing-0_75: 0.375rem; --spacing-1: 0.5rem; + --spacing-1_25: 0.625rem; --spacing-1_5: 0.75rem; --spacing-1_75: 0.875rem; --spacing-2: 1rem; @@ -63,4 +64,8 @@ --global-popover-ShadowSpread: 0; --global-popover-ShadowX: 0; --global-popover-ShadowY: 0.5rem; + --global-modal-ShadowBlur: 1.5rem; + --global-modal-ShadowSpread: 0.25rem; + --global-modal-ShadowX: 0; + --global-modal-ShadowY: 1.5rem; } diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 5efd187f30..178a34c45c 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -173,7 +173,6 @@ border-top: 1px solid transparent; .hulyModal-content { - padding: var(--spacing-2) var(--spacing-1_5); height: 100%; &__titleGroup { @@ -222,14 +221,35 @@ flex-direction: row-reverse; flex-shrink: 0; gap: var(--spacing-1); - padding: var(--spacing-2) var(--spacing-2_5); border-top: 1px solid var(--theme-divider-color); // var(--global-surface-01-BorderColor); } - &.type-aside .hulyHeader-container { - border-radius: 0 var(--small-focus-BorderRadius) 0 0; + &.type-aside { + .hulyHeader-container { + border-radius: 0 var(--small-focus-BorderRadius) 0 0; - .hulyHeader-titleGroup { + .hulyHeader-buttonsGroup { + gap: var(--spacing-0_5); + } + } + .hulyModal-footer { + padding: var(--spacing-2) var(--spacing-2_5); + } + } + &.type-popup { + min-width: 45rem; + background-color: var(--theme-popup-color); // var(--global-surface-02-BackgroundColor); + border: 1px solid var(--theme-popup-divider); // var(--global-surface-02-BorderColor); + border-radius: var(--large-BorderRadius); + box-shadow: var(--global-modal-ShadowX) var(--global-modal-ShadowY) var(--global-modal-ShadowBlur) var(--global-modal-ShadowSpread) var(--global-popover-ShadowColor); + + .hulyModal-footer { + padding: var(--spacing-1_5); + } + } + &.type-aside, + &.type-popup { + .hulyHeader-container .hulyHeader-titleGroup { text-transform: uppercase; font-family: var(--font-family); font-weight: 500; @@ -238,9 +258,6 @@ line-height: 1rem; color: var(--global-secondary-TextColor); } - .hulyHeader-buttonsGroup { - gap: var(--spacing-0_5); - } } textarea { font-weight: 400 !important; @@ -255,6 +272,10 @@ color: var(--global-tertiary-TextColor); background-color: var(--global-ui-BackgroundColor); border-radius: var(--extra-small-BorderRadius); + + &.error { + color: var(--button-negative-loading-LabelColor); + } } .hulyHotKey-item { diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 2c9ba246d6..34cce0f224 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -64,8 +64,12 @@ &:not(.small) { font-size: .875rem; } &.small { font-size: .75rem; } - &:not(.dark) { color: var(--global-on-accent-TextColor); } - &.dark { color: var(--global-secondary-TextColor); } + &:not(.dark) { + color: var(--global-primary-TextColor); // var(--global-on-accent-TextColor); + } + &.dark { + color: var(--theme-dark-color); // var(--global-secondary-TextColor); + } } &:hover { diff --git a/packages/theme/styles/tables.scss b/packages/theme/styles/tables.scss index 37a3f1156b..a78349fc25 100644 --- a/packages/theme/styles/tables.scss +++ b/packages/theme/styles/tables.scss @@ -41,6 +41,13 @@ width: var(--global-min-Size); height: var(--global-min-Size); } + .buttons-group { + display: flex; + align-items: center; + gap: var(--spacing-1); + min-width: 0; + min-height: 0; + } } .hulyTableAttr-content { display: flex; @@ -108,6 +115,10 @@ border-radius: var(--extra-small-BorderRadius); border: none; outline: none; + + &.drag { + cursor: grab !important; + } } &-icon { width: var(--global-min-Size); @@ -173,10 +184,11 @@ color: var(--global-primary-LinkColor); } } + &.options .hulyTableAttr-content__row, &.class .hulyTableAttr-content__row, &.task .hulyTableAttr-content__row { &.hovered, - &:hover { + &:not(.disableMouseOver):hover { background-color: var(--theme-table-header-color); // var(--global-surface-03-hover-BackgroundColor); } &.selected { @@ -195,6 +207,7 @@ } } } + &.options, &.class { padding: var(--spacing-1); @@ -203,12 +216,31 @@ padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1); &.hovered .hulyTableAttr-content__row-arrow, - &:hover .hulyTableAttr-content__row-arrow, + &:not(.disableMouseOver):hover .hulyTableAttr-content__row-arrow, &.selected .hulyTableAttr-content__row-arrow { display: block; } } } + &.options .hulyTableAttr-content__row { + padding: var(--spacing-1); + min-height: var(--global-large-Size); + + &:not(.hovered) button.type-button-icon { + display: none; + } + &.disableMouseOver, + &-dragMenu { + cursor: default; + } + label.editbox-wrapper { + padding: 0 !important; + height: var(--global-extra-small-Size) !important; + } + &:hover button.type-button-icon { + display: inline-flex; + } + } &.task { .hulyTableAttr-content__row { gap: var(--spacing-1); diff --git a/packages/ui/src/components/ButtonBase.svelte b/packages/ui/src/components/ButtonBase.svelte index 3c69133620..e11404c931 100644 --- a/packages/ui/src/components/ButtonBase.svelte +++ b/packages/ui/src/components/ButtonBase.svelte @@ -14,7 +14,8 @@ --> @@ -44,6 +46,7 @@ class:inheritColor class:menu={hasMenu} disabled={loading || disabled} + use:tp={tooltip} on:click > {#if loading} @@ -299,6 +302,9 @@ } } } + & > * { + pointer-events: none; + } } @keyframes rotate { diff --git a/packages/ui/src/components/ButtonIcon.svelte b/packages/ui/src/components/ButtonIcon.svelte index c3d58f93f7..645b8b0a9a 100644 --- a/packages/ui/src/components/ButtonIcon.svelte +++ b/packages/ui/src/components/ButtonIcon.svelte @@ -14,7 +14,7 @@ --> diff --git a/packages/ui/src/components/Header.svelte b/packages/ui/src/components/Header.svelte index 3784369bca..57b199ae68 100644 --- a/packages/ui/src/components/Header.svelte +++ b/packages/ui/src/components/Header.svelte @@ -16,7 +16,7 @@ import { createEventDispatcher } from 'svelte' import { IconMaximize, IconMinimize, IconClose, ButtonIcon } from '..' - export let type: 'type-aside' | 'type-component' = 'type-component' + export let type: 'type-aside' | 'type-popup' | 'type-component' = 'type-component' export let minimize: boolean = false const dispatch = createEventDispatcher() @@ -41,8 +41,8 @@ {/if} - {#if type === 'type-aside'} -
+ {#if type !== 'type-component'} + {#if type !== 'type-popup'}
{/if}
Esc
dispatch('close')} /> {/if} diff --git a/packages/ui/src/components/Modal.svelte b/packages/ui/src/components/Modal.svelte index 27ed015cad..a210522dfd 100644 --- a/packages/ui/src/components/Modal.svelte +++ b/packages/ui/src/components/Modal.svelte @@ -20,11 +20,9 @@ import ButtonIcon from './ButtonIcon.svelte' import ButtonBase from './ButtonBase.svelte' import Scroller from './Scroller.svelte' - import IconDelete from './icons/Delete.svelte' - import IconCopy from './icons/Copy.svelte' import ui from '..' - export let type: 'type-aside' | 'type-component' + export let type: 'type-aside' | 'type-popup' | 'type-component' export let label: IntlString export let labelProps: any | undefined = undefined export let okAction: () => Promise | void @@ -49,26 +47,42 @@
- +
- {#if type === 'type-aside'} + {#if type !== 'type-component'}
- +
{/if}
diff --git a/packages/ui/src/components/ModernEditbox.svelte b/packages/ui/src/components/ModernEditbox.svelte index 8ac11d3a34..55b7230d34 100644 --- a/packages/ui/src/components/ModernEditbox.svelte +++ b/packages/ui/src/components/ModernEditbox.svelte @@ -4,7 +4,7 @@ // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0). // - import { createEventDispatcher } from 'svelte' + import { createEventDispatcher, onMount } from 'svelte' import { IntlString, translate } from '@hcengineering/platform' import Label from './Label.svelte' import { themeStore } from '..' @@ -17,6 +17,9 @@ export let error: boolean = false export let password: boolean = false export let limit: number = 0 + export let element: HTMLInputElement | undefined = undefined + export let autoFocus: boolean = false + export let width: string = '' const dispatch = createEventDispatcher() @@ -28,14 +31,23 @@ }) $: labeled = kind === 'default' && size === 'large' $: placeholder = labeled ? ' ' : placeholderStr + + onMount(() => { + if (autoFocus && element) { + autoFocus = false + element.focus() + } + })