diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index 4057eabee4..fb4a151605 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -279,17 +279,17 @@ export function createModel (builder: Builder): void { attachTo: tracker.class.Issue, descriptor: tracker.viewlet.List, config: [ - { key: '', presenter: tracker.component.PriorityEditor }, + { key: '', presenter: tracker.component.PriorityEditor, props: { kind: 'list', size: 'small' } }, '@currentTeam', '@statuses', - { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } }, - { key: '', presenter: tracker.component.DueDatePresenter }, + { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true, fixed: 'left' } }, + { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } }, { key: '', presenter: tracker.component.ProjectEditor, - props: { kind: 'secondary', size: 'small', shape: 'round', shouldShowPlaceholder: false } + props: { kind: 'list', size: 'small', shape: 'round', shouldShowPlaceholder: false } }, - { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter }, + { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter, props: { fixed: 'right' } }, { key: '$lookup.assignee', presenter: tracker.component.AssigneePresenter, diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte index c975c121d2..07d6a2955f 100644 --- a/packages/kanban/src/components/Kanban.svelte +++ b/packages/kanban/src/components/Kanban.svelte @@ -346,6 +346,7 @@ diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte index ae06a767b2..26f529faa5 100644 --- a/packages/presentation/src/components/MessageBox.svelte +++ b/packages/presentation/src/components/MessageBox.svelte @@ -61,7 +61,7 @@ display: grid; grid-auto-flow: column; direction: rtl; - justify-content: start; + justify-content: flex-start; align-items: center; column-gap: 0.5rem; // mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem); diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 25b36f364a..27b0883f55 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -218,7 +218,7 @@ input.search { .icon { margin-right: .5rem; - color: var(--theme-content-dark-color); + color: var(--dark-color); &.circle { padding: .25rem; @@ -282,7 +282,7 @@ input.search { .buttons-group { display: grid; grid-auto-flow: column; - justify-content: start; + justify-content: flex-start; align-items: center; gap: .75rem; @@ -302,7 +302,7 @@ input.search { background-color: var(--divider-color); } -.gap-1, .gap-1-5, .gap-2 { +.gap-1, .gap-1-5 { & > *:not(:last-child) { margin-right: .25rem; } &.reverse { flex-direction: row-reverse; @@ -315,7 +315,7 @@ input.search { &.reverse > :last-child { margin-right: .375rem; } } .gap-2 { - & > * { margin-right: .5rem; } + & > *:not(:first-child) { margin-left: .5rem; } &.reverse > :last-child { margin-right: .5rem; } } @@ -494,6 +494,7 @@ input.search { min-width: 0; min-height: 0; } +.square-4 { width: 1rem; height: 1rem; } .square-36 { width: 2.25rem; height: 2.25rem; } /* --------- */ diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 74522c66aa..9be224ba7d 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -478,7 +478,9 @@ } .antiList__row { - .antiList-cells__notifyCell { + .antiList-cells__notifyCell, + .antiList-cells__checkCell { + flex-shrink: 0; z-index: 1; } diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss index 17db5bd9ec..c0b3ce4695 100644 --- a/packages/theme/styles/dialogs.scss +++ b/packages/theme/styles/dialogs.scss @@ -96,7 +96,7 @@ display: grid; grid-auto-flow: column; direction: rtl; - justify-content: start; + justify-content: flex-start; align-items: center; column-gap: .75rem; padding: 1.5rem 1rem 1rem; diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 0104cc74d8..a87d17e1a0 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -91,7 +91,7 @@ .menu-item { flex-shrink: 0; - justify-content: start; + justify-content: flex-start; padding: .25rem .75rem; min-height: 2rem; text-align: left; @@ -216,7 +216,7 @@ height: 100%; } .ap-menuItem { - justify-content: start; + justify-content: flex-start; padding: 0 .5rem; height: 2rem; color: var(--caption-color); @@ -331,7 +331,7 @@ grid-auto-flow: column; direction: rtl; grid-gap: 0.5rem; - justify-content: start; + justify-content: flex-start; padding: 1rem 1.75rem 1.75rem 0.5rem; overflow: hidden; } @@ -342,7 +342,7 @@ display: flex; align-items: center; flex-shrink: 0; - justify-content: start; + justify-content: flex-start; padding: .25rem .75rem; min-width: 0; min-height: 2rem; diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index d1132dc0f7..b70443b0b1 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -110,8 +110,13 @@ {#if icon && !loading}
@@ -306,6 +311,22 @@ } } } + &.list { + padding: 0 0.625em 0 0.5rem; + min-height: 1.75rem; + color: var(--content-color); + background-color: var(--body-color); + border: 1px solid var(--divider-color); + border-radius: 3rem; + transition-property: border, color, background-color; + transition-duration: 0.15s; + + &:hover { + color: var(--caption-color); + background-color: var(--board-card-bg-color); + border-color: var(--button-border-color); + } + } &.primary { padding: 0 1rem; color: var(--white-color); diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte index 3684c8d8d6..1f750a168d 100644 --- a/packages/ui/src/components/EditWithIcon.svelte +++ b/packages/ui/src/components/EditWithIcon.svelte @@ -26,6 +26,7 @@ export let value: string | undefined = undefined export let placeholder: IntlString = plugin.string.EditBoxPlaceholder export let focus: boolean = false + export let size: 'small' | 'medium' = 'medium' const dispatch = createEventDispatcher() let textHTML: HTMLInputElement @@ -42,7 +43,7 @@ } -
textHTML.focus()}> +
textHTML.focus()}>
@@ -62,13 +63,18 @@ diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte index a052bb2953..0c259d85c0 100644 --- a/packages/ui/src/components/calendar/DatePresenter.svelte +++ b/packages/ui/src/components/calendar/DatePresenter.svelte @@ -31,7 +31,7 @@ export let showIcon = true export let shouldShowLabel: boolean = true export let size: 'x-small' | 'small' = 'small' - export let kind: 'transparent' | 'primary' | 'link' = 'primary' + export let kind: 'transparent' | 'primary' | 'link' | 'list' = 'primary' const dispatch = createEventDispatcher() @@ -219,6 +219,22 @@ } } } + &.list { + padding: 0 0.625em 0 0.5rem; + min-height: 1.75rem; + color: var(--content-color); + background-color: var(--body-color); + border: 1px solid var(--divider-color); + border-radius: 3rem; + transition-property: border, color, background-color; + transition-duration: 0.15s; + + &:hover { + color: var(--caption-color); + background-color: var(--board-card-bg-color); + border-color: var(--button-border-color); + } + } .time-divider { flex-shrink: 0; diff --git a/packages/ui/src/components/icons/DownOutline.svelte b/packages/ui/src/components/icons/DownOutline.svelte index f3bf3b4247..a7b70d23e3 100644 --- a/packages/ui/src/components/icons/DownOutline.svelte +++ b/packages/ui/src/components/icons/DownOutline.svelte @@ -1,5 +1,5 @@ diff --git a/packages/ui/src/components/icons/Expand.svelte b/packages/ui/src/components/icons/Expand.svelte index b2eb018f81..91d1752a30 100644 --- a/packages/ui/src/components/icons/Expand.svelte +++ b/packages/ui/src/components/icons/Expand.svelte @@ -1,5 +1,5 @@ diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 398b07b0bc..86e51dca0b 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -71,9 +71,18 @@ export interface TabItem { labelIntl?: IntlString icon?: Asset | AnySvelteComponent color?: string + tooltip?: IntlString } -export type ButtonKind = 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'link-bordered' | 'dangerous' +export type ButtonKind = + | 'primary' + | 'secondary' + | 'no-border' + | 'transparent' + | 'link' + | 'link-bordered' + | 'dangerous' + | 'list' export type ButtonSize = 'inline' | 'small' | 'medium' | 'large' | 'x-large' export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | undefined export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style' diff --git a/plugins/attachment-resources/src/components/FileBrowser.svelte b/plugins/attachment-resources/src/components/FileBrowser.svelte index 6fd987508a..d6e992af74 100644 --- a/plugins/attachment-resources/src/components/FileBrowser.svelte +++ b/plugins/attachment-resources/src/components/FileBrowser.svelte @@ -17,16 +17,7 @@ import contact, { Employee, EmployeeAccount } from '@anticrm/contact' import core, { Class, getCurrentAccount, Ref, Space } from '@anticrm/core' import { getClient } from '@anticrm/presentation' - import ui, { - EditWithIcon, - getCurrentLocation, - Icon, - IconSearch, - Label, - navigate, - Loading, - Tooltip - } from '@anticrm/ui' + import ui, { EditWithIcon, getCurrentLocation, IconSearch, Label, navigate, Loading, TabList } from '@anticrm/ui' import view from '@anticrm/view' import { dateFileBrowserFilters, FileBrowserSortMode, fileTypeFileBrowserFilters, sortModeToOptionObject } from '..' import attachment from '../plugin' @@ -115,7 +106,7 @@
- +
{/if}
@@ -127,30 +118,18 @@ bind:selectedDateId bind:selectedFileTypeId /> -
- - - - - - -
+ { + if (result.detail !== undefined) isListDisplayMode = result.detail === 'table' ?? false + }} + />
diff --git a/plugins/board-resources/src/components/BoardHeader.svelte b/plugins/board-resources/src/components/BoardHeader.svelte index 18a51d6a79..f6ec76f224 100644 --- a/plugins/board-resources/src/components/BoardHeader.svelte +++ b/plugins/board-resources/src/components/BoardHeader.svelte @@ -1,6 +1,6 @@
@@ -36,26 +44,22 @@ {space.description}
{#if viewlets.length > 1} -
- {#each viewlets as v, i} - - - - {/each} -
+ { + if (result.detail !== undefined) { + const viewlet = viewlets.find((vl) => vl._id === result.detail.id) + dispatch('change', viewlet) + } + }} + /> {/if} {#if showMenuButton} -
diff --git a/plugins/calendar-assets/assets/icons.svg b/plugins/calendar-assets/assets/icons.svg index 71edd83dd1..f6da8a796b 100644 --- a/plugins/calendar-assets/assets/icons.svg +++ b/plugins/calendar-assets/assets/icons.svg @@ -1,15 +1,12 @@ - - - - - - - - - - + + + + + + + diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte index 916b09088e..bb9506e9ea 100644 --- a/plugins/calendar-resources/src/components/Events.svelte +++ b/plugins/calendar-resources/src/components/Events.svelte @@ -27,7 +27,7 @@ Loading, SearchEdit, showPopup, - Tooltip + TabList } from '@anticrm/ui' import view, { Viewlet, ViewletPreference } from '@anticrm/view' import { FilterButton, ViewletSettingButton } from '@anticrm/view-resources' @@ -91,6 +91,13 @@ }, { limit: 1 } ) + $: viewslist = viewlets.map((views) => { + return { + id: views._id, + icon: views.$lookup?.descriptor?.icon, + tooltip: views.$lookup?.descriptor?.label + } + })
@@ -100,33 +107,26 @@
- {#if viewlets.length > 1} -
- {#each viewlets as viewlet, i} - - - - {/each} -
- {/if} - { updateResultQuery(search) }} /> -
diff --git a/plugins/chunter-resources/src/components/ChunterBrowser.svelte b/plugins/chunter-resources/src/components/ChunterBrowser.svelte index e879461a4e..3e6e42b713 100644 --- a/plugins/chunter-resources/src/components/ChunterBrowser.svelte +++ b/plugins/chunter-resources/src/components/ChunterBrowser.svelte @@ -110,14 +110,14 @@ .browser { flex-grow: 2; display: flex; - justify-content: start; + justify-content: flex-start; flex-direction: column-reverse; } .bar { flex-grow: 1; display: flex; - justify-content: start; + justify-content: flex-start; max-height: 4rem; } diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte index 7ba7c50cab..eb18c47db3 100644 --- a/plugins/contact-resources/src/components/Contacts.svelte +++ b/plugins/contact-resources/src/components/Contacts.svelte @@ -86,6 +86,7 @@ icon={IconAdd} label={contact.string.ContactCreateLabel} kind={'primary'} + size={'small'} on:click={(ev) => showCreateDialog(ev)} /> diff --git a/plugins/contact-resources/src/components/OrganizationCard.svelte b/plugins/contact-resources/src/components/OrganizationCard.svelte index cc188b4fae..532993ea2a 100644 --- a/plugins/contact-resources/src/components/OrganizationCard.svelte +++ b/plugins/contact-resources/src/components/OrganizationCard.svelte @@ -87,9 +87,5 @@ font-size: 1rem; color: var(--theme-caption-color); } - .description { - font-size: 0.75rem; - color: var(--theme-content-dark-color); - } } diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte index 911844364f..f7b936f15d 100644 --- a/plugins/inventory-resources/src/components/Categories.svelte +++ b/plugins/inventory-resources/src/components/Categories.svelte @@ -45,7 +45,13 @@ updateResultQuery(search) }} /> -
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte index 3d1d4bbc28..9762123b1d 100644 --- a/plugins/recruit-resources/src/components/Vacancies.svelte +++ b/plugins/recruit-resources/src/components/Vacancies.svelte @@ -143,7 +143,13 @@ search = e.detail }} /> -
{#if descr} diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte index 56f298e755..95dd6ce700 100644 --- a/plugins/tags-resources/src/components/TagsView.svelte +++ b/plugins/tags-resources/src/components/TagsView.svelte @@ -98,7 +98,7 @@ updateResultQuery(search, category) }} /> - - - - {/each} - + { + if (result.detail !== undefined) { + viewlet = viewlets.find((vl) => vl._id === result.detail.id) + if (viewlet) setActiveViewletId(viewlet._id) + } + }} + /> {/if} - + + diff --git a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte index c53d710d49..c177ce21a6 100644 --- a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte +++ b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte @@ -152,7 +152,7 @@ _class={tracker.class.Project} itemsConfig={[ { key: '', presenter: tracker.component.IconPresenter }, - { key: '', presenter: tracker.component.ProjectPresenter }, + { key: '', presenter: tracker.component.ProjectPresenter, props: { kind: 'list' } }, { key: '$lookup.lead', presenter: tracker.component.LeadPresenter, diff --git a/plugins/view-assets/assets/icons.svg b/plugins/view-assets/assets/icons.svg index d8a22e3f30..0373f14fc5 100644 --- a/plugins/view-assets/assets/icons.svg +++ b/plugins/view-assets/assets/icons.svg @@ -1,23 +1,17 @@ - - - - - + + + + - - - - - - - - - - - + + + + + + @@ -65,4 +59,7 @@ + + + diff --git a/plugins/view-assets/src/index.ts b/plugins/view-assets/src/index.ts index 9acef408a6..1b691bb9a4 100644 --- a/plugins/view-assets/src/index.ts +++ b/plugins/view-assets/src/index.ts @@ -30,7 +30,8 @@ loadMetadata(view.icon, { ArrowRight: `${icons}#arrow-right`, Views: `${icons}#views`, Pin: `${icons}#pin`, - Model: `${icons}#model` + Model: `${icons}#model`, + ViewButton: `${icons}#viewButton` }) addStringsLoader(viewId, async (lang: string) => await import(`../lang/${lang}.json`)) diff --git a/plugins/view-resources/src/components/EnumEditor.svelte b/plugins/view-resources/src/components/EnumEditor.svelte index 6fe471f079..d6428b6bde 100644 --- a/plugins/view-resources/src/components/EnumEditor.svelte +++ b/plugins/view-resources/src/components/EnumEditor.svelte @@ -21,7 +21,7 @@ export let label: IntlString export let value: string export let type: EnumOf - export let focus: boolean + // export let focus: boolean export let onChange: (value: string) => void let items: DropdownTextItem[] = [] diff --git a/plugins/view-resources/src/components/FixedColumn.svelte b/plugins/view-resources/src/components/FixedColumn.svelte new file mode 100644 index 0000000000..3fca0ceb08 --- /dev/null +++ b/plugins/view-resources/src/components/FixedColumn.svelte @@ -0,0 +1,38 @@ + + + +
+ +
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte index 43b13139f9..51a3fa5dd4 100644 --- a/plugins/view-resources/src/components/ViewletSettingButton.svelte +++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte @@ -13,22 +13,41 @@ // limitations under the License. --> {#if viewlet} - - {/if} + + diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts index e3eba9de9c..0a0e2c9ff1 100644 --- a/plugins/view-resources/src/index.ts +++ b/plugins/view-resources/src/index.ts @@ -63,6 +63,7 @@ export { default as FilterButton } from './components/filter/FilterButton.svelte export { default as LinkPresenter } from './components/LinkPresenter.svelte' export { default as ContextMenu } from './components/Menu.svelte' export { default as TableBrowser } from './components/TableBrowser.svelte' +export { default as FixedColumn } from './components/FixedColumn.svelte' export * from './context' export * from './selection' export { diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts index 95a619d432..935d6582d9 100644 --- a/plugins/view/src/index.ts +++ b/plugins/view/src/index.ts @@ -422,7 +422,8 @@ const view = plugin(viewId, { ArrowRight: '' as Asset, Views: '' as Asset, Pin: '' as Asset, - Model: '' as Asset + Model: '' as Asset, + ViewButton: '' as Asset }, category: { General: '' as Ref, diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte index eb20f61eb5..359c040ee8 100644 --- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte +++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte @@ -118,7 +118,7 @@ {#if createItemDialog} - - - {/each} - - {/if} { @@ -110,7 +98,25 @@ }} /> {#if createItemDialog} -