Design invite button

webapp/components/InviteButton/InviteButton.vue

@@ -6,15 +6,32 @@
     <template #popover>
       <div class="invite-button-menu-popover">
         <div v-if="inviteCode && inviteCode.code">
-          <ds-text align="center">{{ $t('invite-codes.your-code') }}</ds-text>
-          <base-button class="invite-code" v-if="canCopy" ghost @click="copyInviteCode">
-            <ds-text bold>
-              {{ inviteCode.code }}
-            </ds-text>
-          </base-button>
-          <base-button v-if="canCopy" icon="copy" ghost @click="copyInviteLink">
-            {{ $t('invite-codes.copy-link') }}
-          </base-button>
+          <!-- Wolle <ds-text align="center">{{ $t('invite-codes.your-code') }}</ds-text> -->
+          <!-- <ds-text align="center" bold>Copy to clipboard</ds-text> -->
+          <!-- <p class="description">{{ $t(`invite-codes.your-code`) }}</p> -->
+          <p class="description">{{ $t('invite-codes.your-code') }}</p>
+          <base-card class="code-card" wideContent>
+            <!-- Wolle <ds-text bold>As code</ds-text> -->
+            <base-button
+              v-if="canCopy"
+              class="invite-code"
+              icon="copy"
+              ghost
+              @click="copyInviteLink"
+            >
+              <ds-text bold>
+                <!-- Wolle {{ inviteCode.code }} -->
+                {{ $t('invite-codes.copy-code') }}
+                {{ inviteCode.code }}
+              </ds-text>
+            </base-button>
+            <!-- Wolle <ds-text bold>As link</ds-text> -->
+            <!-- <base-button v-if="canCopy" icon="copy" ghost @click="copyInviteLink">
+              <!-- Wolle {{ $t('invite-codes.copy-link') }} -->
+              <!-- {{ $t('invite-codes.copy-link') }}
+              {{ inviteLink | truncateStr(30) }}
+            </base-button> -->
+          </base-card>
         </div>
         <div v-else>
           <ds-text>{{ $t('invite-codes.not-available') }}</ds-text>
@@ -27,10 +44,12 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import gql from 'graphql-tag'
+import BaseCard from '../_new/generic/BaseCard/BaseCard.vue'
 
 export default {
   components: {
     Dropdown,
+    BaseCard,
   },
   props: {
     placement: { type: String, default: 'top-end' },
@@ -44,18 +63,23 @@ export default {
   created() {
     this.canCopy = !!navigator.clipboard
   },
-  methods: {
-    async copyInviteCode() {
-      await navigator.clipboard.writeText(this.inviteCode.code)
-      this.$toast.success(this.$t('invite-codes.copy-success'))
-    },
-    async copyInviteLink() {
-      await navigator.clipboard.writeText(
+  computed: {
+    inviteLink() {
+      return (
         'https://' +
-          window.location.hostname +
-          '/registration?method=invite-code&inviteCode=' +
-          this.inviteCode.code,
+        window.location.hostname +
+        '/registration?method=invite-code&inviteCode=' +
+        this.inviteCode.code
       )
+    },
+  },
+  methods: {
+    // Wolle async copyInviteCode() {
+    //   await navigator.clipboard.writeText(this.inviteCode.code)
+    //   this.$toast.success(this.$t('invite-codes.copy-success'))
+    // },
+    async copyInviteLink() {
+      await navigator.clipboard.writeText(this.inviteLink)
       this.$toast.success(this.$t('invite-codes.copy-success'))
     },
   },
@@ -79,17 +103,26 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scope>
 .invite-button {
   color: $color-secondary;
 }
 
 .invite-button-menu-popover {
-  text-align: center;
+  // Wolle text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  .description {
+    margin-top: $space-x-small;
+    margin-bottom: $space-x-small;
+  }
+  .code-card {
+    margin-bottom: $space-x-small;
+  }
 }
+
 .invite-code {
   left: 50%;
 }

webapp/locales/de.json

@@ -337,11 +337,11 @@
     "no-results": "Keine Beiträge gefunden."
   },
   "invite-codes": {
-    "copy-code": "Einladungscode in die Zwischenablage kopieren",
-    "copy-link": "Einladungslink in die Zwischenablage kopieren",
+    "copy-code": "Code:",
+    "copy-link": "Link:",
     "copy-success": "Einladungscode erfolgreich in die Zwischenablage kopiert",
     "not-available": "Du hast keinen Einladungscode zur Verfügung!",
-    "your-code": "Das ist dein Einladungscode:"
+    "your-code": "Kopiere deinen Einladungscode in die Ablage:"
   },
   "login": {
     "email": "Deine E-Mail",

webapp/locales/en.json

@@ -337,11 +337,11 @@
     "no-results": "No contributions found."
   },
   "invite-codes": {
-    "copy-code": "Copy invite code to clipboard",
-    "copy-link": "Copy invite link to clipboard",
+    "copy-code": "Code:",
+    "copy-link": "Link:",
     "copy-success": "Invite code copied to clipboard",
     "not-available": "You have no valid invite code available!",
-    "your-code": "This is your invite code:"
+    "your-code": "Copy your invite code to the clipboard:"
   },
   "login": {
     "email": "Your E-mail",

webapp/plugins/vue-filters.js

@@ -33,6 +33,18 @@ export default ({ app = {} }) => {
       }
       return trunc(value, length).html
     },
+    truncateStr: (value = '', length = -1) => {
+      if (!value || typeof value !== 'string' || value.length <= 0) {
+        return ''
+      }
+      if (length <= 0) {
+        return value
+      }
+      if (length < value.length) {
+        return value.substring(0, length) + '…'
+      }
+      return value
+    },
     list: (value, glue = ', ', truncate = 0) => {
       if (!Array.isArray(value) || !value.length) {
         return ''