From 2d36bc2af2f24294363d4644ad2f81e631426b30 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 15 Dec 2022 10:43:09 +0100
Subject: [PATCH] contribution style nav and items

---
 .../src/assets/scss/gradido-template.scss     |  72 ++++++--
 .../Contributions/ContributionListItem.vue    | 161 +++++++++---------
 .../Contributions/GradidoNotification.vue     |  53 ------
 .../Template/ContentHeader/NavCommunity.vue   |  16 +-
 .../Template/RightSide/ContributionInfo.vue   |  57 ++++++-
 frontend/src/mixins/toaster.js                |   6 +
 frontend/src/pages/Community.vue              |   9 +-
 7 files changed, 208 insertions(+), 166 deletions(-)
 delete mode 100644 frontend/src/components/Contributions/GradidoNotification.vue

diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 39f91795f..87efcedfa 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -9,10 +9,6 @@ body {
   cursor: pointer;
 }
 
-.bg-gray300 {
-  background-color: $gray-300;
-}
-
 .shadow-default {
   box-shadow: rgb(0 0 0 / 14%) 0 4px 10px;
 }
@@ -24,14 +20,7 @@ body {
 .c-blau {
   color: #0e79bc !important;
 }
-
-.text-gradido {
-  color: rgb(249 205 105 / 100%);
-}
-
-.gradient-gradido {
-  background-image: linear-gradient(146deg, rgb(220 167 44) 50%, rgb(197 141 56 / 100%) 100%);
-}
+ 
 
 /* Navbar  */
 a,
@@ -163,6 +152,18 @@ a:hover,
   border-bottom-color: rgb(195 230 203 / 85%);
 }
 
+.b-toast-warning .toast .toast-header {
+  color: #fcfcfb;
+  background-color: #c58d38 !important;
+  border-bottom-color: rgba(207, 130, 14, 0.85);
+}
+
+.b-toast-warning .toast .toast-body {
+  color: #010602;
+  background-color: rgba(247, 248, 247, 0.85);
+  border-bottom-color: rgba(207, 130, 14, 0.85);
+}
+
 // .btn-primary pim {
 .btn-primary {
   background-color: #5a7b02;
@@ -236,6 +237,13 @@ a:hover,
   background-color: #ebebeba3 !important;
   border-radius: 25pt;
 }
+.gradido-bg-f5 {
+  background-color: #f5f5f5 !important;
+}
+
+.gradido-bg-orange {
+  background-color: rgb( 197 141 56) !important;
+}
 
 .gradido-width-300 {
   width: 300px;
@@ -247,6 +255,7 @@ a:hover,
 
 .gradido-border-radius {
   border-radius: 26px;
+  overflow: hidden;
 }
 
 .gradido-no-border-radius {
@@ -264,3 +273,42 @@ a:hover,
 .list-group-item {
   background-color: rgb(255 255 255 / 0%);
 }
+
+
+.pulse {
+  // margin:100px;
+  // display: block;
+  // width: 22px;
+  // height: 22px;
+  // border-radius: 50%;
+  // background: #cca92c;
+  // cursor: pointer;
+  box-shadow: 0 0 0 #c58d38;
+  animation: pulse 2s infinite;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 #c58d387e;
+  }
+  70% {
+      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
+  }
+  100% {
+      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+  }
+}
+@keyframes pulse {
+  0% {
+    -moz-box-shadow: 0 0 0 0 #c58d387e;
+    box-shadow: 0 0 0 0 #c58d387e;
+  }
+  70% {
+      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
+      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
+  }
+  100% {
+      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index a1aeec7f5..6e4ce1ccc 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -1,88 +1,87 @@
 <template>
-  <div
-    class="contribution-list-item bg-white appBoxShadow gradido-border-radius p-3"
-    :class="state === 'IN_PROGRESS' ? 'border gradido-global-border-color-danger' : ''"
-  >
-    <slot>
-      <div class="">
-        <b-row>
-          <b-col cols="2">
-            <b-avatar
-              v-if="firstName"
-              :text="avatarText"
-              :badge-variant="variant"
-              size="3em"
-              class="font-weight-bold"
-            >
-              <template #badge><b-icon :icon="icon"></b-icon></template>
-            </b-avatar>
-            <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
-          </b-col>
-          <b-col>
-            <div v-if="firstName" class="mr-3 font-weight-bold">{{ firstName }} {{ lastName }}</div>
-            <div class="small">
-              {{ $d(new Date(contributionDate), 'monthAndYear') }}
-            </div>
-            <div class="mt-3 h5">{{ $t('contributionText') }}</div>
-            <div>{{ memo }}</div>
-            <div v-if="state === 'IN_PROGRESS'" class="text-danger">
-              {{ $t('contribution.alert.answerQuestion') }}
-            </div>
-            <!-- <div class="small">
+  <div>
+    <div
+      class="contribution-list-item bg-white appBoxShadow gradido-border-radius pt-3 px-3"
+      :class="state === 'IN_PROGRESS' ? 'pulse' : ''"
+    >
+      <b-row>
+        <b-col cols="2">
+          <b-avatar
+            v-if="firstName"
+            :text="avatarText"
+            :badge-variant="variant"
+            size="3em"
+            class="font-weight-bold"
+          >
+            <template #badge><b-icon :icon="icon"></b-icon></template>
+          </b-avatar>
+          <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
+        </b-col>
+        <b-col>
+          <div v-if="firstName" class="mr-3 font-weight-bold">{{ firstName }} {{ lastName }}</div>
+          <div class="small">
+            {{ $d(new Date(contributionDate), 'monthAndYear') }}
+          </div>
+          <div class="mt-3 h5">{{ $t('contributionText') }}</div>
+          <div>{{ memo }}</div>
+          <div v-if="state === 'IN_PROGRESS'" class="text-danger">
+            {{ $t('contribution.alert.answerQuestion') }}
+          </div>
+          <!-- <div class="small">
             contributionDate {{ $d(new Date(contributionDate), 'monthAndYear') }}
           </div>
           <div class="small">createdAt {{ createdAt }}</div> -->
-          </b-col>
-          <b-col cols="3">
-            <div class="small">{{ $t('creation') }}</div>
-            <div class="font-weight-bold">{{ amount | GDD }}</div>
-          </b-col>
-          <b-col cols="1" @click="visible = !visible">
-            <collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />
-          </b-col>
-        </b-row>
-        <b-row
-          v-if="
-            (!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0
-          "
-          class="mt-4 bg-gray300 p-4"
-        >
-          <b-col>
-            <div
-              v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
-              class="test-delete-contribution pointer mr-3"
-              @click="deleteContribution({ id })"
-            >
-              <b-icon icon="trash"></b-icon>
-              {{ $t('delete') }}
-            </div>
-          </b-col>
-          <b-col class="text-center">
-            <div
-              v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
-              class="test-edit-contribution pointer mr-3"
-              @click="
-                $emit('update-contribution-form', {
-                  id: id,
-                  contributionDate: contributionDate,
-                  memo: memo,
-                  amount: amount,
-                })
-              "
-            >
-              <b-icon icon="pencil"></b-icon>
-              {{ $t('edit') }}
-            </div>
-          </b-col>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">{{ $t('creation') }}</div>
+          <div class="font-weight-bold">{{ amount | GDD }}</div>
+        </b-col>
+        <b-col cols="1">
+          <div v-if="messagesCount > 0" @click="visible = !visible">
+            <collapse-icon class="text-right" :visible="visible" />
+          </div>
+        </b-col>
+      </b-row>
+      <b-row
+        v-if="(!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0"
+        class="mt-4 gradido-bg-orange text-white p-2"
+      >
+        <b-col>
+          <div
+            v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
+            class="test-delete-contribution pointer mr-3"
+            @click="deleteContribution({ id })"
+          >
+            <b-icon icon="trash"></b-icon>
+            {{ $t('delete') }}
+          </div>
+        </b-col>
+        <b-col class="text-center">
+          <div
+            v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
+            class="test-edit-contribution pointer mr-3"
+            @click="
+              $emit('update-contribution-form', {
+                id: id,
+                contributionDate: contributionDate,
+                memo: memo,
+                amount: amount,
+              })
+            "
+          >
+            <b-icon icon="pencil"></b-icon>
+            {{ $t('edit') }}
+          </div>
+        </b-col>
+
+        <b-col class="text-right">
+          <div v-if="messagesCount > 0" class="pointer" @click="visible = !visible">
+            <b-icon icon="chat-dots"></b-icon>
+            {{ $t('moderatorChat') }}
+          </div>
+        </b-col>
+      </b-row>
 
-          <b-col class="text-right">
-            <div v-if="messagesCount > 0" class="pointer">
-              <b-icon icon="chat-dots" @click="visible = !visible"></b-icon>
-              {{ $t('moderatorChat') }}
-            </div>
-          </b-col>
-        </b-row>
-      </div>
       <!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
         <div>
           <div class="d-inline-flex">
@@ -175,7 +174,7 @@
           />
         </b-card>
       </b-collapse>
-    </slot>
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Contributions/GradidoNotification.vue b/frontend/src/components/Contributions/GradidoNotification.vue
deleted file mode 100644
index c94870014..000000000
--- a/frontend/src/components/Contributions/GradidoNotification.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="contribution-list-info container">
-    <b-alert v-if="list === 'my'" show dismissible fade variant="secondary" class="text-dark">
-      <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
-      <p>
-        {{ $t('contribution.alert.myContributionNoteList') }}
-      </p>
-      <ul class="h2">
-        <li>
-          <b-icon icon="bell-fill" variant="primary"></b-icon>
-          {{ $t('contribution.alert.pending') }}
-        </li>
-        <li>
-          <b-icon icon="question-square" variant="warning"></b-icon>
-          {{ $t('contribution.alert.in_progress') }}
-        </li>
-        <li>
-          <b-icon icon="check" variant="success"></b-icon>
-          {{ $t('contribution.alert.confirm') }}
-        </li>
-        <li>
-          <b-icon icon="x-circle" variant="danger"></b-icon>
-          {{ $t('contribution.alert.rejected') }}
-        </li>
-      </ul>
-      <hr />
-    </b-alert>
-    <b-alert v-if="list === 'all'" show dismissible fade variant="secondary" class="text-dark">
-      <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
-      <p>
-        {{ $t('contribution.alert.communityNoteList') }}
-      </p>
-      <ul class="h2">
-        <li>
-          <b-icon icon="bell-fill" variant="primary"></b-icon>
-          {{ $t('contribution.alert.pending') }}
-        </li>
-        <li>
-          <b-icon icon="check" variant="success"></b-icon>
-          {{ $t('contribution.alert.confirm') }}
-        </li>
-      </ul>
-    </b-alert>
-  </div>
-</template>
-<script>
-export default {
-  name: 'ContributionListInfo',
-  props: {
-    list: { type: String, required: true },
-  },
-}
-</script>
diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index 9d0f6ca5a..50a4ff690 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -2,13 +2,13 @@
   <div class="nav-community">
     <b-row class="nav-row">
       <b-col cols="12" md="4" lg="4" class="mb-2 mb-md-0 mb-lg-0">
-        <b-button block to="#edit">{{ $t('community.submitContribution') }}</b-button>
+        <b-btn active-class="btn-active" variant="link" block to="#edit"><b-icon icon="pencil" class="mr-2"/>{{ $t('community.submitContribution') }}</b-btn>
       </b-col>
       <b-col cols="12" md="4" lg="4" class="text-center mb-2 mb-md-0 mb-lg-0">
-        <b-button block to="#my">{{ $t('community.myContributions') }}</b-button>
+        <b-btn active-class="btn-active" variant="link" block to="#my"><b-icon icon="person" class="mr-2"/>{{ $t('community.myContributions') }}</b-btn>
       </b-col>
       <b-col cols="12" md="4" lg="4" class="text-right">
-        <b-button block to="#all">{{ $t('community.community') }}</b-button>
+        <b-btn active-class="btn-active" variant="link" block to="#all"><b-icon icon="people" class="mr-2"/>{{ $t('community.community') }}</b-btn>
       </b-col>
     </b-row>
   </div>
@@ -25,12 +25,8 @@ export default {
   border-radius: 26px;
 }
 
-/* .router-link-exact-active {
-  background-color: rgb(14, 121, 188);
+.btn-active {
+  background-color: rgb(23 141 129);
   color: white;
-  border-radius: 26px;
-  padding: 10px;
-  padding-left: 25px;
-  padding-right: 25px;
-} */
+}
 </style>
diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.vue b/frontend/src/components/Template/RightSide/ContributionInfo.vue
index a6dbab8be..4dce93902 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.vue
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.vue
@@ -1,11 +1,53 @@
 <template>
   <div class="contribution-info d-none d-lg-block">
-    <div>
-      <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
-      {{ $t('contribution.formText.bringYourTalentsTo') }}
+    <div v-if="hash === '#my'">
+      <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
+      <p>
+        {{ $t('contribution.alert.myContributionNoteList') }}
+      </p>
+      <ul>
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="question-square" variant="warning"></b-icon>
+          {{ $t('contribution.alert.in_progress') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+        <li>
+          <b-icon icon="x-circle" variant="danger"></b-icon>
+          {{ $t('contribution.alert.rejected') }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="hash === '#all'" show fade variant="secondary" class="text-dark">
+      <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
+      <p>
+        {{ $t('contribution.alert.communityNoteList') }}
+      </p>
+      <ul>
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="hash === '#edit'" show fade variant="secondary" class="text-dark">
+      <div>
+        <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
+        {{ $t('contribution.formText.bringYourTalentsTo') }}
 
-      <div class="my-3">
-        <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
+        <div class="my-3">
+          <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
+        </div>
       </div>
     </div>
   </div>
@@ -13,5 +55,10 @@
 <script>
 export default {
   name: 'LastContributions',
+  computed: {
+    hash() {
+      return this.$route.hash
+    },
+  },
 }
 </script>
diff --git a/frontend/src/mixins/toaster.js b/frontend/src/mixins/toaster.js
index f6e61e5be..175ffeec0 100644
--- a/frontend/src/mixins/toaster.js
+++ b/frontend/src/mixins/toaster.js
@@ -12,6 +12,12 @@ export const toasters = {
         variant: 'danger',
       })
     },
+    toastInfo(message) {
+      this.toast(message, {
+        title: this.$t('navigation.info'),
+        variant: 'warning',
+      })
+    },
     toast(message, options) {
       if (message.replace) message = message.replace(/^GraphQL error: /, '')
       this.$root.$bvToast.toast(message, {
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 44535aafa..55283dc01 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -20,7 +20,6 @@
           />
         </b-tab>
         <b-tab no-body>
-          <gradido-notification list="my" />
           <contribution-list
             @closeAllOpenCollapse="closeAllOpenCollapse"
             :items="items"
@@ -34,7 +33,6 @@
           />
         </b-tab>
         <b-tab no-body>
-          <gradido-notification list="all" />
           <contribution-list
             :items="itemsAll"
             @update-list-contributions="updateListAllContributions"
@@ -53,14 +51,12 @@
 import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
-import GradidoNotification from '@/components/Contributions/GradidoNotification.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'
 
 export default {
   name: 'Community',
   components: {
-    GradidoNotification,
     ContributionForm,
     ContributionList,
     OpenCreationsAmount,
@@ -250,7 +246,10 @@ export default {
           this.contributionCount = listContributions.contributionCount
           this.items = listContributions.contributionList
           if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-            this.tabIndex = 1
+            // this.tabIndex = 1
+            // this.$route.hash = 'my'
+            this.$router.push({ path: '#my' })
+            this.toastInfo('Du hast eine Rückfrage auf eine Contribution. Bitte beantworte diese!')
           }
         })
         .catch((err) => {