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

Tasks v2 Part 2 (#9236)

Browse Source 
* start updating colors for tasks controls

* finish updating controls colors

* change hoevr behavior

* change transition duration

* update color with transition

* refactor menu wip

* wip

* upgrade vue deps

* fix warnings

* fix menu

* misc fixes

* more fixes

* fix badge

* fix margins in menu

* wip tooltips

* tooltips

* fix checklist colors

* add badges

* fix quick add input

* add transition to task controls too

* add batch add

* fix task filtering

* finish tasks badges

* fix menu

* upgrade deps

* fix shop items using all the same image

* fix animation

* disable client tests until we remove phantomjs

* revert changes to tasks colors

* fix opacity in task modal inputs

* remove client unit tests from travis

* wip task dropdown

* fix z-index for task footer/header

* fixes and add files

* fixes

* bigger clickable area

* more space to open task dropdown

* droddown position

* fix menu position

* make sure other dropdowns get closed correctly

* fixes

* start to fix z-index

* draggable = false for task dropdown

* fix for dropdown position

* implement move to top / bottom

* fix push to bottom

* typo

* fix drag and drop

* use standard code

* wider click area for dropdown

* unify badge look

* fix padding

* misc fixes

* more fixes

* make dropdown scrollable

* misc fixes

* fix padding for notes

* use existing code instead of new props
This commit is contained in:
Matteo Pagliazzi
2017-11-02 21:07:38 +01:00
committed by GitHub
parent 0e958fd306
commit a208ba4aba
38 changed files with 2186 additions and 924 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,15 +13,45 @@
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
// Task title, description and icons
.task-content(:class="contentClass")
.task-clickable-area(@click="edit($event, task)")
h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
.task-notes.small-text(v-markdown="task.notes")
.task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}")
.d-flex.justify-content-between
h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
menu-dropdown.task-dropdown(
v-if="isUser && !isRunningYesterdailies",
:right="task.type === 'reward'",
ref="taskDropdown"
)
div(slot="dropdown-toggle", draggable=false)
.svg-icon.dropdown-icon(v-html="icons.menu")
div(slot="dropdown-content", draggable=false)
.dropdown-item.edit-task-item(ref="editTaskItem")
span.dropdown-icon-item
span.svg-icon.inline.edit-icon(v-html="icons.edit")
span.text {{ $t('edit') }}
.dropdown-item(@click="moveToTop")
span.dropdown-icon-item
span.svg-icon.inline.push-to-top(v-html="icons.top")
span.text {{ $t('taskToTop') }}
.dropdown-item(@click="moveToBottom")
span.dropdown-icon-item
span.svg-icon.inline.push-to-bottom(v-html="icons.bottom")
span.text {{ $t('taskToBottom') }}
.dropdown-item(@click="destroy", v-if="canDelete(task)")
span.dropdown-icon-item.delete-task-item
span.svg-icon.inline.delete(v-html="icons.delete")
span.text {{ $t('delete') }}
.task-notes.small-text(
v-markdown="task.notes",
:class="{'has-checklist': task.notes && hasChecklist}",
)
.checklist(v-if="canViewchecklist")
.d-inline-flex
.collapse-checklist.d-flex.align-items-center.expand-toggle(
v-if="isUser",
@click="collapseChecklist(task)",
:class="{open: !task.collapseChecklist}",
v-b-tooltip.hover.bottom="$t(`${task.collapseChecklist ? 'expand': 'collapse'}Checklist`)",
)
.svg-icon(v-html="icons.checklist")
span {{ checklistProgress }}
@@ -70,7 +100,7 @@
approval-footer(:task='task', v-if='this.task.group.id', :group='group')
</template>
<style lang="scss">
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
.task {
@@ -78,14 +108,13 @@
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
background: transparent;
border-radius: 2px;
z-index: 9;
position: relative;
&:hover {
box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
.left-control, .right-control, .task-content {
border-color: $purple-500;
border-color: $purple-400;
}
}
}
@@ -99,32 +128,112 @@
color: $gray-10;
font-weight: normal;
margin-bottom: 0px;
line-height: 1.43;
font-size: 14px;
&.has-notes {
padding-bottom: 0px;
padding-bottom: 4px;
}
}
.task-clickable-area {
padding: 7px 8px;
padding-bottom: 0px;
&-user {
padding-right: 0px;
}
}
.task-title + .task-dropdown /deep/ .dropdown-menu {
margin-top: 2px !important;
}
.dropdown-icon {
width: 4px;
height: 16px;
color: $gray-100 !important;
}
.task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
opacity: 0;
padding: 0 8px;
transition: opacity 0.15s ease-in;
}
.task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
opacity: 1;
}
.task-clickable-area /deep/ .habitica-menu-dropdown.open .habitica-menu-dropdown-toggle {
opacity: 1;
.svg-icon {
color: $purple-400 !important;
}
}
.task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
color: $purple-400 !important;
}
.task-dropdown {
max-height: 16px;
}
.task-dropdown /deep/ .dropdown-menu {
.dropdown-item {
cursor: pointer !important;
transition: none;
* {
transition: none;
}
&:hover {
color: $purple-300;
.svg-icon.push-to-top, .svg-icon.push-to-bottom {
* {
stroke: $purple-300;
}
}
}
}
}
.task-notes {
color: $gray-100;
font-style: normal;
padding-right: 6px;
&.has-checklist {
padding-bottom: 8px;
}
}
.task-content {
padding: 8px;
padding-top: 0px;
padding-bottom: 7px;
flex-grow: 1;
cursor: pointer;
background: $white;
border: 1px solid transparent;
transition-duration: 0.15;
&.no-right-border {
border-right: none !important;
}
&.reward-content {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
}
.checklist {
margin-bottom: 2px;
margin-top: 8px;
margin-top: -3px;
}
.collapse-checklist {
@@ -154,6 +263,7 @@
margin-bottom: 10px;
min-height: 0px;
width: 100%;
margin-left: 8px;
&-done {
color: $gray-300;
@@ -170,6 +280,10 @@
}
}
.icons, .checklist {
padding: 0 8px;
}
.icons {
margin-top: 4px;
color: $gray-300;
@@ -197,6 +311,34 @@
height: 7.1px;
}
.delete-task-item {
color: $red-10;
}
.edit-task-item span.text {
margin-left: -3px;
}
.svg-icon.edit-icon {
width: 16px;
height: 16px;
}
.svg-icon.push-to-top, .svg-icon.push-to-bottom {
width: 10px;
height: 11px;
margin-left: 3px;
svg {
stroke: $purple-300;
}
}
.svg-icon.delete {
width: 14px;
height: 16px;
}
.tags.svg-icon, .calendar.svg-icon {
width: 14px;
height: 14px;
@@ -235,6 +377,12 @@
flex-shrink: 0;
}
.left-control, .right-control, .task-control {
transition-duration: 0.15s;
transition-property: border-color, background, color;
transition-timing-function: ease-in;
}
.left-control {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
@@ -244,6 +392,8 @@
& + .task-content {
border-left: none;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
}
@@ -327,6 +477,7 @@ import axios from 'axios';
import scoreTask from 'common/script/ops/scoreTask';
import Vue from 'vue';
import * as Analytics from 'client/libs/analytics';
import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
import positiveIcon from 'assets/svg/positive.svg';
import negativeIcon from 'assets/svg/negative.svg';
@@ -336,12 +487,18 @@ import calendarIcon from 'assets/svg/calendar.svg';
import challengeIcon from 'assets/svg/challenge.svg';
import tagsIcon from 'assets/svg/tags.svg';
import checkIcon from 'assets/svg/check.svg';
import editIcon from 'assets/svg/edit.svg';
import topIcon from 'assets/svg/top.svg';
import bottomIcon from 'assets/svg/bottom.svg';
import deleteIcon from 'assets/svg/delete.svg';
import checklistIcon from 'assets/svg/checklist.svg';
import menuIcon from 'assets/svg/menu.svg';
import bPopover from 'bootstrap-vue/lib/components/popover';
import markdownDirective from 'client/directives/markdown';
import notifications from 'client/mixins/notifications';
import approvalHeader from './approvalHeader';
import approvalFooter from './approvalFooter';
import MenuDropdown from '../ui/customMenuDropdown';
export default {
mixins: [notifications],
@@ -349,9 +506,11 @@ export default {
bPopover,
approvalFooter,
approvalHeader,
MenuDropdown,
},
directives: {
markdown: markdownDirective,
bTooltip,
},
props: ['task', 'isUser', 'group', 'dueDate'], // @TODO: maybe we should store the group on state?
data () {
@@ -366,6 +525,11 @@ export default {
tags: tagsIcon,
check: checkIcon,
checklist: checklistIcon,
delete: deleteIcon,
edit: editIcon,
top: topIcon,
bottom: bottomIcon,
menu: menuIcon,
}),
};
},
@@ -373,15 +537,19 @@ export default {
...mapState({
user: 'user.data',
castingSpell: 'spellOptions.castingSpell',
isRunningYesterdailies: 'isRunningYesterdailies',
}),
...mapGetters({
getTagsFor: 'tasks:getTagsFor',
getTaskClasses: 'tasks:getTaskClasses',
canDelete: 'tasks:canDelete',
}),
hasChecklist () {
return this.task.checklist && this.task.checklist.length > 0;
},
canViewchecklist () {
let hasChecklist = this.task.checklist && this.task.checklist.length > 0;
let userIsTaskUser = this.task.userId ? this.task.userId === this.user._id : true;
return hasChecklist && userIsTaskUser;
return this.hasChecklist && userIsTaskUser;
},
checklistProgress () {
const totalItems = this.task.checklist.length;
@@ -405,11 +573,19 @@ export default {
return this.getTaskClasses(this.task, 'control', this.dueDate);
},
contentClass () {
const type = this.task.type;
const classes = [];
classes.push(this.getTaskClasses(this.task, 'content', this.dueDate));
if (this.task.type === 'reward' || this.task.type === 'habit') {
if (type === 'reward' || type === 'habit') {
classes.push('no-right-border');
}
if (type === 'reward') {
classes.push('reward-content');
}
return classes;
},
showStreak () {
@@ -432,6 +608,7 @@ export default {
...mapActions({
scoreChecklistItem: 'tasks:scoreChecklistItem',
collapseChecklist: 'tasks:collapseChecklist',
destroyTask: 'tasks:destroy',
}),
toggleChecklistItem (item) {
if (this.castingSpell) return;
@@ -439,15 +616,33 @@ export default {
this.scoreChecklistItem({taskId: this.task._id, itemId: item.id});
},
edit (e, task) {
if (this.isRunningYesterdailies) return;
// Prevent clicking on a link from opening the edit modal
const target = e.target || e.srcElement;
if (target.tagName === 'A') { // Link
return;
} else if (!this.$store.state.spellOptions.castingSpell) {
if (target.tagName === 'A') return; // clicked on a link
const isDropdown = this.$refs.taskDropdown.$el.contains(target);
const isEditAction = this.$refs.editTaskItem.contains(target);
if (isDropdown && !isEditAction) return;
if (!this.$store.state.spellOptions.castingSpell) {
this.$emit('editTask', task);
}
},
moveToTop () {
this.$emit('moveTo', this.task, 'top');
},
moveToBottom () {
this.$emit('moveTo', this.task, 'bottom');
},
destroy () {
if (!confirm(this.$t('sureDelete'))) return;
this.destroyTask(this.task);
this.$emit('taskDestroyed', this.task);
},
castEnd (e, task) {
this.$root.$emit('castEnd', task, 'task', e);
},