Merge branch 'master' into 5344-add-group-members-management

CHANGELOG.md

@@ -4,11 +4,50 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [1.1.0](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.8...1.1.0)
+#### [1.1.1](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.1.0...1.1.1)
 
+- chore: 🍰 Refactor Rebranding [`#5390`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5390)
+- feat: 🍰 Tooltips For Topics [`#5350`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5350)
+- feat: 🍰 Save Categories In Frontend [`#5284`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5284)
+- feat: 🍰 Add New Yunite Icons [`#5319`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5319)
+- chore: 🍰 Update Neode From v^0.4.7 To v^0.4.8 In Backend [`#5334`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5334)
+- fix: Category Filter Menu Client Only [`#5301`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5301)
+- feat: Save Category Settings [`#5261`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5261)
+- feat: Topics Menu [`#5248`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5248)
+- docs: 🍰 Document GraqhQL Playground [`#5253`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5253)
+- feat: Categories Filter Menu [`#5198`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5198)
+- fix: 🍰 Fix Test Description From `enter-nonce.vue` To `change-password` [`#5217`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5217)
+- Bump cookie-universal-nuxt from 2.1.5 to 2.2.2 in /webapp [`#5218`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5218)
+- Bump prettier from 2.2.1 to 2.7.1 in /webapp [`#5170`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5170)
+- Bump eslint-plugin-prettier from 3.1.2 to 3.4.1 in /backend [`#5211`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5211)
+- Bump slug from 4.0.2 to 6.0.0 in /backend [`#5193`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5193)
+- chore: 🍰 Fix typo in PULL_REQUEST_TEMPLATE.md file [`#5208`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5208)
+- Bump slug from 5.1.0 to 6.0.0 [`#5191`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5191)
+- Bump vue-sweetalert-icons from 4.3.0 to 4.3.1 in /webapp [`#5174`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5174)
+- feat: 🍰 Change Error Message With `Authorised` To `Authorized` All Over The Place To Have American English [`#5206`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5206)
+- Bump cross-env from 7.0.2 to 7.0.3 in /webapp [`#5168`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5168)
+- chore: 🍰 Add `--logHeapUsage` To Jest Test Call [`#5182`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5182)
+- refactor: 🍰 Rename `UserGroup` To `UserRole` [`#5143`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5143)
+- add new yunite icons [`bb0d632`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/bb0d6329e7e36ea03671318ea8dd128a6d5a5a7a)
+- cleanup refactor rebranding [`5f5c0fa`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/5f5c0faa1f28cd4df7681eba335ae5998b2d9cca)
+- change color and scss in branding [`52070b8`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/52070b8c570970bf48df561134bf67cb4111b640)
+
+#### [1.1.0](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.9...1.1.0)
+
+> 4 August 2022
+
+- chore: 🍰 Release v1.1.0 - Implement Categories Again [`#5145`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5145)
 - feat: Make Categories Optional [`#5102`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5102)
 - Update issue templates [`#5101`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5101)
 - chore: 🍰 Betters Automatic Deployment To `stage.ocelot.social` On Push To `master` Branch [`#5097`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5097)
+- add optional categories to teaser and post [`bc95500`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/bc955003f7c33aabe592bee782aca973b4f00cba)
+- env vatiable for CATEGORIES_ACTIVE and switch for categories in contribution form [`e31f250`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/e31f250ea5e1949f4f08e72fe82622d41ecd85f1)
+- fix some tests [`5393c2a`](https://github.com/Ocelot-Social-Community/Ocelot-Social/commit/5393c2aeaaf070a637390c430d5f03057030ff52)
+
+#### [1.0.9](https://github.com/Ocelot-Social-Community/Ocelot-Social/compare/1.0.8...1.0.9)
+
+> 20 July 2022
+
 - chore: 🍰 Release v1.0.9 [`#5095`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5095)
 - chore: 🍰 Automatic Deployment To `stage.ocelot.social` On Push To `master` Branch [`#5080`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5080)
 - change footer version-link [`#5091`](https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/5091)

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-backend",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "GraphQL Backend for ocelot.social",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",

backend/src/schema/resolvers/users/location.spec.js

@@ -121,7 +121,7 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual(
       expect.arrayContaining([
-        { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
+        { id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Germany' },
         {
           id: expect.stringMatching(/^place\.[0-9]+$/),
           place_name: 'Berlin, Maryland, United States',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Free and open source software program code available to run social networks.",
   "author": "ocelot.social Community",
   "license": "MIT",

webapp/assets/_new/styles/tokens.scss

@@ -357,3 +357,22 @@ $media-query-x-large: (min-width: 1200px);
 /** 
  * @tokens Background Images
  */
+
+/** 
+ * @tokens Header Color
+ */
+
+$color-header-background: $color-neutral-100;
+
+/** 
+ * @tokens Footer Color
+ */
+
+$color-footer-background: $color-neutral-100;
+$color-footer-link: $color-primary;
+
+/** 
+ * @tokens Locale Menu Color
+ */
+
+$color-locale-menu: $text-color-soft;

webapp/assets/styles/imports/_branding.scss

@@ -0,0 +1,5 @@
+/* 
+    *
+    * Here, all SCSS variables and classes can be adapted to your custom design. 
+    *
+*/

webapp/assets/styles/main.scss

@@ -179,4 +179,4 @@ hr {
 
 .dropdown-arrow {
   font-size: $font-size-xx-small;
-}
+}

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -9,6 +9,11 @@
       :disabled="isDisabled(category.id)"
       :icon="category.icon"
       size="small"
+      v-tooltip="{
+        content: $t(`contribution.category.description.${category.slug}`),
+        placement: 'bottom-start',
+        delay: { show: 1500 },
+      }"
     >
       {{ $t(`contribution.category.name.${category.slug}`) }}
     </base-button>

webapp/components/Dropdown.vue

@@ -8,7 +8,7 @@
     :offset="offset"
   >
     <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
-    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave">
+    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
       <slot
         name="popover"
         :toggleMenu="toggleMenu"
@@ -97,7 +97,7 @@ export default {
       }
       this.clearTimeouts()
       if (useTimeout === true) {
-        this.popoveMouseLeave()
+        this.popoverMouseLeave()
       } else {
         this.isPopoverOpen = false
       }
@@ -113,7 +113,7 @@ export default {
         }, 500)
       }
     },
-    popoveMouseLeave() {
+    popoverMouseLeave() {
       if (this.developerNoAutoClosing) return
       if (this.disabled) {
         return

webapp/components/FilterMenu/CategoriesFilter.vue

@@ -17,6 +17,11 @@
           :filled="filteredCategoryIds.includes(category.id)"
           :label="$t(`contribution.category.name.${category.slug}`)"
           @click="toggleCategory(category.id)"
+          v-tooltip="{
+            content: $t(`contribution.category.description.${category.slug}`),
+            placement: 'bottom-start',
+            delay: { show: 1500 },
+          }"
         />
       </li>
     </template>

webapp/components/FilterMenu/CategoriesMenu.vue

@@ -1,14 +1,8 @@
 <template>
   <dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
-    <base-button
+    <a href="#" slot="default" slot-scope="{ toggleMenu }" @click.prevent="toggleMenu()">
-      slot="default"
+      <ds-text bold size="large">{{ $t('admin.categories.name') }}</ds-text>
-      :filled="filterActive"
+    </a>
-      :ghost="!filterActive"
-      slot-scope="{ toggleMenu }"
-      @click.prevent="toggleMenu()"
-    >
-      <ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
-    </base-button>
     <template slot="popover">
       <div class="category-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
@@ -40,6 +34,7 @@ export default {
   },
   computed: {
     ...mapGetters({
+      // TODO: implement visibility of active filter later on
       filterActive: 'posts/isActive',
     }),
   },

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -117,7 +117,7 @@ export default {
   align-items: center;
   height: 100%;
   padding: $space-xx-small;
-  color: $text-color-soft;
+  color: $color-locale-menu;
 
   > .label {
     margin: 0 $space-xx-small;

webapp/components/Logo/Logo.vue

@@ -59,7 +59,11 @@ export default {
   },
   data() {
     const logosObject = {
-      header: { path: logos.LOGO_HEADER_PATH, alt: 'Header', widthDefault: '130px' },
+      header: {
+        path: logos.LOGO_HEADER_PATH,
+        alt: 'Header',
+        widthDefault: logos.LOGO_HEADER_WIDTH,
+      },
       welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px' },
       signup: { path: logos.LOGO_SIGNUP_PATH, alt: 'Sign Up', widthDefault: '200px' },
       logout: { path: logos.LOGO_LOGOUT_PATH, alt: 'Logging Out', widthDefault: '200px' },
@@ -107,7 +111,6 @@ export default {
 }
 
 .ds-logo-svg {
-  width: 130px;
   height: auto;
   fill: #000000;
 }

webapp/components/Logo/style.scss

@@ -8,10 +8,4 @@
 
 .ds-logo-inverse {
   color: $text-color-primary-inverse;
-}
-
-.ds-logo-svg {
-  width: 130px;
-  height: auto;
-  fill: currentColor;
 }

webapp/components/PageFooter/PageFooter.vue

@@ -38,11 +38,14 @@ export default {
   position: fixed;
   bottom: 0px;
   z-index: 10;
-  background-color: white;
+  background-color: $color-footer-background;
   width: 100%;
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
 }
+.ds-footer a {
+  color: $color-footer-link;
+}
 .division-line {
   margin-left: 0.2rem;
   margin-right: 0.2rem;

webapp/components/PostTeaser/PostTeaser.vue

@@ -33,7 +33,7 @@
             v-tooltip="{
               content: $t(`contribution.category.name.${category.slug}`),
               placement: 'bottom-start',
-              delay: { show: 500 },
+              delay: { show: 1500 },
             }"
             :icon="category.icon"
           />

webapp/constants/headerMenu.js

@@ -0,0 +1,13 @@
+export default {
+  MENU: [
+    // {
+    //   name: 'Beiträge',
+    //   path: '/#',
+    // },
+    // {
+    //   name: 'Über Yunite',
+    //   path: '/#',
+    //   url: 'https://yunite.org',
+    // },
+  ],
+}

webapp/constants/logos.js

@@ -2,6 +2,7 @@
 // this are the paths in the webapp
 export default {
   LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_WIDTH: '130px',
   LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
   LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
   LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',

webapp/layouts/default.vue

@@ -4,11 +4,39 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px">
         <div>
           <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ base: '142px' }">
+            <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
               <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
                 <logo logoType="header" />
               </nuxt-link>
             </ds-flex-item>
+
+            <ds-flex-item
+              v-for="item in menu"
+              :key="item.name"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              :width="{ base: 'auto' }"
+              style="margin-right: 20px"
+            >
+              <a v-if="item.url" :href="item.url" target="_blank">
+                <ds-text size="large" bold>
+                  {{ item.name }}
+                </ds-text>
+              </a>
+              <nuxt-link v-else :to="item.path">
+                <ds-text size="large" bold>
+                  {{ item.name }}
+                </ds-text>
+              </nuxt-link>
+            </ds-flex-item>
+            <ds-flex-item
+              v-if="categoriesActive && isLoggedIn"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto; margin-right: 20px"
+            >
+              <client-only>
+                <categories-menu></categories-menu>
+              </client-only>
+            </ds-flex-item>
             <ds-flex-item
               :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
               class="mobile-hamburger-menu"
@@ -16,16 +44,12 @@
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
             <ds-flex-item
-              v-if="categoriesActive && isLoggedIn"
+              :width="{
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                base: '45%',
-              style="flex-grow: 0; flex-basis: auto"
+                sm: '45%',
-            >
+                md: isHeaderMenu ? 'auto' : '45%',
-              <client-only>
+                lg: isHeaderMenu ? 'auto' : '50%',
-                <categories-menu></categories-menu>
+              }"
-              </client-only>
-            </ds-flex-item>
-            <ds-flex-item
-              :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               style="flex-shrink: 0; flex-grow: 1"
               id="nav-search-box"
@@ -43,7 +67,7 @@
               </client-only>
             </ds-flex-item>
             <ds-flex-item
-              style="background-color: white; flex-basis: auto"
+              style="flex-basis: auto"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <div
@@ -92,6 +116,8 @@
 
 <script>
 import Logo from '~/components/Logo/Logo'
+import LOGOS from '../constants/logos.js'
+import headerMenu from '../constants/headerMenu.js'
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
@@ -122,6 +148,9 @@ export default {
   mixins: [seo],
   data() {
     return {
+      LOGOS,
+      isHeaderMenu: headerMenu.MENU.length > 0,
+      menu: headerMenu.MENU,
       mobileSearchVisible: false,
       toggleMobileMenu: false,
       inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
@@ -146,6 +175,17 @@ export default {
 </script>
 
 <style lang="scss">
+.main-navigation {
+  background-color: $color-header-background;
+}
+.margin-right-20 {
+  margin-right: 20px;
+}
+.margin-x {
+  margin-left: 20px;
+  margin-right: 20px;
+  white-space: nowrap;
+}
 .topbar-locale-switch {
   display: flex;
   margin-right: $space-xx-small;
@@ -161,11 +201,6 @@ export default {
   align-items: center;
 }
 
-.main-navigation {
-  a {
-    color: $text-color-soft;
-  }
-}
 .main-navigation-right {
   display: flex;
   justify-content: flex-end;

webapp/locales/de.json

@@ -217,6 +217,27 @@
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Themen ausgewählt"
     },
     "category": {
+      "description": {
+        "body-and-excercise": "Sport, Yoga, Massage, Tanzen, Entspannung",
+        "children": "Familie, Pädagogik, Schule, Prägung",
+        "culture": "Kunst, Theater, Musik, Fotografie, Film",
+        "economy": "Handel, Konsum, Marketing, Lieferketten",
+        "energy": "Öl, Gas, Kohle, Wind, Wasserkraft, Biogas, Atomenergie",
+        "finance": "Geld, Finanzsystem, Alternativwährungen",
+        "health": "Medizin, Ernährung, WHO, Impfungen, Schadstoffe",
+        "home": "Bauen, Lebensgemeinschaften, Tiny Houses, Gemüsegarten",
+        "it-and-media": "Nachrichten, Manipulation, Datenschutz, Überwachung, Datenkraken, KI, Software, Apps",
+        "law": "Menschenrechte, Gesetze, Verordnungen",
+        "miscellaneous": "Sonstiges",
+        "mobility": "Reise, Verkehr, Elektromobilität",
+        "nature": "Tiere, Pflanzen, Landwirtschaft, Ökologie, Artenvielfalt",
+        "networking": "Kooperation, Aktionsbündnisse, Solidarität, Hilfe",
+        "peace": "Krieg, Militär, soziale Verteidigung, Waffen, Cyberattacken",
+        "politics": "Demokratie, Mitbestimmung, Wahlen, Korruption, Parteien",
+        "psyche": "Seele, Gefühle, Glück",
+        "science": "Bildung, Hochschule, Publikationen",
+        "spirituality": "Religion, Werte, Ethik"
+      },
       "name": {
         "body-and-excercise": "Körper & Bewegung",
         "children": "Kinder",

webapp/locales/en.json

@@ -217,6 +217,27 @@
       "infoSelectedNoOfMaxCategories": "{chosen} of {max} topics selected"
     },
     "category": {
+      "description": {
+        "body-and-excercise": "Sports, yoga, massage, relaxation",
+        "children": "Family, education, school, imprinting",
+        "culture": "Art, theatre, music, photography, film",
+        "economy": "Trade, consumption, marketing, supply chains",
+        "energy": "Oil, gas, coal, wind, hydrodynamic power, biogas, atomic energy",
+        "finance": "Money, financial system, alternative currencies",
+        "health": "Medicine, nutrition, WHO, vaccination, harmful substances",
+        "home": "Construction, communities, tiny houses, kitchen garden",
+        "it-and-media": "News, manipulation, privacy, control, data leeches, AI, software, apps",
+        "law": "Human rights, laws, decrees",
+        "miscellaneous": "Miscellaneous",
+        "mobility": "Travel, traffic, electric mobility",
+        "nature": "Animals, plants, agriculture, ecologu, biodiversity",
+        "networking": "Cooperation, action alliances, solidarity, help",
+        "peace": "War, military, social defence, arms, cyber attacks",
+        "politics": "Democracy, participation, elections, corruption, parties",
+        "psyche": "Soul, feelings, happiness",
+        "science": "Education, university, publications",
+        "spirituality": "Religion, values, ethics"
+      },
       "name": {
         "body-and-excercise": "Body & Excercise",
         "children": "Children",

webapp/maintenance/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ocelot-social/maintenance",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Maintenance page for ocelot.social",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",

webapp/nuxt.config.js

@@ -91,13 +91,21 @@ export default {
   /*
    ** Global CSS
    */
-  css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'],
+  css: [
+    '~assets/_new/styles/resets.scss',
+    '~assets/styles/main.scss',
+    '~assets/styles/imports/_branding.scss',
+  ],
 
   /*
    ** Global processed styles
    */
   styleResources: {
-    scss: [styleguideStyles, '~assets/_new/styles/tokens.scss'],
+    scss: [
+      styleguideStyles,
+      '~assets/_new/styles/tokens.scss',
+      '~assets/styles/imports/_branding.scss',
+    ],
   },
 
   /*

webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocelot-social-webapp",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "ocelot.social Frontend",
   "repository": "https://github.com/Ocelot-Social-Community/Ocelot-Social",
   "author": "ocelot.social Community",

webapp/pages/post/_id/_slug/index.vue

@@ -54,6 +54,11 @@
           :key="category.id"
           :icon="category.icon"
           :name="$t(`contribution.category.name.${category.slug}`)"
+          v-tooltip="{
+            content: $t(`contribution.category.description.${category.slug}`),
+            placement: 'bottom-start',
+            delay: { show: 1500 },
+          }"
         />
       </div>
       <ds-space margin-bottom="small" />

webapp/pages/settings/index.vue

@@ -48,6 +48,7 @@ import { queryLocations } from '~/graphql/location'
 let timeout
 
 export default {
+  name: 'NewsFeed',
   data() {
     return {
       cities: [],