mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
Merge branch 'master' into cypress-reporting
This commit is contained in:
mahula
GitHub
commit
264546c27c
@ -25,4 +25,3 @@ type LocationMapBox {
|
||||
type Query {
|
||||
queryLocations(place: String!, lang: String!): [LocationMapBox]!
|
||||
}
|
||||
|
||||
|
||||
@ -84,8 +84,8 @@ input _PostFilter {
|
||||
group: _GroupFilter
|
||||
postsInMyGroups: Boolean
|
||||
postType_in: [PostType]
|
||||
eventStart_gte: String
|
||||
eventEnd_gte: String
|
||||
eventStart_gte: String
|
||||
eventEnd_gte: String
|
||||
}
|
||||
|
||||
enum _PostOrdering {
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
|
||||
/* globals Cypress cy */
|
||||
import "cypress-file-upload";
|
||||
import { GraphQLClient, request } from 'graphql-request'
|
||||
import CONFIG from '../../backend/build/src/config'
|
||||
|
||||
|
||||
@ -1,28 +1,27 @@
|
||||
import { Then } from "@badeball/cypress-cucumber-preprocessor";
|
||||
|
||||
Then("I should be able to {string} a teaser image", condition => {
|
||||
// cy.reload()
|
||||
let postTeaserImage = ""
|
||||
|
||||
switch(condition){
|
||||
case 'change':
|
||||
cy.get('.delete-image-button')
|
||||
case "change":
|
||||
postTeaserImage = "humanconnection.png"
|
||||
cy.get(".delete-image-button")
|
||||
.click()
|
||||
cy.fixture('humanconnection.png').as('postTeaserImage').then(function() {
|
||||
cy.get("#postdropzone").upload(
|
||||
{ fileContent: this.postTeaserImage, fileName: 'humanconnection.png', mimeType: "image/png" },
|
||||
{ subjectType: "drag-n-drop", force: true }
|
||||
).wait(750);
|
||||
})
|
||||
cy.get("#postdropzone").selectFile(
|
||||
{ contents: `cypress/fixtures/${postTeaserImage}`, fileName: postTeaserImage, mimeType: "image/png" },
|
||||
{ action: "drag-drop", force: true }
|
||||
).wait(750);
|
||||
break;
|
||||
case 'add':
|
||||
cy.fixture('onourjourney.png').as('postTeaserImage').then(function() {
|
||||
cy.get("#postdropzone").upload(
|
||||
{ fileContent: this.postTeaserImage, fileName: 'onourjourney.png', mimeType: "image/png" },
|
||||
{ subjectType: "drag-n-drop", force: true }
|
||||
).wait(750);
|
||||
})
|
||||
case "add":
|
||||
postTeaserImage = "onourjourney.png"
|
||||
cy.get("#postdropzone").selectFile(
|
||||
{ contents: `cypress/fixtures/${postTeaserImage}`, fileName: postTeaserImage, mimeType: "image/png" },
|
||||
{ action: "drag-drop", force: true }
|
||||
).wait(750);
|
||||
break;
|
||||
case 'remove':
|
||||
cy.get('.delete-image-button')
|
||||
case "remove":
|
||||
cy.get(".delete-image-button")
|
||||
.click()
|
||||
break;
|
||||
}
|
||||
|
||||
@ -2,13 +2,11 @@ import { Then } from "@badeball/cypress-cucumber-preprocessor";
|
||||
|
||||
Then("I should be able to change my profile picture", () => {
|
||||
const avatarUpload = "onourjourney.png";
|
||||
|
||||
cy.fixture(avatarUpload, "base64").then(fileContent => {
|
||||
cy.get("#customdropzone").upload(
|
||||
{ fileContent, fileName: avatarUpload, mimeType: "image/png" },
|
||||
{ subjectType: "drag-n-drop", force: true }
|
||||
);
|
||||
});
|
||||
|
||||
cy.get("#customdropzone").selectFile(
|
||||
{ contents: `cypress/fixtures/${avatarUpload}`, fileName: avatarUpload, mimeType: "image/png" },
|
||||
{ action: "drag-drop" }
|
||||
);
|
||||
cy.get(".profile-page-avatar img")
|
||||
.should("have.attr", "src")
|
||||
.and("contains", "onourjourney");
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 350237c62dcff1a5c34f1e8d718f89b05ce3d33f
|
||||
Subproject commit fdc2e52fa444b300e1c4736600bc0e9ae3314222
|
||||
@ -27,8 +27,8 @@
|
||||
"scripts": {
|
||||
"db:seed": "cd backend && yarn run db:seed",
|
||||
"db:reset": "cd backend && yarn run db:reset",
|
||||
"cypress:run": "cypress run --browser electron --config-file ./cypress/cypress.config.js",
|
||||
"cypress:open": "cypress open --browser electron --config-file ./cypress/cypress.config.js",
|
||||
"cypress:run": "cypress run --e2e --browser electron --config-file ./cypress/cypress.config.js",
|
||||
"cypress:open": "cypress open --e2e --browser electron --config-file ./cypress/cypress.config.js",
|
||||
"cucumber:setup": "cd backend && yarn run dev",
|
||||
"cucumber": "wait-on tcp:4000 && cucumber-js --require-module @babel/register --exit",
|
||||
"release": "yarn version --no-git-tag-version --no-commit-hooks --no-commit && auto-changelog --latest-version $(node -p -e \"require('./package.json').version\") && cd backend && yarn version --no-git-tag-version --no-commit-hooks --no-commit --new-version $(node -p -e \"require('./../package.json').version\") && cd ../webapp && yarn version --no-git-tag-version --no-commit-hooks --no-commit --new-version $(node -p -e \"require('./../package.json').version\") && cd ../webapp/maintenance/source && yarn version --no-git-tag-version --no-commit-hooks --no-commit --new-version $(node -p -e \"require('./../../../package.json').version\")"
|
||||
@ -45,7 +45,6 @@
|
||||
"cross-env": "^7.0.3",
|
||||
"cucumber": "^6.0.5",
|
||||
"cypress": "^12.17.0",
|
||||
"cypress-file-upload": "^3.5.3",
|
||||
"cypress-network-idle": "^1.14.2",
|
||||
"date-fns": "^2.25.0",
|
||||
"dotenv": "^8.2.0",
|
||||
|
||||
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 |
30
webapp/assets/_new/styles/export.scss
Normal file
30
webapp/assets/_new/styles/export.scss
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
:export {
|
||||
colorPrimary: $color-primary;
|
||||
colorPrimaryActive: $color-primary-active;
|
||||
colorPrimaryLight: $color-primary-light;
|
||||
|
||||
borderColorSoft: $border-color-soft;
|
||||
|
||||
borderRadiusBase: $border-radius-base;
|
||||
|
||||
textColorBase: $text-color-base;
|
||||
textColorSoft: $text-color-soft;
|
||||
textColorInverse: $text-color-inverse;
|
||||
|
||||
boxShadowBase: $box-shadow-base;
|
||||
|
||||
backgroundColorBase: $background-color-base;
|
||||
backgroundColorSoft: $background-color-soft;
|
||||
backgroundColorSoftest: $background-color-softest;
|
||||
backgroundColorPrimary: $background-color-primary;
|
||||
|
||||
colorNeutral30: $color-neutral-30;
|
||||
|
||||
chatMessageColor: $chat-message-color;
|
||||
|
||||
chatMessageBgMe: $chat-message-bg-me;
|
||||
chatMessageBgOthers: $chat-message-bg-others;
|
||||
|
||||
chatNewMessageColor: $chat-new-message-color;
|
||||
}
|
||||
@ -406,4 +406,14 @@ $color-toast-green: $color-success;
|
||||
$color-ribbon-event: $background-color-third;
|
||||
$color-ribbon-event-active: $background-color-third-active;
|
||||
$color-ribbon-article: $background-color-secondary;
|
||||
$color-ribbon-article-active: $background-color-secondary-active;
|
||||
$color-ribbon-article-active: $background-color-secondary-active;
|
||||
|
||||
/**
|
||||
* @tokens Chat Color
|
||||
*/
|
||||
|
||||
$chat-message-bg-me: $color-primary-light;
|
||||
$chat-message-color: $text-color-base;
|
||||
$chat-message-bg-others: $color-neutral-80;
|
||||
$chat-sidemenu-bg: $color-secondary-active;
|
||||
$chat-new-message-color: $color-secondary-active;
|
||||
|
||||
@ -15,13 +15,42 @@
|
||||
:rooms-loaded="true"
|
||||
show-files="false"
|
||||
show-audio="false"
|
||||
:styles="JSON.stringify(computedChatStyle)"
|
||||
:show-footer="true"
|
||||
@send-message="sendMessage($event.detail[0])"
|
||||
@fetch-messages="fetchMessages($event.detail[0])"
|
||||
:responsive-breakpoint="responsiveBreakpoint"
|
||||
:single-room="singleRoom"
|
||||
@show-demo-options="showDemoOptions = $event"
|
||||
/>
|
||||
>
|
||||
<div slot="menu-icon" @click.prevent.stop="$emit('close-single-room', true)">
|
||||
<div v-if="singleRoom">
|
||||
<ds-icon name="close"></ds-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="room-header-avatar">
|
||||
<div
|
||||
v-if="selectedRoom && selectedRoom.avatar && selectedRoom.avatar !== 'default-avatar'"
|
||||
class="vac-avatar"
|
||||
:style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
|
||||
/>
|
||||
<div v-else-if="selectedRoom" class="vac-avatar">
|
||||
<span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
|
||||
<div
|
||||
v-if="room.avatar && room.avatar !== 'default-avatar'"
|
||||
class="vac-avatar"
|
||||
:style="{ 'background-image': `url('${room.avatar}')` }"
|
||||
/>
|
||||
<div v-else class="vac-avatar">
|
||||
<span class="initials">{{ getInitialsName(room.roomName) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</vue-advanced-chat>
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
@ -29,6 +58,7 @@
|
||||
<script>
|
||||
import { roomQuery, createRoom } from '~/graphql/Rooms'
|
||||
import { messageQuery, createMessageMutation } from '~/graphql/Messages'
|
||||
import chatStyle from '~/constants/chat.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
@ -45,6 +75,11 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
menuActions: [
|
||||
// NOTE: if menuActions is empty, the related slot is not shown
|
||||
{
|
||||
name: 'dummyItem',
|
||||
title: 'Just a dummy item',
|
||||
},
|
||||
/* {
|
||||
name: 'inviteUser',
|
||||
title: 'Invite User',
|
||||
@ -79,18 +114,18 @@ export default {
|
||||
},
|
||||
],
|
||||
textMessages: {
|
||||
ROOMS_EMPTY: 'Aucune conversation',
|
||||
ROOM_EMPTY: 'Aucune conversation sélectionnée',
|
||||
NEW_MESSAGES: 'Nouveaux messages',
|
||||
MESSAGE_DELETED: 'Ce message a été supprimé',
|
||||
MESSAGES_EMPTY: 'Aucun message',
|
||||
CONVERSATION_STARTED: 'La conversation a commencée le :',
|
||||
TYPE_MESSAGE: 'Tapez votre message',
|
||||
SEARCH: 'Rechercher',
|
||||
IS_ONLINE: 'est en ligne',
|
||||
LAST_SEEN: 'dernière connexion ',
|
||||
IS_TYPING: 'est en train de taper...',
|
||||
CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
|
||||
ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
|
||||
ROOM_EMPTY: this.$t('chat.roomEmpty'),
|
||||
NEW_MESSAGES: this.$t('chat.newMessages'),
|
||||
MESSAGE_DELETED: this.$t('chat.messageDeleted'),
|
||||
MESSAGES_EMPTY: this.$t('chat.messagesEmpty'),
|
||||
CONVERSATION_STARTED: this.$t('chat.conversationStarted'),
|
||||
TYPE_MESSAGE: this.$t('chat.typeMessage'),
|
||||
SEARCH: this.$t('chat.search'),
|
||||
IS_ONLINE: this.$t('chat.isOnline'),
|
||||
LAST_SEEN: this.$t('chat.lastSeen'),
|
||||
IS_TYPING: this.$t('chat.isTyping'),
|
||||
CANCEL_SELECT_MESSAGE: this.$t('chat.cancelSelectMessage'),
|
||||
},
|
||||
roomActions: [
|
||||
/*
|
||||
@ -109,6 +144,7 @@ export default {
|
||||
showDemoOptions: true,
|
||||
responsiveBreakpoint: 600,
|
||||
singleRoom: !!this.singleRoomId || false,
|
||||
selectedRoom: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -135,6 +171,11 @@ export default {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
computedChatStyle() {
|
||||
// TODO light/dark theme still needed?
|
||||
// return this.theme === 'light' ? chatStyle.STYLE.light : chatStyle.STYLE.dark
|
||||
return chatStyle.STYLE.light
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchMessages({ room, options = {} }) {
|
||||
@ -156,6 +197,8 @@ export default {
|
||||
this.$toast.error(error.message)
|
||||
}
|
||||
this.messagesLoaded = true
|
||||
|
||||
this.selectedRoom = room
|
||||
})
|
||||
},
|
||||
|
||||
@ -177,6 +220,11 @@ export default {
|
||||
}
|
||||
this.refetchMessage(message.roomId)
|
||||
},
|
||||
|
||||
getInitialsName(fullname) {
|
||||
if (!fullname) return
|
||||
return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
Rooms: {
|
||||
@ -217,4 +265,25 @@ export default {
|
||||
body {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
.vac-avatar {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color-primary-dark;
|
||||
color: $text-color-primary-inverse;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
min-height: 42px;
|
||||
min-width: 42px;
|
||||
margin-right: 15px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
> .initials {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
299
webapp/constants/chat.js
Normal file
299
webapp/constants/chat.js
Normal file
@ -0,0 +1,299 @@
|
||||
import tokens from './../assets/_new/styles/tokens.scss'
|
||||
// import branding from './../assets/styles/imports/_branding.scss'
|
||||
|
||||
const styleData = tokens
|
||||
|
||||
const STYLE = {
|
||||
light: {
|
||||
general: {
|
||||
color: styleData.textColorBase,
|
||||
colorButtonClear: '#1976d2',
|
||||
colorButton: '#fff',
|
||||
backgroundColorButton: '#1976d2',
|
||||
backgroundInput: '#fff',
|
||||
colorPlaceholder: styleData.textColorSoft,
|
||||
colorCaret: '#1976d2',
|
||||
colorSpinner: styleData.colorPrimary,
|
||||
borderStyle: '1px solid #e1e4e8',
|
||||
backgroundScrollIcon: '#fff',
|
||||
},
|
||||
|
||||
container: {
|
||||
border: 'none',
|
||||
borderRadius: styleData.borderRadiusBase,
|
||||
boxShadow: styleData.boxShadowBase,
|
||||
},
|
||||
|
||||
header: {
|
||||
background: styleData.backgroundColorSoft,
|
||||
colorRoomName: styleData.textColorBase,
|
||||
colorRoomInfo: styleData.textColorSoft,
|
||||
},
|
||||
|
||||
footer: {
|
||||
background: styleData.backgroundColorSoft,
|
||||
borderStyleInput: '1px solid #e1e4e8',
|
||||
borderInputSelected: '#1976d2',
|
||||
backgroundReply: styleData.backgroundColorSoft,
|
||||
backgroundTagActive: styleData.backgroundColorSoft,
|
||||
backgroundTag: styleData.backgroundColorBase,
|
||||
},
|
||||
|
||||
content: {
|
||||
background: styleData.backgroundColorBase,
|
||||
},
|
||||
|
||||
sidemenu: {
|
||||
background: '#fff',
|
||||
backgroundHover: '#f6f6f6',
|
||||
backgroundActive: styleData.colorPrimaryLight,
|
||||
colorActive: '#1976d2',
|
||||
borderColorSearch: '#e1e5e8',
|
||||
},
|
||||
|
||||
dropdown: {
|
||||
background: '#fff',
|
||||
backgroundHover: '#f6f6f6',
|
||||
},
|
||||
|
||||
message: {
|
||||
background: styleData.chatMessageBgOthers,
|
||||
backgroundMe: styleData.chatMessageBgMe,
|
||||
color: styleData.chatMessageColor,
|
||||
colorStarted: '#9ca6af',
|
||||
backgroundDeleted: '#dadfe2',
|
||||
backgroundSelected: '#c2dcf2',
|
||||
colorDeleted: '#757e85',
|
||||
colorUsername: '#9ca6af',
|
||||
colorTimestamp: '#828c94',
|
||||
backgroundDate: '#e5effa',
|
||||
colorDate: '#505a62',
|
||||
backgroundSystem: '#e5effa',
|
||||
colorSystem: '#505a62',
|
||||
backgroundMedia: 'rgba(0, 0, 0, 0.15)',
|
||||
backgroundReply: 'rgba(0, 0, 0, 0.08)',
|
||||
colorReplyUsername: '#0a0a0a',
|
||||
colorReply: '#6e6e6e',
|
||||
colorTag: '#0d579c',
|
||||
backgroundImage: '#ddd',
|
||||
colorNewMessages: styleData.chatNewMessageColor,
|
||||
backgroundScrollCounter: '#0696c7',
|
||||
colorScrollCounter: '#fff',
|
||||
backgroundReaction: '#eee',
|
||||
borderStyleReaction: '1px solid #eee',
|
||||
backgroundReactionHover: '#fff',
|
||||
borderStyleReactionHover: '1px solid #ddd',
|
||||
colorReactionCounter: '#0a0a0a',
|
||||
backgroundReactionMe: '#cfecf5',
|
||||
borderStyleReactionMe: '1px solid #3b98b8',
|
||||
backgroundReactionHoverMe: '#cfecf5',
|
||||
borderStyleReactionHoverMe: '1px solid #3b98b8',
|
||||
colorReactionCounterMe: '#0b59b3',
|
||||
backgroundAudioRecord: '#eb4034',
|
||||
backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
|
||||
backgroundAudioProgress: '#455247',
|
||||
backgroundAudioProgressSelector: '#455247',
|
||||
colorFileExtension: '#757e85',
|
||||
},
|
||||
|
||||
markdown: {
|
||||
background: 'rgba(239, 239, 239, 0.7)',
|
||||
border: 'rgba(212, 212, 212, 0.9)',
|
||||
color: '#e01e5a',
|
||||
colorMulti: '#0a0a0a',
|
||||
},
|
||||
|
||||
room: {
|
||||
colorUsername: '#0a0a0a',
|
||||
colorMessage: '#67717a',
|
||||
colorTimestamp: '#a2aeb8',
|
||||
colorStateOnline: '#4caf50',
|
||||
colorStateOffline: '#9ca6af',
|
||||
backgroundCounterBadge: '#0696c7',
|
||||
colorCounterBadge: '#fff',
|
||||
},
|
||||
|
||||
emoji: {
|
||||
background: '#fff',
|
||||
},
|
||||
|
||||
icons: {
|
||||
search: '#9ca6af',
|
||||
add: styleData.colorPrimary,
|
||||
toggle: styleData.colorNeutral30,
|
||||
menu: styleData.colorNeutral30,
|
||||
close: '#9ca6af',
|
||||
closeImage: '#fff',
|
||||
file: styleData.colorPrimary,
|
||||
paperclip: styleData.colorPrimary,
|
||||
closeOutline: '#000',
|
||||
closePreview: '#fff',
|
||||
send: styleData.colorPrimary,
|
||||
sendDisabled: '#9ca6af',
|
||||
emoji: styleData.colorPrimary,
|
||||
emojiReaction: 'rgba(0, 0, 0, 0.3)',
|
||||
document: styleData.colorPrimary,
|
||||
pencil: '#9e9e9e',
|
||||
checkmark: '#9e9e9e',
|
||||
checkmarkSeen: '#0696c7',
|
||||
eye: '#fff',
|
||||
dropdownMessage: '#fff',
|
||||
dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
|
||||
dropdownRoom: '#9e9e9e',
|
||||
dropdownScroll: '#0a0a0a',
|
||||
microphone: styleData.colorPrimary,
|
||||
audioPlay: '#455247',
|
||||
audioPause: '#455247',
|
||||
audioCancel: '#eb4034',
|
||||
audioConfirm: '#1ba65b',
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
general: {
|
||||
color: '#fff',
|
||||
colorButtonClear: '#fff',
|
||||
colorButton: '#fff',
|
||||
backgroundColorButton: '#1976d2',
|
||||
backgroundInput: '#202223',
|
||||
colorPlaceholder: '#596269',
|
||||
colorCaret: '#fff',
|
||||
colorSpinner: '#fff',
|
||||
borderStyle: 'none',
|
||||
backgroundScrollIcon: '#fff',
|
||||
},
|
||||
|
||||
container: {
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
|
||||
},
|
||||
|
||||
header: {
|
||||
background: '#181a1b',
|
||||
colorRoomName: '#fff',
|
||||
colorRoomInfo: '#9ca6af',
|
||||
},
|
||||
|
||||
footer: {
|
||||
background: '#131415',
|
||||
borderStyleInput: 'none',
|
||||
borderInputSelected: '#1976d2',
|
||||
backgroundReply: '#1b1c1c',
|
||||
backgroundTagActive: '#1b1c1c',
|
||||
backgroundTag: '#131415',
|
||||
},
|
||||
|
||||
content: {
|
||||
background: '#131415',
|
||||
},
|
||||
|
||||
sidemenu: {
|
||||
background: '#181a1b',
|
||||
backgroundHover: '#202224',
|
||||
backgroundActive: '#151617',
|
||||
colorActive: '#fff',
|
||||
borderColorSearch: '#181a1b',
|
||||
},
|
||||
|
||||
dropdown: {
|
||||
background: '#2a2c33',
|
||||
backgroundHover: '#26282e',
|
||||
},
|
||||
|
||||
message: {
|
||||
background: '#22242a',
|
||||
backgroundMe: '#1f7e80',
|
||||
color: '#fff',
|
||||
colorStarted: '#9ca6af',
|
||||
backgroundDeleted: '#1b1c21',
|
||||
backgroundSelected: '#c2dcf2',
|
||||
colorDeleted: '#a2a5a8',
|
||||
colorUsername: '#b3bac9',
|
||||
colorTimestamp: '#ebedf2',
|
||||
backgroundDate: 'rgba(0, 0, 0, 0.3)',
|
||||
colorDate: '#bec5cc',
|
||||
backgroundSystem: 'rgba(0, 0, 0, 0.3)',
|
||||
colorSystem: '#bec5cc',
|
||||
backgroundMedia: 'rgba(0, 0, 0, 0.18)',
|
||||
backgroundReply: 'rgba(0, 0, 0, 0.18)',
|
||||
colorReplyUsername: '#fff',
|
||||
colorReply: '#d6d6d6',
|
||||
colorTag: '#f0c60a',
|
||||
backgroundImage: '#ddd',
|
||||
colorNewMessages: '#fff',
|
||||
backgroundScrollCounter: '#1976d2',
|
||||
colorScrollCounter: '#fff',
|
||||
backgroundReaction: 'none',
|
||||
borderStyleReaction: 'none',
|
||||
backgroundReactionHover: '#202223',
|
||||
borderStyleReactionHover: 'none',
|
||||
colorReactionCounter: '#fff',
|
||||
backgroundReactionMe: '#4e9ad1',
|
||||
borderStyleReactionMe: 'none',
|
||||
backgroundReactionHoverMe: '#4e9ad1',
|
||||
borderStyleReactionHoverMe: 'none',
|
||||
colorReactionCounterMe: '#fff',
|
||||
backgroundAudioRecord: '#eb4034',
|
||||
backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
|
||||
backgroundAudioProgress: '#b7d4d3',
|
||||
backgroundAudioProgressSelector: '#b7d4d3',
|
||||
colorFileExtension: '#a2a5a8',
|
||||
},
|
||||
|
||||
markdown: {
|
||||
background: 'rgba(239, 239, 239, 0.7)',
|
||||
border: 'rgba(212, 212, 212, 0.9)',
|
||||
color: '#e01e5a',
|
||||
colorMulti: '#0a0a0a',
|
||||
},
|
||||
|
||||
room: {
|
||||
colorUsername: '#fff',
|
||||
colorMessage: '#6c7278',
|
||||
colorTimestamp: '#6c7278',
|
||||
colorStateOnline: '#4caf50',
|
||||
colorStateOffline: '#596269',
|
||||
backgroundCounterBadge: '#1976d2',
|
||||
colorCounterBadge: '#fff',
|
||||
},
|
||||
|
||||
emoji: {
|
||||
background: '#343740',
|
||||
},
|
||||
|
||||
icons: {
|
||||
search: '#596269',
|
||||
add: '#fff',
|
||||
toggle: '#fff',
|
||||
menu: '#fff',
|
||||
close: '#9ca6af',
|
||||
closeImage: '#fff',
|
||||
file: '#1976d2',
|
||||
paperclip: '#fff',
|
||||
closeOutline: '#fff',
|
||||
closePreview: '#fff',
|
||||
send: '#fff',
|
||||
sendDisabled: '#646a70',
|
||||
emoji: '#fff',
|
||||
emojiReaction: '#fff',
|
||||
document: '#1976d2',
|
||||
pencil: '#ebedf2',
|
||||
checkmark: '#ebedf2',
|
||||
checkmarkSeen: '#f0d90a',
|
||||
eye: '#fff',
|
||||
dropdownMessage: '#fff',
|
||||
dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
|
||||
dropdownRoom: '#fff',
|
||||
dropdownScroll: '#0a0a0a',
|
||||
microphone: '#fff',
|
||||
audioPlay: '#b7d4d3',
|
||||
audioPause: '#b7d4d3',
|
||||
audioCancel: '#eb4034',
|
||||
audioConfirm: '#1ba65b',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
STYLE,
|
||||
}
|
||||
@ -77,6 +77,10 @@ export const filterPosts = (i18n) => {
|
||||
eventEnd
|
||||
eventVenue
|
||||
eventLocationName
|
||||
eventLocation {
|
||||
lng
|
||||
lat
|
||||
}
|
||||
eventIsOnline
|
||||
...post
|
||||
...postCounts
|
||||
|
||||
@ -14,15 +14,11 @@
|
||||
<modal />
|
||||
</client-only>
|
||||
<div v-if="$store.getters['chat/showChat'].showChat" class="chat-modul">
|
||||
<ds-text align="right" class="close">
|
||||
RoomID: {{ $store.getters['chat/showChat'].roomID }}
|
||||
<ds-button @click="$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })">
|
||||
x
|
||||
</ds-button>
|
||||
</ds-text>
|
||||
<chat-module :singleRoomId="$store.getters['chat/showChat'].roomID" />
|
||||
<chat-module
|
||||
v-on:close-single-room="closeSingleRoom"
|
||||
:singleRoomId="$store.getters['chat/showChat'].roomID"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -41,6 +37,11 @@ export default {
|
||||
ChatModule,
|
||||
},
|
||||
mixins: [seo, mobile()],
|
||||
methods: {
|
||||
closeSingleRoom() {
|
||||
this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })
|
||||
},
|
||||
@ -58,7 +59,6 @@ export default {
|
||||
|
||||
.chat-modul {
|
||||
background-color: rgb(233, 228, 228);
|
||||
height: 667px;
|
||||
width: 355px;
|
||||
position: fixed;
|
||||
bottom: 45px;
|
||||
|
||||
@ -77,6 +77,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"chat": {
|
||||
"cancelSelectMessage": "Abbrechen",
|
||||
"conversationStarted": "Unterhaltung startete am:",
|
||||
"isOnline": "online",
|
||||
"isTyping": "tippt...",
|
||||
"lastSeen": "zuletzt gesehen ",
|
||||
"messageDeleted": "Diese Nachricht wuerde gelöscht",
|
||||
"messagesEmpty": "Keine Nachrichten",
|
||||
"newMessages": "Neue Nachrichten",
|
||||
"roomEmpty": "Keinen Raum selektiert",
|
||||
"roomsEmpty": "Keine Räume",
|
||||
"search": "Suche",
|
||||
"typeMessage": "Nachricht schreiben",
|
||||
"userProfileButton": {
|
||||
"label": "Chat",
|
||||
"tooltip": "Chatte mit „{name}“"
|
||||
}
|
||||
},
|
||||
"client-only": {
|
||||
"loading": "Lade …"
|
||||
},
|
||||
@ -552,6 +570,9 @@
|
||||
},
|
||||
"groups": "Gruppen",
|
||||
"myProfile": "Mein Profil"
|
||||
},
|
||||
"chat": {
|
||||
"tooltip": "Meine Chats"
|
||||
}
|
||||
},
|
||||
"index": {
|
||||
@ -595,9 +616,16 @@
|
||||
"button": {
|
||||
"tooltip": "Landkarte anzeigen"
|
||||
},
|
||||
"markerTypes": {
|
||||
"legend": {
|
||||
"event": "Veranstaltung",
|
||||
"group": "Gruppe",
|
||||
"theUser": "deine Position",
|
||||
"theUser": "Meine Position",
|
||||
"user": "Nutzer"
|
||||
},
|
||||
"markerTypes": {
|
||||
"event": "Veranstaltung",
|
||||
"group": "Gruppe",
|
||||
"theUser": "meine Position",
|
||||
"user": "Nutzer"
|
||||
},
|
||||
"pageTitle": "Landkarte",
|
||||
@ -691,10 +719,6 @@
|
||||
"unread": "Ungelesen"
|
||||
},
|
||||
"group": "Beschreibung",
|
||||
"headerMenuButton": {
|
||||
"chat": "Meine Chat",
|
||||
"tooltip": "Meine Benachrichtigungen"
|
||||
},
|
||||
"markAllAsRead": "Markiere alle als gelesen",
|
||||
"pageLink": "Alle Benachrichtigungen",
|
||||
"post": "Beitrag oder Gruppe",
|
||||
@ -710,11 +734,6 @@
|
||||
"title": "Benachrichtigungen",
|
||||
"user": "Nutzer"
|
||||
},
|
||||
"position": {
|
||||
"group": "Gruppe",
|
||||
"my": "Meine Position",
|
||||
"user": "Nutzer"
|
||||
},
|
||||
"post": {
|
||||
"comment": {
|
||||
"reply": "Antworten",
|
||||
|
||||
@ -77,6 +77,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"chat": {
|
||||
"cancelSelectMessage": "Cancel",
|
||||
"conversationStarted": "Conversation started on:",
|
||||
"isOnline": "is online",
|
||||
"isTyping": "is writing...",
|
||||
"lastSeen": "last seen ",
|
||||
"messageDeleted": "This message was deleted",
|
||||
"messagesEmpty": "No messages",
|
||||
"newMessages": "New Messages",
|
||||
"roomEmpty": "No room selected",
|
||||
"roomsEmpty": "No rooms",
|
||||
"search": "Search",
|
||||
"typeMessage": "Type message",
|
||||
"userProfileButton": {
|
||||
"label": "Chat",
|
||||
"tooltip": "Chat with “{name}”"
|
||||
}
|
||||
},
|
||||
"client-only": {
|
||||
"loading": "Loading …"
|
||||
},
|
||||
@ -552,6 +570,9 @@
|
||||
},
|
||||
"groups": "Groups",
|
||||
"myProfile": "My profile"
|
||||
},
|
||||
"chat": {
|
||||
"tooltip": "My chats"
|
||||
}
|
||||
},
|
||||
"index": {
|
||||
@ -595,9 +616,16 @@
|
||||
"button": {
|
||||
"tooltip": "Show map"
|
||||
},
|
||||
"legend": {
|
||||
"event": "Event",
|
||||
"group": "Group",
|
||||
"theUser": "My position",
|
||||
"user": "User"
|
||||
},
|
||||
"markerTypes": {
|
||||
"event": "event",
|
||||
"group": "group",
|
||||
"theUser": "your position",
|
||||
"theUser": "my position",
|
||||
"user": "user"
|
||||
},
|
||||
"pageTitle": "Map",
|
||||
@ -691,10 +719,6 @@
|
||||
"unread": "Unread"
|
||||
},
|
||||
"group": "Description",
|
||||
"headerMenuButton": {
|
||||
"chat": "My Chat",
|
||||
"tooltip": "My notifications"
|
||||
},
|
||||
"markAllAsRead": "Mark all as read",
|
||||
"pageLink": "All notifications",
|
||||
"post": "Post or Group",
|
||||
@ -710,11 +734,6 @@
|
||||
"title": "Notifications",
|
||||
"user": "User"
|
||||
},
|
||||
"position": {
|
||||
"group": "Group",
|
||||
"my": "My position",
|
||||
"user": "User"
|
||||
},
|
||||
"post": {
|
||||
"comment": {
|
||||
"reply": "Reply",
|
||||
|
||||
@ -105,6 +105,7 @@ export default {
|
||||
styleguideStyles,
|
||||
'~assets/_new/styles/tokens.scss',
|
||||
'~assets/styles/imports/_branding.scss',
|
||||
'~assets/_new/styles/export.scss',
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
@ -5,16 +5,15 @@
|
||||
<ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
|
||||
<small>
|
||||
<div>
|
||||
<img
|
||||
alt="my position"
|
||||
src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg"
|
||||
width="15"
|
||||
/>
|
||||
{{ $t('position.my') }}
|
||||
<img alt="user" src="/img/mapbox/marker-icons/mapbox-marker-icon-green.svg" width="15" />
|
||||
{{ $t('position.user') }}
|
||||
<img alt="group" src="/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg" width="15" />
|
||||
{{ $t('position.group') }}
|
||||
<span v-for="type in markers.types" :key="type.id">
|
||||
<img
|
||||
:alt="$t('map.legend.' + type.id)"
|
||||
:src="'/img/mapbox/marker-icons/' + type.icon.legendName"
|
||||
width="15"
|
||||
/>
|
||||
{{ $t('map.legend.' + type.id) }}
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</small>
|
||||
</ds-space>
|
||||
@ -66,6 +65,7 @@ import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { profileUserQuery, mapUserQuery } from '~/graphql/User'
|
||||
import { groupQuery } from '~/graphql/groups'
|
||||
import { filterPosts } from '~/graphql/PostQuery.js'
|
||||
import mobile from '~/mixins/mobile'
|
||||
import Empty from '~/components/Empty/Empty'
|
||||
import MapStylesButtons from '~/components/Map/MapStylesButtons'
|
||||
@ -95,19 +95,40 @@ export default {
|
||||
currentUserCoordinates: null,
|
||||
users: null,
|
||||
groups: null,
|
||||
posts: null,
|
||||
markers: {
|
||||
icons: [
|
||||
types: [
|
||||
{
|
||||
id: 'marker-blue',
|
||||
name: 'mapbox-marker-icon-20px-blue.png',
|
||||
id: 'theUser',
|
||||
icon: {
|
||||
id: 'marker-orange',
|
||||
legendName: 'mapbox-marker-icon-orange.svg',
|
||||
mapName: 'mapbox-marker-icon-20px-orange.png',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'marker-orange',
|
||||
name: 'mapbox-marker-icon-20px-orange.png',
|
||||
id: 'user',
|
||||
icon: {
|
||||
id: 'marker-green',
|
||||
legendName: 'mapbox-marker-icon-green.svg',
|
||||
mapName: 'mapbox-marker-icon-20px-green.png',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'marker-green',
|
||||
name: 'mapbox-marker-icon-20px-green.png',
|
||||
id: 'group',
|
||||
icon: {
|
||||
id: 'marker-red',
|
||||
legendName: 'mapbox-marker-icon-red.svg',
|
||||
mapName: 'mapbox-marker-icon-20px-red.png',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'event',
|
||||
icon: {
|
||||
id: 'marker-purple',
|
||||
legendName: 'mapbox-marker-icon-purple.svg',
|
||||
mapName: 'mapbox-marker-icon-20px-purple.png',
|
||||
},
|
||||
},
|
||||
],
|
||||
isImagesLoaded: false,
|
||||
@ -137,7 +158,8 @@ export default {
|
||||
this.markers.isImagesLoaded &&
|
||||
this.currentUser &&
|
||||
this.users &&
|
||||
this.groups
|
||||
this.groups &&
|
||||
this.posts
|
||||
)
|
||||
},
|
||||
styles() {
|
||||
@ -236,17 +258,27 @@ export default {
|
||||
|
||||
// Copy coordinates array.
|
||||
const coordinates = e.features[0].geometry.coordinates.slice()
|
||||
const markerTypeLabel =
|
||||
e.features[0].properties.type === 'group'
|
||||
? this.$t('map.markerTypes.group')
|
||||
: e.features[0].properties.type === 'user'
|
||||
? this.$t('map.markerTypes.user')
|
||||
: this.$t('map.markerTypes.theUser')
|
||||
const markerProfileLinkTitle =
|
||||
(e.features[0].properties.type === 'group' ? '&' : '@') + e.features[0].properties.slug
|
||||
const markerProfileLink =
|
||||
(e.features[0].properties.type === 'group' ? '/group' : '/profile') +
|
||||
`/${e.features[0].properties.id}/${e.features[0].properties.slug}`
|
||||
const markerTypeLabel = this.$t(`map.markerTypes.${e.features[0].properties.type}`)
|
||||
const markerProfile = {
|
||||
theUser: {
|
||||
linkTitle: '@' + e.features[0].properties.slug,
|
||||
link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
|
||||
},
|
||||
user: {
|
||||
linkTitle: '@' + e.features[0].properties.slug,
|
||||
link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
|
||||
},
|
||||
group: {
|
||||
linkTitle: '&' + e.features[0].properties.slug,
|
||||
link: `/group/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
|
||||
},
|
||||
event: {
|
||||
linkTitle: e.features[0].properties.slug,
|
||||
link: `/post/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
|
||||
},
|
||||
}
|
||||
const markerProfileLinkTitle = markerProfile[e.features[0].properties.type].linkTitle
|
||||
const markerProfileLink = markerProfile[e.features[0].properties.type].link
|
||||
let description = `
|
||||
<div>
|
||||
<div>
|
||||
@ -258,11 +290,11 @@ export default {
|
||||
</div>
|
||||
`
|
||||
description +=
|
||||
e.features[0].properties.about && e.features[0].properties.about.length > 0
|
||||
e.features[0].properties.description && e.features[0].properties.description.length > 0
|
||||
? `
|
||||
<hr>
|
||||
<div>
|
||||
${e.features[0].properties.about}
|
||||
${e.features[0].properties.description}
|
||||
</div>`
|
||||
: ''
|
||||
|
||||
@ -305,15 +337,18 @@ export default {
|
||||
},
|
||||
loadMarkersIconsAndAddMarkers() {
|
||||
Promise.all(
|
||||
this.markers.icons.map(
|
||||
this.markers.types.map(
|
||||
(marker) =>
|
||||
new Promise((resolve, reject) => {
|
||||
// our images have to be in the 'static/img/*' folder otherwise they are not reachable via URL
|
||||
this.map.loadImage('img/mapbox/marker-icons/' + marker.name, (error, image) => {
|
||||
if (error) throw error
|
||||
this.map.addImage(marker.id, image)
|
||||
resolve()
|
||||
})
|
||||
this.map.loadImage(
|
||||
'img/mapbox/marker-icons/' + marker.icon.mapName,
|
||||
(error, image) => {
|
||||
if (error) throw error
|
||||
this.map.addImage(marker.icon.id, image)
|
||||
resolve()
|
||||
},
|
||||
)
|
||||
}),
|
||||
),
|
||||
).then(() => {
|
||||
@ -337,7 +372,7 @@ export default {
|
||||
id: user.id,
|
||||
slug: user.slug,
|
||||
name: user.name,
|
||||
about: user.about ? user.about : undefined,
|
||||
description: user.about ? user.about : undefined,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
@ -346,27 +381,6 @@ export default {
|
||||
})
|
||||
}
|
||||
})
|
||||
// add markers for "groups"
|
||||
this.groups.forEach((group) => {
|
||||
if (group.location) {
|
||||
this.markers.geoJSON.push({
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
type: 'group',
|
||||
iconName: 'marker-blue',
|
||||
iconRotate: 0.0,
|
||||
id: group.id,
|
||||
slug: group.slug,
|
||||
name: group.name,
|
||||
about: group.about ? group.about : undefined,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: this.getCoordinates(group.location),
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
// add marker for "currentUser"
|
||||
if (this.currentUserCoordinates) {
|
||||
this.markers.geoJSON.push({
|
||||
@ -378,7 +392,7 @@ export default {
|
||||
id: this.currentUser.id,
|
||||
slug: this.currentUser.slug,
|
||||
name: this.currentUser.name,
|
||||
about: this.currentUser.about ? this.currentUser.about : undefined,
|
||||
description: this.currentUser.about ? this.currentUser.about : undefined,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
@ -386,6 +400,48 @@ export default {
|
||||
},
|
||||
})
|
||||
}
|
||||
// add markers for "groups"
|
||||
this.groups.forEach((group) => {
|
||||
if (group.location) {
|
||||
this.markers.geoJSON.push({
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
type: 'group',
|
||||
iconName: 'marker-red',
|
||||
iconRotate: 0.0,
|
||||
id: group.id,
|
||||
slug: group.slug,
|
||||
name: group.name,
|
||||
description: group.about ? group.about : undefined,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: this.getCoordinates(group.location),
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
// add markers for "posts", post type "Event" with location coordinates
|
||||
this.posts.forEach((post) => {
|
||||
if (post.postType.includes('Event') && post.eventLocation) {
|
||||
this.markers.geoJSON.push({
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
type: 'event',
|
||||
iconName: 'marker-purple',
|
||||
iconRotate: 0.0,
|
||||
id: post.id,
|
||||
slug: post.slug,
|
||||
name: post.title,
|
||||
description: post.contentExcerpt,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: this.getCoordinates(post.eventLocation),
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.markers.isGeoJSON = true
|
||||
}
|
||||
@ -483,6 +539,24 @@ export default {
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
Post: {
|
||||
query() {
|
||||
return filterPosts(this.$i18n)
|
||||
},
|
||||
variables() {
|
||||
return {
|
||||
filter: {
|
||||
postType_in: ['Event'],
|
||||
eventStart_gte: new Date(),
|
||||
// would be good to just query for events with defined "eventLocation". couldn't get it working
|
||||
},
|
||||
}
|
||||
},
|
||||
update({ Post }) {
|
||||
this.posts = Post
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -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 +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>
|
||||
|
Before Width: | Height: | Size: 942 B |
Loading…
x
Reference in New Issue
Block a user