[profile] #318 profile QR codes - make less overwhelming visually

components/ProfileShare.vue

@@ -10,7 +10,12 @@
             <Share nolabel shareApiSeparate/>
         </div>
         <div class="list-group-item small p-2 text-center">
-            <QrCode :url="`https://${$t('domain')}/@${user.username}`"
+            <button v-if="!showQr" class="btn btn-sm btn-outline-primary" @click="showQr = true">
+                <Icon v="scanner"/>
+                <T>user.qr.header</T>
+            </button>
+            <QrCode v-if="showQr"
+                    :url="`https://${$t('domain')}/@${user.username}`"
                     :text1="$t('domain')" :text2="`@${user.username}`"
                     download border
                     style="max-width: 256px; margin: 0 auto"/>
@@ -22,6 +27,11 @@
 export default {
     props: {
         user: { required: true },
-    }
+    },
+    data() {
+        return {
+            showQr: false,
+        }
+    },
 }
 </script>

locale/_base/translations.suml

@@ -572,6 +572,7 @@ user:
         disable: 'Disable MFA'
         disableConfirm: 'Are you sure you want to disable MFA?'
     qr:
+        header: 'QR code'
         download: 'Download QR code'
 
 profile:

locale/en/translations.suml

@@ -665,6 +665,7 @@ user:
                 If you don't want to keep your account, you don't need to do anything.
             cta: 'Create a card'
     qr:
+        header: 'QR code'
         download: 'Download QR code'
 
 profile:

locale/expectedTranslations.js

@@ -48,5 +48,6 @@ export default [
     'footer.stats.keys.responseTime',
     'privacy.header',
     'user.avatar.failed',
+    'user.qr.header',
     'user.qr.download',
 ];

locale/pl/translations.suml

@@ -1310,6 +1310,7 @@ user:
         disable: 'Wyłącz MFA'
         disableConfirm: 'Czy na pewno chcesz wyłączyć MFA?'
     qr:
+        header: 'Kod QR'
         download: 'Pobierz kod QR'
 
 profile: