From 53c43cd4310fe7e7bccb3a2c0c7f943538d52da6 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Tue, 28 Jan 2020 22:19:59 +0100
Subject: [PATCH] Add tooltips to every icon only action

---
 resources/components/departures/departure.html |  2 +-
 resources/components/finder.html               |  1 +
 resources/components/picker/stop.html          |  1 +
 resources/ts/components/tooltip.ts             |  4 ++--
 templates/app.html.twig                        | 15 ++++++++++++---
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html
index 91040f0..cef5126 100644
--- a/resources/components/departures/departure.html
+++ b/resources/components/departures/departure.html
@@ -29,7 +29,7 @@
 
             <div class="stop__actions flex-space-left">
                 <button class="btn btn-action" @click="showTrip = !showTrip">
-                    <tooltip placement="top">pokaż/ukryj trasę</tooltip>
+                    <tooltip>pokaż/ukryj trasę</tooltip>
                     <fa :icon="['far', 'code-commit']" />
                 </button>
             </div>
diff --git a/resources/components/finder.html b/resources/components/finder.html
index e56e801..0674533 100644
--- a/resources/components/finder.html
+++ b/resources/components/finder.html
@@ -23,6 +23,7 @@
             <ul class="stop-group__stops list-underlined">
                 <li v-for="stop in group" :key="stop.id" class="d-flex">
                     <button @click="select(stop, $event)" class="btn btn-action align-self-start">
+                        <tooltip>dodaj przystanek</tooltip>
                         <fa :icon="['fal', 'check']" />
                     </button>
                     <picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
diff --git a/resources/components/picker/stop.html b/resources/components/picker/stop.html
index 1245508..787a63a 100644
--- a/resources/components/picker/stop.html
+++ b/resources/components/picker/stop.html
@@ -4,6 +4,7 @@
     <div class="stop__actions flex-space-left">
         <slot name="actions">
             <button class="btn btn-action" ref="action-info" @click="details = !details">
+                <tooltip>dodatkowe informacje</tooltip>
                 <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
             </button>
 
diff --git a/resources/ts/components/tooltip.ts b/resources/ts/components/tooltip.ts
index 57acb19..c8c4090 100644
--- a/resources/ts/components/tooltip.ts
+++ b/resources/ts/components/tooltip.ts
@@ -12,8 +12,8 @@ const longPressTimeout = 1000;
 
 @Component({ template: require('../../components/tooltip.html') })
 export class TooltipComponent extends Vue {
-    @Prop({ type: String, default: "auto" }) public placement: string;
-    @Prop({ type: Number, default: 200 }) public delay: number;
+    @Prop({ type: String, default: "top" }) public placement: string;
+    @Prop({ type: Number, default: 400 }) public delay: number;
     @Prop({ type: Array, default: () => ["hover", "focus"]}) public triggers: Trigger[];
 
     public show: boolean = false;
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 3bbd9c3..d2f9802 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -12,12 +12,18 @@
                         Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span>
                     </h2>
                     <button class="btn btn-action flex-space-left" ref="settings-messages" @click="visibility.messages = true">
+                        <tooltip>ustawienia</tooltip>
                         <fa :icon="['fal', 'cog']" fixed-width></fa>
                     </button>
                     <button class="btn btn-action" @click="updateMessages" ref="btn-messages-refresh">
+                        <tooltip>odśwież</tooltip>
                         <fa :icon="['fal', 'sync']" :spin="messages.state === 'fetching'" fixed-width></fa>
                     </button>
                     <button class="btn btn-action" @click="sections.messages = !sections.messages">
+                        <tooltip>
+                            {{ '{{ ' }} sections.messages ? 'zwiń' : 'rozwiń' {{ '}}' }}
+                            <span class="sr-only">sekcję komunikatów</span>
+                        </tooltip>
                         <fa :icon="['fal', sections.messages ? 'chevron-up' : 'chevron-down']" fixed-width/>
                     </button>
 
@@ -48,9 +54,11 @@
                     </h2>
 
                     <button class="btn btn-action flex-space-left" ref="settings-departures" @click="visibility.departures = true">
+                        <tooltip>ustawienia</tooltip>
                         <fa :icon="['fal', 'cog']" fixed-width></fa>
                     </button>
                     <button class="btn btn-action" @click="updateDepartures({ stops })">
+                        <tooltip>odśwież</tooltip>
                         <fa :icon="['fal', 'sync']" :spin="departures.state === 'fetching'" fixed-width></fa>
                     </button>
                     <portal to="popups">
@@ -86,7 +94,7 @@
                         <span class="text">Przystanki</span>
                     </h2>
                     <button class="btn btn-action flex-space-left" @click="clear">
-                        <tooltip placement="top">usuń wszystkie</tooltip>
+                        <tooltip>usuń wszystkie</tooltip>
                         <fa :icon="['fal', 'trash-alt']" fixed-width></fa>
                     </button>
                 </header>
@@ -94,6 +102,7 @@
                 <ul class="picker__stops list-underlined">
                     <li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
                         <button @click="remove(stop)" class="btn btn-action align-self-start">
+                            <tooltip>usuń przystanek</tooltip>
                             <fa :icon="['fal', 'times']"></fa>
                         </button>
                         <picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
@@ -119,7 +128,7 @@
                             Wybierz przystanki
                         </h2>
                         <button class="btn btn-action" @click="visibility.picker = 'favourites'">
-                            <tooltip placement="top">Zapisane</tooltip>
+                            <tooltip>Zapisane</tooltip>
                             <fa :icon="['fal', 'star']" fixed-witdth></fa>
                         </button>
                     </template>
@@ -129,7 +138,7 @@
                             Zapisane
                         </h2>
                         <button class="btn btn-action" @click="visibility.picker = 'search'">
-                            <tooltip placement="top">Wybierz przystanki</tooltip>
+                            <tooltip>Wybierz przystanki</tooltip>
                             <fa :icon="['fal', 'search']" fixed-witdth></fa>
                         </button>
                     </template>