From f4d6faf4f8c139e9de95567961b46ad25b2a931a Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Wed, 27 Dec 2023 18:35:31 +0300 Subject: [PATCH] Update Settings layout (#4277) Signed-off-by: Alexander Platov --- models/tracker/src/index.ts | 2 +- models/tracker/src/plugin.ts | 1 + packages/theme/styles/_colors.scss | 74 ++++ packages/theme/styles/_layouts.scss | 1 + packages/theme/styles/_vars.scss | 59 ++++ packages/theme/styles/common.scss | 22 +- packages/theme/styles/components.scss | 68 ++++ packages/theme/styles/global.scss | 1 + packages/ui/src/components/Breadcrumb.svelte | 85 +++++ packages/ui/src/components/Breadcrumbs.svelte | 75 +++++ packages/ui/src/components/ButtonBase.svelte | 304 +++++++++++++++++ packages/ui/src/components/ButtonIcon.svelte | 29 ++ packages/ui/src/components/Fold.svelte | 52 +++ packages/ui/src/components/Header.svelte | 89 +++++ .../ui/src/components/ModernEditbox.svelte | 189 +++++++++++ .../ui}/src/components/NavGroup.svelte | 21 +- .../ui}/src/components/NavItem.svelte | 56 +++- .../src/components/icons/ChevronRight.svelte | 22 ++ .../src/components/icons/Description.svelte | 31 ++ .../ui/src/components/icons/Maximize.svelte | 23 ++ .../ui/src/components/icons/Minimize.svelte | 28 ++ .../ui/src/components/icons/MoreV2.svelte | 34 +- .../src/components/icons/OpenedArrow.svelte | 3 +- .../ui}/src/components/icons/Settings.svelte | 0 .../ui/src/components/internal/Root.svelte | 2 +- packages/ui/src/index.ts | 13 + .../src/components/GroupElement.svelte | 61 ---- .../NotificationGroupSetting.svelte | 49 ++- .../components/NotificationSettings.svelte | 67 ++-- plugins/setting-assets/lang/en.json | 2 + plugins/setting-assets/lang/ru.json | 2 + .../src/components/ClassAttributes.svelte | 266 +++++++++------ .../src/components/ClassAttributesList.svelte | 282 ++++++++++++++++ .../src/components/ClassHierarchy.svelte | 37 +- .../src/components/ClassSetting.svelte | 77 +++-- .../src/components/Configure.svelte | 22 +- .../src/components/EnumSetting.svelte | 75 ++++- .../src/components/Integrations.svelte | 16 +- .../src/components/InviteSetting.svelte | 42 ++- .../src/components/Owners.svelte | 24 +- .../src/components/Password.svelte | 16 +- .../src/components/Profile.svelte | 17 +- .../src/components/Settings.svelte | 40 ++- .../src/components/WorkspaceSettings.svelte | 17 +- plugins/setting-resources/src/index.ts | 3 +- plugins/setting-resources/src/plugin.ts | 5 +- plugins/setting/src/index.ts | 3 +- .../projectTypes/ManageProjectsContent.svelte | 6 +- .../projectTypes/ProjectEditor.svelte | 316 +++++++++--------- .../taskTypes/TypeClassEditor.svelte | 8 +- .../src/components/Templates.svelte | 170 +++++----- .../components/SettingsRelatedTargets.svelte | 28 ++ plugins/tracker-resources/src/index.ts | 2 + .../src/components/Workbench.svelte | 34 +- 54 files changed, 2327 insertions(+), 644 deletions(-) create mode 100644 packages/theme/styles/_vars.scss create mode 100644 packages/ui/src/components/Breadcrumb.svelte create mode 100644 packages/ui/src/components/Breadcrumbs.svelte create mode 100644 packages/ui/src/components/ButtonBase.svelte create mode 100644 packages/ui/src/components/ButtonIcon.svelte create mode 100644 packages/ui/src/components/Fold.svelte create mode 100644 packages/ui/src/components/Header.svelte create mode 100644 packages/ui/src/components/ModernEditbox.svelte rename {plugins/setting-resources => packages/ui}/src/components/NavGroup.svelte (84%) rename {plugins/setting-resources => packages/ui}/src/components/NavItem.svelte (79%) create mode 100644 packages/ui/src/components/icons/ChevronRight.svelte create mode 100644 packages/ui/src/components/icons/Description.svelte create mode 100644 packages/ui/src/components/icons/Maximize.svelte create mode 100644 packages/ui/src/components/icons/Minimize.svelte rename {plugins/workbench-resources => packages/ui}/src/components/icons/Settings.svelte (100%) delete mode 100644 plugins/notification-resources/src/components/GroupElement.svelte create mode 100644 plugins/setting-resources/src/components/ClassAttributesList.svelte create mode 100644 plugins/tracker-resources/src/components/SettingsRelatedTargets.svelte diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index 7df44fa292..7070756962 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -565,7 +565,7 @@ export function createModel (builder: Builder): void { name: 'relations', label: tracker.string.RelatedIssues, icon: tracker.icon.Relations, - component: tracker.component.EditRelatedTargets, + component: tracker.component.SettingsRelatedTargets, group: 'settings-editor', secured: false, order: 4000 diff --git a/models/tracker/src/plugin.ts b/models/tracker/src/plugin.ts index 8a868ed8c7..d506a4865e 100644 --- a/models/tracker/src/plugin.ts +++ b/models/tracker/src/plugin.ts @@ -59,6 +59,7 @@ export default mergeIds(trackerId, tracker, { MilestoneFilter: '' as AnyComponent, EditRelatedTargets: '' as AnyComponent, EditRelatedTargetsPopup: '' as AnyComponent, + SettingsRelatedTargets: '' as AnyComponent, IssueSearchIcon: '' as AnyComponent, MembersArrayEditor: '' as AnyComponent }, diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 9ce45dc41b..d9da927f24 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -83,6 +83,20 @@ // New --global-accent-IconColor: #6796FF; + + --button-accent-LabelColor: #fff; + --button-disabled-LabelColor: #8b97ad; + --button-accent-IconColor: #fff; + --button-disabled-IconColor: #8b97ad; + --button-primary-BackgroundColor: #3364e2; + --button-primary-BorderColor: #d1d5de1a; + --button-primary-hover-BackgroundColor: #6191fe; + --button-primary-active-BackgroundColor: #2553cf; + --button-primary-loading-LabelColor: #6191fe; + --button-negative-loading-LabelColor: #ff9187; + --button-negative-BorderColor: #d1d5de26; + --button-negative-hover-BackgroundColor: #e34748; + --button-negative-active-BackgroundColor: #c42a32; } /* Dark Theme */ @@ -317,12 +331,42 @@ --global-ui-hover-BackgroundColor: #A5BDFF1A; --global-ui-highlight-BackgroundColor: #A5BDFF0D; --global-ui-hover-highlight-BackgroundColor: #A5BDFF26; + --global-surface-01-BackgroundColor: #131925; --global-surface-01-BorderColor: #1F2737; --global-surface-02-BackgroundColor: #19202E; + --global-surface-02-BorderColor: #262F40; + --global-surface-03-hover-BackgroundColor: #19202E; + --global-primary-LinkColor: #4D7FF5; --global-primary-TextColor: #FFFFFF; --global-secondary-TextColor: #C1C9D6; --global-tertiary-TextColor: #8E99AF; --global-accent-TextColor: #4D7FF5; + /** Buttons **/ + --button-subtle-LabelColor: #fff; + --button-subtle-IconColor: #fff; + --button-disabled-BackgroundColor: #d1d5de0d; + --button-primary-loading-LabelColor: #6191fe; + --button-secondary-BackgroundColor: #d1d5de0d; + --button-secondary-BorderColor: #d1d5de1a; + --button-secondary-hover-BackgroundColor: #d1d5de1a; + --button-secondary-active-BackgroundColor: #d1d5de26; + --button-negative-BackgroundColor: #e34748; + --button-tertiary-hover-BackgroundColor: #d1d5de1a; + --button-tertiary-active-BackgroundColor: #d1d5de26; + --button-menu-active-BorderColor: #d9dee6; + /** Editbox **/ + --input-BackgroundColor: #a5bdff0d; + --input-hover-BackgroundColor: #a5bdff1a; + --input-BorderColor: #a5bdff0d; + --input-TextColor: #ffffff; + --input-LabelColor: #ffffff; + --input-filled-LabelColor: #8b97ad; + --input-PlaceholderColor: #8b97ad; + --input-hover-PlaceholderColor: #ffffff; + --input-focus-PlaceholderColor: #556178; + --input-HelperColor: #8b97ad; + --input-error-BorderColor: #fb6863; + --input-search-IconColor: #ffffff; } /* Light Theme */ @@ -557,10 +601,40 @@ --global-ui-hover-BackgroundColor: #1530721A; --global-ui-highlight-BackgroundColor: #A5BDFF26; --global-ui-hover-highlight-BackgroundColor: #A5BDFF40; + --global-surface-01-BackgroundColor: #F8F9FA; --global-surface-01-BorderColor: #DDE1E9; --global-surface-02-BackgroundColor: #19202E; + --global-surface-02-BorderColor: #EBEEF2; + --global-surface-03-hover-BackgroundColor: #F8F9FA; + --global-primary-LinkColor: #3566E2; --global-primary-TextColor: #0F121A; --global-secondary-TextColor: #5A667E; --global-tertiary-TextColor: #7B879E; --global-accent-TextColor: #3566E2; + /** Buttons **/ + --button-subtle-LabelColor: #000; + --button-subtle-IconColor: #000; + --button-disabled-BackgroundColor: #1725470d; + --button-primary-loading-LabelColor: #95baff; + --button-secondary-BackgroundColor: #1725470d; + --button-secondary-BorderColor: #1725471a; + --button-secondary-hover-BackgroundColor: #1725471a; + --button-secondary-active-BackgroundColor: #17254726; + --button-negative-BackgroundColor: #ea4c4c; + --button-tertiary-hover-BackgroundColor: #1725471a; + --button-tertiary-active-BackgroundColor: #17254726; + --button-menu-active-BorderColor: #0f121a; + /** Editbox **/ + --input-BackgroundColor: #1530720d; + --input-hover-BackgroundColor: #1530721a; + --input-BorderColor: #1530720d; + --input-TextColor: #0f121a; + --input-LabelColor: #0f121a; + --input-filled-LabelColor: #556178; + --input-PlaceholderColor: #556178; + --input-hover-PlaceholderColor: #0f121a; + --input-focus-PlaceholderColor: #8b97ad; + --input-HelperColor: #556178; + --input-error-BorderColor: #e34748; + --input-search-IconColor: #0f121a; } diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 49f40534a4..1c3eab2419 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -574,6 +574,7 @@ input.search { .py-0-5 { padding: 0.125rem 0; } .py-1 { padding: 0.25rem 0; } .py-2 { padding: 0.5rem 0; } +.py-3 { padding: 0.75rem 0; } .py-4 { padding: 1rem 0; } .py-8 { padding: 2rem 0; } .py-10 { padding: 2.5rem 0; } diff --git a/packages/theme/styles/_vars.scss b/packages/theme/styles/_vars.scss new file mode 100644 index 0000000000..8d1e26817c --- /dev/null +++ b/packages/theme/styles/_vars.scss @@ -0,0 +1,59 @@ +// +// Copyright © 2021 Anticrm Platform Contributors. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +* { + /** Space & Dimensions **/ + + --spacing-0_25: 0.125rem; + --spacing-0_5: 0.25rem; + --spacing-0_75: 0.375rem; + --spacing-1: 0.5rem; + --spacing-1_5: 0.75rem; + --spacing-1_75: 0.875rem; + --spacing-2: 1rem; + --spacing-2_5: 1.25rem; + --spacing-3: 1.5rem; + --spacing-3_5: 1.75rem; + --spacing-4: 2rem; + --spacing-4_5: 2.25rem; + --spacing-5: 2.5rem; + --spacing-6: 3rem; + --spacing-6_5: 3.5rem; + --spacing-7: 4rem; + --spacing-8: 5rem; + --spacing-9: 6rem; + --spacing-10: 7.5rem; + + /** UI Elements Size **/ + + --global-min-Size: 1rem; + --global-extra-small-Size: 1.5rem; + --global-small-Size: 2rem; + --global-medium-Size: 2.5rem; + --global-large-Size: 3rem; + --global-extra-large-Size: 3.5rem; + --global-max-Size: 4rem; + + /** Border Radius **/ + + --extra-small-BorderRadius: 0.25rem; + --extra-small-focus-BorderRadius: 0.375rem; + --small-BorderRadius: 0.375rem; + --small-focus-BorderRadius: 0.5rem; + --medium-BorderRadius: 0.5rem; + --medium-focus-BorderRadius: 0.625rem; + --large-BorderRadius: 1rem; + --large-focus-BorderRadius: 1.125rem; +} diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 39dc87f44f..6a36e376be 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -18,7 +18,9 @@ .font-medium-12, .font-regular-14, .font-medium-14, -.font-bold-14 { +.font-bold-14, +.paragraph-regular-14, +.heading-medium-16 { font-family: var(--font-family); font-style: normal; line-height: 1rem; @@ -30,11 +32,13 @@ } .font-regular-14, .font-medium-14, -.font-bold-14 { +.font-bold-14, +.paragraph-regular-14 { font-size: 0.875rem; } .font-regular-12, -.font-regular-14 { +.font-regular-14, +.paragraph-regular-14 { font-weight: 400; } .font-medium-12, @@ -44,7 +48,15 @@ .font-bold-14 { font-weight: 700; } - +.heading-medium-16 { + font-size: 1rem; + font-weight: 500; + line-height: 1.125rem; +} +.paragraph-regular-14 { + line-height: 1.25rem; + color: var(--global-tertiary-TextColor); +} /* Panels */ * { @@ -83,7 +95,7 @@ &.header { background-color: var(--theme-comp-header-color); } &.filled { background-color: var(--theme-bg-color); } - &.filledNav { background-color: var(--theme-navpanel-color); } + &.filledNav { background-color: var(--theme-navpanel-color) !important; } &.border-left { border-left: 1px solid var(--theme-divider-color); } &.border-right { border-right: 1px solid var(--theme-divider-color); } } diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index f1faf264c3..4156079af7 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -13,6 +13,74 @@ // limitations under the License. // +/* Huly Component */ +.hulyComponent { + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + min-height: 0; + min-width: 0; + background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor); + border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor); + border-radius: var(--small-focus-BorderRadius); +} +.hulyComponent-content, +.hulyComponent-content__container, +.hulyComponent-content__column, +.hulyComponent-content__column.content, +.hulyComponent-content__navHeader { + display: flex; + width: 100%; + min-width: 0; + min-height: 0; +} +.hulyComponent-content { + flex-shrink: 0; + max-width: 64rem; + + &__container { + height: 100%; + } + &:not(.columns) { + flex-direction: column; + } + &__column { + flex-direction: column; + height: 100%; + + &.navigation .hulyNavItem-container, + .hulyNavItem-container { + margin: 0 0.75rem; + } + &.content { + overflow-y: auto; + flex-direction: column; + align-items: center; + padding: var(--spacing-3); + } + } + &__navHeader { + flex-direction: column; + flex-shrink: 0; + padding-bottom: var(--spacing-3); + border-bottom: 1px solid var(--theme-navpanel-divider); + + &-menu { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + padding: var(--spacing-2); + width: var(--global-extra-large-Size); + height: var(--global-extra-large-Size); + } + &-hint { + margin: var(--spacing-0_25) var(--spacing-3) 0 var(--spacing-2); + } + } +} + /* Component */ .antiComponent { display: flex; diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss index af9af58ea2..284104eaeb 100644 --- a/packages/theme/styles/global.scss +++ b/packages/theme/styles/global.scss @@ -13,6 +13,7 @@ // limitations under the License. // +@import "./_vars.scss"; @import "./_colors.scss"; @import "./_layouts.scss"; @import "./common.scss"; diff --git a/packages/ui/src/components/Breadcrumb.svelte b/packages/ui/src/components/Breadcrumb.svelte new file mode 100644 index 0000000000..38bb4b9f2d --- /dev/null +++ b/packages/ui/src/components/Breadcrumb.svelte @@ -0,0 +1,85 @@ + + + + + + diff --git a/packages/ui/src/components/Breadcrumbs.svelte b/packages/ui/src/components/Breadcrumbs.svelte new file mode 100644 index 0000000000..d20de672b6 --- /dev/null +++ b/packages/ui/src/components/Breadcrumbs.svelte @@ -0,0 +1,75 @@ + + + +
+ {#each items as item, i} + {#if i !== 0}{/if} + { + if (selected !== i) dispatch('select', i) + }} + /> + {/each} + {#if afterLabel} + + + {/if} +
+ + diff --git a/packages/ui/src/components/ButtonBase.svelte b/packages/ui/src/components/ButtonBase.svelte new file mode 100644 index 0000000000..8a765a9f09 --- /dev/null +++ b/packages/ui/src/components/ButtonBase.svelte @@ -0,0 +1,304 @@ + + + + + + diff --git a/packages/ui/src/components/ButtonIcon.svelte b/packages/ui/src/components/ButtonIcon.svelte new file mode 100644 index 0000000000..c154fdb565 --- /dev/null +++ b/packages/ui/src/components/ButtonIcon.svelte @@ -0,0 +1,29 @@ + + + + diff --git a/packages/ui/src/components/Fold.svelte b/packages/ui/src/components/Fold.svelte new file mode 100644 index 0000000000..225630ae4b --- /dev/null +++ b/packages/ui/src/components/Fold.svelte @@ -0,0 +1,52 @@ + + + +
+ + {#if empty} + + {:else} + + {/if} + +
+ + diff --git a/packages/ui/src/components/Header.svelte b/packages/ui/src/components/Header.svelte new file mode 100644 index 0000000000..167e20d27a --- /dev/null +++ b/packages/ui/src/components/Header.svelte @@ -0,0 +1,89 @@ + + + +
+ +
+
+ +
+ {#if $$slots.actions} +
+ +
+ {/if} +
+ + diff --git a/packages/ui/src/components/ModernEditbox.svelte b/packages/ui/src/components/ModernEditbox.svelte new file mode 100644 index 0000000000..0a41939953 --- /dev/null +++ b/packages/ui/src/components/ModernEditbox.svelte @@ -0,0 +1,189 @@ + + + + + + diff --git a/plugins/setting-resources/src/components/NavGroup.svelte b/packages/ui/src/components/NavGroup.svelte similarity index 84% rename from plugins/setting-resources/src/components/NavGroup.svelte rename to packages/ui/src/components/NavGroup.svelte index b3cc1731e8..12e064abc3 100644 --- a/plugins/setting-resources/src/components/NavGroup.svelte +++ b/packages/ui/src/components/NavGroup.svelte @@ -14,20 +14,25 @@ --> -
-
- {/if} -
-
diff --git a/plugins/setting-resources/src/components/Owners.svelte b/plugins/setting-resources/src/components/Owners.svelte index 26c2469e4c..3031d74f40 100644 --- a/plugins/setting-resources/src/components/Owners.svelte +++ b/plugins/setting-resources/src/components/Owners.svelte @@ -13,13 +13,18 @@ // limitations under the License. --> -
-
-
-
- -
-
-
+
+
dispatch('change', event.detail)}> + + +
+
+
{#each accounts as account (account._id)} {@const employee = $personByIdStore.get(account.person)} {#if employee?.name?.includes(search)} diff --git a/plugins/setting-resources/src/components/Password.svelte b/plugins/setting-resources/src/components/Password.svelte index 36aebc993e..6ed0ad3aa5 100644 --- a/plugins/setting-resources/src/components/Password.svelte +++ b/plugins/setting-resources/src/components/Password.svelte @@ -13,14 +13,19 @@ // limitations under the License. --> -
-
-
-
-
+
+
dispatch('change', event.detail)}> + +
{#if error} diff --git a/plugins/setting-resources/src/components/Profile.svelte b/plugins/setting-resources/src/components/Profile.svelte index 417a8e0b52..301b822df6 100644 --- a/plugins/setting-resources/src/components/Profile.svelte +++ b/plugins/setting-resources/src/components/Profile.svelte @@ -13,16 +13,20 @@ // limitations under the License. --> -
+
{#if visibleNav} -
+
- +
- + {/if} -
+
{#if category} (visibleNav = event.detail)} /> {/if}
diff --git a/plugins/tracker-resources/src/index.ts b/plugins/tracker-resources/src/index.ts index 052689c1f6..9ff7448f30 100644 --- a/plugins/tracker-resources/src/index.ts +++ b/plugins/tracker-resources/src/index.ts @@ -44,6 +44,7 @@ import ProjectComponents from './components/components/ProjectComponents.svelte' import CreateIssue from './components/CreateIssue.svelte' import EditRelatedTargets from './components/EditRelatedTargets.svelte' import EditRelatedTargetsPopup from './components/EditRelatedTargetsPopup.svelte' +import SettingsRelatedTargets from './components/SettingsRelatedTargets.svelte' import Inbox from './components/inbox/Inbox.svelte' import AssigneeEditor from './components/issues/AssigneeEditor.svelte' import DueDatePresenter from './components/issues/DueDatePresenter.svelte' @@ -506,6 +507,7 @@ export default async (): Promise => ({ ComponentFilterValuePresenter, EditRelatedTargets, EditRelatedTargetsPopup, + SettingsRelatedTargets, TimePresenter, EstimationValueEditor, IssueStatusIcon, diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 2853e7091e..970bec5744 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -53,7 +53,8 @@ resolvedLocationStore, setResolvedLocation, showPopup, - workbenchSeparators + workbenchSeparators, + IconSettings } from '@hcengineering/ui' import view from '@hcengineering/view' import { @@ -78,7 +79,6 @@ import Navigator from './Navigator.svelte' import SelectWorkspaceMenu from './SelectWorkspaceMenu.svelte' import SpaceView from './SpaceView.svelte' - import IconSettings from './icons/Settings.svelte' import TopMenu from './icons/TopMenu.svelte' let contentPanel: HTMLElement @@ -640,7 +640,11 @@ /> -
+
-
+
{#if currentApplication && navigatorModel && navigator && visibleNav} @@ -879,6 +883,28 @@ width: 100%; height: 100%; touch-action: none; + + &:not(.setting-app, .inner) { + border-top: 1px solid var(--theme-navpanel-divider); + } + &.setting-app { + position: relative; + background-color: var(--theme-statusbar-color); + border-radius: var(--medium-BorderRadius); + + &::after { + position: absolute; + content: ''; + inset: 0; + border: 1px solid var(--theme-divider-color); + border-radius: var(--medium-BorderRadius); + pointer-events: none; + } + .antiPanel-application { + border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius); + border-right: none; + } + } } .hamburger-container {