diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 12 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 229 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigationMixin.js | 50 | ||||
-rw-r--r-- | src/components/AppNavigation/KmvNavigationMixin.js | 25 | ||||
-rw-r--r-- | src/components/SubHeader/SubHeader.vue | 5 |
5 files changed, 269 insertions, 52 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index aeb91878..c8fbbf59 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -183,7 +183,7 @@ </b-button> </b-navbar> </header> - <loading-bar /> + </div> </template> @@ -194,7 +194,6 @@ import IconMenu from '@carbon/icons-vue/es/menu/20'; import IconAvatar from '@carbon/icons-vue/es/user--avatar/20'; import IconRenew from '@carbon/icons-vue/es/renew/20'; import StatusIcon from '@/components/Global/StatusIcon'; -import LoadingBar from '@/components/Global/LoadingBar'; export default { name: 'AppHeader', components: { @@ -203,7 +202,6 @@ export default { IconAvatar, IconRenew, StatusIcon, - LoadingBar, }, mixins: [BVToastMixin], props: { @@ -343,7 +341,7 @@ export default { } .active-route-top-nav { - background-color: $nav-link-bg; + background-color: $faint-brand-primary-40; border-radius: 4px; } @@ -354,10 +352,10 @@ export default { color: $white !important; &:hover { - background-color: $nav-link-bg; + background-color: $faint-brand-primary-40; } &:active { - background-color: $nav-link-bg; + background-color: $faint-brand-primary-40; } } @@ -473,7 +471,7 @@ export default { width: 30px; height: 30px; &:hover { - background: $nav-link-bg; + background: $faint-brand-primary-40; border-radius: 5px; border: none; } diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index acfabe76..2aa61984 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -1,9 +1,41 @@ <template> <div> <div class="nav-container" :class="{ open: isNavigationOpen }"> + <div class="navbar__search_select_container"> + <div class="server-form"> + <img + class="server__icon" + src="@/assets/images/sila-server-navbar-icon.svg" + :alt="altLogo" + /> + <b-form-group class="server-pagination-select"> + <b-form-select + v-model="server" + class="server-select" + :options="servers" + /> + </b-form-group> + </div> + <div class="nav-line"></div> + <div class="form-control server-search"> + <button class="search-button"> + <img + class="server__icon" + src="@/assets/images/search-icon.svg" + :alt="altLogo" + /> + </button> + <b-form-input + type="text" + class="nav-search__input" + placeholder="Поиск по серверу" + > + </b-form-input> + </div> + </div> <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')"> - <b-nav vertical class="mb-4"> - <template v-for="(navItem, index) in navigationItems"> + <b-nav vertical> + <template v-for="(navItem, index) in sideBar"> <!-- Navigation items with no children --> <b-nav-item v-if="!navItem.children" @@ -22,8 +54,8 @@ variant="link" :data-test-id="`nav-button-${navItem.id}`" > - <component :is="navItem.icon" /> {{ navItem.label }} + <component :is="navItem.icon" class="icon-expand" /> <icon-expand class="icon-expand" /> </b-button> <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav"> @@ -59,16 +91,38 @@ //Do not change Mixin import. //Exact match alias set to support //dotenv customizations. -import AppNavigationMixin from './AppNavigationMixin'; - +import { AppNavigationMixin, KvmNavigationMixin } from './AppNavigationMixin'; export default { name: 'AppNavigation', - mixins: [AppNavigationMixin], + mixins: [AppNavigationMixin, KvmNavigationMixin], data() { return { isNavigationOpen: false, + server: 1, + servers: [ + { + value: 1, + text: 'Сервер №1', + }, + { + value: 2, + text: 'Сервер №2', + }, + ], }; }, + computed: { + sideBar() { + if ( + this.$route.path === '/operations/kvm' || + this.$route.path === '/operations/serial-over-lan' + ) { + return this.kvmNavigationItems; + } else { + return this.navigationItems; + } + }, + }, watch: { $route: function () { this.isNavigationOpen = false; @@ -100,10 +154,15 @@ svg { } } -.nav { - padding-top: $spacer / 4; - @include media-breakpoint-up($responsive-layout-bp) { - padding-top: $spacer; +.nav-link { + display: flex; + align-items: center; + padding-left: $spacer * 4; + outline: none; + height: 68px; + border-top: 1px solid rgba(26, 62, 91, 0.2); + &:not(.nav-link--current) { + font-weight: normal; } } @@ -117,31 +176,50 @@ svg { } .nav-link { + display: flex; + align-items: center; padding-left: $spacer * 4; outline: none; - + height: 68px; + border-top: 1px solid rgba(26, 62, 91, 0.2); &:not(.nav-link--current) { font-weight: normal; } } } +.server-form { + height: 48px; + width: 272px; + border-radius: 8px; + padding: 8px; + background-color: $faint-secondary-primary-5; +} .btn-link { display: inline-block; width: 100%; text-align: left; text-decoration: none !important; border-radius: 0; - + height: 68px; + border-top: 1px solid rgba(26, 62, 91, 0.2); + font-weight: 600; + line-height: 20px; &.collapsed { .icon-expand { transform: rotate(180deg); + transition: 0.3s linear; } } + &.not-collapsed { + font-weight: 600; + line-height: 20px; + } } .icon-expand { float: right; + transition: 0.3s linear; margin-top: $spacer / 4; } @@ -151,16 +229,16 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: theme-color('secondary'); + color: $text-primary; &:hover { - background-color: theme-color-level(dark, -10.5); + background-color: $faint-secondary-primary-5-hover; color: theme-color('dark'); } &:focus { - background-color: theme-color-level(light, 0); - box-shadow: inset 0 0 0 2px theme-color('primary'); + background-color: $faint-secondary-primary-5-hover; + box-shadow: none; color: theme-color('dark'); outline: 0; } @@ -173,11 +251,10 @@ svg { .nav-link--current { font-weight: $headings-font-weight; - background-color: theme-color('secondary'); - color: theme-color('light'); + background-color: $red-brand-primary-5; + color: $red-brand-primary; cursor: default; box-shadow: none; - &::before { content: ''; position: absolute; @@ -185,13 +262,13 @@ svg { bottom: 0; left: 0; width: 4px; - background-color: theme-color('primary'); + background-color: $red-brand-primary; } &:hover, &:focus { - background-color: theme-color('secondary'); - color: theme-color('light'); + background-color: $red-brand-primary-5; + color: $red-brand-primary; } } @@ -202,11 +279,11 @@ svg { bottom: 0; left: 0; z-index: $zindex-fixed; - overflow-y: auto; + overflow-y: overlay; background-color: theme-color('light'); transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; - border-right: 1px solid theme-color-level('light', 2.85); + border-right: 1px solid rgba(19, 46, 68, 0.247); @include media-breakpoint-down(md) { z-index: $zindex-fixed + 2; @@ -222,6 +299,17 @@ svg { transition-duration: $duration--fast-01; transform: translateX(0); } + + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + background: rgba(14, 32, 48, 0.384); + border-radius: 16px; + background-clip: content-box; + } } .nav-overlay { @@ -252,4 +340,97 @@ svg { display: none; } } + +.navbar__search_select_container { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + align-items: flex-start; +} + +.server__icon { + width: 20px; + height: 20px; +} + +.server-form { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 16px 1rem; + height: 48px; + width: 272px; + + .options { + background-color: $white; + height: 48px; + width: 272px; + border-radius: 8px; + } + option { + background-color: $white; + height: 48px; + width: 272px; + border-radius: 8px; + } +} + +.nav-line { + height: 1px; + width: 272px; + border-bottom: 1px solid rgba(26, 62, 91, 0.2); + margin: 0 1rem; +} + +.server-pagination-select { + margin: 0; +} + +.server-select { + font-weight: 500; + line-height: 20px; + width: 237px; + border: none; + height: 48px; + &:focus { + box-shadow: none; + } + + .options { + background-color: $white; + height: 48px; + width: 272px; + border-radius: 8px; + } + option { + background-color: $white; + height: 48px; + width: 272px; + border-radius: 8px; + } +} + +.server-search { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + height: 40px; + margin: 16px 1rem; + width: 272px; +} + +.search-button { + border: none; + background: none; +} + +.nav-search__input { + border: none; + background: none; + box-shadow: none; +} </style> diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js index bbbbb1ee..6ba9ffe3 100644 --- a/src/components/AppNavigation/AppNavigationMixin.js +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -1,22 +1,8 @@ -import IconDashboard from '@carbon/icons-vue/es/dashboard/16'; -import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16'; -import IconDataCheck from '@carbon/icons-vue/es/data--check/16'; -import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16'; -import IconSettings from '@carbon/icons-vue/es/settings/16'; -import IconSecurity from '@carbon/icons-vue/es/security/16'; -import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; -import IconDataBase from '@carbon/icons-vue/es/data--base--alt/16'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; -const AppNavigationMixin = { +export const AppNavigationMixin = { components: { - iconOverview: IconDashboard, - iconLogs: IconTextLinkAnalysis, - iconHealth: IconDataCheck, - iconControl: IconSettingsAdjust, - iconSettings: IconSettings, - iconSecurityAndAccess: IconSecurity, - iconExpand: IconChevronUp, - iconResourceManagement: IconDataBase, + IconChevronUp: iconChevronUp, }, data() { return { @@ -30,7 +16,7 @@ const AppNavigationMixin = { { id: 'logs', label: this.$t('appNavigation.logs'), - icon: 'iconLogs', + icon: 'iconChevronUp', children: [ { id: 'event-logs', @@ -47,7 +33,7 @@ const AppNavigationMixin = { { id: 'hardware-status', label: this.$t('appNavigation.hardwareStatus'), - icon: 'iconHealth', + icon: 'iconChevronUp', children: [ { id: 'inventory', @@ -64,7 +50,7 @@ const AppNavigationMixin = { { id: 'operations', label: this.$t('appNavigation.operations'), - icon: 'iconControl', + icon: 'iconChevronUp', children: [ { id: 'factory-reset', @@ -179,4 +165,26 @@ const AppNavigationMixin = { }, }; -export default AppNavigationMixin; +export const KvmNavigationMixin = { + data() { + return { + kvmNavigationItems: [ + { + id: 'console-settings', + label: this.$t('kvmNavigation.ConsoleSettings'), + route: '/operations/kvm', + }, + { + id: 'serial-over-lan', + label: this.$t('kvmNavigation.serialOverLan'), + route: '/operations/serial-over-lan', + }, + { + id: 'kvm', + label: this.$t('kvmNavigation.kvm'), + route: '/operations/kvm', + }, + ], + }; + }, +}; diff --git a/src/components/AppNavigation/KmvNavigationMixin.js b/src/components/AppNavigation/KmvNavigationMixin.js new file mode 100644 index 00000000..a15b3d38 --- /dev/null +++ b/src/components/AppNavigation/KmvNavigationMixin.js @@ -0,0 +1,25 @@ +const KvmNavigationMixin = { + data() { + return { + navigationItems: [ + { + id: 'console-settings', + label: this.$t('appNavigation.ConsoleSettings'), + route: '/operations/kvm', + }, + { + id: 'serial-over-lan', + label: this.$t('appNavigation.serialOverLan'), + route: '/operations/serial-over-lan', + }, + { + id: 'kvm', + label: this.$t('appNavigation.kvm'), + route: '/operations/kvm', + }, + ], + }; + }, +}; + +export default KvmNavigationMixin; diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue index 815d2677..bbbdc6a8 100644 --- a/src/components/SubHeader/SubHeader.vue +++ b/src/components/SubHeader/SubHeader.vue @@ -42,14 +42,19 @@ </b-navbar-nav> </b-navbar> </section> + <loading-bar /> </div> </template> <script> import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import LoadingBar from '@/components/Global/LoadingBar'; export default { name: 'AppHeader', + components: { + LoadingBar, + }, mixins: [BVToastMixin], props: { routerKey: { |