Add tooltip to character buff icon (#10156)

* Add tooltip to character buff icon

* Add tooltips for task streak, challenge and broken challenge

* Add tooltips for task menu and due date

* Challenge icon tooltip displays the challenge short name
This commit is contained in:
Philip Karpiak
2018-04-06 13:53:39 -04:00
committed by Sabe Jones
parent f42955a0ba
commit 5da7699548
2 changed files with 7 additions and 6 deletions

View File

@@ -17,7 +17,7 @@
.d-flex.flex-column.profile-name-character .d-flex.flex-column.profile-name-character
h3.character-name h3.character-name
| {{member.profile.name}} | {{member.profile.name}}
.is-buffed(v-if="isBuffed") .is-buffed(v-if="isBuffed", v-b-tooltip.hover.bottom="$t('buffed')")
.svg-icon(v-html="icons.buff") .svg-icon(v-html="icons.buff")
span.small-text.character-level {{ characterLevel }} span.small-text.character-level {{ characterLevel }}
.progress-container(v-b-tooltip.hover.bottom="$t('health')") .progress-container(v-b-tooltip.hover.bottom="$t('health')")

View File

@@ -19,7 +19,8 @@
menu-dropdown.task-dropdown( menu-dropdown.task-dropdown(
v-if="isUser && !isRunningYesterdailies", v-if="isUser && !isRunningYesterdailies",
:right="task.type === 'reward'", :right="task.type === 'reward'",
ref="taskDropdown" ref="taskDropdown",
v-b-tooltip.hover.top="$t('showMore')"
) )
div(slot="dropdown-toggle", draggable=false) div(slot="dropdown-toggle", draggable=false)
.svg-icon.dropdown-icon(v-html="icons.menu") .svg-icon.dropdown-icon(v-html="icons.menu")
@@ -69,19 +70,19 @@
label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}`") label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}`")
.icons.small-text.d-flex.align-items-center .icons.small-text.d-flex.align-items-center
.d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}") .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
.svg-icon.calendar(v-html="icons.calendar") .svg-icon.calendar(v-html="icons.calendar", v-b-tooltip.hover.bottom="$t('dueDate')")
span {{dueIn}} span {{dueIn}}
.icons-right.d-flex.justify-content-end .icons-right.d-flex.justify-content-end
.d-flex.align-items-center(v-if="showStreak") .d-flex.align-items-center(v-if="showStreak")
.svg-icon.streak(v-html="icons.streak") .svg-icon.streak(v-html="icons.streak", v-b-tooltip.hover.bottom="$t('streakCounter')")
span(v-if="task.type === 'daily'") {{task.streak}} span(v-if="task.type === 'daily'") {{task.streak}}
span(v-if="task.type === 'habit'") span(v-if="task.type === 'habit'")
span.m-0(v-if="task.up") +{{task.counterUp}} span.m-0(v-if="task.up") +{{task.counterUp}}
span.m-0(v-if="task.up && task.down")  |  span.m-0(v-if="task.up && task.down")  | 
span.m-0(v-if="task.down") -{{task.counterDown}} span.m-0(v-if="task.down") -{{task.counterDown}}
.d-flex.align-items-center(v-if="task.challenge && task.challenge.id") .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
.svg-icon.challenge(v-html="icons.challenge", v-if='!task.challenge.broken') .svg-icon.challenge(v-html="icons.challenge", v-if='!task.challenge.broken', v-b-tooltip.hover.bottom="`${task.challenge.shortName}`")
.svg-icon.challenge.broken(v-html="icons.brokenChallengeIcon", v-if='task.challenge.broken', @click='handleBrokenTask(task)') .svg-icon.challenge.broken(v-html="icons.brokenChallengeIcon", v-if='task.challenge.broken', @click='handleBrokenTask(task)', v-b-tooltip.hover.bottom="$t('brokenChaLink')")
.d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`") .d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`")
.svg-icon.tags(v-html="icons.tags") .svg-icon.tags(v-html="icons.tags")
b-popover( b-popover(