diff options
Diffstat (limited to 'src/components/AppHeader/AppHeader.vue')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 235 |
1 files changed, 154 insertions, 81 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index fec889fd..aeb91878 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -31,7 +31,7 @@ </b-button> <b-navbar-nav> <b-navbar-brand - class="mr-0" + class="mr-0 app-logo" to="/" data-test-id="appHeader-container-overview" > @@ -49,82 +49,138 @@ </div> </b-navbar-nav> <!-- Right aligned nav items --> - <b-navbar-nav class="ml-auto helper-menu"> + <b-navbar-nav class="helper-menu"> <b-nav-item - to="/logs/event-logs" + to="/" 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="/profile-settings" + data-test-id="appHeader-container-health" + class="nav-top-button" + :class="{ + 'active-route-top-nav': ''.includes( + $route.path.split('profile-settings')[1] + ), + }" + > + {{ $t('appHeader.settings') }} + </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] + ), + }" > - <status-icon :status="serverStatusIcon" /> - {{ $t('appHeader.power') }} + {{ $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] + ), + }" + > + {{ $t('appHeader.support') }} </b-nav-item> - <!-- Using LI elements instead of b-nav-item to support semantic button elements --> - <li class="nav-item"> - <b-button - id="app-header-refresh" - variant="link" - data-test-id="appHeader-button-refresh" - @click="refresh" - > - <icon-renew :title="$t('appHeader.titleRefresh')" /> - <span class="responsive-text">{{ $t('appHeader.refresh') }}</span> - </b-button> - </li> - <li class="nav-item"> - <b-dropdown - id="app-header-user" - variant="link" - right - data-test-id="appHeader-container-user" - > - <template #button-content> - <icon-avatar :title="$t('appHeader.titleProfile')" /> - <span class="responsive-text">{{ username }}</span> - </template> - <b-dropdown-item - to="/profile-settings" - data-test-id="appHeader-link-profile" - >{{ $t('appHeader.profileSettings') }} - </b-dropdown-item> - <b-dropdown-item - data-test-id="appHeader-link-logout" - @click="logout" - > - {{ $t('appHeader.logOut') }} - </b-dropdown-item> - </b-dropdown> - </li> </b-navbar-nav> - <!-- <img + <!-- Left nav items--> + <img class="header-clock__icon" - src="@/assets/images/login/header-clock.svg" + src="@/assets/images/header/header-clock.svg" + :alt="altLogo" /> <span style="color: white">15:54:00</span> - <img + <b-nav-item + to="/logs/event-logs" + data-test-id="appHeader-container-health" + style="display: block" + > + <status-icon :status="healthStatusIcon" /> + {{ $t('appHeader.health') }} + </b-nav-item> + <b-nav-item + to="/operations/server-power-operations" + data-test-id="appHeader-container-power" + style="display: block" + > + <status-icon :status="serverStatusIcon" /> + {{ $t('appHeader.power') }} + </b-nav-item> + <div class="nav-item"> + <b-button + id="app-header-refresh" + variant="link" + data-test-id="appHeader-button-refresh" + @click="refresh" + > + <icon-renew :title="$t('appHeader.titleRefresh')" /> + <span class="responsive-text">{{ $t('appHeader.refresh') }}</span> + </b-button> + </div> + <div class="nav-item"> + <b-dropdown + id="app-header-user" + variant="link" + right + data-test-id="appHeader-container-user" + > + <template #button-content> + <icon-avatar :title="$t('appHeader.titleProfile')" /> + <span class="responsive-text">{{ username }}</span> + </template> + <b-dropdown-item + to="/profile-settings" + data-test-id="appHeader-link-profile" + >{{ $t('appHeader.profileSettings') }} + </b-dropdown-item> + <b-dropdown-item + data-test-id="appHeader-link-logout" + @click="logout" + > + {{ $t('appHeader.logOut') }} + </b-dropdown-item> + </b-dropdown> + </div> + <!-- <img style="margin-left: 20px" class="header-avatar__icon" - src="@/assets/images/login/header-avatar.svg" + src="@/assets/images/header/header-avatar.svg" /> - <span style="color: white">Маргарита тутова</span> + <span style="color: white">Маргарита тутова</span> --> <b-button id="app-header-notification" class="app-header-notification"> <img class="header-notification__icon" - src="@/assets/images/login/icon-notification.svg" + src="@/assets/images/header/icon-notification.svg" /> </b-button> <b-button id="app-header-logout" class="app-header-logout"> <img class="header-logout__icon" - src="@/assets/images/login/logout-icon.svg" - @click="logout" + src="@/assets/images/header/logout-icon.svg" + :alt="altLogo" /> - </b-button> --> + </b-button> </b-navbar> </header> <loading-bar /> @@ -133,19 +189,18 @@ <script> import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import IconAvatar from '@carbon/icons-vue/es/user--avatar/20'; 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'; - export default { name: 'AppHeader', components: { - IconAvatar, IconClose, IconMenu, + IconAvatar, IconRenew, StatusIcon, LoadingBar, @@ -265,6 +320,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; @@ -276,39 +332,44 @@ 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: $nav-link-bg; + 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: $nav-link-bg; } &:active { - background-color: theme-color-level(light, 9); - } - &:focus { - @include focus-box-shadow; - outline: 0; + background-color: $nav-link-bg; } } - .nav-item { - fill: theme-color('light'); - } - .navbar { padding: 0; background-color: $navbar-color; @include media-breakpoint-up($responsive-layout-bp) { - height: $header-height; + height: $top-header-height; } .helper-menu { @include media-breakpoint-down(sm) { - background-color: gray('800'); width: 100%; justify-content: flex-end; @@ -316,11 +377,6 @@ export default { .btn { padding: $spacer / 1.125 $spacer / 2; } - - .nav-link:focus, - .btn:focus { - @include focus-box-shadow($dark); - } } .responsive-text { @@ -335,14 +391,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; } @@ -356,8 +411,8 @@ export default { .nav-trigger { fill: theme-color('light'); - width: $header-height; - height: $header-height; + width: $top-header-height; + height: $top-header-height; transition: none; display: inline-flex; flex: 0 0 20px; @@ -398,11 +453,29 @@ export default { .navbar-brand { padding: $spacer/2; - height: $header-height; + height: $top-header-height; line-height: 1; &:focus { box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white'); outline: 0; } } + +.header-clock__icon { + margin-left: auto; +} + +.app-header-logout, +.app-header-notification { + margin: 0 5px; + background: none; + border: none; + width: 30px; + height: 30px; + &:hover { + background: $nav-link-bg; + border-radius: 5px; + border: none; + } +} </style> |