hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-22 03:14:40 +03:00
Code Issues Actions 3 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}
size={'large'}
width={'100%'}
focus={!$deviceOptionsStore.isMobile}
autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search}
on:change={() => dispatch('search', search)}
on:input={() => dispatch('search', search)}

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

@ -11,7 +11,7 @@
</script>
<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-doc text-base max-h-125">
<div class="flex">

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

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

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

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

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

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

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

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

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

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

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

@ -355,6 +355,18 @@
&.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 {
display: flex;
flex-direction: column;

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

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

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

@ -28,6 +28,7 @@
export let shrink: boolean = false
export let showLoading = true
export let inline: boolean = false
export let disabled: boolean = false
$: component = is != null ? getResource(is) : Promise.reject(new Error('is not defined'))
</script>
@ -40,11 +41,33 @@
{:then Ctor}
<ErrorBoundary>
{#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 />
</Ctor>
{: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}
</ErrorBoundary>
{:catch err}

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

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

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

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

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

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

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

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

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

@ -191,6 +191,8 @@
class:doublePadding={$tooltip.label}
use:resizeObserver={(element) => {
clWidth = element.clientWidth
if (kind === 'submenu') fitSubmenu()
else fitTooltip(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)'} />
{/if}
{#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}
<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}
<div class="antiHSpacer" />
{/each}
{#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
{#if i === 0 && !presentersOnly}
<IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if}
{#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}
<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}
<div class="antiHSpacer" />
{/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}
<EditBox bind:value />
{: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}
<BooleanEditor {value} {onChange} />
{/if}

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

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

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

@ -60,7 +60,7 @@
icon={IconFolder}
bind:value={name}
placeholder={board.string.Board}
focus
autoFocus
/>
<!-- <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}
icon={board.icon.Card}
placeholder={board.string.CardPlaceholder}
focus
autoFocus
/>
</Grid>
</Card>

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

@ -146,7 +146,12 @@
}}
/>
</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">
<StyledTextBox
alwaysEdit={true}

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

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

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

@ -118,7 +118,7 @@
<div class="flex-col flex-gap-1">
<Label label={board.string.Title} />
<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>

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

@ -97,7 +97,7 @@
}}
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">
<DateRangePresenter
value={startDate}

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

@ -69,7 +69,7 @@
}}
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">
<!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
<DateRangePresenter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,12 +17,13 @@
import { EmployeeAccount } from '@hcengineering/contact'
import core, { Account, systemAccountEmail } from '@hcengineering/core'
import { getEmbeddedLabel } from '@hcengineering/platform'
import { Label, tooltip } from '@hcengineering/ui'
import { Label, tooltip, IconSize } from '@hcengineering/ui'
import { employeeByIdStore } from '../utils'
import Avatar from './Avatar.svelte'
import EmployeePresenter from './EmployeePresenter.svelte'
export let value: Account
export let avatarSize: IconSize = 'x-small'
export let disabled = false
export let inline = false
@ -34,10 +35,10 @@
{#if value}
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if employee}
<EmployeePresenter value={employee} {disabled} {inline} />
<EmployeePresenter value={employee} {disabled} {inline} {avatarSize} />
{:else}
<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>
</div>
{/if}

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

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

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

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

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

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

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

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

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

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

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

@ -70,7 +70,7 @@
on:changeContent
>
<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 class="flex-grow mt-4">
<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">
<Button focusIndex={1} icon={inventory.icon.Categories} size={'medium'} kind={'link-bordered'} disabled />
</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>
</Card>

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

@ -80,7 +80,7 @@
<div class="mr-3">
<Button focusIndex={1} icon={inventory.icon.Products} size={'medium'} kind={'link-bordered'} disabled />
</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>
<svelte:fragment slot="pool">
<DropdownLabels

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

@ -66,7 +66,7 @@
on:changeContent
>
<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} />
</Grid>
</Card>

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

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

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

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

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

@ -147,7 +147,13 @@
<div class="mr-3">
<Button focusIndex={1} icon={lead.icon.Lead} size={'medium'} kind={'link-bordered'} disabled />
</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>
<svelte:fragment slot="pool">

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -157,7 +157,7 @@
on:changeContent
>
<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'} />
<StyledTextArea bind:content={description} placeholder={recruit.string.AddDescription} kind={'emphasized'} />
<svelte:fragment slot="pool">

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

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

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

@ -62,5 +62,5 @@
</div>
</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>

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

@ -108,7 +108,7 @@
placeholder={contact.string.PersonFirstNamePlaceholder}
bind:value={firstName}
kind={'large-style'}
focus
autoFocus
focusIndex={1}
on:change={async () => {
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}
placeholderParam={{ word: keyTitle }}
kind={'large-style'}
focus
autoFocus
/>
<div class="mt-2">
<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}
size={'large'}
width={'100%'}
focus={!$deviceOptionsStore.isMobile}
autoFocus={!$deviceOptionsStore.isMobile}
bind:value={search}
placeholder={presentation.string.Search}
on:input={() => getValues(search)}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -58,7 +58,12 @@
size={'large'}
/>
</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
bind:content={object.description}
placeholder={tracker.string.ComponentDescriptionPlaceholder}

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

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

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

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

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

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

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

@ -70,7 +70,12 @@
bind:space
/>
</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
bind:content={object.description}
placeholder={tracker.string.ComponentDescriptionPlaceholder}

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

@ -259,7 +259,7 @@
bind:value={name}
placeholder={tracker.string.ProjectTitlePlaceholder}
kind={'large-style'}
focus
autoFocus
on:input={() => {
if (isNew) {
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">
<SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
</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
bind:content={object.description}
placeholder={tracker.string.ScrumDescriptionPlaceholder}

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

@ -144,7 +144,12 @@
<Label {label} />
</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
alwaysEdit
showButtons={false}

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

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

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

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

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

@ -16,9 +16,18 @@
import { WithLookup, Doc } from '@hcengineering/core'
import { getResource, translate } from '@hcengineering/platform'
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 { onMount } from 'svelte'
import { filterActions, getSelection } from '../actions'
import view from '../plugin'
import { focusStore, selectionStore } from '../selection'
@ -31,7 +40,7 @@
let search: string = ''
let actions: WithLookup<Action>[] = []
let input: HTMLInputElement | undefined
let input: EditWithIcon
const query = createQuery()
@ -112,15 +121,6 @@
}
$: filterSearchActions(supportedActions, search)
let phTraslate: string = ''
$: translate(view.string.ActionPlaceholder, {}).then((res) => {
phTraslate = res
})
onMount(() => {
if (input) input.focus()
})
let selection = 0
let list: ListView
/* eslint-disable no-undef */
@ -202,34 +202,36 @@
on:keydown={onKeydown}
use:resizeObserver={() => dispatch('changeContent')}
>
<div class="mt-2 ml-2 flex-between">
{#if $selectionStore.length > 0}
<div class="item-box">
{$selectionStore.length} items
</div>
{:else if $focusStore.focus !== undefined}
<div class="item-box">
<ObjectPresenter
objectId={$focusStore.focus._id}
_class={$focusStore.focus._class}
value={$focusStore.focus}
props={{ inline: true }}
/>
</div>
{/if}
{#if activeAction && activeAction?.actionPopup !== undefined}
<div class="mt-2 mb-2 mr-2">
<Button
icon={IconArrowLeft}
label={ui.string.Back}
on:click={() => {
activeAction = undefined
}}
width={'fit-content'}
/>
</div>
{/if}
</div>
{#if $selectionStore.length > 0 || $focusStore.focus !== undefined || (activeAction && activeAction?.actionPopup !== undefined)}
<div class="mt-2 ml-2 flex-between">
{#if $selectionStore.length > 0}
<div class="item-box">
{$selectionStore.length} items
</div>
{:else if $focusStore.focus !== undefined}
<div class="item-box">
<ObjectPresenter
objectId={$focusStore.focus._id}
_class={$focusStore.focus._class}
value={$focusStore.focus}
props={{ inline: true }}
/>
</div>
{/if}
{#if activeAction && activeAction?.actionPopup !== undefined}
<div class="mt-2 mb-2 mr-2">
<Button
icon={IconArrowLeft}
label={ui.string.Back}
on:click={() => {
activeAction = undefined
}}
width={'fit-content'}
/>
</div>
{/if}
</div>
{/if}
{#if activeAction && activeAction?.actionPopup !== undefined}
<Component
is={activeAction?.actionPopup}
@ -247,7 +249,15 @@
/>
{:else}
<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 class="scroll">
<div class="box">
@ -312,7 +322,7 @@
min-width: 1.5rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-divider-color);
border: 1px solid var(--theme-button-border);
border-radius: 0.25rem;
}
.key-box + .key-box {
@ -326,9 +336,13 @@
border-radius: 0.25rem;
}
.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);
background-color: var(--theme-comp-header-color);
padding: 0.5rem;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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