wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-27 19:00:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UBER-274,-287,-288,-294: fixed tooltip, ActionsPopup, ListHeader, activity. (#3282)

Browse Source
This commit is contained in:
Alexander Platov 2023-05-30 12:57:41 +03:00 committed by GitHub
parent 3910f2d1f9
commit 101d766422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 262 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,7 +206,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
on:change={() => dispatch('search', search)} on:change={() => dispatch('search', search)}
on:input={() => dispatch('search', search)} on:input={() => dispatch('search', search)}

2
packages/presentation/src/components/IndexedDocumentCompare.svelte
View File

@ -11,7 +11,7 @@
</script> </script>
<Panel on:changeContent on:close> <Panel on:changeContent on:close>
<EditBox focus bind:value={search} kind="search-style" /> <EditBox autoFocus bind:value={search} kind="search-style" />
<div class="indexed-background"> <div class="indexed-background">
<div class="indexed-doc text-base max-h-125"> <div class="indexed-doc text-base max-h-125">
<div class="flex"> <div class="flex">

4
packages/presentation/src/components/IndexedDocumentPreview.svelte
View File

@ -25,7 +25,7 @@
{#if noPanel} {#if noPanel}
<div class="p-1 flex-col"> <div class="p-1 flex-col">
<Label label={presentation.string.DocumentPreview} /> <Label label={presentation.string.DocumentPreview} />
<EditBox focus bind:value={search} kind="search-style" /> <EditBox autoFocus bind:value={search} kind="search-style" />
</div> </div>
<div class="indexed-background"> <div class="indexed-background">
<div class="indexed-doc text-base max-h-125"> <div class="indexed-doc text-base max-h-125">
@ -36,7 +36,7 @@
</div> </div>
{:else} {:else}
<Panel on:changeContent on:close> <Panel on:changeContent on:close>
<EditBox focus bind:value={search} kind="search-style" /> <EditBox autoFocus bind:value={search} kind="search-style" />
<div class="indexed-background"> <div class="indexed-background">
<div class="indexed-doc text-base max-h-125"> <div class="indexed-doc text-base max-h-125">
{#if indexDoc} {#if indexDoc}

2
packages/presentation/src/components/ObjectSearchPopup.svelte
View File

@ -178,7 +178,7 @@
{/each} {/each}
</div> </div>
<EditBox <EditBox
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
icon={IconSearch} icon={IconSearch}
kind={'search-style'} kind={'search-style'}
focusIndex={0} focusIndex={0}

2
packages/presentation/src/components/SpacesMultiPopup.svelte
View File

@ -78,7 +78,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={searchQuery} bind:value={searchQuery}
{placeholder} {placeholder}
{placeholderParam} {placeholderParam}

2
packages/text-editor/src/components/LinkPopup.svelte
View File

@ -41,5 +41,5 @@
}} }}
on:changeContent on:changeContent
> >
<EditBox placeholder={linkPlaceholder} bind:value={link} focus /> <EditBox placeholder={linkPlaceholder} bind:value={link} autoFocus />
</Card> </Card>

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

@ -197,6 +197,12 @@ input.search {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
.flex-row-baseline {
display: flex;
align-items: baseline;
flex-wrap: nowrap;
min-width: 0;
}
.flex-row-center { .flex-row-center {
display: flex; display: flex;
align-items: center; align-items: center;
@ -659,6 +665,7 @@ input.search {
.max-w-40 { max-width: 10rem; } .max-w-40 { max-width: 10rem; }
.max-w-60 { max-width: 15rem; } .max-w-60 { max-width: 15rem; }
.max-w-80 { max-width: 20rem; } .max-w-80 { max-width: 20rem; }
.max-w-120 { max-width: 30rem; }
.max-w-240 { max-width: 60rem; } .max-w-240 { max-width: 60rem; }
.max-h-0 { max-height: 0; } .max-h-0 { max-height: 0; }
.max-h-2 { max-height: .5rem; } .max-h-2 { max-height: .5rem; }

12
packages/theme/styles/common.scss
View File

@ -355,6 +355,18 @@
&.noMargin { margin: 0; } &.noMargin { margin: 0; }
} }
.antiHSpacer {
flex-shrink: 0;
width: .25rem;
&:not(.withMargins) { margin: 0 !important; }
&.x1-5 { width: .375rem; }
&.x2 { width: .5rem; }
&.x3 { width: .75rem; }
&.x4 { width: 1rem; }
}
.antiSection { .antiSection {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -75,7 +75,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
{placeholder} {placeholder}
{placeholderParam} {placeholderParam}

27
packages/ui/src/components/Component.svelte
View File

@ -28,6 +28,7 @@
export let shrink: boolean = false export let shrink: boolean = false
export let showLoading = true export let showLoading = true
export let inline: boolean = false export let inline: boolean = false
export let disabled: boolean = false
$: component = is != null ? getResource(is) : Promise.reject(new Error('is not defined')) $: component = is != null ? getResource(is) : Promise.reject(new Error('is not defined'))
</script> </script>
@ -40,11 +41,33 @@
{:then Ctor} {:then Ctor}
<ErrorBoundary> <ErrorBoundary>
{#if $$slots.default !== undefined} {#if $$slots.default !== undefined}
<Ctor bind:this={innerRef} {...props} {inline} on:change on:close on:open on:click on:delete on:action> <Ctor
bind:this={innerRef}
{...props}
{inline}
{disabled}
on:change
on:close
on:open
on:click
on:delete
on:action
>
<slot /> <slot />
</Ctor> </Ctor>
{:else} {:else}
<Ctor bind:this={innerRef} {...props} {inline} on:change on:close on:open on:click on:delete on:action /> <Ctor
bind:this={innerRef}
{...props}
{inline}
{disabled}
on:change
on:close
on:open
on:click
on:delete
on:action
/>
{/if} {/if}
</ErrorBoundary> </ErrorBoundary>
{:catch err} {:catch err}

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

@ -98,7 +98,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
{placeholder} {placeholder}
{placeholderParam} {placeholderParam}

8
packages/ui/src/components/EditBox.svelte
View File

@ -33,7 +33,7 @@
export let format: 'text' | 'password' | 'number' = 'text' export let format: 'text' | 'password' | 'number' = 'text'
export let maxDigitsAfterPoint: number | undefined = undefined export let maxDigitsAfterPoint: number | undefined = undefined
export let kind: EditStyle = 'editbox' export let kind: EditStyle = 'editbox'
export let focus: boolean = false export let autoFocus: boolean = false
export let select: boolean = false export let select: boolean = false
export let focusable: boolean = false export let focusable: boolean = false
export let disabled: boolean = false export let disabled: boolean = false
@ -87,9 +87,9 @@
} }
onMount(() => { onMount(() => {
if (focus) { if (autoFocus) {
input.focus() input.focus()
focus = false autoFocus = false
} }
if (select) { if (select) {
input.select() input.select()
@ -125,7 +125,7 @@
input.addEventListener('focus', updateFocus, { once: true }) input.addEventListener('focus', updateFocus, { once: true })
} }
export function focused (): void { export function focus (): void {
input.focus() input.focus()
} }
</script> </script>

12
packages/ui/src/components/EditWithIcon.svelte
View File

@ -27,21 +27,23 @@
export let value: string | undefined = undefined export let value: string | undefined = undefined
export let placeholder: IntlString = plugin.string.EditBoxPlaceholder export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
export let placeholderParam: any | undefined = undefined export let placeholderParam: any | undefined = undefined
export let focus: boolean = false export let autoFocus: boolean = false
export let size: 'small' | 'medium' | 'large' = 'medium' export let size: 'small' | 'medium' | 'large' = 'medium'
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let textHTML: HTMLInputElement let textHTML: HTMLInputElement
let phTraslate: string = '' let phTraslate: string = ''
export function focus () {
textHTML.focus()
autoFocus = false
}
$: translate(placeholder, placeholderParam ?? {}).then((res) => { $: translate(placeholder, placeholderParam ?? {}).then((res) => {
phTraslate = res phTraslate = res
}) })
$: if (textHTML !== undefined) { $: if (textHTML !== undefined) {
if (focus) { if (autoFocus) focus()
textHTML.focus()
focus = false
}
} }
</script> </script>

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

@ -130,7 +130,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
{placeholder} {placeholder}
{placeholderParam} {placeholderParam}

2
packages/ui/src/components/TooltipInstance.svelte
View File

@ -191,6 +191,8 @@
class:doublePadding={$tooltip.label} class:doublePadding={$tooltip.label}
use:resizeObserver={(element) => { use:resizeObserver={(element) => {
clWidth = element.clientWidth clWidth = element.clientWidth
if (kind === 'submenu') fitSubmenu()
else fitTooltip(tooltipHTML)
}} }}
bind:this={tooltipHTML} bind:this={tooltipHTML}
> >

10
plugins/activity-resources/src/components/TxViewTx.svelte
View File

@ -27,18 +27,20 @@
<IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} /> <IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if} {/if}
{#if typeof viewlet?.component === 'string'} {#if typeof viewlet?.component === 'string'}
<Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} /> <Component is={viewlet?.component} props={getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
{:else} {:else}
<svelte:component this={viewlet?.component} {...getProps(ctx, edit)} inline on:close={onCancelEdit} /> <svelte:component this={viewlet?.component} {...getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
{/if} {/if}
<div class="antiHSpacer" />
{/each} {/each}
{#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i} {#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
{#if i === 0 && !presentersOnly} {#if i === 0 && !presentersOnly}
<IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} /> <IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if} {/if}
{#if typeof viewlet?.component === 'string'} {#if typeof viewlet?.component === 'string'}
<Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} /> <Component is={viewlet?.component} props={getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
{:else} {:else}
<svelte:component this={viewlet?.component} {...getProps(ctx, edit)} inline on:close={onCancelEdit} /> <svelte:component this={viewlet?.component} {...getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
{/if} {/if}
<div class="antiHSpacer" />
{/each} {/each}

2
plugins/automation-resources/src/components/actions/ContentActionCreate.svelte
View File

@ -46,7 +46,7 @@
{#if typeClass === core.class.TypeString || typeClass === core.class.TypeMarkup} {#if typeClass === core.class.TypeString || typeClass === core.class.TypeMarkup}
<EditBox bind:value /> <EditBox bind:value />
{:else if typeClass === core.class.TypeNumber} {:else if typeClass === core.class.TypeNumber}
<NumberEditor value={Number(value)} {onChange} focus={true} placeholder={ui.string.EditBoxPlaceholder} /> <NumberEditor value={Number(value)} {onChange} autoFocus placeholder={ui.string.EditBoxPlaceholder} />
{:else if typeClass === core.class.TypeBoolean} {:else if typeClass === core.class.TypeBoolean}
<BooleanEditor {value} {onChange} /> <BooleanEditor {value} {onChange} />
{/if} {/if}

4
plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
View File

@ -153,7 +153,7 @@
<NumberEditor <NumberEditor
kind={'button'} kind={'button'}
value={syncPeriod} value={syncPeriod}
focus={false} autoFocus={false}
placeholder={getEmbeddedLabel('Period')} placeholder={getEmbeddedLabel('Period')}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
@ -165,7 +165,7 @@
<NumberEditor <NumberEditor
kind={'button'} kind={'button'}
value={limit} value={limit}
focus={false} autoFocus={false}
placeholder={getEmbeddedLabel('Limit')} placeholder={getEmbeddedLabel('Limit')}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {

2
plugins/board-resources/src/components/CreateBoard.svelte
View File

@ -60,7 +60,7 @@
icon={IconFolder} icon={IconFolder}
bind:value={name} bind:value={name}
placeholder={board.string.Board} placeholder={board.string.Board}
focus autoFocus
/> />
<!-- <ToggleWithLabel label={board.string.MakePrivate} description={board.string.MakePrivateDescription} /> --> <!-- <ToggleWithLabel label={board.string.MakePrivate} description={board.string.MakePrivateDescription} /> -->

2
plugins/board-resources/src/components/CreateCard.svelte
View File

@ -89,7 +89,7 @@
bind:value={title} bind:value={title}
icon={board.icon.Card} icon={board.icon.Card}
placeholder={board.string.CardPlaceholder} placeholder={board.string.CardPlaceholder}
focus autoFocus
/> />
</Grid> </Grid>
</Card> </Card>

7
plugins/board-resources/src/components/EditCard.svelte
View File

@ -146,7 +146,12 @@
}} }}
/> />
</svelte:fragment> </svelte:fragment>
<EditBox bind:value={object.title} kind={'large-style'} focus on:change={() => change('title', object?.title)} /> <EditBox
bind:value={object.title}
kind={'large-style'}
autoFocus
on:change={() => change('title', object?.title)}
/>
<div class="background-accent-bg-color border-divider-color border-radius-3 p-4 mt-4 w-full"> <div class="background-accent-bg-color border-divider-color border-radius-3 p-4 mt-4 w-full">
<StyledTextBox <StyledTextBox
alwaysEdit={true} alwaysEdit={true}

4
plugins/board-resources/src/components/KanbanCard.svelte
View File

@ -110,7 +110,7 @@
<div class="fs-title text-lg"> <div class="fs-title text-lg">
<EditBox <EditBox
bind:value={object.title} bind:value={object.title}
focus autoFocus
on:change={() => updateCard(client, object, 'title', object?.title)} on:change={() => updateCard(client, object, 'title', object?.title)}
/> />
</div> </div>
@ -158,7 +158,7 @@
<div class="fs-title text-lg"> <div class="fs-title text-lg">
<EditBox <EditBox
bind:value={object.title} bind:value={object.title}
focus autoFocus
on:change={() => updateCard(client, object, 'title', object?.title)} on:change={() => updateCard(client, object, 'title', object?.title)}
/> />
</div> </div>

2
plugins/board-resources/src/components/popups/AddChecklist.svelte
View File

@ -118,7 +118,7 @@
<div class="flex-col flex-gap-1"> <div class="flex-col flex-gap-1">
<Label label={board.string.Title} /> <Label label={board.string.Title} />
<div class="p-2 mt-1 mb-1 border-divider-color border-radius-1"> <div class="p-2 mt-1 mb-1 border-divider-color border-radius-1">
<EditBox bind:value={name} focus={true} /> <EditBox bind:value={name} autoFocus />
</div> </div>
</div> </div>

2
plugins/calendar-resources/src/components/CreateEvent.svelte
View File

@ -97,7 +97,7 @@
}} }}
on:changeContent on:changeContent
> >
<EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus /> <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} autoFocus />
<svelte:fragment slot="pool"> <svelte:fragment slot="pool">
<DateRangePresenter <DateRangePresenter
value={startDate} value={startDate}

2
plugins/calendar-resources/src/components/CreateReminder.svelte
View File

@ -69,7 +69,7 @@
}} }}
on:changeContent on:changeContent
> >
<EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus /> <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} autoFocus />
<svelte:fragment slot="pool"> <svelte:fragment slot="pool">
<!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> --> <!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
<DateRangePresenter <DateRangePresenter

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

@ -71,7 +71,7 @@
{/if} {/if}
</div> </div>
{#if withInput} {#if withInput}
<div class="mt-2"> <div class="mt-2 max-w-120">
<CommentInput {object} /> <CommentInput {object} />
</div> </div>
{/if} {/if}

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

@ -66,6 +66,6 @@
icon={IconFolder} icon={IconFolder}
bind:value={name} bind:value={name}
placeholder={chunter.string.ChannelNamePlaceholder} placeholder={chunter.string.ChannelNamePlaceholder}
focus autoFocus
/> />
</Card> </Card>

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

@ -62,7 +62,7 @@
icon={IconFolder} icon={IconFolder}
bind:value={name} bind:value={name}
placeholder={chunter.string.ChannelNamePlaceholder} placeholder={chunter.string.ChannelNamePlaceholder}
focus autoFocus
/> />
<ToggleWithLabel <ToggleWithLabel
label={presentation.string.MakePrivate} label={presentation.string.MakePrivate}

3
plugins/chunter-resources/src/components/EditChannelDescriptionTab.svelte
View File

@ -59,14 +59,13 @@
label={chunter.string.Topic} label={chunter.string.Topic}
bind:value={channel.topic} bind:value={channel.topic}
placeholder={chunter.string.Topic} placeholder={chunter.string.Topic}
focus autoFocus
on:change={onTopicChange} on:change={onTopicChange}
/> />
<EditBox <EditBox
label={chunter.string.ChannelDescription} label={chunter.string.ChannelDescription}
bind:value={channel.description} bind:value={channel.description}
placeholder={chunter.string.ChannelDescription} placeholder={chunter.string.ChannelDescription}
focus
on:change={onDescriptionChange} on:change={onDescriptionChange}
/> />
<Button <Button

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

@ -197,7 +197,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
{placeholder} {placeholder}
{placeholderParam} {placeholderParam}

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

@ -140,7 +140,7 @@
placeholder={contact.string.PersonFirstNamePlaceholder} placeholder={contact.string.PersonFirstNamePlaceholder}
bind:value={firstName} bind:value={firstName}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
<EditBox <EditBox

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

@ -94,7 +94,7 @@
placeholder={contact.string.OrganizationNamePlaceholder} placeholder={contact.string.OrganizationNamePlaceholder}
bind:value={object.name} bind:value={object.name}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
</div> </div>

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

@ -96,7 +96,7 @@
placeholder={contact.string.PersonFirstNamePlaceholder} placeholder={contact.string.PersonFirstNamePlaceholder}
bind:value={firstName} bind:value={firstName}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
<EditBox <EditBox

7
plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
View File

@ -17,12 +17,13 @@
import { EmployeeAccount } from '@hcengineering/contact' import { EmployeeAccount } from '@hcengineering/contact'
import core, { Account, systemAccountEmail } from '@hcengineering/core' import core, { Account, systemAccountEmail } from '@hcengineering/core'
import { getEmbeddedLabel } from '@hcengineering/platform' import { getEmbeddedLabel } from '@hcengineering/platform'
import { Label, tooltip } from '@hcengineering/ui' import { Label, tooltip, IconSize } from '@hcengineering/ui'
import { employeeByIdStore } from '../utils' import { employeeByIdStore } from '../utils'
import Avatar from './Avatar.svelte' import Avatar from './Avatar.svelte'
import EmployeePresenter from './EmployeePresenter.svelte' import EmployeePresenter from './EmployeePresenter.svelte'
export let value: Account export let value: Account
export let avatarSize: IconSize = 'x-small'
export let disabled = false export let disabled = false
export let inline = false export let inline = false
@ -34,10 +35,10 @@
{#if value} {#if value}
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
{#if employee} {#if employee}
<EmployeePresenter value={employee} {disabled} {inline} /> <EmployeePresenter value={employee} {disabled} {inline} {avatarSize} />
{:else} {:else}
<div class="flex-row-center"> <div class="flex-row-center">
<Avatar size="x-small" /> <Avatar size={avatarSize} />
<span class="overflow-label user" use:tooltip={{ label: valueLabel }}><Label label={valueLabel} /></span> <span class="overflow-label user" use:tooltip={{ label: valueLabel }}><Label label={valueLabel} /></span>
</div> </div>
{/if} {/if}

5
plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte
View File

@ -16,15 +16,18 @@
<script lang="ts"> <script lang="ts">
import { EmployeeAccount } from '@hcengineering/contact' import { EmployeeAccount } from '@hcengineering/contact'
import { Ref } from '@hcengineering/core' import { Ref } from '@hcengineering/core'
import { IconSize } from '@hcengineering/ui'
import { employeeAccountByIdStore } from '../utils' import { employeeAccountByIdStore } from '../utils'
import EmployeeAccountPresenter from './EmployeeAccountPresenter.svelte' import EmployeeAccountPresenter from './EmployeeAccountPresenter.svelte'
export let value: Ref<EmployeeAccount> export let value: Ref<EmployeeAccount>
export let avatarSize: IconSize = 'x-small'
export let disabled = false export let disabled = false
export let inline = false
$: account = $employeeAccountByIdStore.get(value) $: account = $employeeAccountByIdStore.get(value)
</script> </script>
{#if account} {#if account}
<EmployeeAccountPresenter value={account} {disabled} /> <EmployeeAccountPresenter value={account} {disabled} {inline} {avatarSize} />
{/if} {/if}

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

@ -133,7 +133,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
placeholder={presentation.string.Search} placeholder={presentation.string.Search}
on:change={() => { on:change={() => {

3
plugins/contact-resources/src/components/MemberPresenter.svelte
View File

@ -20,12 +20,13 @@
import { ContactPresenter } from '..' import { ContactPresenter } from '..'
export let value: Member export let value: Member
export let disabled: boolean = false
export let inline: boolean = false export let inline: boolean = false
const contactRef = getClient().findOne(contact.class.Contact, { _id: value.contact }) const contactRef = getClient().findOne(contact.class.Contact, { _id: value.contact })
</script> </script>
<DocNavLink object={value} {inline}> <DocNavLink object={value} {inline} {disabled} noUnderline={disabled}>
{#await contactRef then ct} {#await contactRef then ct}
{#if ct} {#if ct}
<ContactPresenter disabled={true} value={ct} {inline} /> <ContactPresenter disabled={true} value={ct} {inline} />

2
plugins/document-resources/src/components/CreateDocument.svelte
View File

@ -114,7 +114,7 @@
placeholder={document.string.DocumentNamePlaceholder} placeholder={document.string.DocumentNamePlaceholder}
bind:value={object.name} bind:value={object.name}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
</div> </div>

2
plugins/hr-resources/src/components/CreateDepartment.svelte
View File

@ -70,7 +70,7 @@
bind:value={name} bind:value={name}
placeholder={hr.string.DepartmentPlaceholder} placeholder={hr.string.DepartmentPlaceholder}
kind={'large-style'} kind={'large-style'}
focus autoFocus
/> />
</div> </div>
</div> </div>

2
plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
View File

@ -70,7 +70,7 @@
on:changeContent on:changeContent
> >
<div class="flex-grow mt-4"> <div class="flex-grow mt-4">
<EditBox placeholder={hr.string.Title} bind:value={title} kind={'large-style'} focus focusIndex={1} /> <EditBox placeholder={hr.string.Title} bind:value={title} kind={'large-style'} autoFocus focusIndex={1} />
</div> </div>
<div class="flex-grow mt-4"> <div class="flex-grow mt-4">
<EditBox placeholder={hr.string.Description} bind:value={description} kind={'large-style'} /> <EditBox placeholder={hr.string.Description} bind:value={description} kind={'large-style'} />

2
plugins/inventory-resources/src/components/CreateCategory.svelte
View File

@ -69,6 +69,6 @@
<div class="mr-3"> <div class="mr-3">
<Button focusIndex={1} icon={inventory.icon.Categories} size={'medium'} kind={'link-bordered'} disabled /> <Button focusIndex={1} icon={inventory.icon.Categories} size={'medium'} kind={'link-bordered'} disabled />
</div> </div>
<EditBox bind:value={name} placeholder={inventory.string.Category} kind={'large-style'} focus /> <EditBox bind:value={name} placeholder={inventory.string.Category} kind={'large-style'} autoFocus />
</div> </div>
</Card> </Card>

2
plugins/inventory-resources/src/components/CreateProduct.svelte
View File

@ -80,7 +80,7 @@
<div class="mr-3"> <div class="mr-3">
<Button focusIndex={1} icon={inventory.icon.Products} size={'medium'} kind={'link-bordered'} disabled /> <Button focusIndex={1} icon={inventory.icon.Products} size={'medium'} kind={'link-bordered'} disabled />
</div> </div>
<EditBox bind:value={doc.name} placeholder={inventory.string.Product} kind={'large-style'} focus /> <EditBox bind:value={doc.name} placeholder={inventory.string.Product} kind={'large-style'} autoFocus />
</div> </div>
<svelte:fragment slot="pool"> <svelte:fragment slot="pool">
<DropdownLabels <DropdownLabels

2
plugins/inventory-resources/src/components/CreateVariant.svelte
View File

@ -66,7 +66,7 @@
on:changeContent on:changeContent
> >
<Grid column={1} rowGap={1.75}> <Grid column={1} rowGap={1.75}>
<EditBox label={inventory.string.Variant} bind:value={doc.name} placeholder={inventory.string.Variant} focus /> <EditBox label={inventory.string.Variant} bind:value={doc.name} placeholder={inventory.string.Variant} autoFocus />
<EditBox label={inventory.string.SKU} bind:value={doc.sku} placeholder={inventory.string.SKU} /> <EditBox label={inventory.string.SKU} bind:value={doc.sku} placeholder={inventory.string.SKU} />
</Grid> </Grid>
</Card> </Card>

4
plugins/lead-resources/src/components/CreateCustomer.svelte
View File

@ -162,7 +162,7 @@
placeholder={contact.string.PersonFirstNamePlaceholder} placeholder={contact.string.PersonFirstNamePlaceholder}
bind:value={firstName} bind:value={firstName}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
<EditBox <EditBox
@ -205,7 +205,7 @@
placeholder={contact.string.OrganizationNamePlaceholder} placeholder={contact.string.OrganizationNamePlaceholder}
bind:value={object.name} bind:value={object.name}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
</div> </div>

2
plugins/lead-resources/src/components/CreateFunnel.svelte
View File

@ -68,7 +68,7 @@
icon={IconFolder} icon={IconFolder}
bind:value={name} bind:value={name}
placeholder={lead.string.FunnelName} placeholder={lead.string.FunnelName}
focus autoFocus
/> />
<ToggleWithLabel <ToggleWithLabel
label={presentation.string.MakePrivate} label={presentation.string.MakePrivate}

8
plugins/lead-resources/src/components/CreateLead.svelte
View File

@ -147,7 +147,13 @@
<div class="mr-3"> <div class="mr-3">
<Button focusIndex={1} icon={lead.icon.Lead} size={'medium'} kind={'link-bordered'} disabled /> <Button focusIndex={1} icon={lead.icon.Lead} size={'medium'} kind={'link-bordered'} disabled />
</div> </div>
<EditBox focusIndex={1} bind:value={title} placeholder={lead.string.LeadPlaceholder} kind={'large-style'} focus /> <EditBox
focusIndex={1}
bind:value={title}
placeholder={lead.string.LeadPlaceholder}
kind={'large-style'}
autoFocus
/>
</div> </div>
<svelte:fragment slot="pool"> <svelte:fragment slot="pool">

2
plugins/lead-resources/src/components/EditFunnel.svelte
View File

@ -86,7 +86,7 @@
bind:value={object.name} bind:value={object.name}
placeholder={lead.string.FunnelPlaceholder} placeholder={lead.string.FunnelPlaceholder}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusable focusable
on:blur={() => { on:blur={() => {
if (rawName !== object.name) onChange('name', object.name) if (rawName !== object.name) onChange('name', object.name)

10
plugins/notification-resources/src/components/activity/TxCollaboratorsChange.svelte
View File

@ -59,21 +59,23 @@
</script> </script>
{#if diff} {#if diff}
<div class="flex-presenter">
<Label label={notification.string.ChangeCollaborators} /> <Label label={notification.string.ChangeCollaborators} />
{#if diff.added.length > 0} {#if diff.added.length > 0}
<div class="antiHSpacer" />
<IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} /> <IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
{#each diff.added as add} {#each diff.added as add}
<EmployeeAccountRefPresenter value={add} disabled /> <EmployeeAccountRefPresenter value={add} disabled inline />
<div class="antiHSpacer" />
{/each} {/each}
{/if} {/if}
{#if diff.removed.length > 0} {#if diff.removed.length > 0}
<div class="antiHSpacer" />
<IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} /> <IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
{#each diff.removed as removed} {#each diff.removed as removed}
<EmployeeAccountRefPresenter value={removed} disabled /> <EmployeeAccountRefPresenter value={removed} disabled inline />
<div class="antiHSpacer" />
{/each} {/each}
{/if} {/if}
</div>
{:else} {:else}
<Label label={notification.string.YouAddedCollaborators} /> <Label label={notification.string.YouAddedCollaborators} />
{/if} {/if}

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

@ -525,7 +525,7 @@
placeholder={recruit.string.PersonFirstNamePlaceholder} placeholder={recruit.string.PersonFirstNamePlaceholder}
bind:value={object.firstName} bind:value={object.firstName}
kind={'large-style'} kind={'large-style'}
focus autoFocus
maxWidth={'30rem'} maxWidth={'30rem'}
focusIndex={1} focusIndex={1}
/> />

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

@ -252,7 +252,7 @@
bind:value={name} bind:value={name}
placeholder={recruit.string.VacancyPlaceholder} placeholder={recruit.string.VacancyPlaceholder}
kind={'large-style'} kind={'large-style'}
focus autoFocus
/> />
</div> </div>
</div> </div>

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

@ -158,7 +158,7 @@
placeholder={recruit.string.VacancyPlaceholder} placeholder={recruit.string.VacancyPlaceholder}
kind={'large-style'} kind={'large-style'}
focusable focusable
focus={!embedded} autoFocus={!embedded}
on:blur={save} on:blur={save}
/> />
</span> </span>

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

@ -94,7 +94,7 @@
bind:value={doc.value} bind:value={doc.value}
label={recruit.string.OpinionValue} label={recruit.string.OpinionValue}
placeholder={recruit.string.OpinionValuePlaceholder} placeholder={recruit.string.OpinionValuePlaceholder}
focus autoFocus
/> />
<StyledTextArea placeholder={recruit.string.Description} bind:content={doc.description} kind={'emphasized'} /> <StyledTextArea placeholder={recruit.string.Description} bind:content={doc.description} kind={'emphasized'} />
</Card> </Card>

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

@ -157,7 +157,7 @@
on:changeContent on:changeContent
> >
<StatusControl slot="error" {status} /> <StatusControl slot="error" {status} />
<EditBox placeholder={recruit.string.Title} bind:value={title} kind={'large-style'} focus /> <EditBox placeholder={recruit.string.Title} bind:value={title} kind={'large-style'} autoFocus />
<EditBox placeholder={recruit.string.Location} bind:value={location} kind={'small-style'} /> <EditBox placeholder={recruit.string.Location} bind:value={location} kind={'small-style'} />
<StyledTextArea bind:content={description} placeholder={recruit.string.AddDescription} kind={'emphasized'} /> <StyledTextArea bind:content={description} placeholder={recruit.string.AddDescription} kind={'emphasized'} />
<svelte:fragment slot="pool"> <svelte:fragment slot="pool">

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

@ -74,7 +74,7 @@
bind:value bind:value
icon={recruit.icon.Application} icon={recruit.icon.Application}
placeholder={recruit.string.OpinionValue} placeholder={recruit.string.OpinionValue}
focus autoFocus
/> />
<StyledTextArea placeholder={recruit.string.Description} bind:content={description} kind={'emphasized'} /> <StyledTextArea placeholder={recruit.string.Description} bind:content={description} kind={'emphasized'} />
</Card> </Card>

2
plugins/setting-resources/src/components/CreateMixin.svelte
View File

@ -62,5 +62,5 @@
</div> </div>
</svelte:fragment> </svelte:fragment>
<div class="mb-2"><EditBox focus bind:value={name} placeholder={core.string.Name} /></div> <div class="mb-2"><EditBox autoFocus bind:value={name} placeholder={core.string.Name} /></div>
</Card> </Card>

2
plugins/setting-resources/src/components/Profile.svelte
View File

@ -108,7 +108,7 @@
placeholder={contact.string.PersonFirstNamePlaceholder} placeholder={contact.string.PersonFirstNamePlaceholder}
bind:value={firstName} bind:value={firstName}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
on:change={async () => { on:change={async () => {
const changeName = await getResource(login.function.ChangeName) const changeName = await getResource(login.function.ChangeName)

2
plugins/tags-resources/src/components/CreateTagElement.svelte
View File

@ -129,7 +129,7 @@
placeholder={tags.string.TagName} placeholder={tags.string.TagName}
placeholderParam={{ word: keyTitle }} placeholderParam={{ word: keyTitle }}
kind={'large-style'} kind={'large-style'}
focus autoFocus
/> />
<div class="mt-2"> <div class="mt-2">
<EditBox bind:value={description} placeholder={tags.string.TagDescriptionPlaceholder} kind={'small-style'} /> <EditBox bind:value={description} placeholder={tags.string.TagDescriptionPlaceholder} kind={'small-style'} />

2
plugins/tags-resources/src/components/TagsFilter.svelte
View File

@ -134,7 +134,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
placeholder={presentation.string.Search} placeholder={presentation.string.Search}
on:input={() => getValues(search)} on:input={() => getValues(search)}

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

@ -107,7 +107,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
{placeholder} {placeholder}
{placeholderParam} {placeholderParam}

2
plugins/task-resources/src/components/todos/CreateTodo.svelte
View File

@ -81,7 +81,7 @@
bind:value={name} bind:value={name}
icon={task.icon.Task} icon={task.icon.Task}
placeholder={plugin.string.TodoDescriptionPlaceholder} placeholder={plugin.string.TodoDescriptionPlaceholder}
focus autoFocus
/> />
<DatePicker title={plugin.string.TodoDueDate} bind:value={dueTo} /> <DatePicker title={plugin.string.TodoDueDate} bind:value={dueTo} />
</Grid> </Grid>

2
plugins/task-resources/src/components/todos/EditTodo.svelte
View File

@ -78,7 +78,7 @@
bind:value={name} bind:value={name}
icon={task.icon.Task} icon={task.icon.Task}
placeholder={plugin.string.TodoDescriptionPlaceholder} placeholder={plugin.string.TodoDescriptionPlaceholder}
focus autoFocus
/> />
<DatePicker title={plugin.string.TodoDueDate} bind:value={dueTo} /> <DatePicker title={plugin.string.TodoDueDate} bind:value={dueTo} />
</Grid> </Grid>

2
plugins/templates-resources/src/components/CreateTemplateCategory.svelte
View File

@ -57,7 +57,7 @@
icon={IconFolder} icon={IconFolder}
bind:value={name} bind:value={name}
placeholder={templates.string.TemplateCategory} placeholder={templates.string.TemplateCategory}
focus autoFocus
/> />
<ToggleWithLabel <ToggleWithLabel
label={presentation.string.MakePrivate} label={presentation.string.MakePrivate}

2
plugins/templates-resources/src/components/TemplatePopup.svelte
View File

@ -95,7 +95,7 @@
icon={IconSearch} icon={IconSearch}
bind:value={query} bind:value={query}
placeholder={templates.string.SearchTemplate} placeholder={templates.string.SearchTemplate}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
/> />
</div> </div>
<div class="scroll mt-2"> <div class="scroll mt-2">

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

@ -580,7 +580,7 @@
bind:value={object.title} bind:value={object.title}
placeholder={tracker.string.IssueTitlePlaceholder} placeholder={tracker.string.IssueTitlePlaceholder}
kind={'large-style'} kind={'large-style'}
focus autoFocus
fullSize fullSize
/> />
</div> </div>

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

@ -44,7 +44,7 @@
icon={IconSearch} icon={IconSearch}
bind:value={search} bind:value={search}
placeholder={ui.string.SearchDots} placeholder={ui.string.SearchDots}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
/> />
<div class="ap-caption"><Label label={ui.string.Suggested} /></div> <div class="ap-caption"><Label label={ui.string.Suggested} /></div>
</div> </div>

7
plugins/tracker-resources/src/components/components/NewComponent.svelte
View File

@ -58,7 +58,12 @@
size={'large'} size={'large'}
/> />
</svelte:fragment> </svelte:fragment>
<EditBox bind:value={object.label} placeholder={tracker.string.ComponentNamePlaceholder} kind={'large-style'} focus /> <EditBox
bind:value={object.label}
placeholder={tracker.string.ComponentNamePlaceholder}
kind={'large-style'}
autoFocus
/>
<StyledTextArea <StyledTextArea
bind:content={object.description} bind:content={object.description}
placeholder={tracker.string.ComponentDescriptionPlaceholder} placeholder={tracker.string.ComponentDescriptionPlaceholder}

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

@ -190,7 +190,7 @@
placeholder={tracker.string.IssueTitlePlaceholder} placeholder={tracker.string.IssueTitlePlaceholder}
kind="large-style" kind="large-style"
on:blur={save} on:blur={save}
focus={!embedded} autoFocus={!embedded}
/> />
<div class="w-full mt-6"> <div class="w-full mt-6">
<AttachmentStyleBoxEditor <AttachmentStyleBoxEditor

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

@ -101,7 +101,7 @@
</svelte:fragment> </svelte:fragment>
<div class="flex-row-center gap-2"> <div class="flex-row-center gap-2">
<EditBox <EditBox
focus autoFocus
bind:value={data.value} bind:value={data.value}
{placeholder} {placeholder}
maxWidth={'9rem'} maxWidth={'9rem'}

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

@ -122,7 +122,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
placeholder={presentation.string.Search} placeholder={presentation.string.Search}
on:change={() => { on:change={() => {

7
plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
View File

@ -70,7 +70,12 @@
bind:space bind:space
/> />
</svelte:fragment> </svelte:fragment>
<EditBox bind:value={object.label} placeholder={tracker.string.MilestoneNamePlaceholder} kind={'large-style'} focus /> <EditBox
bind:value={object.label}
placeholder={tracker.string.MilestoneNamePlaceholder}
kind={'large-style'}
autoFocus
/>
<StyledTextArea <StyledTextArea
bind:content={object.description} bind:content={object.description}
placeholder={tracker.string.ComponentDescriptionPlaceholder} placeholder={tracker.string.ComponentDescriptionPlaceholder}

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

@ -259,7 +259,7 @@
bind:value={name} bind:value={name}
placeholder={tracker.string.ProjectTitlePlaceholder} placeholder={tracker.string.ProjectTitlePlaceholder}
kind={'large-style'} kind={'large-style'}
focus autoFocus
on:input={() => { on:input={() => {
if (isNew) { if (isNew) {
identifier = name.toLocaleUpperCase().replaceAll(' ', '_').substring(0, 5) identifier = name.toLocaleUpperCase().replaceAll(' ', '_').substring(0, 5)

7
plugins/tracker-resources/src/components/scrums/NewScrum.svelte
View File

@ -71,7 +71,12 @@
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space /> <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
</svelte:fragment> </svelte:fragment>
<EditBox bind:value={object.title} placeholder={tracker.string.ScrumTitlePlaceholder} kind={'large-style'} focus /> <EditBox
bind:value={object.title}
placeholder={tracker.string.ScrumTitlePlaceholder}
kind={'large-style'}
autoFocus
/>
<StyledTextArea <StyledTextArea
bind:content={object.description} bind:content={object.description}
placeholder={tracker.string.ScrumDescriptionPlaceholder} placeholder={tracker.string.ScrumDescriptionPlaceholder}

7
plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
View File

@ -144,7 +144,12 @@
<Label {label} /> <Label {label} />
</svelte:fragment> </svelte:fragment>
<EditBox bind:value={object.title} placeholder={tracker.string.IssueTitlePlaceholder} kind={'large-style'} focus /> <EditBox
bind:value={object.title}
placeholder={tracker.string.IssueTitlePlaceholder}
kind={'large-style'}
autoFocus
/>
<StyledTextBox <StyledTextBox
alwaysEdit alwaysEdit
showButtons={false} showButtons={false}

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

@ -163,7 +163,7 @@
bind:focusInput={focusIssueTitle} bind:focusInput={focusIssueTitle}
kind={'large-style'} kind={'large-style'}
placeholder={tracker.string.SubIssueTitlePlaceholder} placeholder={tracker.string.SubIssueTitlePlaceholder}
focus autoFocus
fullSize fullSize
/> />
</div> </div>

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

@ -114,7 +114,7 @@
bind:focusInput={focusIssueTitle} bind:focusInput={focusIssueTitle}
kind={'large-style'} kind={'large-style'}
placeholder={tracker.string.SubIssueTitlePlaceholder} placeholder={tracker.string.SubIssueTitlePlaceholder}
focus autoFocus
/> />
<div class="mt-4 clear-mins"> <div class="mt-4 clear-mins">
{#key newIssue.description} {#key newIssue.description}

48
plugins/view-resources/src/components/ActionsPopup.svelte
View File

@ -16,9 +16,18 @@
import { WithLookup, Doc } from '@hcengineering/core' import { WithLookup, Doc } from '@hcengineering/core'
import { getResource, translate } from '@hcengineering/platform' import { getResource, translate } from '@hcengineering/platform'
import { createQuery, getClient, ActionContext } from '@hcengineering/presentation' import { createQuery, getClient, ActionContext } from '@hcengineering/presentation'
import ui, { Button, closePopup, Component, Icon, IconArrowLeft, Label } from '@hcengineering/ui' import ui, {
Button,
closePopup,
Component,
Icon,
IconArrowLeft,
Label,
EditWithIcon,
IconSearch,
deviceOptionsStore
} from '@hcengineering/ui'
import { Action, ViewContext } from '@hcengineering/view' import { Action, ViewContext } from '@hcengineering/view'
import { onMount } from 'svelte'
import { filterActions, getSelection } from '../actions' import { filterActions, getSelection } from '../actions'
import view from '../plugin' import view from '../plugin'
import { focusStore, selectionStore } from '../selection' import { focusStore, selectionStore } from '../selection'
@ -31,7 +40,7 @@
let search: string = '' let search: string = ''
let actions: WithLookup<Action>[] = [] let actions: WithLookup<Action>[] = []
let input: HTMLInputElement | undefined let input: EditWithIcon
const query = createQuery() const query = createQuery()
@ -112,15 +121,6 @@
} }
$: filterSearchActions(supportedActions, search) $: filterSearchActions(supportedActions, search)
let phTraslate: string = ''
$: translate(view.string.ActionPlaceholder, {}).then((res) => {
phTraslate = res
})
onMount(() => {
if (input) input.focus()
})
let selection = 0 let selection = 0
let list: ListView let list: ListView
/* eslint-disable no-undef */ /* eslint-disable no-undef */
@ -202,6 +202,7 @@
on:keydown={onKeydown} on:keydown={onKeydown}
use:resizeObserver={() => dispatch('changeContent')} use:resizeObserver={() => dispatch('changeContent')}
> >
{#if $selectionStore.length > 0 || $focusStore.focus !== undefined || (activeAction && activeAction?.actionPopup !== undefined)}
<div class="mt-2 ml-2 flex-between"> <div class="mt-2 ml-2 flex-between">
{#if $selectionStore.length > 0} {#if $selectionStore.length > 0}
<div class="item-box"> <div class="item-box">
@ -230,6 +231,7 @@
</div> </div>
{/if} {/if}
</div> </div>
{/if}
{#if activeAction && activeAction?.actionPopup !== undefined} {#if activeAction && activeAction?.actionPopup !== undefined}
<Component <Component
is={activeAction?.actionPopup} is={activeAction?.actionPopup}
@ -247,7 +249,15 @@
/> />
{:else} {:else}
<div class="header"> <div class="header">
<input bind:this={input} type="text" bind:value={search} placeholder={phTraslate} /> <EditWithIcon
bind:this={input}
icon={IconSearch}
size={'large'}
width={'100%'}
autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search}
placeholder={view.string.ActionPlaceholder}
/>
</div> </div>
<div class="scroll"> <div class="scroll">
<div class="box"> <div class="box">
@ -312,7 +322,7 @@
min-width: 1.5rem; min-width: 1.5rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background-color: var(--theme-button-enabled); background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-divider-color); border: 1px solid var(--theme-button-border);
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.key-box + .key-box { .key-box + .key-box {
@ -326,9 +336,13 @@
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.category-box { .category-box {
display: inline-block; display: flex;
align-items: center;
padding: 0.5rem 1rem;
min-height: 2rem;
text-transform: uppercase;
font-weight: 500;
font-size: 0.625rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background-color: var(--theme-comp-header-color);
padding: 0.5rem;
} }
</style> </style>

4
plugins/view-resources/src/components/NumberEditor.svelte
View File

@ -22,7 +22,7 @@
// export let label: IntlString // export let label: IntlString
export let placeholder: IntlString export let placeholder: IntlString
export let value: number | undefined export let value: number | undefined
export let focus: boolean = false export let autoFocus: boolean = false
// export let maxWidth: string = '10rem' // export let maxWidth: string = '10rem'
export let onChange: (value: number | undefined) => void export let onChange: (value: number | undefined) => void
export let kind: 'no-border' | 'link' | 'button' = 'no-border' export let kind: 'no-border' | 'link' | 'button' = 'no-border'
@ -74,5 +74,5 @@
<span class="content-dark-color"><Label label={placeholder} /></span> <span class="content-dark-color"><Label label={placeholder} /></span>
{/if} {/if}
{:else} {:else}
<EditBox {placeholder} bind:value format={'number'} {focus} on:change={_onchange} /> <EditBox {placeholder} bind:value format={'number'} {autoFocus} on:change={_onchange} />
{/if} {/if}

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

@ -22,7 +22,7 @@
// export let label: IntlString // export let label: IntlString
export let placeholder: IntlString export let placeholder: IntlString
export let value: string export let value: string
export let focus: boolean = false export let autoFocus: boolean = false
export let select: boolean = false export let select: boolean = false
export let onChange: (value: string) => void = () => {} export let onChange: (value: string) => void = () => {}
export let kind: ButtonKind | undefined = undefined export let kind: ButtonKind | undefined = undefined
@ -71,5 +71,5 @@
<span class="content-dark-color"><Label label={placeholder} /></span> <span class="content-dark-color"><Label label={placeholder} /></span>
{/if} {/if}
{:else} {:else}
<EditBox {placeholder} bind:value {focus} {select} on:change={_onchange} /> <EditBox {placeholder} bind:value {autoFocus} {select} on:change={_onchange} />
{/if} {/if}

2
plugins/view-resources/src/components/filter/FilterSave.svelte
View File

@ -57,7 +57,7 @@
placeholder={view.string.FilteredViewName} placeholder={view.string.FilteredViewName}
bind:value={filterName} bind:value={filterName}
kind={'large-style'} kind={'large-style'}
focus autoFocus
focusIndex={1} focusIndex={1}
/> />
</div> </div>

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

@ -173,7 +173,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
placeholder={presentation.string.Search} placeholder={presentation.string.Search}
on:change={() => { on:change={() => {

2
plugins/view-resources/src/components/filter/StringFilter.svelte
View File

@ -54,7 +54,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
placeholder={filter.key.label} placeholder={filter.key.label}
on:change on:change

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

@ -148,7 +148,7 @@
icon={IconSearch} icon={IconSearch}
size={'large'} size={'large'}
width={'100%'} width={'100%'}
focus={!$deviceOptionsStore.isMobile} autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search} bind:value={search}
placeholder={presentation.string.Search} placeholder={presentation.string.Search}
on:change={() => { on:change={() => {

6
plugins/view-resources/src/components/list/ListHeader.svelte
View File

@ -61,8 +61,9 @@
let accentColor: ColorDefinition | undefined = undefined let accentColor: ColorDefinition | undefined = undefined
$: showColors = (viewOptions as any).shouldShowColors !== false
$: headerBGColor = $: headerBGColor =
level === 0 && (viewOptions as any).shouldShowColors !== false level === 0 && showColors
? accentColor?.background ?? defaultBackground($themeStore.dark) ? accentColor?.background ?? defaultBackground($themeStore.dark)
: defaultBackground($themeStore.dark) : defaultBackground($themeStore.dark)
@ -84,6 +85,7 @@
style:--header-bg-color={headerBGColor} style:--header-bg-color={headerBGColor}
class="flex-between categoryHeader row" class="flex-between categoryHeader row"
class:flat class:flat
class:noDivide={showColors}
class:collapsed class:collapsed
class:subLevel={level !== 0} class:subLevel={level !== 0}
class:lastCat class:lastCat
@ -225,6 +227,8 @@
} }
&::after { &::after {
border: 1px solid var(--theme-list-border-color); border: 1px solid var(--theme-list-border-color);
}
&.noDivide::after {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
&::before { &::before {

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

@ -79,7 +79,7 @@
icon={clazz.icon} icon={clazz.icon}
bind:value={space.name} bind:value={space.name}
placeholder={clazz.label} placeholder={clazz.label}
focus autoFocus
on:change={onNameChange} on:change={onNameChange}
/> />
<!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> --> <!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> -->