From 7b48cb6ac851deb4786d9618c2e26a62c45a88d1 Mon Sep 17 00:00:00 2001 From: Lera24 Date: Fri, 8 Nov 2024 13:41:35 +0200 Subject: [PATCH 1/4] refactor: navigation menu - change styles,layout,documentation [WTEL-4710](https://webitel.atlassian.net/browse/WTEL-4710) --- .../modules/NavigationMenu/Readme.md | 52 +++--- .../webitel-ui/modules/StartPage/Readme.md | 29 ++- package.json | 2 +- src/assets/icons/sprite/directory.svg | 6 + src/assets/icons/sprite/index.js | 12 ++ src/assets/icons/sprite/integrations.svg | 4 + src/assets/icons/sprite/lookups.svg | 6 + src/assets/icons/sprite/permissions.svg | 4 + src/assets/icons/sprite/routing.svg | 4 + src/assets/icons/sprite/system.svg | 6 + .../components/_internals/nav-menu-lvl-1.vue | 71 +++++--- .../components/_internals/nav-menu-lvl-2.vue | 65 +++---- .../components/navigation-menu.vue | 165 ++++++++---------- src/modules/NavigationMenu/css/_nav-menu.scss | 30 ++++ src/modules/NavigationMenu/css/_navMenu.scss | 20 --- .../StartPage/components/start-page-card.vue | 45 ++--- .../StartPage/components/start-page-logo.vue | 24 +-- .../StartPage/components/the-start-page.vue | 92 +++++----- 18 files changed, 333 insertions(+), 304 deletions(-) create mode 100644 src/assets/icons/sprite/directory.svg create mode 100644 src/assets/icons/sprite/integrations.svg create mode 100644 src/assets/icons/sprite/lookups.svg create mode 100644 src/assets/icons/sprite/permissions.svg create mode 100644 src/assets/icons/sprite/routing.svg create mode 100644 src/assets/icons/sprite/system.svg create mode 100644 src/modules/NavigationMenu/css/_nav-menu.scss delete mode 100644 src/modules/NavigationMenu/css/_navMenu.scss diff --git a/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md b/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md index 421754edb..e00e2b7a8 100644 --- a/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md +++ b/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md @@ -1,56 +1,44 @@ -# Navigation menu +# NavigationMenu ### Props: -| Name | Type | Default | Required | Description | -|-----------------|--------|---------|----------|----------------------------------------------------------------------------------------------------------------| -| `navItems` | Array | `[]` | + | Масив обʼєктів `{ value: string, name: string, subNav: array - { value: string, route: string, name: string} }` | +| Name | Type | Default | Required | Description | +|------------|-------|---------|----------|-------------------------------------------------------------| +| `navItems` | Array | `[]` | + | Масив обʼєктів включаючих у себе ключі value, name, subName | -### Іконки +### Icons -Іконки можна додати в app/assets/icons/sprite з приставкою 'nav' (nav-icon, nav-search), не забудьте додати імпорт -іконки в файлі index.js в папці з іконками (import './nav-icon.svg';). +Іконка в лівій частині новігації буде підтягнута автоматично за значенням `value` з обʼєкта `navItems`. +Якщо значення value відрізняється від назви іконки - треба прописати виключення в компоненті `nav-menu-lvl-1.vue`. -Якщо іконки не працюють - перевірте чи в main.js вказаний імпорт - import './app/assets/icons/sprite'; - -##Приклад використання +## Example Code Navigation Menu ```vue -// the-configuration.vue ``` diff --git a/docs/pages/webitel-ui/modules/StartPage/Readme.md b/docs/pages/webitel-ui/modules/StartPage/Readme.md index 614d1b034..b9d5e0119 100644 --- a/docs/pages/webitel-ui/modules/StartPage/Readme.md +++ b/docs/pages/webitel-ui/modules/StartPage/Readme.md @@ -2,26 +2,21 @@ ### Props: -| Name | Type | Default | Required | Description | -|-----------------|--------|---------|----------|--------------------------------------------------------------------------------------------------------------------------------| -| `nav` | Array | `[]` | + | Масив обʼєктів `{ value: string, route: string, name: string, text: string, images: object - { light: string, dark: string } }`| -| `lightDarkLogos`| Object | `{}` | + | Об'єкт з зображеннями light/dark mode `{ light: string, dark: stringt }` | +| Name | Type | Default | Required | Description | +|-----------|--------|---------|----------|-------------------------------------------------------------------------| +| `nav` | Array | `[]` | + | Масив обʼєктів включаючих у себе ключі value, route, name, text, images | +| `appLogo` | Object | `{}` | + | Об'єкт з зображеннями логотипу для light/dark теми | -##Приклад використання +## Example Code Start Page ```vue -// the-start-page.vue - diff --git a/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-2.vue b/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-2.vue index b8354bb27..01db569ed 100644 --- a/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-2.vue +++ b/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-2.vue @@ -1,15 +1,16 @@ diff --git a/src/modules/NavigationMenu/css/_nav-menu.scss b/src/modules/NavigationMenu/css/_nav-menu.scss new file mode 100644 index 000000000..cf420cf70 --- /dev/null +++ b/src/modules/NavigationMenu/css/_nav-menu.scss @@ -0,0 +1,30 @@ +.nav-menu { + &__category { + height: 100%; + border-radius: var(--border-radius); + } + + &__option { + &:not(:last-child) { + margin-bottom: var(--spacing-2xs); + } + } + + &__item { + @extend %typo-body-1; + display: flex; + align-items: center; + box-sizing: border-box; + width: 100%; + min-height: var(--button-min-height); + padding: 18px 20px; + transition: var(--transition); + text-align: left; + color: var(--text-main-color); + border-radius: var(--border-radius); + + .wt-icon { + margin-right: var(--spacing-xs); + } + } +} diff --git a/src/modules/NavigationMenu/css/_navMenu.scss b/src/modules/NavigationMenu/css/_navMenu.scss deleted file mode 100644 index 75edcf2cf..000000000 --- a/src/modules/NavigationMenu/css/_navMenu.scss +++ /dev/null @@ -1,20 +0,0 @@ -.nav-menu__category { - height: 100%; - border-radius: var(--border-radius); - - &-option { - @extend %typo-subtitle-2; - - display: flex; - align-items: center; - width: 100%; - transition: var(--transition); - text-align: left; - color: var(--text-main-color); - border-radius: var(--spacing-xs); - - .wt-icon { - margin-right: var(--spacing-xs); - } - } -} diff --git a/src/modules/StartPage/components/start-page-card.vue b/src/modules/StartPage/components/start-page-card.vue index bd4cd5093..c6af74815 100644 --- a/src/modules/StartPage/components/start-page-card.vue +++ b/src/modules/StartPage/components/start-page-card.vue @@ -1,19 +1,23 @@ diff --git a/src/modules/StartPage/components/the-start-page.vue b/src/modules/StartPage/components/the-start-page.vue index 71894b472..07594504b 100644 --- a/src/modules/StartPage/components/the-start-page.vue +++ b/src/modules/StartPage/components/the-start-page.vue @@ -1,59 +1,59 @@ From 9471b201795853da59861e50dc2922aa6dc41a2e Mon Sep 17 00:00:00 2001 From: dlohvinov Date: Tue, 12 Nov 2024 17:09:30 +0000 Subject: [PATCH 2/4] autoupdate changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 924cea184..92ae54cb4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ +## [v24.10.73] - 2024-11-12 +### :bug: Bug Fixes +- [`5746c8c`](https://github.com/webitel/webitel-ui-sdk/commit/5746c8ca063af834eb36f20afd1ba21ac03da7e2) - caseConverters.js scripts import fix [WTEL-5516](https://webitel.atlassian.net/browse/WTEL-5516) *(commit by [@dlohvinov](https://github.com/dlohvinov))* + + ## [v24.10.72] - 2024-11-12 ### :sparkles: New Features - [`a1eb8be`](https://github.com/webitel/webitel-ui-sdk/commit/a1eb8bebdff83061e3ef81fe55166108efd8e44b) - FilesExport.js skipFilesWithError config added [WTEL-5173](https://webitel.atlassian.net/browse/WTEL-5173) *(commit by [@dlohvinov](https://github.com/dlohvinov))* @@ -161,3 +166,4 @@ [v24.10.69]: https://github.com/webitel/webitel-ui-sdk/compare/v24.10.68...v24.10.69 [v24.10.71]: https://github.com/webitel/webitel-ui-sdk/compare/v24.10.69...v24.10.71 [v24.10.72]: https://github.com/webitel/webitel-ui-sdk/compare/v24.10.71...v24.10.72 +[v24.10.73]: https://github.com/webitel/webitel-ui-sdk/compare/v24.10.72...v24.10.73 From bac8466080703da8d395e105e237df0b844dd9c6 Mon Sep 17 00:00:00 2001 From: Lera24 Date: Wed, 13 Nov 2024 14:06:48 +0200 Subject: [PATCH 3/4] fix: navigation-menu and start-page component after codereview(change docs, style, add new prop)[WTEL-4710](https://webitel.atlassian.net/browse/WTEL-4710) --- .../on-demand/wt-navigation-menu/Readme.md | 18 ++++++ .../wt-navigation-menu/component-specs.vue | 11 ++++ .../examples/example-navigation-menu.vue | 28 +++++++++ .../on-demand/wt-start-page/Readme.md | 18 ++++++ .../assets/configuration-section-dark.svg | 43 ++++++++++++++ .../assets/configuration-section-light.svg | 43 ++++++++++++++ .../assets/contacts-section-dark.svg | 48 ++++++++++++++++ .../assets/contacts-section-light.svg | 48 ++++++++++++++++ .../assets/start-page-logo-dark.svg | 6 ++ .../assets/start-page-logo-light.svg | 6 ++ .../wt-start-page/component-specs.vue | 11 ++++ .../examples/example-start-page.vue | 42 ++++++++++++++ .../modules/NavigationMenu/Readme.md | 44 -------------- .../webitel-ui/modules/StartPage/Readme.md | 57 ------------------- src/components/index.js | 5 ++ .../components/_internals/nav-menu-lvl-1.vue | 31 +++++----- .../components/_internals/nav-menu-lvl-2.vue | 34 ++++++----- .../components/wt-navigation-menu.vue} | 43 +++++++++++--- .../wt-navigation-menu}/css/_nav-menu.scss | 2 + .../components/start-page-card.vue | 1 + .../components/start-page-logo.vue | 0 .../components/wt-start-page.vue} | 28 +++++---- 22 files changed, 411 insertions(+), 156 deletions(-) create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/Readme.md create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/component-specs.vue create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/examples/example-navigation-menu.vue create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/Readme.md create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-dark.svg create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-light.svg create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-dark.svg create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-light.svg create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-dark.svg create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-light.svg create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/component-specs.vue create mode 100644 docs/pages/webitel-ui/components/on-demand/wt-start-page/examples/example-start-page.vue delete mode 100644 docs/pages/webitel-ui/modules/NavigationMenu/Readme.md delete mode 100644 docs/pages/webitel-ui/modules/StartPage/Readme.md rename src/{modules/NavigationMenu => components/on-demand/wt-navigation-menu}/components/_internals/nav-menu-lvl-1.vue (68%) rename src/{modules/NavigationMenu => components/on-demand/wt-navigation-menu}/components/_internals/nav-menu-lvl-2.vue (62%) rename src/{modules/NavigationMenu/components/navigation-menu.vue => components/on-demand/wt-navigation-menu/components/wt-navigation-menu.vue} (70%) rename src/{modules/NavigationMenu => components/on-demand/wt-navigation-menu}/css/_nav-menu.scss (93%) rename src/{modules/StartPage => components/on-demand/wt-start-page}/components/start-page-card.vue (97%) rename src/{modules/StartPage => components/on-demand/wt-start-page}/components/start-page-logo.vue (100%) rename src/{modules/StartPage/components/the-start-page.vue => components/on-demand/wt-start-page/components/wt-start-page.vue} (61%) diff --git a/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/Readme.md b/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/Readme.md new file mode 100644 index 000000000..3c8c23dec --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/Readme.md @@ -0,0 +1,18 @@ + + +# `wt-navigation-menu.vue` + +## Specs + + + +## Example Navigation Menu + + + +::: details Code +<<< ./examples/example-navigation-menu.vue +::: diff --git a/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/component-specs.vue b/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/component-specs.vue new file mode 100644 index 000000000..75a041e0a --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/component-specs.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/examples/example-navigation-menu.vue b/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/examples/example-navigation-menu.vue new file mode 100644 index 000000000..588a7e8b6 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-navigation-menu/examples/example-navigation-menu.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/Readme.md b/docs/pages/webitel-ui/components/on-demand/wt-start-page/Readme.md new file mode 100644 index 000000000..a85829606 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/Readme.md @@ -0,0 +1,18 @@ + + +# `wt-start-page.vue` + +## Specs + + + +## Example Start Page + + + +::: details Code +<<< ./examples/example-start-page.vue +::: diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-dark.svg b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-dark.svg new file mode 100644 index 000000000..44292c411 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-dark.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-light.svg b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-light.svg new file mode 100644 index 000000000..55df89e33 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/configuration-section-light.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-dark.svg b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-dark.svg new file mode 100644 index 000000000..a913b4c38 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-dark.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-light.svg b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-light.svg new file mode 100644 index 000000000..a3c538174 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/contacts-section-light.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-dark.svg b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-dark.svg new file mode 100644 index 000000000..eb66c86e0 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-light.svg b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-light.svg new file mode 100644 index 000000000..5ccdf1a18 --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/assets/start-page-logo-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/component-specs.vue b/docs/pages/webitel-ui/components/on-demand/wt-start-page/component-specs.vue new file mode 100644 index 000000000..434dd8dab --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/component-specs.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/docs/pages/webitel-ui/components/on-demand/wt-start-page/examples/example-start-page.vue b/docs/pages/webitel-ui/components/on-demand/wt-start-page/examples/example-start-page.vue new file mode 100644 index 000000000..9e430aaaa --- /dev/null +++ b/docs/pages/webitel-ui/components/on-demand/wt-start-page/examples/example-start-page.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md b/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md deleted file mode 100644 index e00e2b7a8..000000000 --- a/docs/pages/webitel-ui/modules/NavigationMenu/Readme.md +++ /dev/null @@ -1,44 +0,0 @@ -# NavigationMenu - -### Props: - -| Name | Type | Default | Required | Description | -|------------|-------|---------|----------|-------------------------------------------------------------| -| `navItems` | Array | `[]` | + | Масив обʼєктів включаючих у себе ключі value, name, subName | - -### Icons - -Іконка в лівій частині новігації буде підтягнута автоматично за значенням `value` з обʼєкта `navItems`. -Якщо значення value відрізняється від назви іконки - треба прописати виключення в компоненті `nav-menu-lvl-1.vue`. - -## Example Code Navigation Menu - -```vue - - - - -``` diff --git a/docs/pages/webitel-ui/modules/StartPage/Readme.md b/docs/pages/webitel-ui/modules/StartPage/Readme.md deleted file mode 100644 index b9d5e0119..000000000 --- a/docs/pages/webitel-ui/modules/StartPage/Readme.md +++ /dev/null @@ -1,57 +0,0 @@ -# Start page - -### Props: - -| Name | Type | Default | Required | Description | -|-----------|--------|---------|----------|-------------------------------------------------------------------------| -| `nav` | Array | `[]` | + | Масив обʼєктів включаючих у себе ключі value, route, name, text, images | -| `appLogo` | Object | `{}` | + | Об'єкт з зображеннями логотипу для light/dark теми | - -## Example Code Start Page - -```vue - - - -``` diff --git a/src/components/index.js b/src/components/index.js index 373145f58..12b51bc16 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -63,6 +63,9 @@ import WtTextarea from './wt-textarea/wt-textarea.vue'; import WtTimeInput from './wt-time-input/wt-time-input.vue'; import WtTimepicker from './wt-timepicker/wt-timepicker.vue'; import WtTooltip from './wt-tooltip/wt-tooltip.vue'; +import WtNavigationMenu + from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue'; +import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue'; const Components = { WtActionBar, @@ -126,6 +129,8 @@ const Components = { WtDummy, WtStepper, WtExpansionPanel, + WtNavigationMenu, + WtStartPage, }; export default Components; diff --git a/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-1.vue b/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue similarity index 68% rename from src/modules/NavigationMenu/components/_internals/nav-menu-lvl-1.vue rename to src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue index 76423074f..93c93f989 100644 --- a/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-1.vue +++ b/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue @@ -6,13 +6,13 @@ class="nav-menu__option" > @@ -35,6 +35,10 @@ const props = defineProps({ type: Object, default: () => ({}), }, + icons: { + type: Array, + default: () => ([]), + }, }); const emit = defineEmits(['select']); @@ -42,27 +46,18 @@ const emit = defineEmits(['select']); function select(category) { emit('select', category); } - -function getIcon(category) { - switch (category) { - case 'contact-center': - return 'call-ringing'; - case 'customization': - return 'system'; - default: - return category; - } -} diff --git a/src/modules/NavigationMenu/css/_nav-menu.scss b/src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss similarity index 93% rename from src/modules/NavigationMenu/css/_nav-menu.scss rename to src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss index cf420cf70..3b580d18e 100644 --- a/src/modules/NavigationMenu/css/_nav-menu.scss +++ b/src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss @@ -1,3 +1,5 @@ +@import '../../../../css/main.scss'; + .nav-menu { &__category { height: 100%; diff --git a/src/modules/StartPage/components/start-page-card.vue b/src/components/on-demand/wt-start-page/components/start-page-card.vue similarity index 97% rename from src/modules/StartPage/components/start-page-card.vue rename to src/components/on-demand/wt-start-page/components/start-page-card.vue index c6af74815..f4439664a 100644 --- a/src/modules/StartPage/components/start-page-card.vue +++ b/src/components/on-demand/wt-start-page/components/start-page-card.vue @@ -45,6 +45,7 @@ const open = () => {