tooltips for create buttons

HabitRPG · Oct 15, 2017 · 03ad626 · 03ad626
1 parent 636d604
commit 03ad626
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/website/client/assets/scss/tooltip.scss b/website/client/assets/scss/tooltip.scss
@@ -7,8 +7,10 @@
     font-size: 12px;
     line-height: 1.33;
     color: $white;
-    padding: 10px 16px;
-    border-radius: 0px;
+    padding: 8px 12px;
+    margin-top: 8px;
+
+    border-radius: 4px;
     background-color: rgba($gray-10, 0.96);
     box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
   }

diff --git a/website/client/components/tasks/user.vue b/website/client/components/tasks/user.vue
@@ -65,16 +65,17 @@
             .create-task-btn.rounded-btn(
               v-for="type in columns", 
               :key="type", 
-              @click="createTask(type)", 
-              v-once
+              @click="createTask(type)",
+              v-b-tooltip.hover.bottom="$t(type)",
             )
               .svg-icon(v-html="icons[type]", :class='`icon-${type}`')
 
-        .create-btn.rounded-btn.btn.btn-success(
+        #create-task-btn.create-btn.rounded-btn.btn.btn-success(
           @click="openCreateBtn = !openCreateBtn",
           :class="{open: openCreateBtn}",
         )
           .svg-icon(v-html="icons.positive")
+        b-tooltip(target="create-task-btn", placement="bottom", v-if="!openCreateBtn") {{ $t('addTaskToUser') }}
 
     .row.tasks-columns
       task-column.col-lg-3.col-md-6(
@@ -305,6 +306,9 @@ import rewardIcon from 'assets/svg/reward.svg';
 import uuid from 'uuid';
 import Vue from 'vue';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
+import bTooltipComponent from 'bootstrap-vue/lib/components/tooltip';
+
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import throttle from 'lodash/throttle';
 import cloneDeep from 'lodash/cloneDeep';
@@ -320,12 +324,14 @@ export default {
     TaskModal,
     bDropdown,
     bDropdownItem,
+    bTooltip: bTooltipComponent,
     Item,
     spells,
     brokenTaskModal,
   },
   directives: {
     markdown,
+    bTooltip,
   },
   data () {
     return {

diff --git a/website/common/locales/en/tasks.json b/website/common/locales/en/tasks.json
@@ -6,8 +6,7 @@
   "addsingle": "Add Single",
   "addATask": "Add a <%= type %>",
   "editATask": "Edit a <%= type %>",
-  "createTask": "Create <%= type %>",
-  "addTaskToUser": "Create",
+  "addTaskToUser": "Add Task",
   "scheduled": "Scheduled",
   "theseAreYourTasks": "These are your <%= taskType %>",
   "habit": "Habit",