From 1c2745ed2dee6baee6a60933ce3a464292ab574c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:09:17 +0100
Subject: [PATCH] Translated report dialog and improved popover

---
 assets/styles/imports/_tooltip.scss | 6 +++---
 assets/styles/main.scss             | 3 ++-
 components/ReportModal.vue          | 6 +++++-
 locales/de.json                     | 9 ++++++---
 locales/en.json                     | 9 ++++++---
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
index 3c922f8d2..fa6c38668 100644
--- a/assets/styles/imports/_tooltip.scss
+++ b/assets/styles/imports/_tooltip.scss
@@ -90,7 +90,7 @@
       color: $text-color-base;
       border-radius: $border-radius-base;
       padding: $space-x-small $space-small;
-      box-shadow: $box-shadow-large;
+      box-shadow: $box-shadow-x-large;
 
       nav {
         margin-left: -$space-small;
@@ -113,12 +113,12 @@
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .1s, visibility .1s;
+    transition: opacity 60ms;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .1s;
+    transition: opacity 60ms;
   }
 }
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 1ce0c0e53..235777096 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -139,7 +139,7 @@ hr {
   }
 }
 
-    #overlay {
+#overlay {
   display: block;
   opacity: 0;
   width: 100%;
@@ -156,5 +156,6 @@ hr {
   .dropdown-open & {
     opacity: 1;
     transition-delay: 0;
+    transition: opacity 80ms ease-out;
   }
 }
diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index 52b31cbd5..c79939ce5 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -8,7 +8,8 @@
     @confirm="report"
     @cancel="close"
   >
-    <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-html="$t(`report.${data.context}.message`, { name: name })" />
     <template
       slot="footer"
       slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
@@ -51,6 +52,9 @@ export default {
     title() {
       return this.$t(`report.${this.data.context}.title`)
     },
+    name() {
+      return this.$filters.truncate(this.data.name, 30)
+    },
     isOpen() {
       return this.$store.getters['modal/open'] === 'report'
     }
diff --git a/locales/de.json b/locales/de.json
index 11a4a179c..7e8d3e501 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -101,13 +101,16 @@
     "submit": "Meldung senden",
     "cancel": "Abbrechen",
     "user": {
-      "title": "Nutzer melden"
+      "title": "Nutzer melden",
+      "message": "Bist du sicher, dass du den Nutzer \"<b>{name}</b>\" melden möchtest?"
     },
     "contribution": {
-      "title": "Beitrag melden"
+      "title": "Beitrag melden",
+      "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" melden möchtest?"
     },
     "comment": {
-      "title": "Kommentar melden"
+      "title": "Kommentar melden",
+      "message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" melden möchtest?"
     }
   },
   "quotes": {
diff --git a/locales/en.json b/locales/en.json
index 3556b08cf..dd1793b12 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -101,13 +101,16 @@
     "submit": "Send Report",
     "cancel": "Cancel",
     "user": {
-      "title": "Report User"
+      "title": "Report User",
+      "message": "Do you really want to report the user \"<b>{name}</b>\"?"
     },
     "contribution": {
-      "title": "Report Contribution"
+      "title": "Report Contribution",
+      "message": "Do you really want to report the contribution \"<b>{name}</b>\"?"
     },
     "comment": {
-      "title": "Report Comment"
+      "title": "Report Comment",
+      "message": "Do you really want to report the comment from \"<b>{name}</b>\"?"
     }
   },
   "quotes": {