diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-11 16:24:42 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-11 16:24:42 +0300 |
commit | b375e8e8fe12556e898d8b351de061dd4f950eb8 (patch) | |
tree | 67a1c830bd2a1385081f25edc02a2ec99c96f765 /src/components/AppHeader/AppHeader.vue | |
parent | 91458e9b2e90073a065587d03d8936cac69ff633 (diff) | |
download | webui-vue-b375e8e8fe12556e898d8b351de061dd4f950eb8.tar.xz |
add notifi
Diffstat (limited to 'src/components/AppHeader/AppHeader.vue')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 62 |
1 files changed, 61 insertions, 1 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index a577b452..b24fef86 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -90,7 +90,7 @@ }" > {{ $t('appHeader.support') }} - </b-nav-item> + </b-nav-item> </b-navbar-nav> --> <!-- Right aligned nav items --> <b-navbar-nav class="ml-auto helper-menu"> @@ -127,6 +127,29 @@ </b-button> </li> <li class="nav-item"> + <b-dropdown id="app-notifications" variant="link" right> + <template #button-content> + <icon-notification :title="$t('appHeader.titleNotification')" /> + </template> + <b-dropdown-group + id="dropdown-group-1" + :header="$t('appHeader.titleCritical')" + > + <b-dropdown-item v-for="(log, index) in okLogs" :key="index" + >{{ log.name }} + </b-dropdown-item> + </b-dropdown-group> + <b-dropdown-divider></b-dropdown-divider> + <b-dropdown-text>{{ + $t('appHeader.titleWarnings') + }}</b-dropdown-text> + <b-dropdown-divider></b-dropdown-divider> + <b-dropdown-text>{{ + $t('appHeader.titleMessages') + }}</b-dropdown-text> + </b-dropdown> + </li> + <li class="nav-item"> <b-dropdown id="app-header-user" variant="link" @@ -162,6 +185,7 @@ 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 IconNotification from '@carbon/icons-vue/es/notification/20'; import StatusIcon from '@/components/Global/StatusIcon'; export default { name: 'AppHeader', @@ -171,6 +195,7 @@ export default { IconAvatar, IconRenew, StatusIcon, + IconNotification, }, mixins: [BVToastMixin], props: { @@ -185,6 +210,11 @@ export default { }; }, computed: { + okLogs() { + return this.$store.getters['eventLog/allEvents'].filter((log) => { + return log.severity === 'OK'; + }); + }, isNavTagPresent() { return this.assetTag || this.modelType || this.serialNumber; }, @@ -454,4 +484,34 @@ export default { border: none; } } + +.dropdown-toggle::after { + display: none; +} + +.dropdown-menu { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +.dropdown-header { + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: uppercase; + color: #0c1c29; + padding: 15px; +} +#dropdown-group-1 { + padding: 15px; +} + +.dropdown-item { + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 16px; + color: #0c1c29; +} </style> |