feat: add tooltips to various UI components

- Settings, round skip, volume toggle, total round count, reset.
Splode · May 25, 2020 · 5bd03d6 · 5bd03d6
1 parent 92e7e43
commit 5bd03d6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 41 deletions.
diff --git a/src/renderer/components/Titlebar.vue b/src/renderer/components/Titlebar.vue
@@ -4,23 +4,18 @@
     <div
       class="Icon-wrapper Icon-wrapper--titlebar Icon-wrapper--single"
       style="position: absolute;"
+      title="Settings"
       @click="toggleDrawer"
     >
-      <div
-        class="Menu-wrapper"
-        :class="drawerOpen ? 'is-collapsed' : ''"
-      >
+      <div class="Menu-wrapper" :class="drawerOpen ? 'is-collapsed' : ''">
         <div class="Menu-line"></div>
         <div class="Menu-line"></div>
       </div>
     </div>
 
     <h1 class="Title">Pomotroid</h1>
 
-    <div
-      class="Icon-group"
-      style="position: absolute; top: 0; right: 0;"
-    >
+    <div class="Icon-group" style="position: absolute; top: 0; right: 0;">
       <div
         class="Icon-wrapper Icon-wrapper--titlebar Icon-wrapper--double--left"
         style="padding-left: 18px"

diff --git a/src/renderer/components/timer/Timer-footer.vue b/src/renderer/components/timer/Timer-footer.vue
@@ -1,19 +1,24 @@
 <template>
   <section class="Container Footer">
     <div class="Round-wrapper">
-      <p>{{ round + '/' + workRounds }} <span v-if="totalWorkRounds > 0" class="Total-rounds">({{ totalWorkRounds }})</span></p>
-      <p
-        class="TextButton"
-        @click="callForReset"
-      >Reset</p>
+      <p>
+        {{ round + '/' + workRounds }}
+        <span
+          v-if="totalWorkRounds > 0"
+          class="Total-rounds"
+          title="Focus rounds completed"
+          >({{ totalWorkRounds }})</span
+        >
+      </p>
+      <p class="TextButton" title="Reset current round" @click="callForReset">
+        Reset
+      </p>
     </div>
-    <div
-      class="Icon-group"
-      style="position: absolute; right: 0;"
-    >
+    <div class="Icon-group" style="position: absolute; right: 0;">
       <!-- skip -->
       <div
         class="Icon-wrapper Icon-wrapper--double--left"
+        title="Skip the current round"
         @click="skipRound"
       >
         <svg
@@ -29,29 +34,18 @@
           height="15px"
           class="Icon--skip"
         >
-          <polygon
-            fill="#858C99"
-            points="0,0 0,12 6.1,5.9"
-          />
-          <rect
-            x="6.9"
-            y="0"
-            fill="#858C99"
-            width="1.1"
-            height="12"
-          />
+          <polygon fill="#858C99" points="0,0 0,12 6.1,5.9" />
+          <rect x="6.9" y="0" fill="#858C99" width="1.1" height="12" />
         </svg>
       </div>
       <!-- mute -->
       <div
         class="Icon-wrapper Icon-wrapper--double--right"
+        :title="volume > 0 ? 'Mute' : 'Unmute'"
         @click="toggleMute"
         @mouseenter="volumeSliderHidden = false"
       >
-        <transition
-          name="fade"
-          mode="out-in"
-        >
+        <transition name="fade" mode="out-in">
           <svg
             version="1.2"
             baseProfile="tiny"
@@ -92,10 +86,7 @@
               c0.7-1.2,1-2.6,1-4.1c0-4.3-3-7.9-7-8.8v2.1C-450.1,275.1-448,277.8-448,281z M-462.7,272l-1.3,1.3l4.7,4.7h-4.7v6h4l5,5v-6.7
               l4.3,4.3c-0.7,0.5-1.4,0.9-2.3,1.2v2.1c1.4-0.3,2.6-1,3.7-1.8l2,2l1.3-1.3l-9-9L-462.7,272z M-455,273l-2.1,2.1l2.1,2.1V273z"
             />
-            <path
-              fill="none"
-              d="M-467,269h24v24h-24V269z"
-            />
+            <path fill="none" d="M-467,269h24v24h-24V269z" />
           </svg>
         </transition>
       </div>
@@ -112,11 +103,10 @@
             class="Slider"
             v-model="localVolume"
             @change="setVolume"
-          >
+          />
           <div class="Slider-bar Slider-bar--blueGrey"></div>
         </div>
       </transition>
-
     </div>
   </section>
 </template>
@@ -173,8 +163,8 @@ export default {
         if (
           this.currentMousePosition.x >= 305 &&
           this.currentMousePosition.x <= 355 &&
-          (this.currentMousePosition.y >= 305 &&
-            this.currentMousePosition.y <= 455)
+          this.currentMousePosition.y >= 305 &&
+          this.currentMousePosition.y <= 455
         ) {
         } else {
           this.volumeSliderHidden = true
@@ -260,7 +250,7 @@ export default {
 
   .Total-rounds {
     color: #858c99;
-    font-size: .7rem;
+    font-size: 0.7rem;
   }
 }