ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: use BaseButton where easily possible

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/labels/ListLabels.vue
View File

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

10
src/views/list/ListList.vue
View File

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

12
src/views/tasks/TaskDetailView.vue
View File

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