diff options
Diffstat (limited to 'src/components/_sila/AppHeader/AppHeader.vue')
| -rw-r--r-- | src/components/_sila/AppHeader/AppHeader.vue | 173 |
1 files changed, 123 insertions, 50 deletions
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index 84e4588f..96c93fbb 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -31,39 +31,89 @@ </b-button> <b-navbar-nav> <b-navbar-brand - class="mr-0" - to="/" + class="mr-0 app-logo" + to="/hardware-status/inventory" data-test-id="appHeader-container-overview" > <img class="header-logo" - src="@/assets/images/logo-header.svg" - :alt="altLogo" + src="@/assets/images/_sila/logo-header-sila.svg" /> </b-navbar-brand> <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags"> - <span>|</span> - <span class="pl-3 asset-tag">{{ assetTag }}</span> - <span class="pl-3">{{ modelType }}</span> - <span class="pl-3">{{ serialNumber }}</span> + <span style="color: white">|</span> + <span style="color: white" class="pl-2 asset-tag">{{ + assetTag + }}</span> + <span style="color: white" class="pl-2">{{ modelType }}</span> + <span style="color: white" class="pl-2">{{ serialNumber }}</span> </div> </b-navbar-nav> - <!-- Right aligned nav items --> - <b-navbar-nav class="ml-auto helper-menu"> + <!-- Left nav items--> + <!-- <b-navbar-nav class="helper-menu"> <b-nav-item - to="/logs/event-logs" + to="/hardware-status/inventory" data-test-id="appHeader-container-health" + class="nav-top-button" + :class="{ + 'active-route-top-nav': ![ + 'profile-settings', + 'information-and-faq', + 'support', + ].includes($route.path.split('/')[1]), + }" > - <status-icon :status="healthStatusIcon" /> - {{ $t('appHeader.health') }} + {{ $t('appHeader.servers') }} </b-nav-item> + <b-nav-item - to="/operations/server-power-operations" + to="/information-and-faq" + data-test-id="appHeader-container-power" + class="nav-top-button" + :class="{ + 'active-route-top-nav': ''.includes( + $route.path.split('information-and-faq')[1] + ), + }" + > + {{ $t('appHeader.informationAndFAQ') }} + </b-nav-item> + + <b-nav-item + to="/support" data-test-id="appHeader-container-power" + class="nav-top-button" + :class="{ + 'active-route-top-nav': ''.includes( + $route.path.split('support')[1] + ), + }" > - <status-icon :status="serverStatusIcon" /> - {{ $t('appHeader.power') }} + {{ $t('appHeader.support') }} </b-nav-item> + </b-navbar-nav> --> + <!-- Right aligned nav items --> + <b-navbar-nav class="ml-auto helper-menu"> + <li class="nav-item"> + <b-button + variant="link" + data-test-id="appHeader-container-health" + @click="toLogs" + > + <status-icon :status="healthStatusIcon" /> + <span>{{ $t('appHeader.health') }}</span> + </b-button> + </li> + <li class="nav-item"> + <b-button + variant="link" + data-test-id="appHeader-container-power" + @click="toOperations" + > + <status-icon :status="serverStatusIcon" /> + <span>{{ $t('appHeader.power') }}</span> + </b-button> + </li> <!-- Using LI elements instead of b-nav-item to support semantic button elements --> <li class="nav-item"> <b-button @@ -103,28 +153,24 @@ </b-navbar-nav> </b-navbar> </header> - <loading-bar /> </div> </template> <script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import IconAvatar from '@carbon/icons-vue/es/user--avatar/20'; +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; import IconClose from '@carbon/icons-vue/es/close/20'; 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'; - +import StatusIcon from '@/components/_sila/Global/StatusIcon'; export default { name: 'AppHeader', components: { - IconAvatar, IconClose, IconMenu, + IconAvatar, IconRenew, StatusIcon, - LoadingBar, }, mixins: [BVToastMixin], props: { @@ -136,7 +182,6 @@ export default { data() { return { isNavigationOpen: false, - altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC', }; }, computed: { @@ -232,6 +277,12 @@ export default { event.preventDefault(); this.$root.$emit('skip-navigation'); }, + toLogs() { + this.$router.push('/logs/event-logs').catch(() => {}); + }, + toOperations() { + this.$router.push('/operations/server-power-operations').catch(() => {}); + }, }, }; </script> @@ -241,6 +292,7 @@ export default { box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color; } .app-header { + flex-grow: 1; .link-skip-nav { position: absolute; top: -60px; @@ -252,39 +304,52 @@ export default { transition-timing-function: $entrance-easing--expressive; } } + + .app-logo { + margin-top: 10px; + } + .nav-top-button { + color: $white; + padding: 0px; + margin: 0px 8px; + } + + .active-route-top-nav { + background-color: $faint-brand-primary-40; + border-radius: 4px; + } + .navbar-text, .nav-link, .btn-link { - color: color('white') !important; - fill: currentColor; - padding: 0.68rem 1rem !important; + border-radius: 4px; + color: $white !important; &:hover { - background-color: theme-color-level(light, 10); + background-color: $faint-brand-primary-40; } &:active { - background-color: theme-color-level(light, 9); - } - &:focus { - @include focus-box-shadow; - outline: 0; + background-color: $faint-brand-primary-40; } } - .nav-item { - fill: theme-color('light'); - } - .navbar { padding: 0; background-color: $navbar-color; + svg { + margin-right: 2px; + } + .status-icon { + svg { + vertical-align: text-bottom; + } + } @include media-breakpoint-up($responsive-layout-bp) { - height: $header-height; + height: $first-header-height; } .helper-menu { @include media-breakpoint-down(sm) { - background-color: gray('800'); width: 100%; justify-content: flex-end; @@ -292,11 +357,6 @@ export default { .btn { padding: $spacer / 1.125 $spacer / 2; } - - .nav-link:focus, - .btn:focus { - @include focus-box-shadow($gray-800); - } } .responsive-text { @@ -311,14 +371,13 @@ export default { @include media-breakpoint-up($responsive-layout-bp) { padding: 0 $spacer; } - align-items: center; + align-items: baseline; .navbar-brand, .nav-link { transition: $focus-transition; } .nav-tags { - color: theme-color-level(light, 3); @include media-breakpoint-down(xs) { @include sr-only; } @@ -332,8 +391,8 @@ export default { .nav-trigger { fill: theme-color('light'); - width: $header-height; - height: $header-height; + width: $first-header-height; + height: $first-header-height; transition: none; display: inline-flex; flex: 0 0 20px; @@ -374,11 +433,25 @@ export default { .navbar-brand { padding: $spacer/2; - height: $header-height; + height: $first-header-height; line-height: 1; &:focus { box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white'); outline: 0; } } + +.app-header-logout, +.app-header-notification { + margin: 0 5px; + background: none; + border: none; + width: 30px; + height: 30px; + &:hover { + background: $faint-brand-primary-40; + border-radius: 5px; + border: none; + } +} </style> |