mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Fix icon and dummy count for chat notification button in header menu
This commit is contained in:
Wolfgang Huß
parent
181207a90b
commit
0eaa4059b3
4
webapp/assets/_new/icons/svgs/chat-bubble.svg
Normal file
4
webapp/assets/_new/icons/svgs/chat-bubble.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<title>chat-bubble</title>
|
||||
<g data-name="Chat"><path d="M27.23,24.91A9,9,0,0,0,22.44,9.52,8.57,8.57,0,0,0,21,9.41a8.94,8.94,0,0,0-8.92,10.14c0,.1,0,.2,0,.29a9,9,0,0,0,.22,1l0,.11a8.93,8.93,0,0,0,.38,1l.13.28a9,9,0,0,0,.45.83l.07.14a9.13,9.13,0,0,1-2.94-.36,1,1,0,0,0-.68,0L7,24.13l.54-1.9a1,1,0,0,0-.32-1,9,9,0,0,1,11.27-14,1,1,0,0,0,1.23-1.58A10.89,10.89,0,0,0,13,3.25a11,11,0,0,0-7.5,19l-1,3.34A1,1,0,0,0,5.9,26.82l4.35-1.93a11,11,0,0,0,4.68.16A9,9,0,0,0,21,27.41a8.81,8.81,0,0,0,2.18-.27l3.41,1.52A1,1,0,0,0,28,27.48Zm-1.77-1.1a1,1,0,0,0-.32,1L25.45,26l-1.79-.8a1,1,0,0,0-.41-.09,1,1,0,0,0-.29,0,6.64,6.64,0,0,1-2,.29,7,7,0,0,1,0-14,6.65,6.65,0,0,1,1.11.09,7,7,0,0,1,3.35,12.31Z"></path><path d="M17.82 17.08H17a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM21.41 17.08h-.82a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM25 17.08h-.82a1 1 0 0 0 0 2H25a1 1 0 0 0 0-2z"></path></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 961 B |
@ -1,140 +1,25 @@
|
||||
<template>
|
||||
<nuxt-link v-if="!unreadChatNotificationsCount" class="chat-menu" :to="{ name: 'chat' }">
|
||||
<nuxt-link class="chat-notification-menu" :to="{ name: 'chat' }">
|
||||
<base-button
|
||||
ghost
|
||||
circle
|
||||
v-tooltip="{
|
||||
content: $t('notifications.headerMenuButton.chat'),
|
||||
content: $t('header.chat.tooltip'),
|
||||
placement: 'bottom-start',
|
||||
}"
|
||||
>
|
||||
<img src="/img/empty/chat-bubble.svg" />
|
||||
<counter-icon icon="chat-bubble" :count="1" danger />
|
||||
</base-button>
|
||||
</nuxt-link>
|
||||
<dropdown v-else class="chat-notifications-menu" offset="8">
|
||||
<template #default="{ toggleMenu }">
|
||||
<base-button
|
||||
ghost
|
||||
circle
|
||||
v-tooltip="{
|
||||
content: $t('notifications.headerMenuButton.tooltip'),
|
||||
placement: 'bottom-start',
|
||||
}"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<counter-icon icon="envelope" :count="unreadChatNotificationsCount" danger />
|
||||
<img src="/img/empty/chat-bubble.svg" />
|
||||
</base-button>
|
||||
</template>
|
||||
<template #popover="{}">
|
||||
<div class="chat-notifications-menu-popover">
|
||||
<div v-for="notification in notifications" v-bind:key="notification.roomid">
|
||||
<ds-space>
|
||||
<div
|
||||
class="chat-notifications-menu-popover-item"
|
||||
@click="
|
||||
$store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: notification.roomid })
|
||||
"
|
||||
>
|
||||
<p>{{ notification.name }}</p>
|
||||
{{ notification.title }}
|
||||
</div>
|
||||
</ds-space>
|
||||
</div>
|
||||
<!-- <notification-list :notifications="notifications" /> -->
|
||||
</div>
|
||||
<ds-flex class="chat-notifications-link-container">
|
||||
<ds-flex-item
|
||||
class="chat-notifications-link-container-item"
|
||||
:width="{ base: '100%' }"
|
||||
centered
|
||||
>
|
||||
<nuxt-link :to="{ name: 'chat' }">
|
||||
<base-button ghost primary>All Chat Messages</base-button>
|
||||
</nuxt-link>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</template>
|
||||
</dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
|
||||
import Dropdown from '~/components/Dropdown'
|
||||
// import NotificationList from '../NotificationList/NotificationList'
|
||||
|
||||
export default {
|
||||
name: 'ChatNotificationMenu',
|
||||
components: {
|
||||
CounterIcon,
|
||||
Dropdown,
|
||||
// NotificationList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notifications: [
|
||||
{ roomid: 'u1', name: 'Jenny', title: 'last Message from Jenny' },
|
||||
{ roomid: 'u2', name: 'Honey', title: 'last Message from Honey' },
|
||||
{ roomid: 'u3', name: 'Bob der Baumeister', title: 'last Message from Bob der Baumeister' },
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unreadChatNotificationsCount() {
|
||||
const result = this.notifications.reduce((count, notification) => {
|
||||
return notification.read ? count : count + 1
|
||||
}, 0)
|
||||
return result
|
||||
},
|
||||
hasNotifications() {
|
||||
return this.notifications.length
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.chat-notifications-menu {
|
||||
max-width: 500px;
|
||||
}
|
||||
.vue-popover-theme {
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
.counter-icon {
|
||||
position: relative;
|
||||
|
||||
> .count {
|
||||
position: absolute;
|
||||
top: -$space-xx-small;
|
||||
right: 0;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $size-icon-base;
|
||||
min-width: $size-icon-base;
|
||||
padding: 3px; // magic number to center count
|
||||
border-radius: 50%;
|
||||
transform: translateX(50%);
|
||||
|
||||
color: $color-neutral-100;
|
||||
background-color: $color-primary;
|
||||
font-size: 10px; // magic number to center count
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
&.--danger {
|
||||
background-color: $color-danger;
|
||||
}
|
||||
|
||||
&.--inactive {
|
||||
background-color: $color-neutral-60;
|
||||
}
|
||||
|
||||
&.--soft {
|
||||
background-color: $color-neutral-90;
|
||||
color: $text-color-soft;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -263,10 +263,11 @@ import isEmpty from 'lodash/isEmpty'
|
||||
import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
|
||||
import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
|
||||
import LOGOS from '~/constants/logos.js'
|
||||
import headerMenu from '~/constants/headerMenu.js'
|
||||
import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
|
||||
import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
|
||||
import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
|
||||
import GroupButton from '~/components/Group/GroupButton'
|
||||
import headerMenu from '~/constants/headerMenu.js'
|
||||
import InviteButton from '~/components/InviteButton/InviteButton'
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import Logo from '~/components/Logo/Logo'
|
||||
@ -275,7 +276,6 @@ import SearchField from '~/components/features/SearchField/SearchField.vue'
|
||||
import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
|
||||
import links from '~/constants/links.js'
|
||||
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
|
||||
import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -552,6 +552,9 @@
|
||||
},
|
||||
"groups": "Gruppen",
|
||||
"myProfile": "Mein Profil"
|
||||
},
|
||||
"chat": {
|
||||
"tooltip": "Meine Chats"
|
||||
}
|
||||
},
|
||||
"index": {
|
||||
@ -691,10 +694,6 @@
|
||||
"unread": "Ungelesen"
|
||||
},
|
||||
"group": "Beschreibung",
|
||||
"headerMenuButton": {
|
||||
"chat": "Meine Chat",
|
||||
"tooltip": "Meine Benachrichtigungen"
|
||||
},
|
||||
"markAllAsRead": "Markiere alle als gelesen",
|
||||
"pageLink": "Alle Benachrichtigungen",
|
||||
"post": "Beitrag oder Gruppe",
|
||||
|
||||
@ -552,6 +552,9 @@
|
||||
},
|
||||
"groups": "Groups",
|
||||
"myProfile": "My profile"
|
||||
},
|
||||
"chat": {
|
||||
"tooltip": "My chats"
|
||||
}
|
||||
},
|
||||
"index": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user