diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index ac9b3faf76..f8c81bc590 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -15,6 +15,7 @@ /* CLEAR */ a { + min-width: 0; font: inherit; font-weight: 500; text-decoration: none; diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 04887c46f7..39bca6e0b7 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -232,6 +232,7 @@ .ap-scroll { flex-grow: 1; margin: 0; + min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; @@ -246,11 +247,13 @@ flex-direction: column; padding: 0; height: 100%; + min-width: 0; } .ap-menuItem { flex-shrink: 0; justify-content: flex-start; text-align: left; + min-width: 0; color: var(--theme-caption-color); cursor: pointer; @@ -278,7 +281,42 @@ &.withIcon { .icon { color: var(--theme-dark-color); } &.hover .icon { color: var(--theme-dark-color); } - } + } + &.withDrag { + width: calc(100% - 1rem); + padding: .5rem .5rem .5rem .125rem; + + .drag { + flex-shrink: 0; + margin-right: .375rem; + color: var(--theme-trans-color); + } + .icon { + flex-shrink: 0; + margin-right: .5rem; + } + .logo { + overflow: hidden; + flex-shrink: 0; + margin-right: .5rem; + width: 2rem; + height: 2rem; + border-radius: .25rem; + + &.empty { background-color: var(--theme-button-pressed); } + } + .label { font-weight: 500; } + .description { + font-size: 0.6875rem; + color: var(--theme-halfcontent-color); + } + .check { + flex-shrink: 0; + margin-left: .5rem; + width: 1rem; + color: var(--theme-dark-color); + } + } // &:hover { background-color: var(--popup-bg-hover); } &.hover { diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index cca4766f96..7a1365590a 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -235,6 +235,24 @@ export function fitPopupElement ( newProps.top = newProps.bottom = '15%' newProps.left = newProps.right = '25%' show = true + } else if (element === 'logo') { + newProps.top = '2.75rem' + newProps.left = '5rem' + newProps.maxWidth = '42rem' + newProps.maxHeight = 'calc(100vh - 5.5rem)' + show = true + } else if (element === 'logo-mini') { + newProps.top = '2.5rem' + newProps.left = '.5rem' + newProps.maxWidth = '42rem' + newProps.maxHeight = 'calc(100vh - 5.5rem)' + show = true + } else if (element === 'logo-portrait') { + newProps.bottom = 'calc(var(--app-panel-width) + .75rem)' + newProps.left = '.5rem' + newProps.maxWidth = 'calc(100vw - 1rem)' + newProps.maxHeight = 'calc(100vh - var(--app-panel-width) - 1.5rem)' + show = true } else if (element === 'account') { newProps.bottom = '2.75rem' newProps.left = '5rem' diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 5f9d465741..2c1090aefd 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -141,6 +141,9 @@ export type PopupPosAlignment = | 'right' | 'top' | 'float' + | 'logo' + | 'logo-mini' + | 'logo-portrait' | 'account' | 'account-portrait' | 'account-mobile' @@ -159,6 +162,9 @@ export function isPopupPosAlignment (x: any): x is PopupPosAlignment { (x === 'right' || x === 'top' || x === 'float' || + x === 'logo' || + x === 'logo-mini' || + x === 'logo-portrait' || x === 'account' || x === 'full' || x === 'content' || diff --git a/plugins/login-assets/assets/icons.svg b/plugins/login-assets/assets/icons.svg index 45e4d95902..0701404f39 100644 --- a/plugins/login-assets/assets/icons.svg +++ b/plugins/login-assets/assets/icons.svg @@ -1,26 +1,7 @@ - - - - - - - + + + + diff --git a/plugins/setting-assets/assets/icons.svg b/plugins/setting-assets/assets/icons.svg index b066bf0a19..e3981d0072 100644 --- a/plugins/setting-assets/assets/icons.svg +++ b/plugins/setting-assets/assets/icons.svg @@ -6,9 +6,9 @@ - - - + + + @@ -16,19 +16,16 @@ - - - + + + - - - - - + + - - - + + + diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte index 568581c3a4..438ce0e6fa 100644 --- a/plugins/tags-resources/src/components/TagReferencePresenter.svelte +++ b/plugins/tags-resources/src/components/TagReferencePresenter.svelte @@ -44,9 +44,7 @@ }} >
- {value.title} + {value.title} {:else if kind === 'list'}
- + {value.title} {#if isEditable} diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte index 3510b11be6..0233fd5a93 100644 --- a/plugins/tags-resources/src/components/TagsFilter.svelte +++ b/plugins/tags-resources/src/components/TagsFilter.svelte @@ -199,7 +199,7 @@ }} >
- {element.title} + {element.title}
{#if isSelected(element)} diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte index e414bc7714..0e266bce96 100644 --- a/plugins/tags-resources/src/components/TagsPopup.svelte +++ b/plugins/tags-resources/src/components/TagsPopup.svelte @@ -169,7 +169,7 @@ }} >
- {element.title} + {element.title} ({element.refCount ?? 0}) diff --git a/plugins/view-resources/src/components/navigator/NavLink.svelte b/plugins/view-resources/src/components/navigator/NavLink.svelte index 4f776202aa..8ffeb5e375 100644 --- a/plugins/view-resources/src/components/navigator/NavLink.svelte +++ b/plugins/view-resources/src/components/navigator/NavLink.svelte @@ -20,6 +20,7 @@ export let space: string | undefined = undefined export let special: string | undefined = undefined export let disabled = false + export let shrink: number | undefined = undefined $: loc = createLocation($location, app, space, special) @@ -60,7 +61,7 @@ {#if disabled} {:else} - + {/if} diff --git a/plugins/workbench-resources/src/components/AccountPopup.svelte b/plugins/workbench-resources/src/components/AccountPopup.svelte index 96bfe95c2e..f22e8da731 100644 --- a/plugins/workbench-resources/src/components/AccountPopup.svelte +++ b/plugins/workbench-resources/src/components/AccountPopup.svelte @@ -31,14 +31,12 @@ getCurrentResolvedLocation, locationToUrl, navigate, - resolvedLocationStore, setMetadataLocalStorage, showPopup } from '@hcengineering/ui' import view from '@hcengineering/view' import workbench from '../plugin' import HelpAndSupport from './HelpAndSupport.svelte' - import SelectWorkspaceMenu from './SelectWorkspaceMenu.svelte' let items: SettingsCategory[] = [] @@ -67,12 +65,12 @@ { limit: 1 } ) - function selectCategory (sp: SettingsCategory): void { + function selectCategory (sp?: SettingsCategory): void { closePopup() closePanel() const loc = getCurrentResolvedLocation() loc.path[2] = settingId - loc.path[3] = sp.name + if (sp) loc.path[3] = sp.name loc.path.length = 4 navigate(loc) } @@ -135,23 +133,13 @@ let actions: Action[] = [] $: { actions = [] - const subActions: Action[] = getMenu(items, ['settings', 'settings-editor']) actions.push({ icon: view.icon.Setting, label: setting.string.Settings, - action: async () => {}, - component: Menu, - props: { actions: subActions } + action: async () => selectCategory() }) actions.push( ...getMenu(items, ['main']), - { - icon: setting.icon.SelectWorkspace, - label: setting.string.SelectWorkspace, - action: async () => {}, - component: SelectWorkspaceMenu, - group: 'end' - }, { icon: login.icon.InviteWorkspace, label: setting.string.InviteWorkspace, @@ -179,9 +167,8 @@ -
{$resolvedLocationStore.path[1]}
{ menu.clearFocus() }} @@ -199,5 +186,6 @@ {/if}
+
diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte index 0a0fc21f49..74f5b77f0a 100644 --- a/plugins/workbench-resources/src/components/Applications.svelte +++ b/plugins/workbench-resources/src/components/Applications.svelte @@ -47,7 +47,7 @@ buttons={'union'} > {#each apps.filter((it) => (shown ? true : !hiddenAppsIds.includes(it._id))) as app} - + - + + +