From ad54f56f4cebb71d502ea75d2a21e2996617ba9a Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Fri, 8 Nov 2024 08:43:06 +0300 Subject: [PATCH] Adaptive aSide in Settings (#7130) Signed-off-by: Alexander Platov --- models/setting/src/index.ts | 14 +++++++- models/setting/src/plugin.ts | 3 +- models/workbench/src/index.ts | 3 +- packages/theme/styles/components.scss | 1 + packages/theme/styles/tables.scss | 6 ++++ packages/ui/src/components/Modal.svelte | 3 +- packages/ui/src/resize.ts | 5 +++ .../settings/NotificationSettings.svelte | 4 +-- .../src/components/ClassAttributes.svelte | 12 +++++-- .../src/components/ClassSetting.svelte | 4 +-- .../src/components/EditAttribute.svelte | 6 ++-- .../src/components/EnumSetting.svelte | 4 +-- .../src/components/Settings.svelte | 31 +++++++++++++++--- .../src/components/SettingsWidget.svelte | 32 +++++++++++++++++++ plugins/setting-resources/src/index.ts | 4 ++- plugins/setting-resources/src/plugin.ts | 5 +++ .../src/components/Templates.svelte | 4 +-- .../src/components/sidebar/Sidebar.svelte | 5 ++- .../components/sidebar/SidebarExpanded.svelte | 4 +-- plugins/workbench-resources/src/sidebar.ts | 2 ++ tests/sanity/tests/model/sidebar-page.ts | 2 +- 21 files changed, 127 insertions(+), 27 deletions(-) create mode 100644 plugins/setting-resources/src/components/SettingsWidget.svelte diff --git a/models/setting/src/index.ts b/models/setting/src/index.ts index 39be49a0a2..3272c01439 100644 --- a/models/setting/src/index.ts +++ b/models/setting/src/index.ts @@ -38,7 +38,7 @@ import { import templates from '@hcengineering/templates' import setting from './plugin' -import workbench from '@hcengineering/model-workbench' +import workbench, { WidgetType } from '@hcengineering/model-workbench' import { type AnyComponent } from '@hcengineering/ui/src/types' export { settingId } from '@hcengineering/setting' @@ -133,6 +133,18 @@ export function createModel (builder: Builder): void { TSpaceTypeCreator ) + builder.createDoc( + workbench.class.Widget, + core.space.Model, + { + label: setting.string.Settings, + type: WidgetType.Flexible, + icon: setting.icon.Setting, + component: setting.component.SettingsWidget + }, + setting.ids.SettingsWidget + ) + builder.mixin(setting.class.Integration, core.class.Class, notification.mixin.ClassCollaborators, { fields: ['modifiedBy'] }) diff --git a/models/setting/src/plugin.ts b/models/setting/src/plugin.ts index ea9f186919..988bdcdc9f 100644 --- a/models/setting/src/plugin.ts +++ b/models/setting/src/plugin.ts @@ -46,7 +46,8 @@ export default mergeIds(settingId, setting, { InviteSetting: '' as AnyComponent, ArrayEditor: '' as AnyComponent, IntegrationPanel: '' as AnyComponent, - Configure: '' as AnyComponent + Configure: '' as AnyComponent, + SettingsWidget: '' as AnyComponent }, category: { Settings: '' as Ref diff --git a/models/workbench/src/index.ts b/models/workbench/src/index.ts index 6b669df82a..729bf39a56 100644 --- a/models/workbench/src/index.ts +++ b/models/workbench/src/index.ts @@ -41,7 +41,8 @@ import workbench from './plugin' export { workbenchId } from '@hcengineering/workbench' export { workbenchOperation } from './migration' -export type { Application } +export type { Application, Widget } +export { WidgetType } from '@hcengineering/workbench' @Model(workbench.class.Application, core.class.Doc, DOMAIN_MODEL) @UX(workbench.string.Application) diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 4b6a4671a1..4d6339f176 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -62,6 +62,7 @@ gap: var(--spacing-4); } &__container { + justify-content: stretch; height: 100%; } &__container:not(.columns), diff --git a/packages/theme/styles/tables.scss b/packages/theme/styles/tables.scss index a78349fc25..8d2d11e549 100644 --- a/packages/theme/styles/tables.scss +++ b/packages/theme/styles/tables.scss @@ -282,4 +282,10 @@ } } } + &.short .hulyTableAttr-content.withTitle { + flex-direction: column; + align-items: stretch; + + .hulyTableAttr-content__wrapper:empty { display: none; } + } } diff --git a/packages/ui/src/components/Modal.svelte b/packages/ui/src/components/Modal.svelte index 1a87012330..52586b117e 100644 --- a/packages/ui/src/components/Modal.svelte +++ b/packages/ui/src/components/Modal.svelte @@ -32,6 +32,7 @@ export let padding: string | undefined = undefined export let hidden: boolean = false export let allowFullsize: boolean = false + export let noTopIndent: boolean = false export let hideFooter: boolean = false export let adaptive: 'default' | 'freezeActions' | 'doubleRow' | 'disabled' = 'disabled' export let showCancelButton: boolean = true @@ -56,7 +57,7 @@ -
+
diff --git a/plugins/setting-resources/src/components/ClassAttributes.svelte b/plugins/setting-resources/src/components/ClassAttributes.svelte index e64ad58e98..e90ba540e1 100644 --- a/plugins/setting-resources/src/components/ClassAttributes.svelte +++ b/plugins/setting-resources/src/components/ClassAttributes.svelte @@ -26,7 +26,9 @@ getEventPositionElement, showPopup, IconSettings, - ModernButton + ModernButton, + resizeObserver, + deviceWidths } from '@hcengineering/ui' import { ObjectPresenter } from '@hcengineering/view-resources' import settings from '../plugin' @@ -144,7 +146,13 @@
{/if} {/if} -
+
{ + if (el.clientWidth < deviceWidths[0] && !el.classList.contains('short')) el.classList.add('short') + else if (el.clientWidth >= deviceWidths[0] && el.classList.contains('short')) el.classList.remove('short') + }} +>
{#if showHierarchy} diff --git a/plugins/setting-resources/src/components/ClassSetting.svelte b/plugins/setting-resources/src/components/ClassSetting.svelte index 447809776c..db44b3eb55 100644 --- a/plugins/setting-resources/src/components/ClassSetting.svelte +++ b/plugins/setting-resources/src/components/ClassSetting.svelte @@ -27,7 +27,7 @@ Header, Breadcrumb, defineSeparators, - settingsSeparators, + twoPanelsSeparators, Separator, NavGroup } from '@hcengineering/ui' @@ -97,7 +97,7 @@ $: if (ofClass !== undefined && _class !== undefined && !client.getHierarchy().isDerived(_class, ofClass)) { _class = ofClass } - defineSeparators('workspaceSettings', settingsSeparators) + defineSeparators('workspaceSettings', twoPanelsSeparators)
diff --git a/plugins/setting-resources/src/components/EditAttribute.svelte b/plugins/setting-resources/src/components/EditAttribute.svelte index 0ed76746f4..4520175069 100644 --- a/plugins/setting-resources/src/components/EditAttribute.svelte +++ b/plugins/setting-resources/src/components/EditAttribute.svelte @@ -35,6 +35,7 @@ export let attribute: AnyAttribute export let exist: boolean export let disabled: boolean = true + export let noTopIndent: boolean = false let name: string let type: Type | undefined = attribute.type @@ -133,9 +134,8 @@ okLabel={presentation.string.Save} okAction={save} canSave={!(name === undefined || name.trim().length === 0) && !disabled} - onCancel={() => { - clearSettingsStore() - }} + onCancel={clearSettingsStore} + {noTopIndent} > {#if !disabled} diff --git a/plugins/setting-resources/src/components/EnumSetting.svelte b/plugins/setting-resources/src/components/EnumSetting.svelte index e775b207e2..000e7e514b 100644 --- a/plugins/setting-resources/src/components/EnumSetting.svelte +++ b/plugins/setting-resources/src/components/EnumSetting.svelte @@ -27,7 +27,7 @@ Scroller, Separator, defineSeparators, - settingsSeparators, + twoPanelsSeparators, showPopup } from '@hcengineering/ui' import { showMenu } from '@hcengineering/view-resources' @@ -51,7 +51,7 @@ showPopup(setting.component.EditEnum, { title: setting.string.CreateEnum }, 'top') } - defineSeparators('workspaceSettings', settingsSeparators) + defineSeparators('workspaceSettings', twoPanelsSeparators)
diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte index dc6138b3ed..62170c3254 100644 --- a/plugins/setting-resources/src/components/Settings.svelte +++ b/plugins/setting-resources/src/components/Settings.svelte @@ -17,7 +17,8 @@ import { AccountRole, getCurrentAccount, hasAccountRole } from '@hcengineering/core' import login, { loginId } from '@hcengineering/login' import { setMetadata } from '@hcengineering/platform' - import presentation, { closeClient, createQuery } from '@hcengineering/presentation' + import presentation, { closeClient, getClient, createQuery } from '@hcengineering/presentation' + import settingPlg from '../plugin' import setting, { SettingsCategory, SettingsEvents } from '@hcengineering/setting' import { Component, @@ -35,13 +36,18 @@ settingsSeparators, showPopup, type AnyComponent, - deviceOptionsStore as deviceInfo + deviceOptionsStore as deviceInfo, + resizeObserver, + deviceWidths } from '@hcengineering/ui' - import { NavFooter } from '@hcengineering/workbench-resources' + import { closeWidget, NavFooter, openWidget, minimizeSidebar } from '@hcengineering/workbench-resources' + import workbench from '@hcengineering/workbench' import { ComponentType, onDestroy, onMount } from 'svelte' import { clearSettingsStore, settingsStore, type SettingsStore } from '../store' import { Analytics } from '@hcengineering/analytics' + const client = getClient() + let category: SettingsCategory | undefined let categoryId: string = '' @@ -122,11 +128,26 @@ return ss.component === undefined ? null : ss.component } $: asideComponent = updatedStore($settingsStore) + let moveASide: boolean = false + const widget = client.getModel().findAllSync(workbench.class.Widget, { _id: settingPlg.ids.SettingsWidget })[0] + $: if (moveASide && asideComponent != null) { + openWidget(widget, { component: asideComponent, ...asideProps }, { active: true, openedByUser: true }) + $deviceInfo.aside.visible = true + } else if ((moveASide && asideComponent == null) || (!moveASide && asideComponent != null)) { + closeWidget(widget._id) + minimizeSidebar() + } defineSeparators('setting', settingsSeparators) -
+
{ + if (el.clientWidth < deviceWidths[2] && !moveASide) moveASide = true + else if (el.clientWidth >= deviceWidths[2] && moveASide) moveASide = false + }} +> {#if $deviceInfo.navigator.visible}
{#key asideProps} diff --git a/plugins/setting-resources/src/components/SettingsWidget.svelte b/plugins/setting-resources/src/components/SettingsWidget.svelte new file mode 100644 index 0000000000..2918ad7fa3 --- /dev/null +++ b/plugins/setting-resources/src/components/SettingsWidget.svelte @@ -0,0 +1,32 @@ + + + +{#key asideProps} + {#if typeof asideComponent === 'string'} + + {:else} + + {/if} +{/key} diff --git a/plugins/setting-resources/src/index.ts b/plugins/setting-resources/src/index.ts index 59c6750723..a281151b2e 100644 --- a/plugins/setting-resources/src/index.ts +++ b/plugins/setting-resources/src/index.ts @@ -58,6 +58,7 @@ import RefEditor from './components/typeEditors/RefEditor.svelte' import RoleAssignmentEditor from './components/typeEditors/RoleAssignmentEditor.svelte' import StringTypeEditor from './components/typeEditors/StringTypeEditor.svelte' import WorkspaceSettings from './components/WorkspaceSettings.svelte' +import SettingsWidget from './components/SettingsWidget.svelte' import setting from './plugin' import { filterDescendants, getOwnerFirstName, getOwnerLastName, getOwnerPosition, getValue } from './utils' @@ -121,7 +122,8 @@ export default async (): Promise => ({ SpaceTypePropertiesSectionEditor, SpaceTypeRolesSectionEditor, RoleEditor, - RoleAssignmentEditor + RoleAssignmentEditor, + SettingsWidget }, actionImpl: { DeleteMixin diff --git a/plugins/setting-resources/src/plugin.ts b/plugins/setting-resources/src/plugin.ts index 40e8f33f56..05450e7af0 100644 --- a/plugins/setting-resources/src/plugin.ts +++ b/plugins/setting-resources/src/plugin.ts @@ -13,12 +13,17 @@ // limitations under the License. // +import { type Ref } from '@hcengineering/core' import type { IntlString } from '@hcengineering/platform' import { mergeIds } from '@hcengineering/platform' import setting, { settingId } from '@hcengineering/setting' import { type AnyComponent } from '@hcengineering/ui' +import { type Widget } from '@hcengineering/workbench' export default mergeIds(settingId, setting, { + ids: { + SettingsWidget: '' as Ref + }, component: { EditEnum: '' as AnyComponent, ManageSpaceTypes: '' as AnyComponent, diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte index a7de67bb96..b202a6e52c 100644 --- a/plugins/templates-resources/src/components/Templates.svelte +++ b/plugins/templates-resources/src/components/Templates.svelte @@ -17,7 +17,7 @@ Breadcrumb, Separator, defineSeparators, - settingsSeparators, + twoPanelsSeparators, Scroller } from '@hcengineering/ui' import { getActions as getContributedActions, TreeItem, TreeNode } from '@hcengineering/view-resources' @@ -147,7 +147,7 @@ } let space: Ref | undefined = undefined - defineSeparators('workspaceSettings', settingsSeparators) + defineSeparators('workspaceSettings', twoPanelsSeparators)
diff --git a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte index f488453817..4a03ced07f 100644 --- a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte +++ b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte @@ -79,7 +79,7 @@ overflow: hidden; flex-direction: row; min-width: 25rem; - border-radius: var(--medium-BorderRadius); + border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0; &.mini:not(.float) { width: 3.5rem !important; @@ -89,6 +89,9 @@ &.mini.float { justify-content: flex-end; } + &.float > :global(.sidebar-content) { + border-top: none; + } } @media (max-width: 1024px) { .sidebar-container { diff --git a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte index a9345448c0..fd4f44e38c 100644 --- a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte +++ b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte @@ -96,7 +96,7 @@ } -
+
{#if widget?.component}
{#if widget.headerLabel} @@ -145,7 +145,7 @@