From 0fd1e928aee2302dfe03b2937bcda785e0aa51f7 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 11 Apr 2019 16:47:46 +0200
Subject: [PATCH] Add tooltip for help text

---
 client/src/components/HelpfulTooltip.vue      | 67 +++++++++++++++++++
 .../content-forms/TextFormWithHelpText.vue    | 15 ++---
 .../portfolio/NewProjectEntryWizard.vue       |  6 +-
 client/src/pages/room.vue                     |  1 +
 4 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 client/src/components/HelpfulTooltip.vue

diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
new file mode 100644
index 00000000..c8329d4d
--- /dev/null
+++ b/client/src/components/HelpfulTooltip.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="helpful-tooltip">
+    <info-icon class="helpful-tooltip__icon"></info-icon>
+    <div class="helpful-tooltip__text">
+        {{text}}
+    </div>
+  </div>
+</template>
+
+<script>
+  import InfoIcon from '@/components/icons/InfoIcon';
+
+  export default {
+    props: ['text'],
+
+    components: {
+      InfoIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .helpful-tooltip {
+    position: relative;
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-grey;
+    }
+
+    &__text {
+      display: none;
+      position: absolute;
+      left: 30px;
+      top: 0px;
+      white-space: nowrap;
+      background-color: $color-white;
+      border: 1px solid $color-grey;
+      border-radius: 5px;
+      padding: $small-spacing;
+      @include small-text;
+
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 16px;
+        margin-left: -2px;
+        border-left: 1px solid $color-grey;
+        border-top: 1px solid $color-grey;
+        background-color: $color-white;
+        width: 10px;
+        height: 10px;
+        transform: rotate(-45deg) translateY(-50%);
+      }
+    }
+
+    &:hover &__text {
+      display: grid;
+    }
+  }
+</style>
diff --git a/client/src/components/content-forms/TextFormWithHelpText.vue b/client/src/components/content-forms/TextFormWithHelpText.vue
index dbddcaa3..21818a2e 100644
--- a/client/src/components/content-forms/TextFormWithHelpText.vue
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-form-with-help-text">
     <h3 class="text-form-with-help-text__heading"><span class="text-form-with-help-text__title">{{title}}</span>
-      <info-icon class="text-form-with-help-text__icon"></info-icon>
+      <helpful-tooltip :text="helpText"></helpful-tooltip>
     </h3>
     <text-form @text-change-value="$emit('change', $event)" :value="v"></text-form>
   </div>
@@ -9,14 +9,14 @@
 
 <script>
   import TextForm from '@/components/content-forms/TextForm';
-  import InfoIcon from '@/components/icons/InfoIcon';
+  import HelpfulTooltip from '@/components/HelpfulTooltip';
 
   export default {
-    props: ['title', 'value'],
+    props: ['title', 'value', 'helpText'],
 
     components: {
       TextForm,
-      InfoIcon
+      HelpfulTooltip
     },
 
     computed: {
@@ -40,6 +40,7 @@
       margin-bottom: 15px;
       display: flex;
       justify-items: center;
+      align-items: center;
     }
 
     &__title {
@@ -47,11 +48,5 @@
       font-weight: 600;
       margin-right: 8px;
     }
-
-    &__icon {
-      width: 20px;
-      height: 20px;
-      fill: $color-grey;
-    }
   }
 </style>
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index 09f0cd9a..e4d60ad8 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -1,11 +1,11 @@
 <template>
   <modal :hide-header="true">
     <div class="project-entry-modal">
-      <text-form-with-help-text title="Tätigkeit" :value="activity" @change="activity = $event">
+      <text-form-with-help-text title="Tätigkeit" :value="activity" @change="activity = $event" help-text="Hilfetext für Tätigkeit">
       </text-form-with-help-text>
-      <text-form-with-help-text title="Reflexion" :value="reflection" @change="reflection = $event">
+      <text-form-with-help-text title="Reflexion" :value="reflection" @change="reflection = $event" help-text="Hilfetext für Reflexion">
       </text-form-with-help-text>
-      <text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event">
+      <text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event" help-text="Hilfetext für Nächste Schritte">
       </text-form-with-help-text>
     </div>
     <div slot="footer">
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index 8f4aa042..17f91701 100644
--- a/client/src/pages/room.vue
+++ b/client/src/pages/room.vue
@@ -72,6 +72,7 @@
           }
         },
         manual: true,
+        // todo: do we really need manual here? update should do the trick too
         result({data, loading, networkStatus}) {
           if (!loading) {
             this.room = Object.assign({}, this.$getRidOfEdges(data).room);