local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: create BaseButton component (#1123)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1123
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-01-04 18:58:06 +00:00
parent cb37fd773d
commit cdbd1c2ac4
39 changed files with 254 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
cypress/integration/list/list.spec.js
View file

@ -101,7 +101,7 @@ describe('Lists', () => {
.click()
cy.url()
.should('contain', '/settings/delete')
cy.get('.modal-mask .modal-container .modal-content .actions a.button')
cy.get('[data-cy="modalPrimary"]')
.contains('Do it')
.click()
@ -392,7 +392,7 @@ describe('Lists', () => {
cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
.first()
.type(3)
cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field a.button.is-primary')
cy.get('[data-cy="setBucketLimit"]')
.first()
.click()

2
cypress/integration/list/namespaces.spec.js
View file

@ -89,7 +89,7 @@ describe('Namepaces', () => {
.click()
cy.url()
.should('contain', '/settings/delete')
cy.get('.modal-mask .modal-container .modal-content .actions a.button')
cy.get('[data-cy="modalPrimary"]')
.contains('Do it')
.click()

4
cypress/integration/task/task.spec.js
View file

@ -168,7 +168,7 @@ describe('Task', () => {
.click()
cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
.type('{selectall}New Description')
cy.get('.task-view .details.content.description .editor a')
cy.get('[data-cy="saveEditor"]')
.contains('Save')
.click()
@ -404,7 +404,7 @@ describe('Task', () => {
cy.get('.datepicker .datepicker-popup a')
.contains('Tomorrow')
.click()
cy.get('.datepicker .datepicker-popup a.button')
cy.get('[data-cy="closeDatepicker"]')
.contains('Confirm')
.click()

4
cypress/integration/user/settings.spec.js
View file

@ -18,7 +18,7 @@ describe('User Settings', () => {
.trigger('mousedown', {which: 1})
.trigger('mousemove', {clientY: 100})
.trigger('mouseup')
cy.get('a.button.is-primary')
cy.get('[data-cy="uploadAvatar"]')
.contains('Upload Avatar')
.click()
@ -33,7 +33,7 @@ describe('User Settings', () => {
cy.get('.general-settings .control input.input')
.first()
.type('Lorem Ipsum')
cy.get('.card.general-settings .button.is-primary')
cy.get('[data-cy="saveGeneralSettings"]')
.contains('Save')
.click()

4
src/App.vue
View file

@ -1,5 +1,6 @@
<template>
<ready :class="{'is-touch': isTouch}">
<ready>
<div :class="{'is-touch': isTouch}">
<div :class="{'is-hidden': !online}">
<template v-if="authUser">
<top-navigation/>
@ -15,6 +16,7 @@
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
</transition>
</div>
</ready>
</template>

118
src/components/base/BaseButton.vue Normal file
View file

@ -0,0 +1,118 @@
<template>
<component
:is="componentNodeName"
class="base-button"
:class="{ 'base-button--type-button': isButton }"
v-bind="elementBindings"
:disabled="disabled || undefined"
>
<slot />
</component>
</template>
<script lang="ts">
// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
// this component removes styling differences between links / vue-router links and button elements
// by doing so we make it easy abstract the functionality from style and enable easier and semantic
// correct button and link usage. Also see: https://css-tricks.com/a-complete-guide-to-links-and-buttons/#accessibility-considerations
// the component tries to heuristically determine what it should be checking the props (see the
// componentNodeName and elementBindings ref for this).
// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
const BASE_BUTTON_TYPES_MAP = Object.freeze({
button: 'button',
submit: 'submit',
})
type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
const props = defineProps({
type: {
type: String as PropType<BaseButtonTypes>,
default: 'button',
},
disabled: {
type: Boolean,
default: false,
},
})
const componentNodeName = ref<Node['nodeName']>('button')
interface ElementBindings {
type?: string;
rel?: string,
}
const elementBindings = ref({})
const attrs = useAttrs()
watchEffect(() => {
// by default this component is a button element with the attribute of the type "button" (default prop value)
let nodeName = 'button'
let bindings: ElementBindings = {type: props.type}
// if we find a "to" prop we set it as router-link
if ('to' in attrs) {
nodeName = 'router-link'
bindings = {}
}
// if there is a href we assume the user wants an external link via a link element
// we also set the attribute rel to "noopener" but make it possible to overwrite this by the user.
if ('href' in attrs) {
nodeName = 'a'
bindings = {rel: 'noopener'}
}
componentNodeName.value = nodeName
elementBindings.value = {
...bindings,
...attrs,
}
})
const isButton = computed(() => componentNodeName.value === 'button')
</script>
<style lang="scss">
// NOTE: we do not use scoped styles to reduce specifity and make it easy to overwrite
// We reset the default styles of a button element to enable easier styling
:where(.base-button--type-button) {
border: 0;
margin: 0;
padding: 0;
text-decoration: none;
background-color: transparent;
text-align: center;
appearance: none;
}
:where(.base-button) {
cursor: pointer;
display: block;
color: inherit;
font: inherit;
user-select: none;
pointer-events: auto; // disable possible resets
&:focus {
outline: transparent;
}
&[disabled] {
cursor: default;
}
}
</style>

2
src/components/home/topNavigation.vue
View file

@ -37,7 +37,7 @@
<dropdown class="is-right" ref="usernameDropdown">
<template #trigger>
<x-button
type="secondary"
variant="secondary"
:shadow="false">
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
<span class="icon is-small">

118
src/components/input/button.vue
View file

@ -1,79 +1,64 @@
<template>
<a
<BaseButton
class="button"
:class="{
'is-loading': loading,
'has-no-shadow': !shadow,
'is-primary': type === 'primary',
'is-outlined': type === 'secondary',
'is-text is-inverted has-no-shadow underline-none':
type === 'tertary',
}"
:disabled="disabled || null"
@click="click"
:href="href !== '' ? href : null"
:class="[
variantClass,
{
'is-loading': loading,
'has-no-shadow': !shadow || variant === 'tertiary',
}
]"
>
<icon :icon="icon" v-if="showIconOnly"/>
<span class="icon is-small" v-else-if="icon !== ''">
<icon :icon="icon"/>
</span>
<slot></slot>
</a>
<slot />
</BaseButton>
</template>
<script>
<script lang="ts">
export default {
name: 'x-button',
props: {
type: {
type: String,
default: 'primary',
},
href: {
type: String,
default: '',
},
to: {
default: false,
},
icon: {
default: '',
},
loading: {
type: Boolean,
default: false,
},
shadow: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
},
emits: ['click'],
computed: {
showIconOnly() {
return this.icon !== '' && typeof this.$slots.default === 'undefined'
},
},
methods: {
click(e) {
if (this.disabled) {
return
}
if (this.to !== false) {
this.$router.push(this.to)
}
this.$emit('click', e)
},
},
}
</script>
<script setup lang="ts">
import {computed, useSlots, PropType} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
const BUTTON_TYPES_MAP = Object.freeze({
primary: 'is-primary',
secondary: 'is-outlined',
tertiary: 'is-text is-inverted underline-none',
})
type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
const props = defineProps({
variant: {
type: String as PropType<ButtonTypes>,
default: 'primary',
},
icon: {
default: '',
},
loading: {
type: Boolean,
default: false,
},
shadow: {
type: Boolean,
default: true,
},
})
const variantClass = computed(() => BUTTON_TYPES_MAP[props.variant])
const slots = useSlots()
const showIconOnly = computed(() => props.icon !== '' && typeof slots.default === 'undefined')
</script>
<style lang="scss" scoped>
.button {
transition: all $transition;
@ -83,8 +68,8 @@ export default {
font-weight: bold;
height: $button-height;
box-shadow: var(--shadow-sm);
display: inline-flex;
&.is-hovered,
&:hover {
box-shadow: var(--shadow-md);
}
@ -106,9 +91,10 @@ export default {
color: var(--white);
}
&.is-small {
border-radius: $radius;
}
}
.is-small {
border-radius: $radius;
}
.underline-none {

2
src/components/input/colorPicker.vue
View file

@ -27,7 +27,7 @@
@click="reset"
class="is-small ml-2"
:shadow="false"
type="secondary"
variant="secondary"
>
{{ $t('input.resetColor') }}
</x-button>

1
src/components/input/datepicker.vue
View file

@ -101,6 +101,7 @@
class="is-fullwidth"
:shadow="false"
@click="close"
v-cy="'closeDatepicker'"
>
{{ $t('misc.confirm') }}
</x-button>

2
src/components/input/editor.vue
View file

@ -35,7 +35,7 @@
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
</li>
</ul>
<x-button v-else-if="isEditActive" @click="toggleEdit" type="secondary" :shadow="false">
<x-button v-else-if="isEditActive" @click="toggleEdit" variant="secondary" :shadow="false" v-cy="'saveEditor'">
{{ $t('misc.save') }}
</x-button>
</template>

4
src/components/list/partials/filter-popup.vue
View file

@ -1,7 +1,7 @@
<template>
<x-button
v-if="hasFilters"
type="secondary"
variant="secondary"
@click="clearFilters"
>
{{ $t('filters.clear') }}
@ -10,7 +10,7 @@
<template #trigger="{toggle}">
<x-button
@click.prevent.stop="toggle()"
type="secondary"
variant="secondary"
icon="filter"
>
{{ $t('filters.title') }}

18
src/components/misc/create-edit.vue
View file

@ -14,25 +14,25 @@
</div>
<footer class="modal-card-foot is-flex is-justify-content-flex-end">
<x-button
v-if="tertiary !== ''"
:shadow="false"
type="tertary"
@click.prevent.stop="$emit('tertary')"
v-if="tertary !== ''"
variant="tertiary"
@click.prevent.stop="$emit('tertiary')"
>
{{ tertary }}
{{ tertiary }}
</x-button>
<x-button
type="secondary"
variant="secondary"
@click.prevent.stop="$router.back()"
>
{{ $t('misc.cancel') }}
</x-button>
<x-button
type="primary"
v-if="primaryLabel !== ''"
variant="primary"
@click.prevent.stop="primary"
:icon="primaryIcon"
:disabled="primaryDisabled"
v-if="primaryLabel !== ''"
>
{{ primaryLabel }}
</x-button>
@ -65,7 +65,7 @@ export default {
type: Boolean,
default: false,
},
tertary: {
tertiary: {
type: String,
default: '',
},
@ -78,7 +78,7 @@ export default {
default: false,
},
},
emits: ['create', 'primary', 'tertary'],
emits: ['create', 'primary', 'tertiary'],
methods: {
primary() {
this.$emit('create')

2
src/components/misc/notification.vue
View file

@ -26,7 +26,7 @@
@click="action.callback"
:shadow="false"
class="is-small"
type="secondary"
variant="secondary"
v-for="(action, i) in item.data.actions"
>
{{ action.title }}

2
src/components/misc/subscription.vue
View file

@ -1,6 +1,6 @@
<template>
<x-button
type="secondary"
variant="secondary"
:icon="icon"
v-tooltip="tooltipText"
@click="changeSubscription"

5
src/components/modal/modal.vue
View file

@ -31,14 +31,15 @@
<div class="actions">
<x-button
@click="$emit('close')"
type="tertary"
variant="tertiary"
class="has-text-danger"
>
{{ $t('misc.cancel') }}
</x-button>
<x-button
@click="$emit('submit')"
type="primary"
variant="primary"
v-cy="'modalPrimary'"
:shadow="false"
>
{{ $t('misc.doit') }}

2
src/components/tasks/partials/attachments.vue
View file

@ -83,7 +83,7 @@
@click="$refs.files.click()"
class="mb-4"
icon="cloud-upload-alt"
type="secondary"
variant="secondary"
:shadow="false"
>
{{ $t('task.attachment.upload') }}

6
src/components/tasks/partials/defer-task.vue
View file

@ -8,21 +8,21 @@
<x-button
@click.prevent.stop="() => deferDays(1)"
:shadow="false"
type="secondary"
variant="secondary"
>
{{ $t('task.deferDueDate.1day') }}
</x-button>
<x-button
@click.prevent.stop="() => deferDays(3)"
:shadow="false"
type="secondary"
variant="secondary"
>
{{ $t('task.deferDueDate.3days') }}
</x-button>
<x-button
@click.prevent.stop="() => deferDays(7)"
:shadow="false"
type="secondary"
variant="secondary"
>
{{ $t('task.deferDueDate.1week') }}
</x-button>

2
src/components/tasks/partials/relatedTasks.vue
View file

@ -6,7 +6,7 @@
class="is-pulled-right add-task-relation-button"
:class="{'is-active': showNewRelationForm}"
v-tooltip="$t('task.relation.add')"
type="secondary"
variant="secondary"
icon="plus"
:shadow="false"
/>

6
src/components/tasks/partials/repeatAfter.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="control repeat-after-input">
<div class="buttons has-addons is-centered mt-2">
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">{{ $t('task.repeat.everyDay') }}</x-button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">{{ $t('task.repeat.everyWeek') }}</x-button>
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">{{ $t('task.repeat.everyMonth') }}</x-button>
<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">{{ $t('task.repeat.everyDay') }}</x-button>
<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">{{ $t('task.repeat.everyWeek') }}</x-button>
<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">{{ $t('task.repeat.everyMonth') }}</x-button>
</div>
<div class="is-flex is-align-items-center mb-2">
<label for="repeatMode" class="is-fullwidth">

7
src/main.ts
View file

@ -1,11 +1,8 @@
import {createApp, configureCompat} from 'vue'
// default everything to Vue 3 behavior
configureCompat({
COMPONENT_V_MODEL: false,
COMPONENT_ASYNC: false,
RENDER_FUNCTION: false,
WATCH_ARRAY: false, // TODO: check this again; this might lead to some problemes
TRANSITION_GROUP_ROOT: false,
MODE: 3,
})
import App from './App.vue'

2
src/views/About.vue
View file

@ -21,7 +21,7 @@
</div>
<footer class="modal-card-foot is-flex is-justify-content-flex-end">
<x-button
type="secondary"
variant="secondary"
@click.prevent.stop="$router.back()"
>
{{ $t('misc.close') }}

4
src/views/filters/FilterEdit.vue
View file

@ -4,8 +4,8 @@
primary-icon=""
:primary-label="$t('misc.save')"
@primary="saveSavedFilter"
:tertary="$t('misc.delete')"
@tertary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
:tertiary="$t('misc.delete')"
@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
>
<form @submit.prevent="saveSavedFilter()">
<div class="field">

8
src/views/list/settings/background.vue
View file

@ -6,8 +6,8 @@
class="list-background-setting"
:wide="true"
v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
:tertary="hasBackground ? $t('list.background.remove') : ''"
@tertary="removeBackground()"
:tertiary="hasBackground ? $t('list.background.remove') : ''"
@tertiary="removeBackground()"
>
<div class="mb-4" v-if="uploadBackgroundEnabled">
<input
@ -20,7 +20,7 @@
<x-button
:loading="backgroundUploadService.loading"
@click="$refs.backgroundUploadInput.click()"
type="primary"
variant="primary"
>
{{ $t('list.background.upload') }}
</x-button>
@ -54,7 +54,7 @@
@click="() => searchBackgrounds(currentPage + 1)"
class="is-load-more-button mt-4"
:shadow="false"
type="secondary"
variant="secondary"
v-if="backgroundSearchResult.length > 0"
>
{{ backgroundService.loading ? $t('misc.loading') : $t('list.background.loadMore') }}

4
src/views/list/settings/edit.vue
View file

@ -4,8 +4,8 @@
primary-icon=""
:primary-label="$t('misc.save')"
@primary="save"
:tertary="$t('misc.delete')"
@tertary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
:tertiary="$t('misc.delete')"
@tertiary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
>
<div class="field">
<label class="label" for="title">{{ $t('list.title') }}</label>

5
src/views/list/views/Kanban.vue
View file

@ -79,6 +79,7 @@
:disabled="bucket.limit < 0"
:icon="['far', 'save']"
:shadow="false"
v-cy="'setBucketLimit'"
/>
</div>
</div>
@ -165,7 +166,7 @@
:shadow="false"
v-if="!showNewTaskInput[bucket.id]"
icon="plus"
type="secondary"
variant="secondary"
>
{{
bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
@ -195,7 +196,7 @@
:shadow="false"
class="is-transparent is-fullwidth has-text-centered"
v-else
type="secondary"
variant="secondary"
icon="plus"
>
{{ $t('list.kanban.addBucket') }}

2
src/views/list/views/List.vue
View file

@ -37,7 +37,7 @@
<x-button
@click="showTaskSearch = !showTaskSearch"
icon="search"
type="secondary"
variant="secondary"
v-if="!showTaskSearch"
/>
</div>

2
src/views/list/views/Table.vue
View file

@ -7,7 +7,7 @@
<x-button
@click.prevent.stop="toggle()"
icon="th"
type="secondary"
variant="secondary"
>
{{ $t('list.table.columns') }}
</x-button>

2
src/views/migrator/MigrateService.vue
View file

@ -53,7 +53,7 @@
</p>
<div class="buttons">
<x-button @click="migrate">{{ $t('migrate.confirm') }}</x-button>
<x-button :to="{name: 'home'}" type="tertary" class="has-text-danger">{{ $t('misc.cancel') }}</x-button>
<x-button :to="{name: 'home'}" variant="tertiary" class="has-text-danger">{{ $t('misc.cancel') }}</x-button>
</div>
</div>
<div v-else>

4
src/views/namespaces/ListNamespaces.vue
View file

@ -22,7 +22,7 @@
<x-button
:to="{name: 'list.create', params: {id: n.id}}"
class="is-pulled-right"
type="secondary"
variant="secondary"
v-if="n.id > 0 && n.lists.length > 0"
icon="plus"
>
@ -31,7 +31,7 @@
<x-button
:to="{name: 'namespace.settings.archive', params: {id: n.id}}"
class="is-pulled-right mr-4"
type="secondary"
variant="secondary"
v-if="n.isArchived"
icon="archive"
>

4
src/views/namespaces/settings/edit.vue
View file

@ -4,8 +4,8 @@
primary-icon=""
:primary-label="$t('misc.save')"
@primary="save"
:tertary="$t('misc.delete')"
@tertary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
:tertiary="$t('misc.delete')"
@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
>
<form @submit.prevent="save()">
<div class="field">

6
src/views/tasks/ShowTasks.vue
View file

@ -32,9 +32,9 @@
/>
</h3>
<div v-if="!showAll" class="mb-4">
<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
<x-button variant="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
<x-button variant="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
<x-button variant="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
</div>
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>

30
src/views/tasks/TaskDetailView.vue
View file

@ -258,7 +258,7 @@
@click="toggleTaskDone()"
class="is-outlined has-no-border"
icon="check-double"
type="secondary"
variant="secondary"
>
{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
</x-button>
@ -270,7 +270,7 @@
/>
<x-button
@click="setFieldActive('assignees')"
type="secondary"
variant="secondary"
v-shortcut="'a'"
v-cy="'taskDetail.assign'"
>
@ -279,7 +279,7 @@
</x-button>
<x-button
@click="setFieldActive('labels')"
type="secondary"
variant="secondary"
icon="tags"
v-shortcut="'l'"
>
@ -287,14 +287,14 @@
</x-button>
<x-button
@click="setFieldActive('priority')"
type="secondary"
variant="secondary"
icon="exclamation"
>
{{ $t('task.detail.actions.priority') }}
</x-button>
<x-button
@click="setFieldActive('dueDate')"
type="secondary"
variant="secondary"
icon="calendar"
v-shortcut="'d'"
>
@ -302,42 +302,42 @@
</x-button>
<x-button
@click="setFieldActive('startDate')"
type="secondary"
variant="secondary"
icon="play"
>
{{ $t('task.detail.actions.startDate') }}
</x-button>
<x-button
@click="setFieldActive('endDate')"
type="secondary"
variant="secondary"
icon="stop"
>
{{ $t('task.detail.actions.endDate') }}
</x-button>
<x-button
@click="setFieldActive('reminders')"
type="secondary"
variant="secondary"
:icon="['far', 'clock']"
>
{{ $t('task.detail.actions.reminders') }}
</x-button>
<x-button
@click="setFieldActive('repeatAfter')"
type="secondary"
variant="secondary"
icon="history"
>
{{ $t('task.detail.actions.repeatAfter') }}
</x-button>
<x-button
@click="setFieldActive('percentDone')"
type="secondary"
variant="secondary"
icon="percent"
>
{{ $t('task.detail.actions.percentDone') }}
</x-button>
<x-button
@click="setFieldActive('attachments')"
type="secondary"
variant="secondary"
icon="paperclip"
v-shortcut="'f'"
>
@ -345,7 +345,7 @@
</x-button>
<x-button
@click="setFieldActive('relatedTasks')"
type="secondary"
variant="secondary"
icon="sitemap"
v-shortcut="'r'"
>
@ -353,21 +353,21 @@
</x-button>
<x-button
@click="setFieldActive('moveList')"
type="secondary"
variant="secondary"
icon="list"
>
{{ $t('task.detail.actions.moveList') }}
</x-button>
<x-button
@click="setFieldActive('color')"
type="secondary"
variant="secondary"
icon="fill-drip"
>
{{ $t('task.detail.actions.color') }}
</x-button>
<x-button
@click="toggleFavorite"
type="secondary"
variant="secondary"
:icon="task.isFavorite ? 'star' : ['far', 'star']"
>
{{

4
src/views/user/Login.vue
View file

@ -67,7 +67,7 @@
<x-button
:to="{ name: 'user.register' }"
v-if="registrationEnabled"
type="secondary"
variant="secondary"
>
{{ $t('user.auth.register') }}
</x-button>
@ -87,7 +87,7 @@
@click="redirectToProvider(p)"
v-for="(p, k) in openidConnect.providers"
:key="k"
type="secondary"
variant="secondary"
class="is-fullwidth mt-2"
>
{{ $t('user.auth.loginWith', {provider: p.name}) }}

2
src/views/user/Register.vue
View file

@ -79,7 +79,7 @@
>
{{ $t('user.auth.register') }}
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">
<x-button :to="{ name: 'user.login' }" variant="secondary">
{{ $t('user.auth.login') }}
</x-button>
</div>

2
src/views/user/RequestPasswordReset.vue
View file

@ -35,7 +35,7 @@
>
{{ $t('user.auth.resetPasswordAction') }}
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">
<x-button :to="{ name: 'user.login' }" variant="secondary">
{{ $t('user.auth.login') }}
</x-button>
</div>

1
src/views/user/settings/Avatar.vue
View file

@ -48,6 +48,7 @@
<x-button
:loading="avatarService.loading || loading"
@click="uploadAvatar"
v-cy="'uploadAvatar'"
>
{{ $t('user.settings.avatar.uploadAvatar') }}
</x-button>

1
src/views/user/settings/General.vue
View file

@ -110,6 +110,7 @@
:loading="loading"
@click="updateSettings()"
class="is-fullwidth mt-4"
v-cy="'saveGeneralSettings'"
>
{{ $t('misc.save') }}
</x-button>

2
src/views/user/settings/TOTP.vue
View file

@ -55,7 +55,7 @@
<x-button @click="totpDisable" class="is-danger">
{{ $t('user.settings.totp.disable') }}
</x-button>
<x-button @click="totpDisableForm = false" type="tertary" class="ml-2">
<x-button @click="totpDisableForm = false" variant="tertiary" class="ml-2">
{{ $t('misc.cancel') }}
</x-button>
</div>