1
0

Fix closing popups when clicking outside of them (#378)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/378
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2021-01-17 10:36:57 +00:00
parent 6ef4a36bbc
commit 3313801174
7 changed files with 114 additions and 43 deletions

View File

@ -2,20 +2,18 @@
<div class="kanban-view">
<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
<div class="items">
<button @click="showFilters = !showFilters" class="button">
<button @click.prevent.stop="showFilters = !showFilters" class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
Filters
</button>
</div>
<transition name="fade">
<filters
@change="() => {filtersChanged = true; loadBuckets()}"
v-if="showFilters"
v-model="params"
/>
</transition>
<filter-popup
@change="() => {filtersChanged = true; loadBuckets()}"
:visible="showFilters"
v-model="params"
/>
</div>
<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
@ -265,7 +263,6 @@ import {Container, Draggable} from 'vue-smooth-dnd'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import User from '../../../components/misc/user'
import Labels from '../../../components/tasks/partials/labels'
import Filters from '../../../components/list/partials/filters'
import {filterObject} from '@/helpers/filterObject'
import {applyDrag} from '@/helpers/applyDrag'
@ -273,16 +270,17 @@ import {mapState} from 'vuex'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
import { LOADING, LOADING_MODULE } from '../../../store/mutation-types'
import FilterPopup from '@/components/list/partials/filter-popup'
export default {
name: 'Kanban',
components: {
FilterPopup,
Container,
Draggable,
Labels,
User,
PriorityLabel,
Filters,
},
data() {
return {

View File

@ -32,20 +32,18 @@
</span>
</button>
</div>
<button @click="showTaskFilter = !showTaskFilter" class="button">
<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
<span class="icon is-small">
<icon icon="filter"/>
</span>
Filters
</button>
</div>
<transition name="fade">
<filters
@change="loadTasks(1)"
v-if="showTaskFilter"
v-model="params"
/>
</transition>
<filter-popup
@change="loadTasks(1)"
:visible="showTaskFilter"
v-model="params"
/>
</div>
<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0">
@ -174,9 +172,9 @@ import EditTask from '../../../components/tasks/edit-task'
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
import taskList from '../../../components/tasks/mixins/taskList'
import {saveListView} from '@/helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
import Rights from '../../../models/rights.json'
import {mapState} from 'vuex'
import FilterPopup from '@/components/list/partials/filter-popup'
export default {
name: 'List',
@ -196,7 +194,7 @@ export default {
taskList,
],
components: {
Filters,
FilterPopup,
SingleTaskInList,
EditTask,
},

View File

@ -2,14 +2,14 @@
<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
<div class="filter-container">
<div class="items">
<button @click="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
<button @click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
class="button">
<span class="icon is-small">
<icon icon="th"/>
</span>
Columns
</button>
<button @click="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
<button @click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
class="button">
<span class="icon is-small">
<icon icon="filter"/>
@ -35,12 +35,12 @@
<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
</div>
</div>
<filters
@change="loadTasks(1)"
v-if="showTaskFilter"
v-model="params"
/>
</transition>
<filter-popup
@change="loadTasks(1)"
:visible="showTaskFilter"
v-model="params"
/>
</div>
<table class="table is-hoverable is-fullwidth">
@ -198,12 +198,12 @@ import DateTableCell from '../../../components/tasks/partials/date-table-cell'
import Fancycheckbox from '../../../components/input/fancycheckbox'
import Sort from '../../../components/tasks/partials/sort'
import {saveListView} from '@/helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
import FilterPopup from '@/components/list/partials/filter-popup'
export default {
name: 'Table',
components: {
Filters,
FilterPopup,
Sort,
Fancycheckbox,
DateTableCell,