This commit is contained in:
parent
63f5f446fd
commit
73bfd43560
|
@ -20,10 +20,10 @@ describe('List View Table', () => {
|
||||||
cy.get('.list-table .filter-container .items .button')
|
cy.get('.list-table .filter-container .items .button')
|
||||||
.contains('Columns')
|
.contains('Columns')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
|
cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .label')
|
||||||
.contains('Priority')
|
.contains('Priority')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
|
cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .label')
|
||||||
.contains('Done')
|
.contains('Done')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
|
|
|
@ -59,7 +59,7 @@ describe('Task', () => {
|
||||||
TaskFactory.create(1)
|
TaskFactory.create(1)
|
||||||
|
|
||||||
cy.visit('/lists/1/list')
|
cy.visit('/lists/1/list')
|
||||||
cy.get('.tasks .task .fancycheckbox label.check')
|
cy.get('.tasks .task .fancycheckbox .label')
|
||||||
.first()
|
.first()
|
||||||
.click()
|
.click()
|
||||||
cy.get('.global-notification')
|
cy.get('.global-notification')
|
||||||
|
|
4
src/assets/checkbox.svg
Normal file
4
src/assets/checkbox.svg
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="18px" height="18px" viewBox="0 0 18 18">
|
||||||
|
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
|
||||||
|
<polyline points="1 9 7 14 15 4"></polyline>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 240 B |
35
src/components/base/BaseCheckbox.vue
Normal file
35
src/components/base/BaseCheckbox.vue
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="base-checkbox" v-cy="'checkbox'">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:id="checkboxId"
|
||||||
|
class="is-sr-only"
|
||||||
|
:checked="modelValue"
|
||||||
|
@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
|
||||||
|
:disabled="disabled || undefined"
|
||||||
|
/>
|
||||||
|
<slot :checkboxId="checkboxId" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import {createRandomID} from '@/helpers/randomId'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'update:modelValue', value: boolean): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const checkboxId = ref(`fancycheckbox_${createRandomID()}`)
|
||||||
|
</script>
|
|
@ -1,65 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="{'is-disabled': disabled}" class="fancycheckbox">
|
<BaseCheckbox
|
||||||
<input
|
class="fancycheckbox checkbox"
|
||||||
:checked="checked"
|
:class="{
|
||||||
:disabled="disabled || undefined"
|
'is-disabled': disabled,
|
||||||
:id="checkBoxId"
|
'is-block': isBlock,
|
||||||
@change="(event) => updateData(event.target.checked)"
|
}"
|
||||||
type="checkbox"/>
|
:model-value="modelValue"
|
||||||
<label :for="checkBoxId" class="check">
|
@update:model-value="value => emit('update:modelValue', value)"
|
||||||
<svg height="18px" viewBox="0 0 18 18" width="18px">
|
#default="{checkboxId}"
|
||||||
<path
|
>
|
||||||
d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
|
<label :for="checkboxId" class="label">
|
||||||
<polyline points="1 9 7 14 15 4"></polyline>
|
<CheckboxImg />
|
||||||
</svg>
|
|
||||||
<span>
|
<span>
|
||||||
<slot></slot>
|
<slot/>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</BaseCheckbox>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import CheckboxImg from '@/assets/checkbox.svg?component'
|
||||||
|
|
||||||
import {createRandomID} from '@/helpers/randomId'
|
import BaseCheckbox from '@/components/base/BaseCheckbox.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
defineProps({
|
||||||
name: 'fancycheckbox',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checked: false,
|
|
||||||
checkBoxId: `fancycheckbox_${createRandomID()}`,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
modelValue: {
|
||||||
required: false,
|
type: Boolean,
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
},
|
||||||
|
isBlock: {
|
||||||
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
|
||||||
emits: ['update:modelValue', 'change'],
|
|
||||||
watch: {
|
|
||||||
modelValue: {
|
|
||||||
handler(modelValue) {
|
|
||||||
this.checked = modelValue
|
|
||||||
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateData(checked: boolean) {
|
|
||||||
this.checked = checked
|
|
||||||
this.$emit('update:modelValue', checked)
|
|
||||||
this.$emit('change', checked)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'update:modelValue', value: boolean): void
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
@ -75,11 +54,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
.label {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.check {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -107,11 +82,11 @@ svg {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.check:hover svg {
|
.label:hover svg {
|
||||||
stroke: var(--primary);
|
stroke: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-disabled .check:hover svg {
|
.checkbox:checked .label:hover svg {
|
||||||
stroke: #c8ccd4;
|
stroke: #c8ccd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -125,7 +100,7 @@ polyline {
|
||||||
stroke-dashoffset: 66;
|
stroke-dashoffset: 66;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox]:checked + .check {
|
.checkbox:checked + .label {
|
||||||
svg {
|
svg {
|
||||||
stroke: var(--primary);
|
stroke: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,11 +6,11 @@
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
<fancycheckbox
|
<fancycheckbox
|
||||||
v-model="filters.requireAllFilters"
|
v-model="filters.requireAllFilters"
|
||||||
@change="setFilterConcat()"
|
@update:model-value="setFilterConcat()"
|
||||||
>
|
>
|
||||||
{{ $t('filters.attributes.requireAll') }}
|
{{ $t('filters.attributes.requireAll') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
<fancycheckbox @change="setDoneFilter" v-model="filters.done">
|
<fancycheckbox @update:model-value="setDoneFilter" v-model="filters.done">
|
||||||
{{ $t('filters.attributes.showDoneTasks') }}
|
{{ $t('filters.attributes.showDoneTasks') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
<fancycheckbox
|
<fancycheckbox
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
/>
|
/>
|
||||||
<fancycheckbox
|
<fancycheckbox
|
||||||
v-model="filters.usePriority"
|
v-model="filters.usePriority"
|
||||||
@change="setPriority"
|
@update:model-value="setPriority"
|
||||||
>
|
>
|
||||||
{{ $t('filters.attributes.enablePriority') }}
|
{{ $t('filters.attributes.enablePriority') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
/>
|
/>
|
||||||
<fancycheckbox
|
<fancycheckbox
|
||||||
v-model="filters.usePercentDone"
|
v-model="filters.usePercentDone"
|
||||||
@change="setPercentDoneFilter"
|
@update:model-value="setPercentDoneFilter"
|
||||||
>
|
>
|
||||||
{{ $t('filters.attributes.enablePercentDone') }}
|
{{ $t('filters.attributes.enablePercentDone') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="{'is-loading': taskService.loading}" class="task loader-container">
|
<div :class="{'is-loading': taskService.loading}" class="task loader-container">
|
||||||
<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
|
<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @update:model-value="markAsDone" v-model="task.done"/>
|
||||||
<span
|
<span
|
||||||
v-if="showListColor && listColor !== ''"
|
v-if="showListColor && listColor !== ''"
|
||||||
:style="{backgroundColor: listColor }"
|
:style="{backgroundColor: listColor }"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
|
<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
|
||||||
<template #header>
|
<template #header>
|
||||||
<card class="gantt-options">
|
<card class="gantt-options">
|
||||||
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
|
<fancycheckbox is-block v-model="showTaskswithoutDates">
|
||||||
{{ $t('list.gantt.showTasksWithoutDates') }}
|
{{ $t('list.gantt.showTasksWithoutDates') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
<div class="range-picker">
|
<div class="range-picker">
|
||||||
|
|
|
@ -197,7 +197,7 @@ import Pagination from '@/components/misc/pagination.vue'
|
||||||
import Popup from '@/components/misc/popup.vue'
|
import Popup from '@/components/misc/popup.vue'
|
||||||
|
|
||||||
import {useTaskList} from '@/composables/taskList'
|
import {useTaskList} from '@/composables/taskList'
|
||||||
import type { ITask } from '@/models/task'
|
import type { ITask } from '@/modelTypes/ITask'
|
||||||
|
|
||||||
const ACTIVE_COLUMNS_DEFAULT = {
|
const ACTIVE_COLUMNS_DEFAULT = {
|
||||||
id: true,
|
id: true,
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
|
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
|
||||||
<header class="namespace-header">
|
<header class="namespace-header">
|
||||||
<fancycheckbox v-model="showArchived" @change="saveShowArchivedState" v-cy="'show-archived-check'">
|
<fancycheckbox v-model="showArchived" @update:model-value="saveShowArchivedState" v-cy="'show-archived-check'">
|
||||||
{{ $t('namespace.showArchived') }}
|
{{ $t('namespace.showArchived') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
|
|
||||||
|
|
|
@ -11,10 +11,10 @@
|
||||||
</x-button>
|
</x-button>
|
||||||
</template>
|
</template>
|
||||||
</datepicker-with-range>
|
</datepicker-with-range>
|
||||||
<fancycheckbox @change="setShowNulls" class="mr-2">
|
<fancycheckbox @update:model-value="setShowNulls" class="mr-2">
|
||||||
{{ $t('task.show.noDates') }}
|
{{ $t('task.show.noDates') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
<fancycheckbox @change="setShowOverdue">
|
<fancycheckbox @update:model-value="setShowOverdue">
|
||||||
{{ $t('task.show.overdue') }}
|
{{ $t('task.show.overdue') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
</p>
|
</p>
|
||||||
|
@ -58,7 +58,7 @@ import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
|
||||||
import {DATE_RANGES} from '@/components/date/dateRanges'
|
import {DATE_RANGES} from '@/components/date/dateRanges'
|
||||||
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||||
import LlamaCool from '@/assets/llama-cool.svg?component'
|
import LlamaCool from '@/assets/llama-cool.svg?component'
|
||||||
import type { ITask } from '@/models/task'
|
import type { ITask } from '@/modelTypes/ITask'
|
||||||
|
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
Reference in New Issue
Block a user