From 6b73ccbfeb4dd2bab907e6226e0655de99a56e13 Mon Sep 17 00:00:00 2001 From: Maksim Zakharov Date: Thu, 28 Apr 2022 15:28:17 +0300 Subject: restyled header and add subheader --- src/assets/images/header/header-avatar.svg | 10 + src/assets/images/header/header-clock.svg | 3 + src/assets/images/header/icon-notification.svg | 5 + src/assets/images/header/logout-icon.svg | 3 + src/assets/styles/bmc/custom/_buttons.scss | 12 +- src/assets/styles/bmc/helpers/_colors.scss | 11 +- src/assets/styles/bmc/helpers/_variables.scss | 3 +- src/components/AppHeader/AppHeader.vue | 235 ++++++++++++++-------- src/components/SubHeader/SubHeader.vue | 169 ++++++++++++++++ src/components/SubHeader/index.js | 1 + src/layouts/AppLayout.vue | 14 +- src/locales/ru-RU.json | 17 +- src/router/routes.js | 19 ++ src/views/InformationAndFAQ/InformationAndFAQ.vue | 9 + src/views/InformationAndFAQ/index.js | 1 + src/views/Support/Support.vue | 9 + src/views/Support/index.js | 1 + 17 files changed, 428 insertions(+), 94 deletions(-) create mode 100644 src/assets/images/header/header-avatar.svg create mode 100644 src/assets/images/header/header-clock.svg create mode 100644 src/assets/images/header/icon-notification.svg create mode 100644 src/assets/images/header/logout-icon.svg create mode 100644 src/components/SubHeader/SubHeader.vue create mode 100644 src/components/SubHeader/index.js create mode 100644 src/views/InformationAndFAQ/InformationAndFAQ.vue create mode 100644 src/views/InformationAndFAQ/index.js create mode 100644 src/views/Support/Support.vue create mode 100644 src/views/Support/index.js (limited to 'src') diff --git a/src/assets/images/header/header-avatar.svg b/src/assets/images/header/header-avatar.svg new file mode 100644 index 00000000..70a97d0f --- /dev/null +++ b/src/assets/images/header/header-avatar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/header/header-clock.svg b/src/assets/images/header/header-clock.svg new file mode 100644 index 00000000..dae2f062 --- /dev/null +++ b/src/assets/images/header/header-clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/header/icon-notification.svg b/src/assets/images/header/icon-notification.svg new file mode 100644 index 00000000..22b5ecc0 --- /dev/null +++ b/src/assets/images/header/icon-notification.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/header/logout-icon.svg b/src/assets/images/header/logout-icon.svg new file mode 100644 index 00000000..c0e8cee2 --- /dev/null +++ b/src/assets/images/header/logout-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 210aef90..5b0d1e31 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -21,7 +21,7 @@ } .btn-primary { - background-color: $button-colour; + background-color: $button-color; border-radius: 8px; border: none; font-family: Inter; @@ -30,23 +30,23 @@ font-size: 16px; line-height: 20px; &:hover { - background-color: $button-colour-hover; + background-color: $button-color-hover; } &:not(:disabled):not(.disabled):active:focus, &:focus-visible { border: none; box-shadow: none; - background-color: $button-colour-click; + background-color: $button-color-click; } &:focus { border: none; - box-shadow: none; - background-color: $button-colour; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + background-color: $button-color; } &:active { border: none; box-shadow: none; - background-color: $button-colour; + background-color: $button-color; } } diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss index 4e9dd738..d6412140 100644 --- a/src/assets/styles/bmc/helpers/_colors.scss +++ b/src/assets/styles/bmc/helpers/_colors.scss @@ -45,8 +45,11 @@ $text-h1-color: #0C1C29; $input-background: rgba(26, 62, 91, 0.05); $input-background-hover: rgba(20, 39, 53, 0.103); -$button-colour: #E11717; -$button-colour-hover: #cc1414; -$button-colour-active: #df2323; -$button-colour-click: rgb(114, 1, 1); +$button-color: #E11717; +$button-color-hover: #FC2A2A; +$button-color-active: #df2323; +$button-color-disabled: #E17171; +$button-color-click: #C71414; + +$nav-link-bg: rgba(225, 23, 23, 0.4); diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss index ba32e3bd..0c8763b0 100644 --- a/src/assets/styles/bmc/helpers/_variables.scss +++ b/src/assets/styles/bmc/helpers/_variables.scss @@ -7,7 +7,8 @@ $transition-collapse: height $duration--slow-01 $standard-easing--expres // OpenBMC Custom Variables $responsive-layout-bp: lg; -$header-height: 48px; +$top-header-height: 56px; +$header-height: 95px; $navigation-width: 300px; $form-label-font-size: .875rem; $form-line-height: 1.25rem; 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 @@ @@ -49,82 +49,138 @@ - + - - {{ $t('appHeader.health') }} + {{ $t('appHeader.servers') }} + + + {{ $t('appHeader.settings') }} + + - - {{ $t('appHeader.power') }} + {{ $t('appHeader.informationAndFAQ') }} + + + + {{ $t('appHeader.support') }} - -
  • - - - {{ $t('appHeader.refresh') }} - -
    • -
  • - - - {{ $t('appHeader.profileSettings') }} - - - {{ $t('appHeader.logOut') }} - - -
    • - + 15:54:00 - + + {{ $t('appHeader.health') }} + + + + {{ $t('appHeader.power') }} + +
    + + + {{ $t('appHeader.refresh') }} + +
    +
    + + + {{ $t('appHeader.profileSettings') }} + + + {{ $t('appHeader.logOut') }} + + +
    + - --> + @@ -133,19 +189,18 @@ + + diff --git a/src/components/SubHeader/index.js b/src/components/SubHeader/index.js new file mode 100644 index 00000000..ad26fced --- /dev/null +++ b/src/components/SubHeader/index.js @@ -0,0 +1 @@ +export { default } from './SubHeader.vue'; diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index 0b78e5b1..f53601c9 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -6,6 +6,7 @@ :router-key="routerKey" @refresh="refresh" /> + @@ -17,6 +18,7 @@ diff --git a/src/views/InformationAndFAQ/index.js b/src/views/InformationAndFAQ/index.js new file mode 100644 index 00000000..6bbeaba6 --- /dev/null +++ b/src/views/InformationAndFAQ/index.js @@ -0,0 +1 @@ +export { default } from './InformationAndFAQ.vue'; diff --git a/src/views/Support/Support.vue b/src/views/Support/Support.vue new file mode 100644 index 00000000..a23ad55f --- /dev/null +++ b/src/views/Support/Support.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/views/Support/index.js b/src/views/Support/index.js new file mode 100644 index 00000000..80b31621 --- /dev/null +++ b/src/views/Support/index.js @@ -0,0 +1 @@ +export { default } from './Support.vue'; -- cgit v1.2.3