Merge branch 'master' into 6536-chat-remove-message-actions

.github/workflows/test-e2e.yml

@@ -24,22 +24,37 @@ jobs:
       - name: boot up test system | docker-compose
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp neo4j backend
 
-      - name: cypress | Fullstack tests
+      - name: Full stack tests | prepare
-        id: e2e-tests
         run: |
+          wget --no-verbose -O /opt/cucumber-json-formatter "https://github.com/cucumber/json-formatter/releases/download/v19.0.0/cucumber-json-formatter-linux-386"
+          chmod +x /opt/cucumber-json-formatter
+          sudo ln -fs /opt/cucumber-json-formatter /usr/bin/cucumber-json-formatter
           cd backend
           yarn install
           yarn build
           cd ..
           yarn install
-          yarn run cypress:run --spec $(cypress/parallel-features.sh ${{ matrix.job }} ${{ env.jobs }} )
 
-      ##########################################################################
+      - name: Full stack tests | run tests
-      # UPLOAD SCREENSHOTS - IF TESTS FAIL #####################################
+        id: e2e-tests
-      ##########################################################################
+        run: yarn run cypress:run --spec $(cypress/parallel-features.sh ${{ matrix.job }} ${{ env.jobs }} )
-      - name: Full stack tests | if any test failed, upload screenshots
+
+      - name: Full stack tests | if tests failed, compile html report
+        if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
+        run: |
+          cd cypress/
+          node create-cucumber-html-report.js
+  
+      - name: End-to-end tests | if tests failed, get pr number
+        id: pr
+        if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
+        uses: 8BitJonny/gh-get-current-pr@2.2.0
+
+      - name: End-to-end tests | if tests failed, upload report
+        id: e2e-report
         if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
         uses: actions/upload-artifact@v3
         with:
-          name: cypress-screenshots
+          name: ocelot-e2e-test-report-pr${{ steps.pr.outputs.number }}
-          path: cypress/screenshots/
+          path: /home/runner/work/Ocelot-Social/Ocelot-Social/cypress/reports/cucumber_html_report
+

backend/jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
   ],
   coverageThreshold: {
     global: {
-      lines: 70,
+      lines: 67,
     },
   },
   testMatch: ['**/src/**/?(*.)+(spec|test).ts?(x)'],

backend/src/schema/types/type/Location.gql

@@ -25,4 +25,3 @@ type LocationMapBox {
 type Query {
   queryLocations(place: String!, lang: String!): [LocationMapBox]!
 }
-

backend/src/schema/types/type/Post.gql

@@ -84,8 +84,8 @@ input _PostFilter {
   group: _GroupFilter
   postsInMyGroups: Boolean
   postType_in: [PostType]
-  eventStart_gte: String 
+  eventStart_gte: String
-  eventEnd_gte: String 
+  eventEnd_gte: String
 }
 
 enum _PostOrdering {

cypress/create-cucumber-html-report.js

@@ -0,0 +1,12 @@
+const report = require("multiple-cucumber-html-reporter");
+
+const reportTitle = "Ocelot webapp end-to-end test report"
+
+report.generate({
+  jsonDir: "reports/json_logs",
+  reportPath: "./reports/cucumber_html_report",
+  pageTitle: reportTitle,
+  reportName: reportTitle,
+  pageFooter: "<div></div>",
+  hideMetadata: true
+});

cypress/cypress.config.js

@@ -21,13 +21,7 @@ async function setupNodeEvents(on, config) {
       return testStore[name]
     },
   });
-
+  
-  on("after:run", (results) => {
-    if (results) {
-      console.log(results.status);
-    }
-  });
-
   return config;
 }
 

cypress/support/commands.js

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

cypress/support/step_definitions/Post.Images/I_should_be_able_to_{string}_a_teaser_image.js

@@ -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':
+    case "change":
-      cy.get('.delete-image-button')
+      postTeaserImage = "humanconnection.png"
+      cy.get(".delete-image-button")
         .click()
-      cy.fixture('humanconnection.png').as('postTeaserImage').then(function() {
+      cy.get("#postdropzone").selectFile(
-        cy.get("#postdropzone").upload(
+        { contents: `cypress/fixtures/${postTeaserImage}`, fileName: postTeaserImage, mimeType: "image/png" },
-          { fileContent: this.postTeaserImage, fileName: 'humanconnection.png', mimeType: "image/png" },
+        { action: "drag-drop", force: true }
-          { subjectType: "drag-n-drop", force: true }
+      ).wait(750);
-        ).wait(750);
-      })
       break;
-    case 'add':
+    case "add":
-      cy.fixture('onourjourney.png').as('postTeaserImage').then(function() {
+      postTeaserImage = "onourjourney.png"
-        cy.get("#postdropzone").upload(
+      cy.get("#postdropzone").selectFile(
-          { fileContent: this.postTeaserImage, fileName: 'onourjourney.png', mimeType: "image/png" },
+        { contents: `cypress/fixtures/${postTeaserImage}`, fileName: postTeaserImage, mimeType: "image/png" },
-          { subjectType: "drag-n-drop", force: true }
+        { action: "drag-drop", force: true }
-        ).wait(750);
+      ).wait(750);
-      })
       break;
-    case 'remove':
+    case "remove":
-      cy.get('.delete-image-button')
+      cy.get(".delete-image-button")
         .click()
       break;
   }

cypress/support/step_definitions/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js

@@ -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").selectFile(
-    cy.get("#customdropzone").upload(
+    { contents: `cypress/fixtures/${avatarUpload}`, fileName: avatarUpload, mimeType: "image/png" },
-      { fileContent, fileName: avatarUpload, mimeType: "image/png" },
+    { action: "drag-drop" }
-      { subjectType: "drag-n-drop", force: true }
+  );
-    );
-  });
   cy.get(".profile-page-avatar img")
     .should("have.attr", "src")
     .and("contains", "onourjourney");

deployment/configurations/stage.ocelot.social

@@ -1 +1 @@
-Subproject commit 350237c62dcff1a5c34f1e8d718f89b05ce3d33f
+Subproject commit fdc2e52fa444b300e1c4736600bc0e9ae3314222

package.json

@@ -10,13 +10,25 @@
     "url": "https://github.com/Ocelot-Social-Community/Ocelot-Social.git"
   },
   "cypress-cucumber-preprocessor": {
-    "nonGlobalStepDefinitions": true
+    "stepDefinitions": "cypress/support/step_definitions/**/*.js",
+    "json": {
+      "enabled": true,
+      "output": "cypress/reports/json_logs/cucumber_log.json",
+      "formatter": "cucumber-json-formatter"
+    },
+    "messages": {
+      "enabled": true,
+      "output": "cypress/reports/json_logs/messages.ndjson"
+    },
+    "html": {
+      "enabled": false
+    }
   },
   "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:run": "cypress run --e2e --browser electron --config-file ./cypress/cypress.config.js",
-    "cypress:open": "cypress open --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\")"
@@ -33,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",
@@ -42,6 +53,7 @@
     "import": "^0.0.6",
     "jsonwebtoken": "^8.5.1",
     "mock-socket": "^9.0.3",
+    "multiple-cucumber-html-reporter": "^3.4.0",
     "neo4j-driver": "^4.3.4",
     "neode": "^0.4.8",
     "rosie": "^2.1.0",

webapp/assets/_new/styles/export.scss

@@ -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;
+  }

webapp/assets/_new/styles/tokens.scss

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

webapp/components/Chat/Chat.vue

@@ -16,13 +16,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>
@@ -30,6 +59,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 {
@@ -46,6 +76,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',
@@ -80,18 +115,18 @@ export default {
         },
       ],
       textMessages: {
-        ROOMS_EMPTY: 'Aucune conversation',
+        ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
-        ROOM_EMPTY: 'Aucune conversation sélectionnée',
+        ROOM_EMPTY: this.$t('chat.roomEmpty'),
-        NEW_MESSAGES: 'Nouveaux messages',
+        NEW_MESSAGES: this.$t('chat.newMessages'),
-        MESSAGE_DELETED: 'Ce message a été supprimé',
+        MESSAGE_DELETED: this.$t('chat.messageDeleted'),
-        MESSAGES_EMPTY: 'Aucun message',
+        MESSAGES_EMPTY: this.$t('chat.messagesEmpty'),
-        CONVERSATION_STARTED: 'La conversation a commencée le :',
+        CONVERSATION_STARTED: this.$t('chat.conversationStarted'),
-        TYPE_MESSAGE: 'Tapez votre message',
+        TYPE_MESSAGE: this.$t('chat.typeMessage'),
-        SEARCH: 'Rechercher',
+        SEARCH: this.$t('chat.search'),
-        IS_ONLINE: 'est en ligne',
+        IS_ONLINE: this.$t('chat.isOnline'),
-        LAST_SEEN: 'dernière connexion ',
+        LAST_SEEN: this.$t('chat.lastSeen'),
-        IS_TYPING: 'est en train de taper...',
+        IS_TYPING: this.$t('chat.isTyping'),
-        CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
+        CANCEL_SELECT_MESSAGE: this.$t('chat.cancelSelectMessage'),
       },
       roomActions: [
         /*
@@ -110,6 +145,7 @@ export default {
       showDemoOptions: true,
       responsiveBreakpoint: 600,
       singleRoom: !!this.singleRoomId || false,
+      selectedRoom: null,
     }
   },
   mounted() {
@@ -136,6 +172,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 = {} }) {
@@ -157,6 +198,8 @@ export default {
           this.$toast.error(error.message)
         }
         this.messagesLoaded = true
+
+        this.selectedRoom = room
       })
     },
 
@@ -178,6 +221,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: {
@@ -218,4 +266,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>

webapp/constants/chat.js

@@ -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,
+}

webapp/graphql/PostQuery.js

@@ -77,6 +77,10 @@ export const filterPosts = (i18n) => {
         eventEnd
         eventVenue
         eventLocationName
+        eventLocation {
+          lng
+          lat
+        }
         eventIsOnline
         ...post
         ...postCounts

webapp/layouts/default.vue

@@ -14,15 +14,11 @@
       <modal />
     </client-only>
     <div v-if="$store.getters['chat/showChat'].showChat" class="chat-modul">
-      <ds-text align="right" class="close">
+      <chat-module
-        RoomID: {{ $store.getters['chat/showChat'].roomID }}
+        v-on:close-single-room="closeSingleRoom"
-        <ds-button @click="$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null })">
+        :singleRoomId="$store.getters['chat/showChat'].roomID"
-          x
+      />
-        </ds-button>
-      </ds-text>
-      <chat-module :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;

webapp/locales/de.json

@@ -78,6 +78,18 @@
     }
   },
   "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}“"
@@ -604,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",
@@ -715,11 +734,6 @@
     "title": "Benachrichtigungen",
     "user": "Nutzer"
   },
-  "position": {
-    "group": "Gruppe",
-    "my": "Meine Position",
-    "user": "Nutzer"
-  },
   "post": {
     "comment": {
       "reply": "Antworten",

webapp/locales/en.json

@@ -78,6 +78,18 @@
     }
   },
   "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}”"
@@ -604,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",
@@ -715,11 +734,6 @@
     "title": "Notifications",
     "user": "User"
   },
-  "position": {
-    "group": "Group",
-    "my": "My position",
-    "user": "User"
-  },
   "post": {
     "comment": {
       "reply": "Reply",

webapp/nuxt.config.js

@@ -105,6 +105,7 @@ export default {
       styleguideStyles,
       '~assets/_new/styles/tokens.scss',
       '~assets/styles/imports/_branding.scss',
+      '~assets/_new/styles/export.scss',
     ],
   },
 

webapp/pages/map.vue

@@ -5,16 +5,15 @@
       <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
       <small>
         <div>
-          <img
+          <span v-for="type in markers.types" :key="type.id">
-            alt="my position"
+            <img
-            src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg"
+              :alt="$t('map.legend.' + type.id)"
-            width="15"
+              :src="'/img/mapbox/marker-icons/' + type.icon.legendName"
-          />
+              width="15"
-          {{ $t('position.my') }}
+            />
-          <img alt="user" src="/img/mapbox/marker-icons/mapbox-marker-icon-green.svg" width="15" />
+            {{ $t('map.legend.' + type.id) }}
-          {{ $t('position.user') }}
+            &nbsp;&nbsp;
-          <img alt="group" src="/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg" width="15" />
+          </span>
-          {{ $t('position.group') }}
         </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',
+            id: 'theUser',
-            name: 'mapbox-marker-icon-20px-blue.png',
+            icon: {
+              id: 'marker-orange',
+              legendName: 'mapbox-marker-icon-orange.svg',
+              mapName: 'mapbox-marker-icon-20px-orange.png',
+            },
           },
           {
-            id: 'marker-orange',
+            id: 'user',
-            name: 'mapbox-marker-icon-20px-orange.png',
+            icon: {
+              id: 'marker-green',
+              legendName: 'mapbox-marker-icon-green.svg',
+              mapName: 'mapbox-marker-icon-20px-green.png',
+            },
           },
           {
-            id: 'marker-green',
+            id: 'group',
-            name: 'mapbox-marker-icon-20px-green.png',
+            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 =
+        const markerTypeLabel = this.$t(`map.markerTypes.${e.features[0].properties.type}`)
-          e.features[0].properties.type === 'group'
+        const markerProfile = {
-            ? this.$t('map.markerTypes.group')
+          theUser: {
-            : e.features[0].properties.type === 'user'
+            linkTitle: '@' + e.features[0].properties.slug,
-            ? this.$t('map.markerTypes.user')
+            link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
-            : this.$t('map.markerTypes.theUser')
+          },
-        const markerProfileLinkTitle =
+          user: {
-          (e.features[0].properties.type === 'group' ? '&' : '@') + e.features[0].properties.slug
+            linkTitle: '@' + e.features[0].properties.slug,
-        const markerProfileLink =
+            link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
-          (e.features[0].properties.type === 'group' ? '/group' : '/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) => {
+              this.map.loadImage(
-                if (error) throw error
+                'img/mapbox/marker-icons/' + marker.icon.mapName,
-                this.map.addImage(marker.id, image)
+                (error, image) => {
-                resolve()
+                  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>