krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 07:07:35 +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") button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
.svg-icon.negative(v-html="icons.negative") .svg-icon.negative(v-html="icons.negative")
// Rewards right side control // 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") .svg-icon(v-html="icons.gold")
.small-text {{task.value}} .small-text {{task.value}}
approval-footer(:task='task', v-if='this.task.group.id', :group='group') 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 { .task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
border: 0;
border-radius: 0;
opacity: 0; opacity: 0;
padding: 0 8px; padding: 0 8px;
transition: opacity 0.15s ease-in; 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 { .task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
opacity: 1; 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 { .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
color: $purple-400 !important; color: $purple-400 !important;
} }
@@ -428,12 +432,15 @@
.task-control, .reward-control { .task-control, .reward-control {
align-items: center; align-items: center;
border: none;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.task-control {
border: none;
}
.task-not-scoreable { .task-not-scoreable {
.task-control, .reward-control { .task-control, .reward-control {
cursor: default !important; cursor: default !important;

2
website/client/components/ui/customMenuDropdown.vue
View File

@@ -4,7 +4,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
<template lang="pug"> <template lang="pug">
.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}") .habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
.habitica-menu-dropdown-toggle button.habitica-menu-dropdown-toggle
slot(name="dropdown-toggle") slot(name="dropdown-toggle")
.dropdown-menu(:class="{'dropdown-menu-right': right}") .dropdown-menu(:class="{'dropdown-menu-right': right}")
slot(name="dropdown-content") slot(name="dropdown-content")