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

drag tags to reorder (#10911)

Browse Source 
* drag tags to reorder

* change color, remove unneeded sortTag-call
This commit is contained in:
negue
2018-12-23 19:45:05 +01:00
committed by Matteo Pagliazzi
parent b66904a3a7
commit 19b75c6257
4 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
website/client/components/tasks/user.vue
View File

@@ -30,15 +30,29 @@
a.d-block(v-if="tagsType.key !== 'groups' && !editingTags", @click="editTags(tagsType.key)") {{ $t('editTags2') }}
.tags-list.container
.row(:class="{'no-gutters': !editingTags}")
template(v-if="editingTags && tagsType.key !== 'groups'")
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
.inline-edit-input-group.tag-edit-item.input-group
input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
.input-group-append(@click="removeTag(tagIndex, tagsType.key)")
.svg-icon.destroy-icon(v-html="icons.destroy")
.col-6(v-if="tagsType.key === 'tags'")
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event, tagsType.key)", v-model="newTag")
template(v-else)
template(v-if="editingTags && tagsType.key === 'tags'")
draggable(
v-if="tagsType.key === 'tags'",
v-model="tagsSnap[tagsType.key]",
class="row"
)
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
.inline-edit-input-group.tag-edit-item.input-group
.svg-icon.inline.drag(v-html="icons.drag")
input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
.input-group-append(@click="removeTag(tagIndex, tagsType.key)")
.svg-icon.destroy-icon(v-html="icons.destroy")
.col-6.dragSpace
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event, tagsType.key)", v-model="newTag")
template(v-if="editingTags && tagsType.key === 'challenges'")
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
.inline-edit-input-group.tag-edit-item.input-group
input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
.input-group-append(@click="removeTag(tagIndex, tagsType.key)")
.svg-icon.destroy-icon(v-html="icons.destroy")
template(v-if="!editingTags || tagsType.key === 'groups'")
.col-6(v-for="(tag, tagIndex) in tagsType.tags")
.custom-control.custom-checkbox
input.custom-control-input(
@@ -289,6 +303,23 @@
}
}
.drag {
cursor: grab;
margin: auto 0;
height: 20px;
width: 20px;
color: #C3C0C7;
&:hover {
color: #878190;
}
}
.dragSpace {
padding-left: 32px;
}
@media only screen and (max-width: 768px) {
.filter-panel {
max-width: none;
@@ -310,6 +341,7 @@ import habitIcon from 'assets/svg/habit.svg';
import dailyIcon from 'assets/svg/daily.svg';
import todoIcon from 'assets/svg/todo.svg';
import rewardIcon from 'assets/svg/reward.svg';
import dragIcon from 'assets/svg/drag_indicator.svg';
import uuid from 'uuid';
import Vue from 'vue';
@@ -320,6 +352,7 @@ import taskDefaults from 'common/script/libs/taskDefaults';
import brokenTaskModal from './brokenTaskModal';
import Item from 'client/components/inventory/item.vue';
import draggable from 'vuedraggable';
export default {
components: {
@@ -328,6 +361,7 @@ export default {
Item,
spells,
brokenTaskModal,
draggable,
},
directives: {
markdown,
@@ -347,6 +381,7 @@ export default {
daily: dailyIcon,
todo: todoIcon,
reward: rewardIcon,
drag: dragIcon,
}),
selectedTags: [],
temporarilySelectedTags: [],