BeatLink/vikunja
1
0
Fork 0
forked from vikunja/vikunja
Code Pull Requests 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
Signed by untrusted user: dpschen
GPG Key ID: B257AC0149F43A77
17 changed files with 79 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/cypress/e2e/project/project-view-gantt.spec.ts
View File

@ -52,7 +52,7 @@ describe('Project View Gantt', () => {
})
cy.visit('/projects/1/2')
cy.get('.gantt-options .fancycheckbox')
cy.get('.gantt-options .fancy-checkbox')
.contains('Show tasks which don\'t have dates set')
.click()

4
frontend/cypress/e2e/project/project-view-table.spec.ts
View File

@ -24,10 +24,10 @@ describe('Project View Table', () => {
cy.get('.project-table .filter-container .button')
.contains('Columns')
.click()
cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox')
cy.get('.project-table .filter-container .card.columns-filter .card-content .fancy-checkbox')
.contains('Priority')
.click()
cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox')
cy.get('.project-table .filter-container .card.columns-filter .card-content .fancy-checkbox')
.contains('Done')
.click()

2
frontend/cypress/e2e/task/task.spec.ts
View File

@ -97,7 +97,7 @@ describe('Task', () => {
TaskFactory.create(1)
cy.visit('/projects/1/1')
cy.get('.tasks .task .fancycheckbox')
cy.get('.tasks .task .fancy-checkbox')
.first()
.click()
cy.get('.global-notification')

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;

6
frontend/src/views/project/ListProjects.vue
View File

@ -5,12 +5,12 @@
:class="{'is-loading': loading}"
>
<header class="project-header">
<Fancycheckbox
<FancyCheckbox
v-model="showArchived"
v-cy="'show-archived-check'"
>
{{ $t('project.showArchived') }}
</Fancycheckbox>
</FancyCheckbox>
<div class="action-buttons">
<x-button
@ -40,7 +40,7 @@
import {computed} from 'vue'
import {useI18n} from 'vue-i18n'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
import {useTitle} from '@/composables/useTitle'

6
frontend/src/views/project/settings/webhooks.vue
View File

@ -21,7 +21,7 @@ import {formatDateShort} from '@/helpers/time/formatDate'
import User from '@/components/misc/user.vue'
import WebhookModel from '@/models/webhook'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {success} from '@/message'
import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
@ -192,7 +192,7 @@ function validateSelectedEvents() {
{{ $t('project.webhooks.eventsHint') }}
</p>
<div class="control">
<Fancycheckbox
<FancyCheckbox
v-for="event in availableEvents"
:key="event"
v-model="newWebhookEvents[event]"
@ -200,7 +200,7 @@ function validateSelectedEvents() {
@update:modelValue="validateSelectedEvents"
>
{{ event }}
</Fancycheckbox>
</FancyCheckbox>
</div>
<p
v-if="!selectedEventsValid"

10
frontend/src/views/tasks/ShowTasks.vue
View File

@ -22,19 +22,19 @@
</x-button>
</template>
</DatepickerWithRange>
<Fancycheckbox
<FancyCheckbox
:model-value="showNulls"
class="mr-2"
@update:modelValue="setShowNulls"
>
{{ $t('task.show.noDates') }}
</Fancycheckbox>
<Fancycheckbox
</FancyCheckbox>
<FancyCheckbox
:model-value="showOverdue"
@update:modelValue="setShowOverdue"
>
{{ $t('task.show.overdue') }}
</Fancycheckbox>
</FancyCheckbox>
</p>
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
<h3 class="has-text-centered mt-6">
@ -76,7 +76,7 @@ import {useI18n} from 'vue-i18n'
import {formatDate} from '@/helpers/time/formatDate'
import {setTitle} from '@/helpers/setTitle'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import SingleTaskInProject from '@/components/tasks/partials/singleTaskInProject.vue'
import DatepickerWithRange from '@/components/date/DatepickerWithRange.vue'
import {DATE_RANGES} from '@/components/date/dateRanges'

6
frontend/src/views/teams/EditTeam.vue
View File

@ -45,13 +45,13 @@
class="control is-expanded"
:class="{ 'is-loading': teamService.loading }"
>
<Fancycheckbox
<FancyCheckbox
v-model="team.isPublic"
:disabled="teamMemberService.loading || undefined"
:class="{ 'disabled': teamService.loading }"
>
{{ $t('team.attributes.isPublicDescription') }}
</Fancycheckbox>
</FancyCheckbox>
</div>
</div>
<div class="field">
@ -263,7 +263,7 @@ import {useI18n} from 'vue-i18n'
import {useRoute, useRouter} from 'vue-router'
import Editor from '@/components/input/AsyncEditor'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import Multiselect from '@/components/input/Multiselect.vue'
import User from '@/components/misc/user.vue'

6
frontend/src/views/teams/NewTeam.vue
View File

@ -37,12 +37,12 @@
class="control is-expanded"
:class="{ 'is-loading': teamService.loading }"
>
<Fancycheckbox
<FancyCheckbox
v-model="team.isPublic"
:class="{ 'disabled': teamService.loading }"
>
{{ $t('team.attributes.isPublicDescription') }}
</Fancycheckbox>
</FancyCheckbox>
</div>
</div>
<p
@ -66,7 +66,7 @@ import TeamModel from '@/models/team'
import TeamService from '@/services/team'
import CreateEdit from '@/components/misc/CreateEdit.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {useTitle} from '@/composables/useTitle'
import {useRouter} from 'vue-router'

10
frontend/src/views/user/settings/ApiTokens.vue
View File

@ -5,7 +5,7 @@ import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
import XButton from '@/components/input/button.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import ApiTokenModel from '@/models/apiTokenModel'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import {MILLISECONDS_A_DAY} from '@/constants/date'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
@ -299,26 +299,26 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
<template
v-if="Object.keys(routes).length >= 1"
>
<Fancycheckbox
<FancyCheckbox
v-model="newTokenPermissionsGroup[group]"
class="mr-2 is-capitalized has-text-weight-bold"
@update:modelValue="checked => selectPermissionGroup(group, checked)"
>
{{ formatPermissionTitle(group) }}
</Fancycheckbox>
</FancyCheckbox>
<br>
</template>
<template
v-for="(paths, route) in routes"
:key="group+'-'+route"
>
<Fancycheckbox
<FancyCheckbox
v-model="newTokenPermissions[group][route]"
class="ml-4 mr-2 is-capitalized"
@update:modelValue="checked => toggleGroupPermissionsFromChild(group, checked)"
>
{{ formatPermissionTitle(route) }}
</Fancycheckbox>
</FancyCheckbox>
<br>
</template>
</div>