diff --git a/packages/ui/src/components/NestedDropdown.svelte b/packages/ui/src/components/NestedDropdown.svelte index 1bcadc5764..b13771f5d2 100644 --- a/packages/ui/src/components/NestedDropdown.svelte +++ b/packages/ui/src/components/NestedDropdown.svelte @@ -17,7 +17,7 @@ import { createEventDispatcher } from 'svelte' import ui from '../plugin' import { showPopup } from '../popups' - import type { ButtonKind, DropdownIntlItem } from '../types' + import type { ButtonKind, ButtonSize, DropdownIntlItem } from '../types' import Button from './Button.svelte' import DropdownIcon from './icons/Dropdown.svelte' import NestedMenu from './NestedMenu.svelte' @@ -30,6 +30,9 @@ export let width: string | undefined = undefined export let kind: ButtonKind = 'regular' + export let size: ButtonSize | undefined = undefined + export let withIcon: boolean = false + export let withSelectIcon: boolean = true let container: HTMLElement let opened: boolean = false @@ -39,7 +42,7 @@ function openPopup (): void { if (!opened) { opened = true - showPopup(NestedMenu, { items }, container, (result) => { + showPopup(NestedMenu, { items, withIcon }, container, (result) => { if (result !== undefined) { selected = result dispatch('selected', result.id) @@ -51,12 +54,22 @@
-
diff --git a/packages/ui/src/components/NestedMenu.svelte b/packages/ui/src/components/NestedMenu.svelte index 2029044340..40e3f50042 100644 --- a/packages/ui/src/components/NestedMenu.svelte +++ b/packages/ui/src/components/NestedMenu.svelte @@ -18,10 +18,12 @@ import { resizeObserver } from '../resize' import { DropdownIntlItem } from '../types' import NestedMenu from './NestedMenu.svelte' + import Icon from './Icon.svelte' export let items: [DropdownIntlItem, DropdownIntlItem[]][] export let nestedFrom: DropdownIntlItem | undefined = undefined export let onSelect: ((val: DropdownIntlItem) => void) | undefined = undefined + export let withIcon: boolean = false const elements: HTMLElement[] = [] @@ -72,6 +74,11 @@ } }} > + {#if withIcon && nestedFrom.icon} +
+ +
+ {/if}
@@ -87,12 +94,15 @@ elements[i]?.focus() }} label={item[0].label} + icon={withIcon ? item[0].icon : undefined} + iconProps={item[0].iconProps} props={{ items: item[1].map((p) => { return [p, []] }), nestedFrom: item[0], - onSelect: onNestedSelect + onSelect: onNestedSelect, + withIcon }} options={{ component: NestedMenu }} /> @@ -110,6 +120,11 @@ click(item[0]) }} > + {#if withIcon && item[0].icon} +
+ +
+ {/if}
{/if} diff --git a/packages/ui/src/components/Submenu.svelte b/packages/ui/src/components/Submenu.svelte index af3bfa8ef8..cd8ad7e2f9 100644 --- a/packages/ui/src/components/Submenu.svelte +++ b/packages/ui/src/components/Submenu.svelte @@ -27,6 +27,7 @@ export let focusIndex = -1 export let icon: Asset | AnySvelteComponent | undefined = undefined + export let iconProps: Record = {} export let text: string | undefined = undefined export let label: IntlString | undefined = undefined export let labelProps: Record = {} @@ -58,7 +59,7 @@ {/if} {:else} {#if icon} -
+
{/if} {#if label}
{/if} - {#if space == null && !(extension?.hideSpace ?? false)} + {#if (space == null || allowChangeSpace) && !(extension?.hideSpace ?? false)}
@@ -145,28 +128,7 @@ space={undefined} on:change={({ detail }) => (resultQuery = detail)} /> -
- - - - - -
- +
{#each cards as card, index} {@const previousCard = cards[index - 1]} @@ -211,12 +173,6 @@ flex: 1; } - .create-card { - display: flex; - width: 100%; - margin: 1rem 0; - } - .header { display: flex; width: 100%; diff --git a/plugins/card-resources/src/components/NewCardForm.svelte b/plugins/card-resources/src/components/NewCardForm.svelte new file mode 100644 index 0000000000..68b2a17edb --- /dev/null +++ b/plugins/card-resources/src/components/NewCardForm.svelte @@ -0,0 +1,178 @@ + + +
+
+ +
+
+ { + if (evt.key === 'Enter') { + void okAction() + } + }} + /> +
+
+
+ + +
+ +
+
+ + diff --git a/plugins/card-resources/src/components/TypeSelector.svelte b/plugins/card-resources/src/components/TypeSelector.svelte index b6417be59a..2d461fadb0 100644 --- a/plugins/card-resources/src/components/TypeSelector.svelte +++ b/plugins/card-resources/src/components/TypeSelector.svelte @@ -15,13 +15,17 @@ @@ -77,6 +91,11 @@ items={classes} {width} {selected} + {kind} + {size} + {disabled} + withIcon={true} + withSelectIcon={false} on:selected={(e) => { value = e.detail dispatch('change', value) diff --git a/plugins/card-resources/src/plugin.ts b/plugins/card-resources/src/plugin.ts index 1d35b665cf..84ce31fd8d 100644 --- a/plugins/card-resources/src/plugin.ts +++ b/plugins/card-resources/src/plugin.ts @@ -102,10 +102,11 @@ export default mergeIds(cardId, card, { NoChildren: '' as IntlString, AddCollaborators: '' as IntlString, Home: '' as IntlString, - WhatDoYouWantToShare: '' as IntlString, - Share: '' as IntlString, + CardTitle: '' as IntlString, + Post: '' as IntlString, Compact: '' as IntlString, Comfortable: '' as IntlString, - Comfortable2: '' as IntlString + Comfortable2: '' as IntlString, + AdvancedCreateCard: '' as IntlString } }) diff --git a/plugins/card/src/index.ts b/plugins/card/src/index.ts index 21c7699455..8002996f0e 100644 --- a/plugins/card/src/index.ts +++ b/plugins/card/src/index.ts @@ -151,7 +151,8 @@ const cardPlugin = plugin(cardId, { View: '' as Asset, Document: '' as Asset, Home: '' as Asset, - Space: '' as Asset + Space: '' as Asset, + Expand: '' as Asset }, extensions: { EditCardExtension: '' as ComponentExtensionId