From a1bcd08f5bf8db80c14e5db944dda49d6f67c8ee Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 24 Nov 2022 00:00:05 +0100
Subject: [PATCH] add tooltips for member action buttons

---
 app/Member/MemberController.php    | 2 +-
 resources/img/svg/invoice.svg      | 1 +
 resources/js/layouts/AppLayout.vue | 8 ++++++--
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 resources/img/svg/invoice.svg

diff --git a/app/Member/MemberController.php b/app/Member/MemberController.php
index 8767bf14..53b2e31a 100644
--- a/app/Member/MemberController.php
+++ b/app/Member/MemberController.php
@@ -43,7 +43,7 @@ class MemberController extends Controller
         $payload = app(MemberView::class)->index($request, $query['filter']);
         $payload['toolbar'] = [
             ['href' => route('member.create'), 'label' => 'Mitglied anlegen', 'color' => 'primary', 'icon' => 'plus'],
-            ['href' => route('allpayment.create'), 'label' => 'Rechnungen erstellen', 'color' => 'primary', 'icon' => 'plus', 'show' => $settings->hasModule('bill')],
+            ['href' => route('allpayment.create'), 'label' => 'Rechnungen erstellen', 'color' => 'primary', 'icon' => 'invoice', 'show' => $settings->hasModule('bill')],
             ['href' => route('sendpayment.create'), 'label' => 'Rechnungen versenden', 'color' => 'info', 'icon' => 'envelope', 'show' => $settings->hasModule('bill')],
         ];
         $payload['query'] = $query;
diff --git a/resources/img/svg/invoice.svg b/resources/img/svg/invoice.svg
new file mode 100644
index 00000000..a78ea222
--- /dev/null
+++ b/resources/img/svg/invoice.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><path d="M430.584 0H218.147v144.132c0 9.54-7.734 17.274-17.274 17.274H56.741v325.917C56.741 500.951 67.79 512 81.418 512h349.166c13.628 0 24.677-11.049 24.677-24.677V24.677C455.261 11.049 444.212 0 430.584 0zm-97.263 409.763H192.675c-9.54 0-17.274-7.734-17.274-17.274s7.734-17.274 17.274-17.274h140.646c9.54 0 17.274 7.734 17.274 17.274s-7.734 17.274-17.274 17.274zm0-81.261H192.675c-9.54 0-17.274-7.734-17.274-17.274 0-9.54 7.734-17.274 17.274-17.274h140.646c9.54 0 17.274 7.734 17.274 17.274 0 9.54-7.734 17.274-17.274 17.274zm0-81.259H192.675c-9.54 0-17.274-7.734-17.274-17.274s7.734-17.274 17.274-17.274h140.646c9.54 0 17.274 7.734 17.274 17.274s-7.734 17.274-17.274 17.274z"/><path d="M183.389 0a24.668 24.668 0 0 0-17.448 7.229L63.968 109.198a24.676 24.676 0 0 0-7.229 17.448v.211h126.86V0h-.21z"/></svg>
\ No newline at end of file
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 8ecf8b28..3a00635d 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -52,9 +52,10 @@
                             :href="link.href"
                             class="btn label mr-2"
                             :class="`btn-${link.color}`"
+                            v-tooltip="tooltipsVisible ? link.label : ''"
                         >
-                            <svg-sprite v-show="link.icon" class="w-3 h-3 mr-2" :src="link.icon"></svg-sprite>
-                            <span v-text="link.label"></span>
+                            <svg-sprite v-show="link.icon" class="w-3 h-3 xl:mr-2" :src="link.icon"></svg-sprite>
+                            <span class="hidden xl:inline" v-text="link.label"></span>
                         </i-link>
                     </div>
                 </div>
@@ -102,6 +103,7 @@ export default {
             searchVisible: true,
             menuVisible: true,
             menuOverflowVisible: false,
+            tooltipsVisible: false,
         };
     },
     components: {
@@ -143,6 +145,8 @@ export default {
                 this.menuOverflowVisible = false;
                 return;
             }
+
+            this.tooltipsVisible = !window.matchMedia('(min-width: 1280px)').matches;
         },
     },
     created() {