feat: use BaseButton where easily possible

This replaces links with BaseButton components. BaseButton will use `<button type="button">` inside for this case. This improves accessibility a lot. Also we might be able to remove the `.stop` modifiers in some places because AFAIK the button element stops propagation by default.
This commit is contained in:
Dominik Pschenitschni 2022-05-11 01:14:38 +02:00 committed by Gitea
parent 9e1ec72739
commit 3b9bc5b2f8
25 changed files with 159 additions and 102 deletions

View file

@ -165,7 +165,7 @@ describe('Task', () => {
}) })
cy.visit(`/tasks/${tasks[0].id}`) cy.visit(`/tasks/${tasks[0].id}`)
cy.get('.task-view .details.content.description .editor a') cy.get('.task-view .details.content.description .editor button')
.click() .click()
cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll') cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
.type('{selectall}New Description') .type('{selectall}New Description')
@ -297,7 +297,7 @@ describe('Task', () => {
cy.visit(`/tasks/${tasks[0].id}`) cy.visit(`/tasks/${tasks[0].id}`)
cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee') cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
.get('a.remove-assignee') .get('.remove-assignee')
.click() .click()
cy.get('.global-notification') cy.get('.global-notification')
@ -402,7 +402,7 @@ describe('Task', () => {
.contains('Due Date') .contains('Due Date')
.get('.date-input .datepicker .show') .get('.date-input .datepicker .show')
.click() .click()
cy.get('.datepicker .datepicker-popup a') cy.get('.datepicker .datepicker-popup button')
.contains('Tomorrow') .contains('Tomorrow')
.click() .click()
cy.get('[data-cy="closeDatepicker"]') cy.get('[data-cy="closeDatepicker"]')

View file

@ -22,14 +22,14 @@
<div class="navbar-end"> <div class="navbar-end">
<update/> <update/>
<a <BaseButton
@click="openQuickActions" @click="openQuickActions"
class="trigger-button pr-0" class="trigger-button pr-0"
v-shortcut="'Control+k'" v-shortcut="'Control+k'"
:title="$t('keyboardShortcuts.quickSearch')" :title="$t('keyboardShortcuts.quickSearch')"
> >
<icon icon="search"/> <icon icon="search"/>
</a> </BaseButton>
<notifications/> <notifications/>
<div class="user"> <div class="user">
<dropdown class="is-right" ref="usernameDropdown"> <dropdown class="is-right" ref="usernameDropdown">

View file

@ -49,13 +49,13 @@
</modal> </modal>
</transition> </transition>
<a <BaseButton
class="keyboard-shortcuts-button d-print-none" class="keyboard-shortcuts-button d-print-none"
@click="showKeyboardShortcuts()" @click="showKeyboardShortcuts()"
v-shortcut="'?'" v-shortcut="'?'"
> >
<icon icon="keyboard"/> <icon icon="keyboard"/>
</a> </BaseButton>
</main> </main>
</div> </div>
</div> </div>

View file

@ -51,6 +51,9 @@
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}"> <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
<template v-for="(n, nk) in namespaces" :key="n.id"> <template v-for="(n, nk) in namespaces" :key="n.id">
<div class="namespace-title" :class="{'has-menu': n.id > 0}"> <div class="namespace-title" :class="{'has-menu': n.id > 0}">
<!-- FIXME we shouldn't wrap with the clickable area and have another one inside aswell
@click should only be used on interactive elements
-->
<span <span
@click="toggleLists(n.id)" @click="toggleLists(n.id)"
class="menu-label" class="menu-label"
@ -64,13 +67,13 @@
<span class="name"> <span class="name">
{{ namespaceTitles[nk] }} {{ namespaceTitles[nk] }}
</span> </span>
<a <BaseButton
class="icon is-small toggle-lists-icon pl-2" class="icon is-small toggle-lists-icon pl-2"
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}" :class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
@click="toggleLists(n.id)" @click="toggleLists(n.id)"
> >
<icon icon="chevron-down"/> <icon icon="chevron-down"/>
</a> </BaseButton>
<span class="count" :class="{'ml-2 mr-0': n.id > 0}"> <span class="count" :class="{'ml-2 mr-0': n.id > 0}">
({{ namespaceListsCount[nk] }}) ({{ namespaceListsCount[nk] }})
</span> </span>
@ -136,12 +139,13 @@
<span class="list-menu-title"> <span class="list-menu-title">
{{ getListTitle(l) }} {{ getListTitle(l) }}
</span> </span>
<span <!-- FIXME: we shouldn't use a button inside a link This can be unwrapped by using CSS -->
<BaseButton
:class="{'is-favorite': l.isFavorite}" :class="{'is-favorite': l.isFavorite}"
@click.prevent.stop="toggleFavoriteList(l)" @click.prevent.stop="toggleFavoriteList(l)"
class="favorite"> class="favorite">
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/> <icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</span> </BaseButton>
</a> </a>
</router-link> </router-link>
<list-settings-dropdown :list="l" v-if="l.id > 0"/> <list-settings-dropdown :list="l" v-if="l.id > 0"/>
@ -162,6 +166,7 @@ import {useStore} from 'vuex'
import draggable from 'zhyswan-vuedraggable' import draggable from 'zhyswan-vuedraggable'
import {SortableEvent} from 'sortablejs' import {SortableEvent} from 'sortablejs'
import BaseButton from '@/components/base/BaseButton.vue'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue' import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue' import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
import PoweredByLink from '@/components/home/PoweredByLink.vue' import PoweredByLink from '@/components/home/PoweredByLink.vue'

View file

@ -1,18 +1,16 @@
<template> <template>
<div class="datepicker" :class="{'disabled': disabled}"> <div class="datepicker" :class="{'disabled': disabled}">
<a @click.stop="toggleDatePopup" class="show"> <BaseButton @click.stop="toggleDatePopup" class="show">
<template v-if="date === null"> {{ date === null ? chooseDateLabel : formatDateShort(date) }}
{{ chooseDateLabel }} </BaseButton>
</template>
<template v-else>
{{ formatDateShort(date) }}
</template>
</a>
<transition name="fade"> <transition name="fade">
<div v-if="show" class="datepicker-popup" ref="datepickerPopup"> <div v-if="show" class="datepicker-popup" ref="datepickerPopup">
<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21"> <BaseButton
v-if="(new Date()).getHours() < 21"
@click.stop="setDate('today')"
>
<span class="icon"> <span class="icon">
<icon :icon="['far', 'calendar-alt']"/> <icon :icon="['far', 'calendar-alt']"/>
</span> </span>
@ -24,8 +22,8 @@
{{ getWeekdayFromStringInterval('today') }} {{ getWeekdayFromStringInterval('today') }}
</span> </span>
</span> </span>
</a> </BaseButton>
<a @click.stop="() => setDate('tomorrow')"> <BaseButton @click.stop="() => setDate('tomorrow')">
<span class="icon"> <span class="icon">
<icon :icon="['far', 'sun']"/> <icon :icon="['far', 'sun']"/>
</span> </span>
@ -37,8 +35,8 @@
{{ getWeekdayFromStringInterval('tomorrow') }} {{ getWeekdayFromStringInterval('tomorrow') }}
</span> </span>
</span> </span>
</a> </BaseButton>
<a @click.stop="() => setDate('nextMonday')"> <BaseButton @click.stop="() => setDate('nextMonday')">
<span class="icon"> <span class="icon">
<icon icon="coffee"/> <icon icon="coffee"/>
</span> </span>
@ -50,8 +48,8 @@
{{ getWeekdayFromStringInterval('nextMonday') }} {{ getWeekdayFromStringInterval('nextMonday') }}
</span> </span>
</span> </span>
</a> </BaseButton>
<a @click.stop="() => setDate('thisWeekend')"> <BaseButton @click.stop="() => setDate('thisWeekend')">
<span class="icon"> <span class="icon">
<icon icon="cocktail"/> <icon icon="cocktail"/>
</span> </span>
@ -63,8 +61,8 @@
{{ getWeekdayFromStringInterval('thisWeekend') }} {{ getWeekdayFromStringInterval('thisWeekend') }}
</span> </span>
</span> </span>
</a> </BaseButton>
<a @click.stop="() => setDate('laterThisWeek')"> <BaseButton @click.stop="() => setDate('laterThisWeek')">
<span class="icon"> <span class="icon">
<icon icon="chess-knight"/> <icon icon="chess-knight"/>
</span> </span>
@ -76,8 +74,8 @@
{{ getWeekdayFromStringInterval('laterThisWeek') }} {{ getWeekdayFromStringInterval('laterThisWeek') }}
</span> </span>
</span> </span>
</a> </BaseButton>
<a @click.stop="() => setDate('nextWeek')"> <BaseButton @click.stop="() => setDate('nextWeek')">
<span class="icon"> <span class="icon">
<icon icon="forward"/> <icon icon="forward"/>
</span> </span>
@ -89,7 +87,7 @@
{{ getWeekdayFromStringInterval('nextWeek') }} {{ getWeekdayFromStringInterval('nextWeek') }}
</span> </span>
</span> </span>
</a> </BaseButton>
<flat-pickr <flat-pickr
:config="flatPickerConfig" :config="flatPickerConfig"
@ -117,6 +115,8 @@ import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
import {i18n} from '@/i18n' import {i18n} from '@/i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import {format} from 'date-fns' import {format} from 'date-fns'
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval' import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours' import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
@ -134,6 +134,7 @@ export default defineComponent({
}, },
components: { components: {
flatPickr, flatPickr,
BaseButton,
}, },
props: { props: {
modelValue: { modelValue: {

View file

@ -16,23 +16,23 @@
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText"> <p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
{{ emptyText }} {{ emptyText }}
<template v-if="isEditEnabled"> <template v-if="isEditEnabled">
<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>. <BaseButton @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</BaseButton>.
</template> </template>
</p> </p>
<ul class="actions d-print-none" v-if="bottomActions.length > 0"> <ul class="actions d-print-none" v-if="bottomActions.length > 0">
<li v-if="isEditEnabled && !showPreviewText && showSave"> <li v-if="isEditEnabled && !showPreviewText && showSave">
<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a> <BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a> <BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
</li> </li>
<li v-for="(action, k) in bottomActions" :key="k"> <li v-for="(action, k) in bottomActions" :key="k">
<a @click="action.action">{{ action.title }}</a> <BaseButton @click="action.action">{{ action.title }}</BaseButton>
</li> </li>
</ul> </ul>
<template v-else-if="isEditEnabled && showSave"> <template v-else-if="isEditEnabled && showSave">
<ul v-if="showEditButton" class="actions d-print-none"> <ul v-if="showEditButton" class="actions d-print-none">
<li> <li>
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a> <BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
</li> </li>
</ul> </ul>
<x-button <x-button
@ -62,10 +62,13 @@ import AttachmentService from '../../services/attachment'
import {findCheckboxesInText} from '../../helpers/checklistFromText' import {findCheckboxesInText} from '../../helpers/checklistFromText'
import {createRandomID} from '@/helpers/randomId' import {createRandomID} from '@/helpers/randomId'
import BaseButton from '@/components/base/BaseButton.vue'
export default defineComponent({ export default defineComponent({
name: 'editor', name: 'editor',
components: { components: {
VueEasymde, VueEasymde,
BaseButton,
}, },
props: { props: {
modelValue: { modelValue: {

View file

@ -15,7 +15,7 @@
<slot name="tag" :item="item"> <slot name="tag" :item="item">
<span :key="`item${key}`" class="tag ml-2 mt-2"> <span :key="`item${key}`" class="tag ml-2 mt-2">
{{ label !== '' ? item[label] : item }} {{ label !== '' ? item[label] : item }}
<a @click="() => remove(item)" class="delete is-small"></a> <BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
</span> </span>
</slot> </slot>
</template> </template>
@ -37,7 +37,7 @@
<transition name="fade"> <transition name="fade">
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible"> <div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
<button <BaseButton
class="is-fullwidth" class="is-fullwidth"
v-for="(data, key) in filteredSearchResults" v-for="(data, key) in filteredSearchResults"
:key="key" :key="key"
@ -54,9 +54,9 @@
<span class="hint-text"> <span class="hint-text">
{{ selectPlaceholder }} {{ selectPlaceholder }}
</span> </span>
</button> </BaseButton>
<button <BaseButton
v-if="creatableAvailable" v-if="creatableAvailable"
class="is-fullwidth" class="is-fullwidth"
:ref="`result-${filteredSearchResults.length}`" :ref="`result-${filteredSearchResults.length}`"
@ -75,7 +75,7 @@
<span class="hint-text"> <span class="hint-text">
{{ createPlaceholder }} {{ createPlaceholder }}
</span> </span>
</button> </BaseButton>
</div> </div>
</transition> </transition>
@ -87,8 +87,13 @@ import {defineComponent} from 'vue'
import {i18n} from '@/i18n' import {i18n} from '@/i18n'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside' import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import BaseButton from '@/components/base/BaseButton.vue'
export default defineComponent({ export default defineComponent({
name: 'multiselect', name: 'multiselect',
components: {
BaseButton,
},
data() { data() {
return { return {
query: '', query: '',

View file

@ -21,12 +21,13 @@
<span class="is-archived" v-if="list.isArchived"> <span class="is-archived" v-if="list.isArchived">
{{ $t('namespace.archived') }} {{ $t('namespace.archived') }}
</span> </span>
<span <BaseButton
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}" :class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
@click.stop="toggleFavoriteList(list)" @click.stop="toggleFavoriteList(list)"
class="favorite"> class="favorite"
>
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/> <icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
</span> </BaseButton>
</div> </div>
<div class="title">{{ list.title }}</div> <div class="title">{{ list.title }}</div>
</div> </div>
@ -43,6 +44,8 @@ import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
import {colorIsDark} from '@/helpers/color/colorIsDark' import {colorIsDark} from '@/helpers/color/colorIsDark'
import ListModel from '@/models/list' import ListModel from '@/models/list'
import BaseButton from '@/components/base/BaseButton.vue'
const background = ref<string | null>(null) const background = ref<string | null>(null)
const backgroundLoading = ref(false) const backgroundLoading = ref(false)
const blurHashUrl = ref('') const blurHashUrl = ref('')

View file

@ -27,7 +27,7 @@
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span> <span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
</i18n-t> </i18n-t>
<br/> <br/>
<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a> <BaseButton @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
</div> </div>
<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2"> <message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@ -48,6 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
import {success} from '@/message' import {success} from '@/message'
import Message from '@/components/misc/message.vue' import Message from '@/components/misc/message.vue'
import BaseButton from '@/components/base/BaseButton.vue'
const props = defineProps({ const props = defineProps({
configureOpen: { configureOpen: {

View file

@ -4,7 +4,7 @@
<p class="card-header-title"> <p class="card-header-title">
{{ title }} {{ title }}
</p> </p>
<a <BaseButton
v-if="hasClose" v-if="hasClose"
class="card-header-icon" class="card-header-icon"
:aria-label="$t('misc.close')" :aria-label="$t('misc.close')"
@ -14,7 +14,7 @@
<span class="icon"> <span class="icon">
<icon :icon="closeIcon"/> <icon :icon="closeIcon"/>
</span> </span>
</a> </BaseButton>
</header> </header>
<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}"> <div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
<div :class="{'content': hasContent}"> <div :class="{'content': hasContent}">
@ -25,6 +25,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import BaseButton from '@/components/base/BaseButton.vue'
defineProps({ defineProps({
title: { title: {
type: String, type: String,

View file

@ -1,7 +1,7 @@
<template> <template>
<message variant="danger"> <message variant="danger">
<i18n-t keypath="loadingError.failed"> <i18n-t keypath="loadingError.failed">
<a @click="reload">{{ $t('loadingError.tryAgain') }}</a> <BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton>
<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a> <a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
</i18n-t> </i18n-t>
</message> </message>
@ -9,6 +9,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import Message from '@/components/misc/message.vue' import Message from '@/components/misc/message.vue'
import BaseButton from '@/components/base/BaseButton.vue'
function reload() { function reload() {
window.location.reload() window.location.reload()

View file

@ -1,6 +1,7 @@
<template> <template>
<notifications position="bottom left" :max="2" class="global-notification"> <notifications position="bottom left" :max="2" class="global-notification">
<template #body="{ item, close }"> <template #body="{ item, close }">
<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
<div <div
:class="[ :class="[
'vue-notification-template', 'vue-notification-template',

View file

@ -1,10 +1,10 @@
<template> <template>
<div class="notifications"> <div class="notifications">
<div class="is-flex is-justify-content-center"> <div class="is-flex is-justify-content-center">
<a @click.stop="showNotifications = !showNotifications" class="trigger-button"> <BaseButton @click.stop="showNotifications = !showNotifications" class="trigger-button">
<span class="unread-indicator" v-if="unreadNotifications > 0"></span> <span class="unread-indicator" v-if="unreadNotifications > 0"></span>
<icon icon="bell"/> <icon icon="bell"/>
</a> </BaseButton>
</div> </div>
<transition name="fade"> <transition name="fade">
@ -26,9 +26,9 @@
<span class="has-text-weight-bold mr-1" v-if="n.notification.doer"> <span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
{{ n.notification.doer.getDisplayName() }} {{ n.notification.doer.getDisplayName() }}
</span> </span>
<a @click="() => to(n, index)()"> <BaseButton @click="() => to(n, index)()">
{{ n.toText(userInfo) }} {{ n.toText(userInfo) }}
</a> </BaseButton>
</div> </div>
<span class="created" v-tooltip="formatDate(n.created)"> <span class="created" v-tooltip="formatDate(n.created)">
{{ formatDateSince(n.created) }} {{ formatDateSince(n.created) }}
@ -50,6 +50,7 @@
import {computed, onMounted, onUnmounted, ref} from 'vue' import {computed, onMounted, onUnmounted, ref} from 'vue'
import NotificationService from '@/services/notification' import NotificationService from '@/services/notification'
import BaseButton from '@/components/base/BaseButton.vue'
import User from '@/components/misc/user.vue' import User from '@/components/misc/user.vue'
import names from '@/models/constants/notificationNames.json' import names from '@/models/constants/notificationNames.json'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside' import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'

View file

@ -32,7 +32,7 @@
{{ r.title }} {{ r.title }}
</span> </span>
<div class="result-items"> <div class="result-items">
<button <BaseButton
v-for="(i, key) in r.items" v-for="(i, key) in r.items"
:key="key" :key="key"
:ref="`result-${k}_${key}`" :ref="`result-${k}_${key}`"
@ -44,7 +44,7 @@
:class="{'is-strikethrough': i.done}" :class="{'is-strikethrough': i.done}"
> >
{{ i.title }} {{ i.title }}
</button> </BaseButton>
</div> </div>
</div> </div>
</div> </div>
@ -63,6 +63,8 @@ import TeamModel from '@/models/team'
import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types' import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
import ListModel from '@/models/list' import ListModel from '@/models/list'
import BaseButton from '@/components/base/BaseButton.vue'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
import {getHistory} from '@/modules/listHistory' import {getHistory} from '@/modules/listHistory'
import {parseTaskText, PrefixMode} from '@/modules/parseTaskText' import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
@ -86,7 +88,10 @@ const SEARCH_MODE_TEAMS = 'teams'
export default defineComponent({ export default defineComponent({
name: 'quick-actions', name: 'quick-actions',
components: {QuickAddMagic}, components: {
BaseButton,
QuickAddMagic,
},
data() { data() {
return { return {
query: '', query: '',

View file

@ -96,9 +96,10 @@
</span> </span>
<priority-label :priority="t.priority" :done="t.done"/> <priority-label :priority="t.priority" :done="t.done"/>
<!-- using the key here forces vue to use the updated version model and not the response returned by the api --> <!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
<a @click="editTask(theTasks[k])" class="edit-toggle"> <!-- FIXME: add label -->
<BaseButton @click="editTask(theTasks[k])" class="edit-toggle">
<icon icon="pen"/> <icon icon="pen"/>
</a> </BaseButton>
</VueDragResize> </VueDragResize>
</div> </div>
<template v-if="showTaskswithoutDates"> <template v-if="showTaskswithoutDates">
@ -184,12 +185,14 @@ import TaskCollectionService from '../../services/taskCollection'
import {mapState} from 'vuex' import {mapState} from 'vuex'
import Rights from '../../models/constants/rights.json' import Rights from '../../models/constants/rights.json'
import FilterPopup from '@/components/list/partials/filter-popup.vue' import FilterPopup from '@/components/list/partials/filter-popup.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {colorIsDark} from '@/helpers/color/colorIsDark' import {colorIsDark} from '@/helpers/color/colorIsDark'
export default defineComponent({ export default defineComponent({
name: 'GanttChart', name: 'GanttChart',
components: { components: {
BaseButton,
FilterPopup, FilterPopup,
PriorityLabel, PriorityLabel,
EditTask, EditTask,

View file

@ -26,6 +26,9 @@
</progress> </progress>
<div class="files" v-if="attachments.length > 0"> <div class="files" v-if="attachments.length > 0">
<!-- FIXME: don't use a for element that wraps other links / buttons
Instead: overlay element with button that is inside.
-->
<a <a
class="attachment" class="attachment"
v-for="a in attachments" v-for="a in attachments"
@ -53,25 +56,25 @@
</span> </span>
</p> </p>
<p> <p>
<a <BaseButton
@click.prevent.stop="downloadAttachment(a)" @click.prevent.stop="downloadAttachment(a)"
v-tooltip="$t('task.attachment.downloadTooltip')" v-tooltip="$t('task.attachment.downloadTooltip')"
> >
{{ $t('misc.download') }} {{ $t('misc.download') }}
</a> </BaseButton>
<a <BaseButton
@click.stop="copyUrl(a)" @click.stop="copyUrl(a)"
v-tooltip="$t('task.attachment.copyUrlTooltip')" v-tooltip="$t('task.attachment.copyUrlTooltip')"
> >
{{ $t('task.attachment.copyUrl') }} {{ $t('task.attachment.copyUrl') }}
</a> </BaseButton>
<a <BaseButton
@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}" @click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
v-if="editEnabled" v-if="editEnabled"
v-tooltip="$t('task.attachment.deleteTooltip')" v-tooltip="$t('task.attachment.deleteTooltip')"
> >
{{ $t('misc.delete') }} {{ $t('misc.delete') }}
</a> </BaseButton>
</p> </p>
</div> </div>
</a> </a>
@ -148,9 +151,12 @@ import {mapState} from 'vuex'
import { useCopyToClipboard } from '@/composables/useCopyToClipboard' import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments' import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
import BaseButton from '@/components/base/BaseButton'
export default defineComponent({ export default defineComponent({
name: 'attachments', name: 'attachments',
components: { components: {
BaseButton,
User, User,
}, },
data() { data() {

View file

@ -18,9 +18,9 @@
<template #tag="{item: user}"> <template #tag="{item: user}">
<span class="assignee"> <span class="assignee">
<user :avatar-size="32" :show-username="false" :user="user"/> <user :avatar-size="32" :show-username="false" :user="user"/>
<a @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled"> <BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
<icon icon="times"/> <icon icon="times"/>
</a> </BaseButton>
</span> </span>
</template> </template>
</Multiselect> </Multiselect>
@ -34,6 +34,7 @@ import {useI18n} from 'vue-i18n'
import User from '@/components/misc/user.vue' import User from '@/components/misc/user.vue'
import Multiselect from '@/components/input/multiselect.vue' import Multiselect from '@/components/input/multiselect.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {includesById} from '@/helpers/utils' import {includesById} from '@/helpers/utils'
import UserModel from '@/models/user' import UserModel from '@/models/user'
@ -95,7 +96,7 @@ async function removeAssignee(user: UserModel) {
success({message: t('task.assignee.unassignSuccess')}) success({message: t('task.assignee.unassignSuccess')})
} }
async function findUser(query) { async function findUser(query: string) {
if (query === '') { if (query === '') {
clearAllFoundUsers() clearAllFoundUsers()
return return

View file

@ -19,7 +19,7 @@
:style="{'background': label.hexColor, 'color': label.textColor}" :style="{'background': label.hexColor, 'color': label.textColor}"
class="tag"> class="tag">
<span>{{ label.title }}</span> <span>{{ label.title }}</span>
<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" /> <BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
</span> </span>
</template> </template>
<template #searchResult="{option}"> <template #searchResult="{option}">
@ -47,6 +47,7 @@ import LabelModel from '@/models/label'
import LabelTaskService from '@/services/labelTask' import LabelTaskService from '@/services/labelTask'
import {success} from '@/message' import {success} from '@/message'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue' import Multiselect from '@/components/input/multiselect.vue'
const props = defineProps({ const props = defineProps({

View file

@ -2,7 +2,7 @@
<div v-if="available"> <div v-if="available">
<p class="help has-text-grey"> <p class="help has-text-grey">
{{ $t('task.quickAddMagic.hint') }}. {{ $t('task.quickAddMagic.hint') }}.
<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a> <BaseButton @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</BaseButton>
</p> </p>
<modal <modal
@close="() => visible = false" @close="() => visible = false"
@ -86,13 +86,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, computed} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode' import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
import {PREFIXES} from '@/modules/parseTaskText' import {PREFIXES} from '@/modules/parseTaskText'
import {ref, computed} from 'vue'
const visible = ref(false) const visible = ref(false)
const mode = ref(getQuickAddMagicMode()) const mode = ref(getQuickAddMagicMode())
const available = computed(() => mode.value !== 'disabled') const available = computed(() => mode.value !== 'disabled')
const prefixes = computed(() =>PREFIXES[mode.value]) const prefixes = computed(() => PREFIXES[mode.value])
</script> </script>

View file

@ -103,12 +103,13 @@
</span> </span>
{{ t.title }} {{ t.title }}
</router-link> </router-link>
<a <BaseButton
v-if="editEnabled"
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}" @click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
class="remove" class="remove"
v-if="editEnabled"> >
<icon icon="trash-alt"/> <icon icon="trash-alt"/>
</a> </BaseButton>
</div> </div>
</div> </div>
</div> </div>
@ -145,6 +146,7 @@ import TaskRelationService from '../../../services/taskRelation'
import relationKinds from '../../../models/constants/relationKinds' import relationKinds from '../../../models/constants/relationKinds'
import TaskRelationModel from '../../../models/taskRelation' import TaskRelationModel from '../../../models/taskRelation'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue' import Multiselect from '@/components/input/multiselect.vue'
export default defineComponent({ export default defineComponent({
@ -166,6 +168,7 @@ export default defineComponent({
} }
}, },
components: { components: {
BaseButton,
Multiselect, Multiselect,
}, },
props: { props: {

View file

@ -11,9 +11,9 @@
:disabled="disabled" :disabled="disabled"
@close-on-change="() => addReminderDate(index)" @close-on-change="() => addReminderDate(index)"
/> />
<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove"> <BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
<icon icon="times"></icon> <icon icon="times"></icon>
</a> </BaseButton>
</div> </div>
<div class="reminder-input" v-if="!disabled"> <div class="reminder-input" v-if="!disabled">
<Datepicker <Datepicker
@ -28,10 +28,13 @@
<script setup lang="ts"> <script setup lang="ts">
import {PropType, ref, onMounted, watch} from 'vue' import {PropType, ref, onMounted, watch} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Datepicker from '@/components/input/datepicker.vue' import Datepicker from '@/components/input/datepicker.vue'
type Reminder = Date | string type Reminder = Date | string
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Array as PropType<Reminder[]>, type: Array as PropType<Reminder[]>,

View file

@ -39,17 +39,20 @@
:user="a" :user="a"
v-for="(a, i) in task.assignees" v-for="(a, i) in task.assignees"
/> />
<BaseButton
v-if="+new Date(task.dueDate) > 0"
@click.prevent.stop="showDefer = !showDefer"
v-tooltip="formatDate(task.dueDate)"
>
<time <time
:datetime="formatISO(task.dueDate)" :datetime="formatISO(task.dueDate)"
:class="{'overdue': task.dueDate <= new Date() && !task.done}" :class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="is-italic" class="is-italic"
@click.prevent.stop="showDefer = !showDefer"
v-if="+new Date(task.dueDate) > 0"
v-tooltip="formatDate(task.dueDate)"
:aria-expanded="showDefer ? 'true' : 'false'" :aria-expanded="showDefer ? 'true' : 'false'"
> >
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }} - {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
</time> </time>
</BaseButton>
<transition name="fade"> <transition name="fade">
<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/> <defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
</transition> </transition>
@ -80,13 +83,13 @@
v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})"> v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
{{ $store.getters['lists/getListById'](task.listId).title }} {{ $store.getters['lists/getListById'](task.listId).title }}
</router-link> </router-link>
<a <BaseButton
:class="{'is-favorite': task.isFavorite}" :class="{'is-favorite': task.isFavorite}"
@click="toggleFavorite" @click="toggleFavorite"
class="favorite"> class="favorite">
<icon icon="star" v-if="task.isFavorite"/> <icon icon="star" v-if="task.isFavorite"/>
<icon :icon="['far', 'star']" v-else/> <icon :icon="['far', 'star']" v-else/>
</a> </BaseButton>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -99,6 +102,7 @@ import PriorityLabel from './priorityLabel'
import TaskService from '../../../services/task' import TaskService from '../../../services/task'
import Labels from './labels' import Labels from './labels'
import User from '../../misc/user' import User from '../../misc/user'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '../../input/fancycheckbox' import Fancycheckbox from '../../input/fancycheckbox'
import DeferTask from './defer-task' import DeferTask from './defer-task'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside' import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@ -115,6 +119,7 @@ export default defineComponent({
} }
}, },
components: { components: {
BaseButton,
ChecklistSummary, ChecklistSummary,
DeferTask, DeferTask,
Fancycheckbox, Fancycheckbox,

View file

@ -32,13 +32,13 @@
v-tooltip.bottom="$t('label.edit.forbidden')"> v-tooltip.bottom="$t('label.edit.forbidden')">
{{ l.title }} {{ l.title }}
</span> </span>
<a <BaseButton
:style="{'color': l.textColor}" :style="{'color': l.textColor}"
@click="editLabel(l)" @click="editLabel(l)"
v-else> v-else>
{{ l.title }} {{ l.title }}
</a> </BaseButton>
<a @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a> <BaseButton @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id" />
</span> </span>
</div> </div>
<div class="column is-4" v-if="isLabelEdit"> <div class="column is-4" v-if="isLabelEdit">
@ -116,12 +116,14 @@ import {mapState} from 'vuex'
import LabelModel from '../../models/label' import LabelModel from '../../models/label'
import {LOADING, LOADING_MODULE} from '@/store/mutation-types' import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
import BaseButton from '@/components/base/BaseButton.vue'
import AsyncEditor from '@/components/input/AsyncEditor' import AsyncEditor from '@/components/input/AsyncEditor'
import ColorPicker from '@/components/input/colorPicker' import ColorPicker from '@/components/input/colorPicker'
export default defineComponent({ export default defineComponent({
name: 'ListLabels', name: 'ListLabels',
components: { components: {
BaseButton,
ColorPicker, ColorPicker,
editor: AsyncEditor, editor: AsyncEditor,
}, },

View file

@ -65,9 +65,9 @@
<nothing v-if="ctaVisible && tasks.length === 0 && !loading"> <nothing v-if="ctaVisible && tasks.length === 0 && !loading">
{{ $t('list.list.empty') }} {{ $t('list.list.empty') }}
<a @click="focusNewTaskInput()"> <BaseButton @click="focusNewTaskInput()">
{{ $t('list.list.newTaskCta') }} {{ $t('list.list.newTaskCta') }}
</a> </BaseButton>
</nothing> </nothing>
<div class="tasks-container" :class="{ 'has-task-edit-open': isTaskEdit }"> <div class="tasks-container" :class="{ 'has-task-edit-open': isTaskEdit }">
@ -99,13 +99,13 @@
<span class="icon handle"> <span class="icon handle">
<icon icon="grip-lines"/> <icon icon="grip-lines"/>
</span> </span>
<div <BaseButton
@click="editTask(t.id)" @click="editTask(t.id)"
class="icon settings" class="icon settings"
v-if="!list.isArchived" v-if="!list.isArchived"
> >
<icon icon="pencil-alt"/> <icon icon="pencil-alt"/>
</div> </BaseButton>
</template> </template>
</single-task-in-list> </single-task-in-list>
</template> </template>
@ -134,6 +134,7 @@
<script lang="ts"> <script lang="ts">
import { ref, toRef, defineComponent } from 'vue' import { ref, toRef, defineComponent } from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import ListWrapper from './ListWrapper.vue' import ListWrapper from './ListWrapper.vue'
import EditTask from '@/components/tasks/edit-task' import EditTask from '@/components/tasks/edit-task'
import AddTask from '@/components/tasks/add-task' import AddTask from '@/components/tasks/add-task'
@ -190,6 +191,7 @@ export default defineComponent({
} }
}, },
components: { components: {
BaseButton,
ListWrapper, ListWrapper,
Nothing, Nothing,
FilterPopup, FilterPopup,

View file

@ -59,14 +59,14 @@
:disabled="taskService.loading || !canWrite" :disabled="taskService.loading || !canWrite"
ref="dueDate" ref="dueDate"
/> />
<a <BaseButton
@click="() => {task.dueDate = null;saveTask()}" @click="() => {task.dueDate = null;saveTask()}"
v-if="task.dueDate && canWrite" v-if="task.dueDate && canWrite"
class="remove"> class="remove">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times"></icon> <icon icon="times"></icon>
</span> </span>
</a> </BaseButton>
</div> </div>
</div> </div>
</transition> </transition>
@ -99,7 +99,7 @@
:disabled="taskService.loading || !canWrite" :disabled="taskService.loading || !canWrite"
ref="startDate" ref="startDate"
/> />
<a <BaseButton
@click="() => {task.startDate = null;saveTask()}" @click="() => {task.startDate = null;saveTask()}"
v-if="task.startDate && canWrite" v-if="task.startDate && canWrite"
class="remove" class="remove"
@ -107,7 +107,7 @@
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times"></icon> <icon icon="times"></icon>
</span> </span>
</a> </BaseButton>
</div> </div>
</div> </div>
</transition> </transition>
@ -126,14 +126,14 @@
:disabled="taskService.loading || !canWrite" :disabled="taskService.loading || !canWrite"
ref="endDate" ref="endDate"
/> />
<a <BaseButton
@click="() => {task.endDate = null;saveTask()}" @click="() => {task.endDate = null;saveTask()}"
v-if="task.endDate && canWrite" v-if="task.endDate && canWrite"
class="remove"> class="remove">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times"></icon> <icon icon="times"></icon>
</span> </span>
</a> </BaseButton>
</div> </div>
</div> </div>
</transition> </transition>