diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json index f5759d80f5..4454b56c7a 100644 --- a/packages/presentation/lang/en.json +++ b/packages/presentation/lang/en.json @@ -13,6 +13,7 @@ "Remove": "Remove", "Members": "Members", "Search": "Search...", - "Unassigned": "Unassigned" + "Unassigned": "Unassigned", + "CreateMore": "Create more" } } diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json index 5282157e1f..f9dc485814 100644 --- a/packages/presentation/lang/ru.json +++ b/packages/presentation/lang/ru.json @@ -13,6 +13,7 @@ "Remove": "Удалить", "Members": "Участники", "Search": "Поиск...", - "Unassigned": "Не назначен" + "Unassigned": "Не назначен", + "CreateMore": "Создать еще" } } diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte index e1fd6bb441..a1ad2c5c4e 100644 --- a/packages/presentation/src/components/Card.svelte +++ b/packages/presentation/src/components/Card.svelte @@ -20,7 +20,7 @@ import { createEventDispatcher } from 'svelte' import type { Ref, Class, Space, DocumentQuery } from '@anticrm/core' - import { Button, Label } from '@anticrm/ui' + import { Button, Label, IconClose, MiniToggle } from '@anticrm/ui' import SpaceSelect from './SpaceSelect.svelte' import presentation from '..' @@ -34,31 +34,50 @@ export let okAction: () => void export let canSave: boolean = false export let size: 'small'| 'medium' = 'small' - + export let createMore: boolean | undefined = undefined export let okLabel: IntlString = presentation.string.Create export let cancelLabel: IntlString = presentation.string.Cancel const dispatch = createEventDispatcher() -
{} }> + {} }>
-
- {#if $$slots.error} -
- -
- {/if} +
+ {#if spaceClass && spaceLabel && spacePlaceholder} + {#if $$slots.space} + + {:else} + + {/if} + › + {/if} + +
+
+
- {#if spaceClass && spaceLabel && spacePlaceholder} + {#if (spaceClass && spaceLabel && spacePlaceholder) || $$slots.pool}
-
- +
{/if} -
-
+
+ + {#if $$slots.error} +
+ +
+ {/if} +
diff --git a/packages/presentation/src/components/SpaceSelect.svelte b/packages/presentation/src/components/SpaceSelect.svelte index 2e4834ca85..3c25ee67dc 100644 --- a/packages/presentation/src/components/SpaceSelect.svelte +++ b/packages/presentation/src/components/SpaceSelect.svelte @@ -17,7 +17,7 @@ import type { IntlString } from '@anticrm/platform' import { getClient } from '../utils' - import { Label, showPopup, IconFolder } from '@anticrm/ui' + import { Label, showPopup, IconFolder, Button } from '@anticrm/ui' import SpacesPopup from './SpacesPopup.svelte' import type { Ref, Class, Space, DocumentQuery } from '@anticrm/core' @@ -27,10 +27,8 @@ export let label: IntlString export let placeholder: IntlString export let value: Ref | undefined - export let show: boolean = false let selected: Space | undefined - let btn: HTMLElement const client = getClient() @@ -39,43 +37,21 @@ } $: updateSelected(value) - - onMount(() => { - if (btn && show) { - btn.click() - show = false - } - }) -
{ - showPopup(SpacesPopup, { _class, spaceQuery }, btn, (result) => { +
- - + + {#if selected}{selected.name}{:else} + diff --git a/packages/presentation/src/plugin.ts b/packages/presentation/src/plugin.ts index 9aa2fcc506..bff0f11e1a 100644 --- a/packages/presentation/src/plugin.ts +++ b/packages/presentation/src/plugin.ts @@ -42,7 +42,8 @@ export default plugin(presentationId, { Remove: '' as IntlString, Members: '' as IntlString, Search: '' as IntlString, - Unassigned: '' as IntlString + Unassigned: '' as IntlString, + CreateMore: '' as IntlString }, metadata: { RequiredVersion: '' as Metadata diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index e13120e4d2..093a8b95b9 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -244,8 +244,7 @@ p:last-child { margin-block-end: 0; } } .gap-1, .gap-1-5, .gap-2 { - & > * { margin-right: .25rem; } - & > *:last-child { margin-right: 0; } + & > *:not(:last-child) { margin-right: .25rem; } &.reverse { flex-direction: row-reverse; & > :last-child { margin-right: .25rem; } @@ -293,6 +292,8 @@ p:last-child { margin-block-end: 0; } .ml-6 { margin-left: 1.5rem; } .ml-8 { margin-left: 2rem; } .ml-10 { margin-left: 2.5rem; } +.ml-12 { margin-left: 3rem; } +.ml-22 { margin-left: 5.5rem; } .mr-1 { margin-right: .25rem; } .mr-2 { margin-right: .5rem; } .mr-3 { margin-right: .75rem; } @@ -300,6 +301,7 @@ p:last-child { margin-block-end: 0; } .mr-6 { margin-right: 1.5rem; } .mr-8 { margin-right: 2rem; } .mr-10 { margin-right: 2.5rem; } +.mt-0-5 { margin-top: .125rem; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } @@ -317,6 +319,7 @@ p:last-child { margin-block-end: 0; } .mx-1 { margin: 0 .25rem; } .mx-2 { margin: 0 .5rem; } .mx-3 { margin: 0 .75rem; } +.my-4 { margin: 1rem 0; } .pr-1 { padding-right: .25rem; } .pr-4 { padding-right: 1rem; } @@ -377,6 +380,7 @@ p:last-child { margin-block-end: 0; } .min-w-4 { min-width: 1rem; } .min-w-9 { min-width: 2.25rem; } .min-h-0 { min-height: 0; } +.min-w-min { min-width: min-content; } .clear-mins { min-width: 0; min-height: 0; @@ -540,13 +544,14 @@ a.no-line { .background-bg-accent { background-color: var(--theme-bg-accent-color); } .background-bg-accent-normal { background-color: var(--theme-bg-accent-normal); } -.content-color { color: var(--theme-content-color); } +.content-color { color: var(--content-color); } .content-trans-color { color: var(--theme-content-trans-color); } -.content-accent-color { color: var(--theme-content-accent-color); } +.content-accent-color { color: var(--accent-color); } .content-dark-color { color: var(--theme-content-dark-color); } -.caption-color { color: var(--theme-caption-color); } +.caption-color { color: var(--caption-color); } .red-color { color: var(--highlight-red); } +.error-color { color: var(--error-color); } .border-radius-4 { border-radius: 1rem; } .border-radius-3 { border-radius: 0.75rem; } diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss index 64c19874de..9d2bd1e61b 100644 --- a/packages/theme/styles/dialogs.scss +++ b/packages/theme/styles/dialogs.scss @@ -111,10 +111,14 @@ } .antiCard-content { + display: flex; + flex-direction: column; flex-shrink: 0; flex-grow: 1; margin: 0 1rem; height: fit-content; + + & > *:not(:last-child) { margin-bottom: 1rem; } } .antiCard-pool { @@ -157,20 +161,25 @@ display: flex; align-items: center; min-width: 0; + + & > *:not(:first-child) { margin-left: .375rem; } } &__divider, &__title { - margin-left: .375rem; font-weight: 400; font-size: .8125rem; } &__divider { color: var(--content-color); } &__title { color: var(--accent-color); } } - .antiCard-content { margin: 0 1.125rem; } + .antiCard-content { margin: .5rem 1.125rem 1rem; } .antiCard-pool { flex-direction: row; - margin: .375rem .75rem .75rem; + align-items: center; + margin: 0 .75rem .75rem; + font-size: .75rem; + + & > *:not(:last-child) { margin-right: .375rem; } } .antiCard-footer { direction: ltr; @@ -182,6 +191,16 @@ border-top: 1px solid var(--button-bg-color); &.reverse { flex-direction: row-reverse; } + &__error { + flex-grow: 1; + display: flex; + margin-left: .375rem; + min-width: 0; + font-weight: 500; + font-size: .75rem; + color: var(--system-error-color); + &:empty { visibility: hidden; } + } } } } diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss index 37e345e846..d2449cdb9d 100644 --- a/packages/theme/styles/global.scss +++ b/packages/theme/styles/global.scss @@ -64,6 +64,7 @@ scrollbar-color: var(--theme-menu-color) var(--theme-bg-color); scrollbar-width: thin; --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto; + --timing-shadow: cubic-bezier(0,.65,.35,1); } ::-webkit-scrollbar { diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 1bb2388b6c..12ab51b071 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -70,6 +70,13 @@ width: 1rem; height: 1rem; } + .color { + margin-right: .75rem; + width: .875rem; + height: .875rem; + border: 1px solid rgba(0, 0, 0, .1); + border-radius: .25rem; + } .label { flex-grow: 1; min-width: 0; diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index 260a0b2c11..23ccdda2a0 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -22,7 +22,7 @@ export let label: IntlString | undefined = undefined export let labelParams: Record = {} - export let kind: 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'dangerous' = 'secondary' + export let kind: 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'link-bordered' | 'dangerous' = 'secondary' export let size: 'small' | 'medium' | 'large' | 'x-large' = 'medium' export let shape: 'circle' | undefined = undefined export let icon: Asset | AnySvelteComponent | undefined = undefined @@ -55,10 +55,11 @@ disabled={disabled || loading} style={width ? 'width: ' + width : ''} {title} + type={kind === 'primary' ? 'submit' : 'button'} on:click > {#if icon && !loading} -
{:else} - {#if label} -