ami/tl-vikunja
1
0
Fork 0
Code Activity

feat(components): align component name casing fancycheckbox

Browse Source
This commit is contained in:
Dominik Pschenitschni
2024-06-15 14:11:06 +02:00
parent 5d2c731c59
commit 541f608d3c
17 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/base/BaseCheckbox.vue
View File

@ -45,7 +45,7 @@ const emit = defineEmits<{
(event: 'update:modelValue', value: boolean): void
}>()
const checkboxId = ref(`fancycheckbox_${createRandomID()}`)
const checkboxId = ref(`checkbox_${createRandomID()}`)
</script>
<style lang="scss" scoped>

2
frontend/src/components/input/fancycheckbox.story.vue → frontend/src/components/input/FancyCheckbox.story.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import {ref} from 'vue'
import {logEvent} from 'histoire/client'
import FancyCheckbox from './fancycheckbox.vue'
import FancyCheckbox from './FancyCheckbox.vue'
const isDisabled = ref<boolean | undefined>()

20
frontend/src/components/input/fancycheckbox.vue → frontend/src/components/input/FancyCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<BaseCheckbox
class="fancycheckbox"
class="fancy-checkbox"
:class="{
'is-disabled': disabled,
'is-block': isBlock,
@ -9,10 +9,10 @@
:model-value="modelValue"
@update:modelValue="value => emit('update:modelValue', value)"
>
<CheckboxIcon class="fancycheckbox__icon" />
<CheckboxIcon class="fancy-checkbox__icon" />
<span
v-if="$slots.default"
class="fancycheckbox__content"
class="fancy-checkbox__content"
>
<slot />
</span>
@ -44,7 +44,7 @@ const emit = defineEmits<{
<style lang="scss" scoped>
.fancycheckbox {
.fancy-checkbox {
display: inline-block;
padding-right: 5px;
padding-top: 3px;
@ -55,13 +55,13 @@ const emit = defineEmits<{
}
}
.fancycheckbox__content {
.fancy-checkbox__content {
font-size: 0.8rem;
vertical-align: top;
padding-left: .5rem;
}
.fancycheckbox__icon:deep() {
.fancy-checkbox__icon:deep() {
position: relative;
z-index: 1;
stroke: var(--stroke-color, #c8ccd4);
@ -74,8 +74,8 @@ const emit = defineEmits<{
}
}
.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon,
.fancycheckbox:has(input:checked) .fancycheckbox__icon {
.fancy-checkbox:not(:has(input:disabled)):hover .fancy-checkbox__icon,
.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
--stroke-color: var(--primary);
}
</style>
@ -84,13 +84,13 @@ const emit = defineEmits<{
// Since css-has-pseudo doesn't work with deep classes,
// the following rules can't be scoped
.fancycheckbox:has(:not(input:checked)) .fancycheckbox__icon {
.fancy-checkbox:has(:not(input:checked)) .fancy-checkbox__icon {
path {
transition-delay: 0.05s;
}
}
.fancycheckbox:has(input:checked) .fancycheckbox__icon {
.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
path {
stroke-dashoffset: 60;
}

6
frontend/src/components/project/partials/filters.vue
View File

@ -11,12 +11,12 @@
/>
<div class="field is-flex is-flex-direction-column">
<Fancycheckbox
<FancyCheckbox
v-model="params.filter_include_nulls"
@blur="change()"
>
{{ $t('filters.attributes.includeNulls') }}
</Fancycheckbox>
</FancyCheckbox>
</div>
<FilterInputDocs />
@ -49,7 +49,7 @@ export const ALPHABETICAL_SORT = 'title'
<script setup lang="ts">
import {computed, ref, watch} from 'vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import FilterInput from '@/components/project/partials/FilterInput.vue'
import {useRoute} from 'vue-router'
import type {TaskFilterParams} from '@/services/taskCollection'

6
frontend/src/components/project/views/ProjectGantt.vue
View File

@ -37,12 +37,12 @@
</x-button>
</div>
</div>
<Fancycheckbox
<FancyCheckbox
v-model="filters.showTasksWithoutDates"
is-block
>
{{ $t('project.gantt.showTasksWithoutDates') }}
</Fancycheckbox>
</FancyCheckbox>
</div>
</card>
@ -81,7 +81,7 @@ import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import TaskForm from '@/components/tasks/TaskForm.vue'
import {createAsyncComponent} from '@/helpers/createAsyncComponent'

58
frontend/src/components/project/views/ProjectTable.vue
View File

@ -22,48 +22,48 @@
class="columns-filter"
:class="{'is-open': isOpen}"
>
<Fancycheckbox v-model="activeColumns.index">
<FancyCheckbox v-model="activeColumns.index">
#
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.done">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.done">
{{ $t('task.attributes.done') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.title">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.title">
{{ $t('task.attributes.title') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.priority">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.priority">
{{ $t('task.attributes.priority') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.labels">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.labels">
{{ $t('task.attributes.labels') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.assignees">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.assignees">
{{ $t('task.attributes.assignees') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.dueDate">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.dueDate">
{{ $t('task.attributes.dueDate') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.startDate">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.startDate">
{{ $t('task.attributes.startDate') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.endDate">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.endDate">
{{ $t('task.attributes.endDate') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.percentDone">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.percentDone">
{{ $t('task.attributes.percentDone') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.doneAt">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.doneAt">
{{ $t('task.attributes.doneAt') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.created">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.created">
{{ $t('task.attributes.created') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.updated">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.updated">
{{ $t('task.attributes.updated') }}
</Fancycheckbox>
<Fancycheckbox v-model="activeColumns.createdBy">
</FancyCheckbox>
<FancyCheckbox v-model="activeColumns.createdBy">
{{ $t('task.attributes.createdBy') }}
</Fancycheckbox>
</FancyCheckbox>
</card>
</template>
</Popup>
@ -277,7 +277,7 @@ import User from '@/components/misc/user.vue'
import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
import Labels from '@/components/tasks/partials/labels.vue'
import DateTableCell from '@/components/tasks/partials/date-table-cell.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import Sort from '@/components/tasks/partials/Sort.vue'
import FilterPopup from '@/components/project/partials/filter-popup.vue'
import Pagination from '@/components/misc/Pagination.vue'

6
frontend/src/components/tasks/partials/relatedTasks.vue
View File

@ -120,7 +120,7 @@
class="task"
>
<div class="is-flex is-align-items-center">
<Fancycheckbox
<FancyCheckbox
v-model="task.done"
class="task-done-checkbox"
@update:modelValue="toggleTaskDone(t)"
@ -199,7 +199,7 @@ import TaskRelationModel from '@/models/taskRelation'
import CustomTransition from '@/components/misc/CustomTransition.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/Multiselect.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {error, success} from '@/message'
import {useTaskStore} from '@/stores/tasks'
@ -469,7 +469,7 @@ async function toggleTaskDone(task: ITask) {
padding: 0.5rem;
}
// FIXME: The height of the actual checkbox in the <Fancycheckbox/> component is too much resulting in a
// FIXME: The height of the actual checkbox in the <FancyCheckbox/> component is too much resulting in a
// weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling
// of the component.
.task-done-checkbox {

6
frontend/src/components/tasks/partials/singleTaskInProject.vue
View File

@ -8,7 +8,7 @@
@mouseup.stop.self="openTaskDetail"
@mousedown.stop.self="focusTaskLink"
>
<Fancycheckbox
<FancyCheckbox
v-model="task.done"
:disabled="(isArchived || disabled) && !canMarkAsDone"
@update:modelValue="markAsDone"
@ -189,7 +189,7 @@ import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
import ProgressBar from '@/components/misc/ProgressBar.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import ColorBubble from '@/components/misc/ColorBubble.vue'
import CustomTransition from '@/components/misc/CustomTransition.vue'
@ -472,7 +472,7 @@ function focusTaskLink() {
opacity: 1;
}
:deep(.fancycheckbox) {
:deep(.fancy-checkbox) {
height: 18px;
padding-top: 0;
padding-right: .5rem;