From 2c1f088735ed52071b2dea73f492c54b5d109fbc Mon Sep 17 00:00:00 2001 From: Timur Mukhamedishin <84380737+muhtimur@users.noreply.github.com> Date: Thu, 20 Oct 2022 09:45:57 +0700 Subject: [PATCH] Create Help Center (#2313) Signed-off-by: muhtimur --- changelog.md | 4 + models/setting/src/index.ts | 29 ++- packages/theme/styles/common.scss | 6 + packages/theme/styles/popups.scss | 7 +- packages/ui/src/popups.ts | 5 + packages/ui/src/types.ts | 4 +- plugins/workbench-assets/lang/en.json | 10 +- plugins/workbench-assets/lang/ru.json | 10 +- .../src/components/AccountPopup.svelte | 12 + .../src/components/HelpAndSupport.svelte | 241 ++++++++++++++++++ .../src/components/Navigator.svelte | 16 +- .../src/components/icons/Documentation.svelte | 30 +++ .../src/components/icons/Keyboard.svelte | 10 + plugins/workbench-resources/src/plugin.ts | 10 +- 14 files changed, 374 insertions(+), 20 deletions(-) create mode 100644 plugins/workbench-resources/src/components/HelpAndSupport.svelte create mode 100644 plugins/workbench-resources/src/components/icons/Documentation.svelte create mode 100644 plugins/workbench-resources/src/components/icons/Keyboard.svelte diff --git a/changelog.md b/changelog.md index 3d291fcf6d..615a072128 100644 --- a/changelog.md +++ b/changelog.md @@ -6,6 +6,10 @@ Tracker: - Basic sprints +Workbench: + +- Help Center + ## 0.6.31 Core: diff --git a/models/setting/src/index.ts b/models/setting/src/index.ts index a61a5fe98d..bf26f8110a 100644 --- a/models/setting/src/index.ts +++ b/models/setting/src/index.ts @@ -200,20 +200,21 @@ export function createModel (builder: Builder): void { }, setting.ids.EnumSetting ) - builder.createDoc( - setting.class.SettingsCategory, - core.space.Model, - { - name: 'support', - label: setting.string.Support, - icon: setting.icon.Support, - component: setting.component.Support, - group: 'main', - secured: false, - order: 5000 - }, - setting.ids.Support - ) + // Currently remove Support item from settings + // builder.createDoc( + // setting.class.SettingsCategory, + // core.space.Model, + // { + // name: 'support', + // label: setting.string.Support, + // icon: setting.icon.Support, + // component: setting.component.Support, + // group: 'main', + // secured: false, + // order: 5000 + // }, + // setting.ids.Support + // ) builder.createDoc( setting.class.SettingsCategory, core.space.Model, diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 2d13628145..1427b28552 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -217,6 +217,12 @@ flex-shrink: 0; height: 1rem; } +.antiNav-footer { + align-items: flex-end; + display: flex; + flex: 1; + margin: 2rem .75rem; +} /* Basic */ .antiTitle { diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 3a7043e5f1..823cbe3137 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -411,7 +411,7 @@ } } -.notifyPopup { +.notifyPopup, .helpAndSupportPopup { overflow: hidden; display: flex; flex-direction: column; @@ -437,6 +437,11 @@ } } +.helpAndSupportPopup { + min-height: 100%; + min-width: 20rem; +} + // Remove highlights table rows and hide dots in popups .popup .tr-body:hover, .popup-tooltip .tr-body:hover { background-color: transparent !important; } .popup-tooltip .tr-body .menuRow { visibility: hidden !important; } diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index aa61554be4..55f124d9e2 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -292,6 +292,11 @@ export function fitPopupElement ( newProps.bottom = '12px' newProps.left = '50%' newProps.transform = 'translateX(-50%)' + } else if (element === 'help-center') { + newProps.top = 'calc(var(--status-bar-height) + 12px)' + newProps.bottom = '12px' + newProps.right = '12px' + show = true } } else { newProps.top = '50%' diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index dfd9c9cbd3..9c1045e466 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -135,6 +135,7 @@ export type PopupPosAlignment = | 'full' | 'content' | 'middle' + | 'help-center' export function isPopupPosAlignment (x: any): x is PopupPosAlignment { return ( @@ -145,7 +146,8 @@ export function isPopupPosAlignment (x: any): x is PopupPosAlignment { x === 'account' || x === 'full' || x === 'content' || - x === 'middle') + x === 'middle' || + x === 'help-center') ) } diff --git a/plugins/workbench-assets/lang/en.json b/plugins/workbench-assets/lang/en.json index 74f254b5d0..005a628ff2 100644 --- a/plugins/workbench-assets/lang/en.json +++ b/plugins/workbench-assets/lang/en.json @@ -16,6 +16,14 @@ "Join": "Join", "BrowseSpaces": "Browse spaces", "AccountDisabled": "Account is disabled", - "AccountDisabledDescr": "Please contact the workspace administrator" + "AccountDisabledDescr": "Please contact the workspace administrator", + "HelpAndSupport": "Help & Support", + "HelpCenter": "Help Center", + "KeyboardShortcuts": "Keyboard Shortcuts", + "Documentation": "Documentation", + "ContactUs": "Contact us", + "OpenPlatformGuide": "Open Platform Guide", + "AccessWorkspaceSettings": "Access your workspace settings", + "HowToWorkFaster": "Learn how to work faster" } } \ No newline at end of file diff --git a/plugins/workbench-assets/lang/ru.json b/plugins/workbench-assets/lang/ru.json index b1b46cf1e1..7141fde7f9 100644 --- a/plugins/workbench-assets/lang/ru.json +++ b/plugins/workbench-assets/lang/ru.json @@ -16,6 +16,14 @@ "Join": "Присоедениться", "BrowseSpaces": "Обзор пространств", "AccountDisabled": "Аккаунт отключен", - "AccountDisabledDescr": "Пожалуйста свяжитесь с администратором" + "AccountDisabledDescr": "Пожалуйста свяжитесь с администратором", + "HelpAndSupport": "Помощь", + "HelpCenter": "Центр помощи", + "KeyboardShortcuts": "Сочетания клавиш", + "Documentation": "Документация", + "ContactUs": "Связаться с нами", + "OpenPlatformGuide": "Открыть руководство пользователя", + "AccessWorkspaceSettings": "Открыть настройки рабочего пространства", + "HowToWorkFaster": "Узнайте как работать эффективнее" } } \ No newline at end of file diff --git a/plugins/workbench-resources/src/components/AccountPopup.svelte b/plugins/workbench-resources/src/components/AccountPopup.svelte index f8e4bf7311..a3a13e5adb 100644 --- a/plugins/workbench-resources/src/components/AccountPopup.svelte +++ b/plugins/workbench-resources/src/components/AccountPopup.svelte @@ -31,6 +31,8 @@ locationToUrl } from '@hcengineering/ui' import view from '@hcengineering/view' + import HelpAndSupport from './HelpAndSupport.svelte' + import workbench from '../plugin' let items: SettingsCategory[] = [] @@ -90,6 +92,10 @@ showPopup(login.component.InviteLink, {}) } + function helpAndSupport (): void { + showPopup(HelpAndSupport, {}, 'help-center') + } + function filterItems (items: SettingsCategory[], keys: string[]): SettingsCategory[] { return items.filter( (p) => p._id !== setting.ids.Profile && p._id !== setting.ids.Password && keys.includes(p.group ?? '') @@ -149,6 +155,12 @@ action: async () => inviteWorkspace(), group: 'end' }, + { + icon: setting.icon.Support, + label: workbench.string.HelpAndSupport, + action: async () => helpAndSupport(), + group: 'end' + }, { icon: setting.icon.Signout, label: setting.string.Signout, diff --git a/plugins/workbench-resources/src/components/HelpAndSupport.svelte b/plugins/workbench-resources/src/components/HelpAndSupport.svelte new file mode 100644 index 0000000000..f66d75c750 --- /dev/null +++ b/plugins/workbench-resources/src/components/HelpAndSupport.svelte @@ -0,0 +1,241 @@ + + +
+
+ {#if shortcuts} +
(shortcuts = !shortcuts)}> + +
+ {/if} + + +
+ {#if !shortcuts} + {#each cards as card} +
+
+ +
+
+
+
+
+
+ +
+
+
+ {/each} + {:else} + + + + + {@const action = actions[item]} + {#if item === 0 || (item > 0 && actions[item - 1].category !== action.category)} + {#if action.category} + {@const category = categories.find((cat) => cat._id === action.category)} + {#if category?.label && category.label !== categories.find((cat) => cat._id === actions[item - 1]?.category)?.label} +
+
+ {/if} + {/if} + {/if} + + + {@const action = actions[item]} +
+
+ +
+
+
+
+ {#if action.keyBinding} + {#each action.keyBinding as key, i} + {#if i !== 0} +
or
+ {/if} +
+ {#each formatKey(key) as k, jj} + {#if jj !== 0} +
then
+ {/if} + {#each k as kk, j} +
+ {kk} +
+ {/each} + {/each} +
+ {/each} + {/if} +
+
+ + + + {/if} +
+
+
+ + diff --git a/plugins/workbench-resources/src/components/Navigator.svelte b/plugins/workbench-resources/src/components/Navigator.svelte index 93a69be53f..cd577ce7f6 100644 --- a/plugins/workbench-resources/src/components/Navigator.svelte +++ b/plugins/workbench-resources/src/components/Navigator.svelte @@ -16,8 +16,9 @@ import core, { Doc, Ref, SortingOrder, Space, getCurrentAccount } from '@hcengineering/core' import { getResource } from '@hcengineering/platform' import { createQuery, getClient } from '@hcengineering/presentation' - import { Scroller } from '@hcengineering/ui' + import { Button, Scroller, showPopup } from '@hcengineering/ui' import type { NavigatorModel, SpecialNavModel } from '@hcengineering/workbench' + import setting from '@hcengineering/setting' import { createEventDispatcher } from 'svelte' import preferece, { SpacePreference } from '@hcengineering/preference' import { getSpecialSpaceClass } from '../utils' @@ -26,6 +27,8 @@ import SpecialElement from './navigator/SpecialElement.svelte' import StarredNav from './navigator/StarredNav.svelte' import TreeSeparator from './navigator/TreeSeparator.svelte' + import HelpAndSupport from './HelpAndSupport.svelte' + import workbench from '../plugin' export let model: NavigatorModel | undefined export let currentSpace: Ref | undefined @@ -158,5 +161,16 @@ /> {/each}
+ +
+
{/if} diff --git a/plugins/workbench-resources/src/components/icons/Documentation.svelte b/plugins/workbench-resources/src/components/icons/Documentation.svelte new file mode 100644 index 0000000000..e1960bc03d --- /dev/null +++ b/plugins/workbench-resources/src/components/icons/Documentation.svelte @@ -0,0 +1,30 @@ + + + + + + + + + + + + + diff --git a/plugins/workbench-resources/src/components/icons/Keyboard.svelte b/plugins/workbench-resources/src/components/icons/Keyboard.svelte new file mode 100644 index 0000000000..ca40462892 --- /dev/null +++ b/plugins/workbench-resources/src/components/icons/Keyboard.svelte @@ -0,0 +1,10 @@ + + + + + diff --git a/plugins/workbench-resources/src/plugin.ts b/plugins/workbench-resources/src/plugin.ts index c952cbdfb9..cc98d10926 100644 --- a/plugins/workbench-resources/src/plugin.ts +++ b/plugins/workbench-resources/src/plugin.ts @@ -36,7 +36,15 @@ export default mergeIds(workbenchId, workbench, { Join: '' as IntlString, BrowseSpaces: '' as IntlString, AccountDisabled: '' as IntlString, - AccountDisabledDescr: '' as IntlString + AccountDisabledDescr: '' as IntlString, + HelpAndSupport: '' as IntlString, + HelpCenter: '' as IntlString, + KeyboardShortcuts: '' as IntlString, + Documentation: '' as IntlString, + ContactUs: '' as IntlString, + OpenPlatformGuide: '' as IntlString, + AccessWorkspaceSettings: '' as IntlString, + HowToWorkFaster: '' as IntlString }, component: { SpacePanel: '' as AnyComponent