diff --git a/packages/presentation/src/components/AttributeBarEditor.svelte b/packages/presentation/src/components/AttributeBarEditor.svelte index a1d7941201..272778a7bb 100644 --- a/packages/presentation/src/components/AttributeBarEditor.svelte +++ b/packages/presentation/src/components/AttributeBarEditor.svelte @@ -117,10 +117,6 @@ label={attribute?.label} placeholder={attribute?.label} type={attribute?.type} - kind={'link'} - size={'large'} - width={'100%'} - justify={'left'} {maxWidth} value={getAttribute(client, object, { key: attributeKey, attr: attribute })} space={object.space} @@ -131,7 +127,7 @@ {:else} -
+
{ + if (!readonly) { + showPopup( + UsersPopup, + { _class, allowDeselect, selected: value, titleDeselect, placeholder }, + container, + (result) => { + if (result === null) { + value = null + selected = undefined + dispatch('change', null) + } else if (result !== undefined && result._id !== value) { + value = result._id + dispatch('change', value) + } + mgr?.setFocusPos(focusIndex) + } + ) + } + } -
- +
+ {#if kind !== 'link'} + + + + {:else} - + {/if}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index a1c07f8991..c0e966ca18 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -529,7 +529,7 @@ a.no-line { text-transform: uppercase; font-weight: 600; font-size: .75rem; - color: var(--theme-content-trans-color); + color: var(--dark-color); user-select: none; } .text-xs { font-size: .625rem; } diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 566dd112bc..2ea81c08b5 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -131,7 +131,8 @@ margin-right: .75rem; } .check-right { margin: 0 0 0 2rem; } - &:focus { + &:focus, + &:hover { background-color: var(--popup-bg-hover); .icon { color: var(--accent-color); } diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte index 4bf71869c1..4755eb9dfd 100644 --- a/packages/ui/src/components/EditBox.svelte +++ b/packages/ui/src/components/EditBox.svelte @@ -29,7 +29,7 @@ export let placeholder: IntlString = plugin.string.EditBoxPlaceholder export let placeholderParam: any | undefined = undefined export let format: 'text' | 'password' | 'number' = 'text' - export let kind: 'editbox' | 'large-style' | 'small-style' = 'editbox' + export let kind: 'editbox' | 'large-style' | 'small-style' | 'search-style' = 'editbox' export let focus: boolean = false const dispatch = createEventDispatcher() @@ -109,6 +109,8 @@ {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change + on:keydown + on:keypress /> {:else if format === 'number'} ev.target && computeSize(ev.target)} on:change + on:keydown + on:keypress /> {:else} ev.target && computeSize(ev.target)} on:change + on:keydown + on:keypress /> {/if}
@@ -157,6 +163,10 @@ font-weight: 400; font-size: 0.75rem; } + .search-style { + font-weight: 400; + padding: 0.625rem 0.75rem; + } input { margin: 0; diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte index d072974b4b..71867e59a8 100644 --- a/packages/ui/src/components/calendar/DateRangePresenter.svelte +++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte @@ -28,6 +28,7 @@ export let icon: 'normal' | 'warning' | 'overdue' = 'normal' export let labelOver: IntlString | undefined = undefined // label instead of date export let labelNull: IntlString = ui.string.NoDate + export let kind: 'no-border' | 'link' = 'no-border' const dispatch = createEventDispatcher() @@ -266,7 +267,7 @@
+ diff --git a/plugins/view-resources/src/components/BooleanEditorPopup.svelte b/plugins/view-resources/src/components/BooleanEditorPopup.svelte new file mode 100644 index 0000000000..9f3f07c78e --- /dev/null +++ b/plugins/view-resources/src/components/BooleanEditorPopup.svelte @@ -0,0 +1,80 @@ + + + +
+
dispatch('close', 1)}> + + {#if value === true} +
+ +
+ {/if} +
+
dispatch('close', 2)}> + + {#if value === false} +
+ +
+ {/if} +
+ {#if !withoutUndefined} +
dispatch('close', 3)}> + + {#if value === undefined} +
+ +
+ {/if} +
+ {/if} +
+ + diff --git a/plugins/view-resources/src/components/DateEditor.svelte b/plugins/view-resources/src/components/DateEditor.svelte index ca908f01eb..0c9c7ddcde 100644 --- a/plugins/view-resources/src/components/DateEditor.svelte +++ b/plugins/view-resources/src/components/DateEditor.svelte @@ -21,6 +21,7 @@ export let type: TypeDate | undefined // export let label: IntlString export let onChange: (value: any) => void + export let kind: 'no-border' | 'link' = 'no-border' $: withTime = type?.withTime ?? true @@ -29,6 +30,7 @@ {value} {withTime} editable + {kind} on:change={(res) => { if (res.detail !== undefined) onChange(res.detail) }} diff --git a/plugins/view-resources/src/components/NumberEditor.svelte b/plugins/view-resources/src/components/NumberEditor.svelte index 9c29a1a7f5..cfaeb38905 100644 --- a/plugins/view-resources/src/components/NumberEditor.svelte +++ b/plugins/view-resources/src/components/NumberEditor.svelte @@ -15,18 +15,70 @@ --> - +{#if kind === 'link'} +
{ + if (!shown) { + showPopup( + StringEditorPopup, + { value, format: 'number' }, + eventToHTMLElement(ev), + (res) => { + if (res !== undefined) value = res + onChange(value) + shown = false + }, + (res) => { + if (res !== undefined) value = res + } + ) + } + }} + > + {#if value} + {value} + {:else} + + {/if} +
+{:else} + +{/if} + + diff --git a/plugins/view-resources/src/components/StringEditor.svelte b/plugins/view-resources/src/components/StringEditor.svelte index fbe883dfa7..5b81c0aa23 100644 --- a/plugins/view-resources/src/components/StringEditor.svelte +++ b/plugins/view-resources/src/components/StringEditor.svelte @@ -15,7 +15,8 @@ --> - +{#if kind === 'link'} +
{ + if (!shown) { + showPopup( + StringEditorPopup, + { value }, + eventToHTMLElement(ev), + (res) => { + if (res !== undefined) value = res + onChange(value) + shown = false + }, + (res) => { + if (res !== undefined) value = res + } + ) + } + }} + > + {#if value} + {value} + {:else} + + {/if} +
+{:else} + +{/if} + + diff --git a/plugins/view-resources/src/components/StringEditorPopup.svelte b/plugins/view-resources/src/components/StringEditorPopup.svelte new file mode 100644 index 0000000000..6a5a3bfb19 --- /dev/null +++ b/plugins/view-resources/src/components/StringEditorPopup.svelte @@ -0,0 +1,46 @@ + + + +
+
+ +
+
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte index 8f2fc6d6f4..f6635972b2 100644 --- a/plugins/workbench-resources/src/components/SpaceHeader.svelte +++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte @@ -75,7 +75,7 @@ async function onSpaceEdit (): Promise { if (space === undefined) return const editor = await getEditor(space._class) - showPanel(editor ?? plugin.component.SpacePanel, space._id, space._class, 'right') + showPanel(editor ?? plugin.component.SpacePanel, space._id, space._class, 'content') } function updateViewlets (viewlets: WithLookup[]) { diff --git a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte index 1c397866c4..8160ad9865 100644 --- a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte +++ b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte @@ -60,12 +60,14 @@ }} > -
-
- {#if clazz.icon}{/if} + {#if clazz} +
+
+ {#if clazz.icon}{/if} +
+
- -
+ {/if}