diff --git a/models/setting/src/index.ts b/models/setting/src/index.ts index 3ca2e06b9f..2e0506c488 100644 --- a/models/setting/src/index.ts +++ b/models/setting/src/index.ts @@ -120,8 +120,8 @@ export function createModel (builder: Builder): void { core.space.Model, { name: 'profile', - label: setting.string.EditProfile, - icon: setting.icon.EditProfile, + label: setting.string.AccountSettings, + icon: setting.icon.AccountSettings, component: setting.component.Profile, group: 'settings-account', secured: false, @@ -149,7 +149,7 @@ export function createModel (builder: Builder): void { core.space.Model, { name: 'setting', - label: setting.string.WorkspaceSetting, + label: setting.string.WorkspaceSettings, icon: setting.icon.Setting, component: setting.component.WorkspaceSettings, extraComponents: { @@ -181,7 +181,7 @@ export function createModel (builder: Builder): void { { name: 'owners', label: setting.string.Owners, - icon: setting.icon.Password, + icon: setting.icon.Owners, component: setting.component.Owners, order: 1000, secured: true @@ -202,11 +202,11 @@ export function createModel (builder: Builder): void { setting.ids.Configure ) builder.createDoc( - setting.class.SettingsCategory, + setting.class.WorkspaceSettingCategory, core.space.Model, { name: 'classes', - label: setting.string.ClassSetting, + label: setting.string.Classes, icon: setting.icon.Clazz, component: setting.component.ClassSetting, group: 'settings-editor', @@ -236,7 +236,7 @@ export function createModel (builder: Builder): void { { name: 'invites', label: setting.string.InviteSettings, - icon: setting.icon.Setting, + icon: setting.icon.InviteSettings, component: setting.component.InviteSetting, group: 'settings-editor', secured: true, diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 2e700c27d4..9ce45dc41b 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -80,6 +80,9 @@ --theme-clockface-sec-arrow: conic-gradient(at 50% -10px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 49%, #F47758 50%, rgba(255, 0, 0, 0) 51%, rgba(255, 0, 0, 0) 100%); --theme-clockface-sec-holder: #F47758; + + // New + --global-accent-IconColor: #6796FF; } /* Dark Theme */ @@ -309,9 +312,17 @@ --theme-clockface-arrows-holder: radial-gradient(at top center, #2F2F3A, #555555); --theme-clockface-arrows-shadow: 0 0 1px white; + // New --global-ui-BackgroundColor: #A5BDFF0D; --global-ui-hover-BackgroundColor: #A5BDFF1A; + --global-ui-highlight-BackgroundColor: #A5BDFF0D; + --global-ui-hover-highlight-BackgroundColor: #A5BDFF26; + --global-surface-01-BorderColor: #1F2737; --global-surface-02-BackgroundColor: #19202E; + --global-primary-TextColor: #FFFFFF; + --global-secondary-TextColor: #C1C9D6; + --global-tertiary-TextColor: #8E99AF; + --global-accent-TextColor: #4D7FF5; } /* Light Theme */ @@ -541,7 +552,15 @@ --theme-clockface-arrows-holder: radial-gradient(at top center, #eee, #aaa); --theme-clockface-arrows-shadow: 0 0 1px black; - --global-ui-hover-BackgroundColor: #A5BDFF1A; + // New --global-ui-BackgroundColor: #1530720D; + --global-ui-hover-BackgroundColor: #1530721A; + --global-ui-highlight-BackgroundColor: #A5BDFF26; + --global-ui-hover-highlight-BackgroundColor: #A5BDFF40; + --global-surface-01-BorderColor: #DDE1E9; --global-surface-02-BackgroundColor: #19202E; + --global-primary-TextColor: #0F121A; + --global-secondary-TextColor: #5A667E; + --global-tertiary-TextColor: #7B879E; + --global-accent-TextColor: #3566E2; } diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 23dfdd4f81..39dc87f44f 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -13,6 +13,39 @@ // limitations under the License. // +/* Typography */ +.font-regular-12, +.font-medium-12, +.font-regular-14, +.font-medium-14, +.font-bold-14 { + font-family: var(--font-family); + font-style: normal; + line-height: 1rem; + color: var(--global-primary-TextColor); +} +.font-regular-12, +.font-medium-12 { + font-size: 0.75rem; +} +.font-regular-14, +.font-medium-14, +.font-bold-14 { + font-size: 0.875rem; +} +.font-regular-12, +.font-regular-14 { + font-weight: 400; +} +.font-medium-12, +.font-medium-14 { + font-weight: 500; +} +.font-bold-14 { + font-weight: 700; +} + + /* Panels */ * { --app-panel-width: 4.25rem; diff --git a/packages/ui/src/components/icons/OpenedArrow.svelte b/packages/ui/src/components/icons/OpenedArrow.svelte new file mode 100644 index 0000000000..cc93440afe --- /dev/null +++ b/packages/ui/src/components/icons/OpenedArrow.svelte @@ -0,0 +1,27 @@ + + + + + + diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 7bc59f3a36..c73cf7de2f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -182,6 +182,7 @@ export { default as IconEmoji } from './components/icons/Emoji.svelte' export { default as IconObjects } from './components/icons/Objects.svelte' export { default as IconUndo } from './components/icons/Undo.svelte' export { default as IconRedo } from './components/icons/Redo.svelte' +export { default as IconOpenedArrow } from './components/icons/OpenedArrow.svelte' export { default as PanelInstance } from './components/PanelInstance.svelte' export { default as Panel } from './components/Panel.svelte' diff --git a/plugins/notification-assets/assets/icons.svg b/plugins/notification-assets/assets/icons.svg index c597eaa021..cfae7346e2 100644 --- a/plugins/notification-assets/assets/icons.svg +++ b/plugins/notification-assets/assets/icons.svg @@ -1,25 +1,27 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/plugins/setting-assets/assets/icons.svg b/plugins/setting-assets/assets/icons.svg index e3981d0072..fc27be7e6d 100644 --- a/plugins/setting-assets/assets/icons.svg +++ b/plugins/setting-assets/assets/icons.svg @@ -1,17 +1,24 @@ - - - + + + + + + + + + - + + - - - + + + - + @@ -32,14 +39,19 @@ - - + + + - - - - - + + + + + + + + + + - diff --git a/plugins/setting-assets/lang/en.json b/plugins/setting-assets/lang/en.json index f0510384b6..d809f6a7e2 100644 --- a/plugins/setting-assets/lang/en.json +++ b/plugins/setting-assets/lang/en.json @@ -5,7 +5,7 @@ "Support": "Support", "Privacy": "Privacy", "Terms": "Terms", - "EditProfile": "Edit profile", + "AccountSettings": "Account settings", "Categories": "Categories", "Delete": "Delete", "ChangePassword": "Change password", @@ -31,6 +31,7 @@ "IntegrationDisabledDescr": "Integration disabled", "IntegrationWith": "Integration with ", "ClassSetting": "Class setting", + "Classes": "Classes", "Attributes": "Attributes", "DeleteAttribute": "Delete attribute", "DeleteAttributeConfirm": "Do you want to delete this attribute?", @@ -51,7 +52,7 @@ "Leave": "Leave workspace", "LeaveDescr": "Are you sure you want to leave the workspace? This action cannot be undone.", "Owners": "Owners", - "WorkspaceSetting": "Workspace", + "WorkspaceSettings": "Workspace settings", "Select": "Select", "AddOwner": "Add owner", "User": "User", @@ -71,7 +72,7 @@ "Visibility": "Visibility", "Hidden": "Hidden", "Configure": "Configure", - "InviteSettings": "Workspace invite settings", + "InviteSettings": "Invite settings", "DefaultValue": "Default value", "SelectAValue": "Select a value", "DateOnly": "Date only", diff --git a/plugins/setting-assets/lang/ru.json b/plugins/setting-assets/lang/ru.json index 4566f2a5bb..85e24cef0a 100644 --- a/plugins/setting-assets/lang/ru.json +++ b/plugins/setting-assets/lang/ru.json @@ -5,7 +5,7 @@ "Support": "Поддержка", "Privacy": "Конфиденциальность", "Terms": "Условия", - "EditProfile": "Редактировать профиль", + "AccountSettings": "Настройки аккаунта", "Categories": "Категории", "Delete": "Удалить", "ChangePassword": "Изменить пароль", @@ -31,6 +31,7 @@ "IntegrationDisabledDescr": "Интеграция отключена", "IntegrationWith": "Интеграция с ", "ClassSetting": "Настройки класса", + "Classes": "Классы", "Attributes": "Атрибуты", "DeleteAttribute": "Удалить атрибут", "DeleteAttributeConfirm": "Вы действительно хотите удалить этот атрибут?", @@ -51,7 +52,7 @@ "Leave": "Покинуть рабочее пространство", "LeaveDescr": "Вы действительно хотите покинуть рабочее пространство? Отменить это действие невозможно", "Owners": "Владельцы", - "WorkspaceSetting": "Рабочее пространство", + "WorkspaceSettings": "Рабочее пространство", "Select": "Выбрать", "AddOwner": "Добавить владельца", "User": "Пользователь", @@ -72,7 +73,7 @@ "Visibility": "Видимость", "Hidden": "Спрятанный", "Configure": "Настроить", - "InviteSettings": "Настройки приглашений в пространство", + "InviteSettings": "Настройки приглашений", "DefaultValue": "Значение по умолчанию", "SelectAValue": "Выбрать значение", "DateOnly": "Только дата", diff --git a/plugins/setting-assets/src/index.ts b/plugins/setting-assets/src/index.ts index 18ad20a4d0..e9c921d4d3 100644 --- a/plugins/setting-assets/src/index.ts +++ b/plugins/setting-assets/src/index.ts @@ -18,7 +18,8 @@ import setting from '@hcengineering/setting' const icons = require('../assets/icons.svg') as string // eslint-disable-line loadMetadata(setting.icon, { - EditProfile: `${icons}#edit`, + AccountSettings: `${icons}#accountSettings`, + Owners: `${icons}#owners`, Password: `${icons}#password`, Setting: `${icons}#settings`, Integrations: `${icons}#integration`, @@ -28,5 +29,6 @@ loadMetadata(setting.icon, { Signout: `${icons}#signout`, SelectWorkspace: `${icons}#selectWorkspace`, Clazz: `${icons}#clazz`, - Enums: `${icons}#enums` + Enums: `${icons}#enums`, + InviteSettings: `${icons}#inviteSettings` }) diff --git a/plugins/setting-resources/src/components/CategoryElement.svelte b/plugins/setting-resources/src/components/CategoryElement.svelte deleted file mode 100644 index b352e6663d..0000000000 --- a/plugins/setting-resources/src/components/CategoryElement.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - - - - -
{ - dispatch('click') - }} -> -
-
-
- {#if icon} - - {/if} -
- - {#if label} -
- -
-
- - diff --git a/plugins/setting-resources/src/components/NavGroup.svelte b/plugins/setting-resources/src/components/NavGroup.svelte new file mode 100644 index 0000000000..b3cc1731e8 --- /dev/null +++ b/plugins/setting-resources/src/components/NavGroup.svelte @@ -0,0 +1,118 @@ + + + +
+ +
+ +
+
+ + diff --git a/plugins/setting-resources/src/components/NavItem.svelte b/plugins/setting-resources/src/components/NavItem.svelte new file mode 100644 index 0000000000..6acf796fe9 --- /dev/null +++ b/plugins/setting-resources/src/components/NavItem.svelte @@ -0,0 +1,173 @@ + + + + + + diff --git a/plugins/setting-resources/src/components/Profile.svelte b/plugins/setting-resources/src/components/Profile.svelte index e18b51ed05..417a8e0b52 100644 --- a/plugins/setting-resources/src/components/Profile.svelte +++ b/plugins/setting-resources/src/components/Profile.svelte @@ -86,8 +86,8 @@
-
-
+
+
{#if employee} diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte index 48902a0cc7..3ab27a72b3 100644 --- a/plugins/setting-resources/src/components/Settings.svelte +++ b/plugins/setting-resources/src/components/Settings.svelte @@ -30,11 +30,13 @@ navigate, resolvedLocationStore, setMetadataLocalStorage, - showPopup + showPopup, + Label } from '@hcengineering/ui' - import { NavFooter, NavHeader } from '@hcengineering/workbench-resources' + import { NavFooter } from '@hcengineering/workbench-resources' import { onDestroy } from 'svelte' - import CategoryElement from './CategoryElement.svelte' + import NavItem from './NavItem.svelte' + import NavGroup from './NavGroup.svelte' export let visibleNav: boolean = true export let navFloat: boolean = false @@ -106,62 +108,53 @@
{#if visibleNav}
-
- +
+
+
- - {#each categories as _category, i} - {#if i > 0 && categories[i - 1].group !== _category.group} -
- {/if} - { - selectCategory(_category.name) - }} - > - - {#if _category.extraComponents?.tools} - - {/if} - - - {#if _category.extraComponents?.navigation} - + {#each categories as _category} + {#if _category.extraComponents?.navigation && (_category.expandable ?? _category._id === setting.ids.Setting)} + + + + {:else} + { + selectCategory(_category.name) }} /> {/if} {/each} -
- - - +
+ + diff --git a/plugins/setting-resources/src/components/WorkspaceSettings.svelte b/plugins/setting-resources/src/components/WorkspaceSettings.svelte index f4ae694a80..1ffbc34e97 100644 --- a/plugins/setting-resources/src/components/WorkspaceSettings.svelte +++ b/plugins/setting-resources/src/components/WorkspaceSettings.svelte @@ -19,18 +19,17 @@ import setting, { SettingsCategory } from '@hcengineering/setting' import { Component, Location, getCurrentResolvedLocation, navigate, resolvedLocationStore } from '@hcengineering/ui' import { onDestroy } from 'svelte' - import CategoryElement from './CategoryElement.svelte' + import NavItem from './NavItem.svelte' export let kind: 'navigation' | undefined export let categoryName: string + let category: SettingsCategory | undefined let categoryId: string = '' let categories: SettingsCategory[] = [] const account = getCurrentAccount() as PersonAccount - export let visibleNav = true - const settingsQuery = createQuery() settingsQuery.query( setting.class.WorkspaceSettingCategory, @@ -69,26 +68,19 @@ {#if kind === 'navigation'} -
-
- {#each categories as category} - { - selectCategory(category.name) - }} - /> - {#if category.name === categoryId && category.extraComponents?.navigation} - - {/if} - {/each} -
-
+ {#each categories as category} + { + selectCategory(category.name) + }} + /> + {#if category.name === categoryId && category.extraComponents?.navigation} + + {/if} + {/each} {:else if category} {/if} diff --git a/plugins/setting/src/index.ts b/plugins/setting/src/index.ts index 9349094b6c..c4dc71c95a 100644 --- a/plugins/setting/src/index.ts +++ b/plugins/setting/src/index.ts @@ -143,7 +143,7 @@ export default plugin(settingId, { string: { Settings: '' as IntlString, Setting: '' as IntlString, - WorkspaceSetting: '' as IntlString, + WorkspaceSettings: '' as IntlString, Integrations: '' as IntlString, Support: '' as IntlString, Privacy: '' as IntlString, @@ -152,7 +152,7 @@ export default plugin(settingId, { Delete: '' as IntlString, Disconnect: '' as IntlString, Add: '' as IntlString, - EditProfile: '' as IntlString, + AccountSettings: '' as IntlString, ChangePassword: '' as IntlString, CurrentPassword: '' as IntlString, NewPassword: '' as IntlString, @@ -166,11 +166,13 @@ export default plugin(settingId, { SelectWorkspace: '' as IntlString, Reconnect: '' as IntlString, ClassSetting: '' as IntlString, + Classes: '' as IntlString, Owners: '' as IntlString, Configure: '' as IntlString }, icon: { - EditProfile: '' as Asset, + AccountSettings: '' as Asset, + Owners: '' as Asset, Password: '' as Asset, Setting: '' as Asset, Integrations: '' as Asset, @@ -180,7 +182,8 @@ export default plugin(settingId, { Signout: '' as Asset, SelectWorkspace: '' as Asset, Clazz: '' as Asset, - Enums: '' as Asset + Enums: '' as Asset, + InviteSettings: '' as Asset }, templateFieldCategory: { Integration: '' as Ref diff --git a/plugins/task-resources/src/components/TemplatesIcon.svelte b/plugins/task-resources/src/components/TemplatesIcon.svelte index c8a379a449..b87c62968d 100644 --- a/plugins/task-resources/src/components/TemplatesIcon.svelte +++ b/plugins/task-resources/src/components/TemplatesIcon.svelte @@ -1,11 +1,13 @@
- +
diff --git a/tests/sanity/tests/settings.spec.ts b/tests/sanity/tests/settings.spec.ts index 757f6083c5..b557c23187 100644 --- a/tests/sanity/tests/settings.spec.ts +++ b/tests/sanity/tests/settings.spec.ts @@ -48,7 +48,8 @@ test.describe('contact tests', () => { // await page.hover('button:has-text("Settings")') await page.click('button:has-text("Settings")') // Click text=Workspace Notifications >> button - await page.click('.box > div:nth-child(4)') + // await page.click('.box > div:nth-child(4)') + await page.getByRole('button', { name: 'Notifications' }).click() await page.click('text="Text Templates"') // Click .flex-center.icon-button await page.click('#create-template') @@ -81,11 +82,12 @@ test.describe('contact tests', () => { // await page.hover('button:has-text("Settings")') await page.click('button:has-text("Settings")') // Click text=Workspace Notifications >> button - await page.click('.box > div:nth-child(4)') + // await page.click('.box > div:nth-child(4)') + await page.getByRole('button', { name: 'Notifications' }).click() // Click text=Vacancies await page.locator('#new-project-type').click() - await page.getByRole('button', { name: 'Recruiting' }).click() - await page.locator('#templates').getByText('New Recruiting project type').first().click() + await page.getByRole('button', { name: 'Recruiting', exact: true }).click() + await page.locator('#navGroup-statuses').getByText('New Recruiting project type').first().click() // TODO: Need rework. // // Click #create-template div