mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-14 13:17:24 +01:00
Task Modal Improvements (#9560)
* 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
GitHub
@@ -1,29 +1,37 @@
|
||||
<template lang="pug">
|
||||
form(v-if="task", @submit.stop.prevent="submit()")
|
||||
b-modal#task-modal(size="sm", @hidden="onClose()")
|
||||
.task-modal-header(slot="modal-header", :class="[cssClass]")
|
||||
.task-modal-header(slot="modal-header", :class="cssClass('bg')")
|
||||
.clearfix
|
||||
h1.float-left {{ title }}
|
||||
.float-right.d-flex.align-items-center
|
||||
span.cancel-task-btn.mr-2(v-if="purpose !== 'create'", v-once, @click="cancel()") {{ $t('cancel') }}
|
||||
span.cancel-task-btn.mr-2(v-once, @click="cancel()") {{ $t('cancel') }}
|
||||
button.btn.btn-secondary(type="submit", v-once) {{ $t('save') }}
|
||||
.form-group
|
||||
label(v-once) {{ `${$t('text')}*` }}
|
||||
input.form-control.title-input(
|
||||
type="text", :class="[`${cssClass}-modal-input`]",
|
||||
type="text",
|
||||
required, v-model="task.text",
|
||||
autofocus, spellcheck="true",
|
||||
:disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
|
||||
)
|
||||
.form-group
|
||||
label(v-once) {{ $t('notes') }}
|
||||
textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3")
|
||||
label.d-flex.align-items-center.justify-content-between(v-once)
|
||||
span {{ $t('notes') }}
|
||||
small(v-once)
|
||||
a(target="_blank", href="http://habitica.wikia.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
|
||||
|
||||
textarea.form-control(v-model="task.notes", rows="3")
|
||||
.task-modal-content
|
||||
.option(v-if="task.type === 'reward'")
|
||||
label(v-once) {{ $t('cost') }}
|
||||
input(type="number", v-model="task.value", required, placeholder="1.0", step="0.01", min="0")
|
||||
.svg-icon.gold(v-html="icons.gold")
|
||||
.option(v-if="checklistEnabled")
|
||||
.option.mt-0(v-if="task.type === 'reward'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('cost') }}
|
||||
.input-group
|
||||
.input-group-prepend.input-group-icon
|
||||
.svg-icon.gold(v-html="icons.gold")
|
||||
input.form-control(type="number", v-model="task.value", required, placeholder="1.0", step="0.01", min="0")
|
||||
|
||||
.option.mt-0(v-if="checklistEnabled")
|
||||
label(v-once) {{ $t('checklist') }}
|
||||
br
|
||||
draggable(
|
||||
@@ -34,67 +42,68 @@
|
||||
.inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
|
||||
span.grippy
|
||||
input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
|
||||
span.input-group-btn(@click="removeChecklistItem($index)")
|
||||
span.input-group-append(@click="removeChecklistItem($index)")
|
||||
.svg-icon.destroy-icon(v-html="icons.destroy")
|
||||
input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
|
||||
.d-flex.justify-content-center(v-if="task.type === 'habit'")
|
||||
.option-item(:class="optionClass(task.up === true)", @click="toggleUpDirection()")
|
||||
.option-item-box
|
||||
.task-control.habit-control(:class="controlClass.up + '-control-habit'")
|
||||
.svg-icon.positive(v-html="icons.positive")
|
||||
.option-item-label(v-once) {{ $t('positive') }}
|
||||
.option-item(:class="optionClass(task.down === true)", @click="toggleDownDirection()")
|
||||
.option-item-box
|
||||
.task-control.habit-control(:class="controlClass.down + '-control-habit'")
|
||||
.svg-icon.negative(v-html="icons.negative")
|
||||
.option-item-label(v-once) {{ $t('negative') }}
|
||||
.option-item.habit-control(@click="toggleUpDirection()", :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
|
||||
.option-item-box(:class="task.up ? cssClass('bg') : ''")
|
||||
.task-control.habit-control
|
||||
.svg-icon.positive(v-html="icons.positive", :class="task.up ? cssClass('icon') : ''")
|
||||
.option-item-label(:class="task.up ? cssClass('text') : ''") {{ $t('positive') }}
|
||||
.option-item.habit-control(@click="toggleDownDirection()", :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
|
||||
.option-item-box(:class="task.down ? cssClass('bg') : ''")
|
||||
.task-control.habit-control
|
||||
.svg-icon.negative(v-html="icons.negative", :class="task.down ? cssClass('icon') : ''")
|
||||
.option-item-label(:class="task.down ? cssClass('text') : ''") {{ $t('negative') }}
|
||||
template(v-if="task.type !== 'reward'")
|
||||
label(v-once)
|
||||
span.float-left {{ $t('difficulty') }}
|
||||
// @TODO .svg-icon.info-icon(v-html="icons.information")
|
||||
.d-flex.justify-content-center
|
||||
.option-item(:class="optionClass(task.priority === 0.1)", @click="setDifficulty(0.1)")
|
||||
.option-item-box
|
||||
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop="$t('difficultyHelp')")
|
||||
.d-flex.justify-content-center.difficulty-options
|
||||
.option-item(:class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(0.1)")
|
||||
.option-item-box(:class="task.priority === 0.1 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
|
||||
.option-item-label(v-once) {{ $t('trivial') }}
|
||||
.option-item(:class="optionClass(task.priority === 1)", @click="setDifficulty(1)")
|
||||
.option-item-box
|
||||
.option-item-label(:class="task.priority === 0.1 ? cssClass('text') : ''") {{ $t('trivial') }}
|
||||
.option-item(:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1)")
|
||||
.option-item-box(:class="task.priority === 1 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
|
||||
.option-item-label(v-once) {{ $t('easy') }}
|
||||
.option-item(:class="optionClass(task.priority === 1.5)", @click="setDifficulty(1.5)")
|
||||
.option-item-box
|
||||
.option-item-label(:class="task.priority === 1 ? cssClass('text') : ''") {{ $t('easy') }}
|
||||
.option-item(:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1.5)")
|
||||
.option-item-box(:class="task.priority === 1.5 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
|
||||
.option-item-label(v-once) {{ $t('medium') }}
|
||||
.option-item(:class="optionClass(task.priority === 2)", @click="setDifficulty(2)")
|
||||
.option-item-box
|
||||
.option-item-label(:class="task.priority === 1.5 ? cssClass('text') : ''") {{ $t('medium') }}
|
||||
.option-item(:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(2)")
|
||||
.option-item-box(:class="task.priority === 2 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
|
||||
.option-item-label(v-once) {{ $t('hard') }}
|
||||
.option-item-label(:class="task.priority === 2 ? cssClass('text') : ''") {{ $t('hard') }}
|
||||
.option(v-if="task.type === 'todo'")
|
||||
label(v-once) {{ $t('dueDate') }}
|
||||
datepicker.d-inline-block(
|
||||
v-model="task.date",
|
||||
:clearButton='true',
|
||||
clearButtonIcon='category-select',
|
||||
:clearButtonText='$t("clear")',
|
||||
:todayButton='!challengeAccessRequired',
|
||||
todayButtonIcon='category-select',
|
||||
:todayButtonText='$t("today")',
|
||||
:disabled-picker='challengeAccessRequired'
|
||||
)
|
||||
.form-group
|
||||
label(v-once) {{ $t('dueDate') }}
|
||||
datepicker(
|
||||
v-model="task.date",
|
||||
:calendarIcon="icons.calendar",
|
||||
:clearButton='true',
|
||||
:clearButtonText='$t("clear")',
|
||||
:todayButton='!challengeAccessRequired',
|
||||
:todayButtonText='$t("today")',
|
||||
:disabled-picker='challengeAccessRequired'
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
label(v-once) {{ $t('startDate') }}
|
||||
datepicker.d-inline-block(
|
||||
v-model="task.startDate",
|
||||
:clearButton='false',
|
||||
:todayButton='!challengeAccessRequired',
|
||||
todayButtonIcon='category-select',
|
||||
:todayButtonText='$t("today")',
|
||||
:disabled-picker='challengeAccessRequired'
|
||||
)
|
||||
.form-group
|
||||
label(v-once) {{ $t('startDate') }}
|
||||
datepicker(
|
||||
v-model="task.startDate",
|
||||
:calendarIcon="icons.calendar",
|
||||
:clearButton="false",
|
||||
:todayButton="!challengeAccessRequired",
|
||||
:todayButtonText="$t('today')",
|
||||
:disabled-picker="challengeAccessRequired"
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('repeats') }}
|
||||
b-dropdown(:text="$t(task.frequency)")
|
||||
b-dropdown.inline-dropdown(:text="$t(task.frequency)")
|
||||
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']",
|
||||
:key="frequency", @click="task.frequency = frequency",
|
||||
:disabled='challengeAccessRequired',
|
||||
@@ -102,82 +111,138 @@
|
||||
| {{ $t(frequency) }}
|
||||
.form-group
|
||||
label(v-once) {{ $t('repeatEvery') }}
|
||||
input(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
|
||||
| {{ repeatSuffix }}
|
||||
br
|
||||
.input-group
|
||||
input.form-control(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
|
||||
.input-group-append.input-group-text {{ repeatSuffix }}
|
||||
template(v-if="task.frequency === 'weekly'")
|
||||
.form-check-inline.weekday-check(
|
||||
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
|
||||
:key="dayNumber",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }}
|
||||
.form-group
|
||||
label.d-block(v-once) {{ $t('repeatOn') }}
|
||||
.form-check-inline.weekday-check.mr-0(
|
||||
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
|
||||
:key="dayNumber",
|
||||
)
|
||||
.custom-control.custom-checkbox.custom-control-inline
|
||||
input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired', :id="`weekday-${dayNumber}`")
|
||||
label.custom-control-label(v-once, :for="`weekday-${dayNumber}`") {{ weekdaysMin(dayNumber) }}
|
||||
template(v-if="task.frequency === 'monthly'")
|
||||
label.custom-control.custom-radio
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ $t('dayOfMonth') }}
|
||||
label.custom-control.custom-radio
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ $t('dayOfWeek') }}
|
||||
label.d-block(v-once) {{ $t('repeatOn') }}
|
||||
.form-radion-inline.mr-0
|
||||
.custom-control.custom-radio.custom-control-inline
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth", id="repeat-dayOfMonth")
|
||||
label.custom-control-label(for="repeat-dayOfMonth") {{ $t('dayOfMonth') }}
|
||||
.custom-control.custom-radio.custom-control-inline
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek")
|
||||
label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
|
||||
|
||||
.tags-select.option(v-if="isUserTask")
|
||||
.tags-inline
|
||||
label(v-once) {{ $t('tags') }}
|
||||
.category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
|
||||
span.category-select(v-if='task.tags && task.tags.length === 0')
|
||||
.tags-none {{$t('none')}}
|
||||
.dropdown-toggle
|
||||
span.category-select(v-else)
|
||||
.category-label(v-for='tagName in truncatedSelectedTags', :title="tagName") {{ tagName }}
|
||||
.tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
|
||||
.dropdown-toggle
|
||||
.tags-inline.form-group.row
|
||||
label.col-12(v-once) {{ $t('tags') }}
|
||||
.col-12
|
||||
.category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
|
||||
span.category-select(v-if='task.tags && task.tags.length === 0')
|
||||
.tags-none {{$t('none')}}
|
||||
.dropdown-toggle
|
||||
span.category-select(v-else)
|
||||
.category-label(v-for='tagName in truncatedSelectedTags', :title="tagName") {{ tagName }}
|
||||
.tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
|
||||
.dropdown-toggle
|
||||
tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
|
||||
|
||||
.option(v-if="task.type === 'habit'")
|
||||
label(v-once) {{ $t('resetStreak') }}
|
||||
b-dropdown.streak-dropdown(:text="$t(task.frequency)")
|
||||
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
|
||||
| {{ $t(frequency) }}
|
||||
|
||||
.option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('restoreStreak') }}
|
||||
input(type="number", v-model="task.streak", min="0", required, :disabled='challengeAccessRequired')
|
||||
label(v-once) {{ $t('resetStreak') }}
|
||||
b-dropdown.inline-dropdown(:text="$t(task.frequency)")
|
||||
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
|
||||
| {{ $t(frequency) }}
|
||||
|
||||
.option.group-options(v-if='groupId')
|
||||
label(v-once) Assigned To
|
||||
.category-wrap(@click="showAssignedSelect = !showAssignedSelect")
|
||||
span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
|
||||
span.category-select(v-else)
|
||||
span(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
|
||||
.category-box(v-if="showAssignedSelect")
|
||||
.container
|
||||
.row
|
||||
.form-check.col-6(
|
||||
v-for="member in members",
|
||||
:key="member._id",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ member.profile.name }}
|
||||
.form-group.row
|
||||
label.col-12(v-once) {{ $t('assignedTo') }}
|
||||
.col-12
|
||||
.category-wrap(@click="showAssignedSelect = !showAssignedSelect")
|
||||
span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
|
||||
span.category-select(v-else)
|
||||
span(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
|
||||
.category-box(v-if="showAssignedSelect")
|
||||
.container
|
||||
.row
|
||||
.form-check.col-6(
|
||||
v-for="member in members",
|
||||
:key="member._id",
|
||||
)
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)', :id="`assigned-${member._id}`")
|
||||
label.custom-control-label(v-once, :for="`assigned-${member._id}`") {{ member.profile.name }}
|
||||
|
||||
.row
|
||||
button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
|
||||
.row
|
||||
button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
|
||||
|
||||
.option.group-options(v-if='groupId')
|
||||
label(v-once) Needs Approval
|
||||
toggle-switch(:label='""',
|
||||
:checked="requiresApproval",
|
||||
@change="updateRequiresApproval")
|
||||
.form-group
|
||||
label(v-once) {{ $t('approvalRequired') }}
|
||||
toggle-switch.d-inline-block(
|
||||
label="",
|
||||
:checked="requiresApproval",
|
||||
@change="updateRequiresApproval"
|
||||
)
|
||||
|
||||
.task-modal-footer(slot="modal-footer")
|
||||
span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }}
|
||||
span.delete-task-btn(v-once, v-if='canDelete', @click="destroy()") {{ $t('delete') }}
|
||||
.reward-delete.delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="task.type === 'reward' && purpose !== 'create'")
|
||||
.svg-icon.d-inline-b(v-html="icons.destroy")
|
||||
span {{ $t('deleteTask') }}
|
||||
|
||||
.advanced-settings(v-if="task.type !== 'reward'")
|
||||
.d-flex.justify-content-between.align-items-center
|
||||
h3 {{ $t('advancedSettings') }}
|
||||
.toggle-up(@click = "showAdvancedOptions = !showAdvancedOptions")
|
||||
.svg-icon(v-html="icons.down", :class="{'toggle-open': showAdvancedOptions}")
|
||||
b-collapse#advancedOptionsCollapse(v-model="showAdvancedOptions")
|
||||
.advanced-settings-body
|
||||
.option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('restoreStreak') }}
|
||||
.input-group
|
||||
.input-group-prepend.streak-addon.input-group-icon
|
||||
.svg-icon(v-html="icons.streak")
|
||||
input.form-control(type="number", v-model="task.streak", min="0", required, :disabled='challengeAccessRequired')
|
||||
|
||||
.option(v-if="task.type === 'habit' && isUserTask && purpose === 'edit' && (task.up || task.down)")
|
||||
.form-group
|
||||
label(v-once) {{ $t('restoreStreak') }}
|
||||
.row
|
||||
.col-6(v-if="task.up")
|
||||
.input-group
|
||||
.input-group-prepend.positive-addon.input-group-icon
|
||||
.svg-icon(v-html="icons.positive")
|
||||
input.form-control(
|
||||
type="number", v-model="task.counterUp", min="0", required,
|
||||
:disabled="challengeAccessRequired",
|
||||
)
|
||||
.col-6(v-if="task.down")
|
||||
.input-group
|
||||
.input-group-prepend.negative-addon.input-group-icon
|
||||
.svg-icon(v-html="icons.negative")
|
||||
input.form-control(
|
||||
type="number", v-model="task.counterDown", min="0", required,
|
||||
:disabled="challengeAccessRequired",
|
||||
)
|
||||
|
||||
.option(v-if="isUserTask && task.type !== 'reward'")
|
||||
.form-group
|
||||
label(v-once)
|
||||
span.float-left {{ $t('attributeAllocation') }}
|
||||
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop.html="$t('attributeAllocationHelp')")
|
||||
.attributes
|
||||
.custom-control.custom-radio.custom-control-inline(v-for="attr in ATTRIBUTES", :key="attr")
|
||||
input.custom-control-input(:id="`attribute-${attr}`", type="radio", :value="attr", v-model="task.attribute")
|
||||
label.custom-control-label.attr-description(:for="`attribute-${attr}`", v-once, v-b-popover.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}
|
||||
|
||||
.delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="purpose !== 'create'")
|
||||
.svg-icon.d-inline-b(v-html="icons.destroy")
|
||||
span {{ $t('deleteTask') }}
|
||||
|
||||
.task-modal-footer.d-flex.justify-content-center.align-items-center(slot="modal-footer")
|
||||
span.cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
|
||||
button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -194,13 +259,17 @@
|
||||
|
||||
input, textarea {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.16);
|
||||
opacity: 0.64;
|
||||
color: $white !important;
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
color: rgba($white, 0.64) !important;
|
||||
transition-property: border-color, box-shadow, color, background;
|
||||
|
||||
&:focus {
|
||||
&:focus, &:active {
|
||||
color: $white !important;
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
|
||||
}
|
||||
|
||||
&:focus, &:active, &:hover {
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -237,7 +306,7 @@
|
||||
|
||||
input {
|
||||
background: $white;
|
||||
border: 1px solid $gray-500;
|
||||
border: 1px solid $gray-400;
|
||||
color: $gray-200 !important;
|
||||
|
||||
&:focus {
|
||||
@@ -257,31 +326,39 @@
|
||||
.difficulty-trivial-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.difficulty-normal-icon {
|
||||
width: 36px;
|
||||
height: 16px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.difficulty-medium-icon {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.difficulty-hard-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.difficulty-options .option-item-selected .svg-icon {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
@@ -292,12 +369,6 @@
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
.svg-icon, .option-item-label {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
@@ -307,23 +378,38 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.habit-control.task-habit-disabled-control-habit {
|
||||
color: $white !important;
|
||||
border: none;
|
||||
background: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: $gray-50;
|
||||
text-align: center;
|
||||
transition-property: none;
|
||||
}
|
||||
}
|
||||
|
||||
.habit-control {
|
||||
.option-item-box {
|
||||
background: $white;
|
||||
border: 2px solid $gray-600;
|
||||
|
||||
.habit-control { background: $gray-300; }
|
||||
.svg-icon { color: $white; }
|
||||
}
|
||||
|
||||
&-enabled {
|
||||
.option-item-box {
|
||||
border: 2px solid transparent;
|
||||
transition-property: none;
|
||||
|
||||
.habit-control { background: $white !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-wrap {
|
||||
cursor: pointer;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
@@ -342,20 +428,12 @@
|
||||
position: relative;
|
||||
|
||||
.tags-inline {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.category-wrap {
|
||||
cursor: inherit;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
margin-left: 4em;
|
||||
display: inline-block;
|
||||
|
||||
&.active {
|
||||
border-color: $purple-500;
|
||||
@@ -381,7 +459,7 @@
|
||||
}
|
||||
|
||||
.tags-more {
|
||||
color: #a5a1ac;
|
||||
color: $gray-300;
|
||||
flex: 0 1 auto;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
@@ -411,17 +489,20 @@
|
||||
|
||||
.tags-popup {
|
||||
position: absolute;
|
||||
top: 3.5em;
|
||||
left: 6.2em;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.streak-dropdown {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.checklist-group {
|
||||
border-top: 1px solid $gray-500;
|
||||
|
||||
.input-group-append {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// From: https://codepen.io/zachariab/pen/wkrbc
|
||||
@@ -438,9 +519,8 @@
|
||||
margin-top: .5em;
|
||||
margin-right: .3em;
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 2px;
|
||||
color: #cccccc;
|
||||
color: $gray-300;
|
||||
text-shadow: 1px 0 1px black;
|
||||
}
|
||||
|
||||
@@ -478,6 +558,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.reward-delete {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.delete-task-btn, .cancel-task-btn {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -486,25 +571,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.delete-task-btn {
|
||||
color: $red-50;
|
||||
|
||||
.svg-icon {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
margin-right: 8.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-modal-footer {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 24px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
margin-top: 50px;
|
||||
padding: 16px 24px;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.delete-task-btn {
|
||||
color: $red-50;
|
||||
}
|
||||
|
||||
.cancel-task-btn {
|
||||
margin-right: 16px;
|
||||
color: $blue-10;
|
||||
}
|
||||
}
|
||||
@@ -513,6 +595,34 @@
|
||||
margin-left: 0px;
|
||||
width: 57px;
|
||||
}
|
||||
|
||||
.advanced-settings {
|
||||
background: $gray-700;
|
||||
margin-left: -23px;
|
||||
margin-right: -23px;
|
||||
padding: 16px 24px;
|
||||
|
||||
&-body {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $gray-10;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.attributes .custom-control {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.toggle-open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.attr-description {
|
||||
border-bottom: 1px dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@@ -525,8 +635,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.gold {
|
||||
width: 24px;
|
||||
margin-left: 5em;
|
||||
margin-top: -2.4em;
|
||||
margin: 0 7px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -547,8 +656,11 @@ import difficultyHardIcon from 'assets/svg/difficulty-hard.svg';
|
||||
import difficultyNormalIcon from 'assets/svg/difficulty-normal.svg';
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
import negativeIcon from 'assets/svg/negative.svg';
|
||||
import streakIcon from 'assets/svg/streak.svg';
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import goldIcon from 'assets/svg/gold.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import calendarIcon from 'assets/svg/calendar.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -575,12 +687,22 @@ export default {
|
||||
positive: positiveIcon,
|
||||
destroy: deleteIcon,
|
||||
gold: goldIcon,
|
||||
down: downIcon,
|
||||
streak: streakIcon,
|
||||
calendar: calendarIcon,
|
||||
}),
|
||||
requiresApproval: false, // We can't set task.group fields so we use this field to toggle
|
||||
members: [],
|
||||
memberNamesById: {},
|
||||
assignedMembers: [],
|
||||
checklist: [],
|
||||
showAdvancedOptions: false,
|
||||
attributesStrings: {
|
||||
str: 'strength',
|
||||
int: 'intelligence',
|
||||
con: 'constitution',
|
||||
per: 'perception',
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -615,6 +737,7 @@ export default {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
dayMapping: 'constants.DAY_MAPPING',
|
||||
ATTRIBUTES: 'constants.ATTRIBUTES',
|
||||
}),
|
||||
groupAccessRequiredAndOnPersonalPage () {
|
||||
if (!this.groupId && this.task.group && this.task.group.id) return true;
|
||||
@@ -643,12 +766,6 @@ export default {
|
||||
const type = this.$t(this.task.type);
|
||||
return this.$t(this.purpose === 'edit' ? 'editATask' : 'createTask', {type});
|
||||
},
|
||||
cssClass () {
|
||||
return this.getTaskClasses(this.task, this.purpose === 'edit' ? 'editModal' : 'createModal');
|
||||
},
|
||||
controlClass () {
|
||||
return this.getTaskClasses(this.task, this.purpose === 'edit' ? 'control' : 'controlCreate');
|
||||
},
|
||||
isUserTask () {
|
||||
return !this.challengeId && !this.groupId;
|
||||
},
|
||||
@@ -707,6 +824,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
|
||||
cssClass (suffix) {
|
||||
return this.getTaskClasses(this.task, `${this.purpose === 'edit' ? 'edit' : 'create'}-modal-${suffix}`);
|
||||
},
|
||||
closeTagsPopup () {
|
||||
this.showTagsSelect = false;
|
||||
},
|
||||
@@ -732,13 +852,6 @@ export default {
|
||||
sorting.splice(data.newIndex, 0, movingItem);
|
||||
this.task.checklist = sorting;
|
||||
},
|
||||
optionClass (activeCondition) {
|
||||
if (activeCondition) {
|
||||
return [`${this.cssClass}-color`, 'option-item-selected'];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
addChecklistItem (e) {
|
||||
let checkListItem = {
|
||||
id: uuid.v4(),
|
||||
|
||||
Reference in New Issue
Block a user