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

Task Modal Improvements (#9560)

Browse Source 
* start adding advanced options

* new imput

* partial colors

* update deps

* misc adds

* fix text color

* add advanced options

* initial reordering of task modal labels

* start to fix colors in the modal

* wip colors

* update package-lock.json

* fix merge

* finish modal

* refactor colors

* fix quick add

* fix colors

* new icon colors

* add markdown formatting help

* fix habits colors

* fix rewards colors

* fixed remaining colors

* start to inline inputs

* fix typ

* fixes

* habits hover state

* wip new task modal inputs

* bootstrap: upgrade to v4-beta3

* finish reward edit modal

* fix attributes allocation, checklists and add help tooltips for attributes and difficulty

* lots of fixes

* update datepicker

* misc fixes
This commit is contained in:
Matteo Pagliazzi
2018-01-08 18:43:57 +01:00
committed by GitHub
parent daa796454c
commit 6a109adbc5
32 changed files with 967 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,13 @@
approval-header(:task='task', v-if='this.task.group.id', :group='group')
.d-flex(:class="{'task-not-scoreable': isUser !== true}")
// Habits left side control
.left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
.task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="(isUser && controlClass.up !== 'task-habit-disabled') ? score('up') : null")
.left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
.svg-icon.positive(v-html="icons.positive")
// Dailies and todos left side control
.left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
.task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
.left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
// Task title, description and icons
.task-content(:class="contentClass")
.task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}")
@@ -55,7 +55,7 @@
)
.svg-icon(v-html="icons.checklist")
span {{ checklistProgress }}
label.custom-control.custom-checkbox.checklist-item(
.custom-control.custom-checkbox.checklist-item(
v-if='!task.collapseChecklist',
v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
)
@@ -64,9 +64,9 @@
:checked="item.completed",
@change="toggleChecklistItem(item)",
:disabled="castingSpell",
:id="`checklist-${item.id}`"
)
span.custom-control-indicator
span.custom-control-description(v-markdown='item.text')
label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}`")
.icons.small-text.d-flex.align-items-center
.d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
.svg-icon.calendar(v-html="icons.calendar")
@@ -97,11 +97,11 @@
.tag-label(v-for="tag in getTagsFor(task)") {{tag}}
// Habits right side control
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
.task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="(isUser && controlClass.down !== 'task-habit-disabled') ? score('down') : null")
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
.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", @click="isUser ? score('down') : null")
.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')
@@ -162,7 +162,7 @@
.dropdown-icon {
width: 4px;
height: 16px;
margin-right: 10px;
margin-right: 0px;
color: $gray-100 !important;
}
@@ -286,11 +286,11 @@
text-decoration: line-through;
}
.custom-control-indicator {
.custom-control-label::before {
margin-top: -2px;
}
.custom-control-description {
.custom-control-label {
margin-left: 6px;
padding-top: 0px;
min-width: 0px;
@@ -435,6 +435,7 @@
.daily-todo-control {
margin-top: 16px;
border-radius: 2px;
margin-left: -1px;
}
.reward-control {
@@ -449,7 +450,6 @@
.small-text {
margin-top: 4px;
color: $yellow-10;
font-style: initial;
font-weight: bold;
}
@@ -590,7 +590,7 @@ export default {
const type = this.task.type;
const classes = [];
classes.push(this.getTaskClasses(this.task, 'content', this.dueDate));
classes.push(this.getTaskClasses(this.task, 'control', this.dueDate).content);
if (type === 'reward' || type === 'habit') {
classes.push('no-right-border');