ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

merged master

Browse Source
This commit is contained in:
Markus 2023-07-13 11:05:36 +02:00
commit fcfd58cedf
7 changed files with 45 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/assets/_new/icons/svgs/chat-bubble.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 961 B

121
webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
View File

@ -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>

18
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -74,6 +74,10 @@
<!-- locale switch -->
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<template v-if="isLoggedIn">
<!-- chat menu -->
<client-only>
<chat-notification-menu placement="top" />
</client-only>
<!-- notification menu -->
<client-only>
<notification-menu placement="top" />
@ -92,10 +96,6 @@
<client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
<map-button />
</client-only>
<!-- chat menü -->
<client-only>
<chat-notification-menu placement="top" />
</client-only>
<!-- avatar menu -->
<client-only>
<avatar-menu placement="top" />
@ -131,10 +131,16 @@
<!-- mobile hamburger menu -->
<ds-flex-item class="mobile-hamburger-menu">
<client-only>
<!-- chat menu -->
<div style="display: inline-flex">
<chat-notification-menu />
</div>
<!-- notification menu -->
<div style="display: inline-flex; padding-right: 20px">
<notification-menu />
</div>
</client-only>
<!-- hamburger menu -->
<base-button icon="bars" @click="toggleMobileMenuView" circle />
</ds-flex-item>
</ds-flex>
@ -257,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'
@ -269,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: {

13
webapp/locales/de.json
View File

@ -89,7 +89,11 @@
"roomEmpty": "Keinen Raum selektiert",
"roomsEmpty": "Keine Räume",
"search": "Suche",
"typeMessage": "Nachricht schreiben"
"typeMessage": "Nachricht schreiben",
"userProfileButton": {
"label": "Chat",
"tooltip": "Chatte mit „{name}“"
}
},
"client-only": {
"loading": "Lade …"
@ -566,6 +570,9 @@
},
"groups": "Gruppen",
"myProfile": "Mein Profil"
},
"chat": {
"tooltip": "Meine Chats"
}
},
"index": {
@ -705,10 +712,6 @@
"unread": "Ungelesen"
},
"group": "Beschreibung",
"headerMenuButton": {
"chat": "Meine Chat",
"tooltip": "Meine Benachrichtigungen"
},
"markAllAsRead": "Markiere alle als gelesen",
"pageLink": "Alle Benachrichtigungen",
"post": "Beitrag oder Gruppe",

13
webapp/locales/en.json
View File

@ -89,7 +89,11 @@
"roomEmpty": "No room selected",
"roomsEmpty": "No rooms",
"search": "Search",
"typeMessage": "Type message"
"typeMessage": "Type message",
"userProfileButton": {
"label": "Chat",
"tooltip": "Chat with “{name}”"
}
},
"client-only": {
"loading": "Loading …"
@ -566,6 +570,9 @@
},
"groups": "Groups",
"myProfile": "My profile"
},
"chat": {
"tooltip": "My chats"
}
},
"index": {
@ -705,10 +712,6 @@
"unread": "Unread"
},
"group": "Description",
"headerMenuButton": {
"chat": "My Chat",
"tooltip": "My notifications"
},
"markAllAsRead": "Mark all as read",
"pageLink": "All notifications",
"post": "Post or Group",

14
webapp/pages/profile/_id/_slug.vue
View File

@ -80,13 +80,14 @@
@update="updateFollow"
/>
<base-button
@click="$store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: user.id })"
icon="chat-bubble"
v-tooltip="{
content: $t('notifications.headerMenuButton.chat'),
content: $t('chat.userProfileButton.tooltip', { name: userName }),
placement: 'bottom-start',
}"
@click="showChat({ showChat: true, roomID: user.id })"
>
<img src="/img/empty/chat-bubble.svg" height="20" />
{{ $t('chat.userProfileButton.label') }}
</base-button>
</div>
<template v-if="user.about">
@ -181,6 +182,7 @@
<script>
import uniqBy from 'lodash/uniqBy'
import { mapMutations } from 'vuex'
import postListActions from '~/mixins/postListActions'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import HcFollowButton from '~/components/Button/FollowButton'
@ -290,6 +292,10 @@ export default {
},
},
methods: {
...mapMutations({
commitModalData: 'modal/SET_OPEN',
showChat: 'chat/SET_OPEN_CHAT',
}),
handleTab(tab) {
if (this.tabActive !== tab) {
this.tabActive = tab
@ -365,7 +371,7 @@ export default {
}
},
async deleteUser(userdata) {
this.$store.commit('modal/SET_OPEN', {
this.commitModalData({
name: 'delete',
data: {
userdata: userdata,

1
webapp/static/img/empty/chat-bubble.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="chat-bubble"><g data-name="Chat"><path fill="#9B9B9B" 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 fill="#9B9B9B" 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>
Side by Side

Before

Width:  |  Height:  |  Size: 942 B