krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update reward button and toggle menu

Browse Source 
Add `<button>` tag to the 3 dots toggle menu, and the reward control.

Update the CSS to add focus styles, in addition to hover styles, for the
3 dots toggle menu.
This commit is contained in:
Ian Oxley
2018-11-07 00:06:06 +00:00
parent 8048cf9a97
commit 302bc899d7
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
website/client/components/tasks/task.vue
View File

@@ -101,7 +101,7 @@
button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
.svg-icon.negative(v-html="icons.negative")
// Rewards right side control
.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
button.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
.svg-icon(v-html="icons.gold")
.small-text {{task.value}}
approval-footer(:task='task', v-if='this.task.group.id', :group='group')
@@ -175,11 +175,14 @@
}
.task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
border: 0;
border-radius: 0;
opacity: 0;
padding: 0 8px;
transition: opacity 0.15s ease-in;
}
.task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus,
.task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
opacity: 1;
}
@@ -192,6 +195,7 @@
}
}
.task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus .svg-icon,
.task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
color: $purple-400 !important;
}
@@ -428,12 +432,15 @@
.task-control, .reward-control {
align-items: center;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
}
.task-control {
border: none;
}
.task-not-scoreable {
.task-control, .reward-control {
cursor: default !important;