vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Use buttons more consistently
continuous-integration/drone/push Build is failing Details

This commit is contained in:
kolaente 2021-01-17 13:04:49 +01:00
parent 0102709d92
commit e960202607
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
21 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@
model="hex" model="hex"
picker="square" picker="square"
v-model="color"/> v-model="color"/>
<a @click="reset" class="reset"> <a @click="reset" class="button has-no-shadow is-small ml-2">
Reset Color Reset Color
</a> </a>
</div> </div>

2
src/components/input/datepicker.vue
View File

@ -98,7 +98,7 @@
/> />
<a <a
class="button is-outlined is-primary has-no-shadow is-fullwidth" class="button is-primary has-no-shadow is-fullwidth"
@click="close" @click="close"
> >
Confirm Confirm

20
src/components/input/editor.vue
View File

@ -1,14 +1,16 @@
<template> <template>
<div :class="{'is-pulled-up': isEditEnabled}" class="editor"> <div :class="{'is-pulled-up': isEditEnabled}" class="editor">
<div class="tabs is-right" v-if="hasPreview && isEditEnabled && !hasEditBottom"> <div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
<ul> <a v-if="!isEditActive" @click="toggleEdit" class="button has-no-shadow">
<li> <icon icon="pen"/>
<a v-if="!isEditActive" @click="toggleEdit">Edit</a> </a>
<a v-else @click="toggleEdit">Done</a> <a v-else @click="toggleEdit" class="button has-no-shadow">
</li> Done
</ul> </a>
</div> </div>
<div class="clear"></div>
<vue-easymde <vue-easymde
:configs="config" :configs="config"
@change="bubble" @change="bubble"
@ -416,8 +418,8 @@ export default {
@import '../../styles/theme/variables'; @import '../../styles/theme/variables';
.editor { .editor {
.tabs ul { .clear {
margin-left: 0; clear: both;
} }
.preview.content ul li input[type="checkbox"] { .preview.content ul li input[type="checkbox"] {

2
src/components/list/partials/background-settings.vue
View File

@ -50,7 +50,7 @@
<a <a
:disabled="backgroundService.loading" :disabled="backgroundService.loading"
@click="() => searchBackgrounds(currentPage + 1)" @click="() => searchBackgrounds(currentPage + 1)"
class="button is-primary is-centered is-load-more-button is-outlined noshadow" class="button is-centered is-load-more-button has-no-shadow mt-4"
v-if="backgroundSearchResult.length > 0" v-if="backgroundSearchResult.length > 0"
> >
<template v-if="backgroundService.loading"> <template v-if="backgroundService.loading">

2
src/components/migrator/migration.vue
View File

@ -39,7 +39,7 @@
</p> </p>
<div class="buttons"> <div class="buttons">
<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button> <button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link> <router-link :to="{name: 'home'}" class="button is-text has-text-danger is-inverted noshadow underline-none">Cancel</router-link>
</div> </div>
</div> </div>
<div v-else> <div v-else>

4
src/components/modal/modal.vue
View File

@ -11,8 +11,8 @@
<slot name="text"></slot> <slot name="text"></slot>
</div> </div>
<div class="actions"> <div class="actions">
<button @click="$emit('close')" class="button is-danger is-inverted noshadow">Cancel</button> <button @click="$emit('close')" class="button is-text has-text-danger is-inverted noshadow underline-none">Cancel</button>
<button @click="$emit('submit')" class="button is-success noshadow">Do it!</button> <button @click="$emit('submit')" class="button is-primary noshadow">Do it!</button>
</div> </div>
</slot> </slot>
</div> </div>

2
src/components/tasks/edit-task.vue
View File

@ -138,7 +138,7 @@
class="is-narrow" class="is-narrow"
/> />
<button :class="{ 'is-loading': taskService.loading}" class="button is-success is-fullwidth" type="submit"> <button :class="{ 'is-loading': taskService.loading}" class="button is-primary is-fullwidth" type="submit">
Save Save
</button> </button>

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

@ -2,9 +2,9 @@
<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container"> <div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
<label class="label">Defer due date</label> <label class="label">Defer due date</label>
<div class="defer-days"> <div class="defer-days">
<button @click="() => deferDays(1)" class="button is-outlined is-primary has-no-shadow">1 day</button> <button @click="() => deferDays(1)" class="button has-no-shadow">1 day</button>
<button @click="() => deferDays(3)" class="button is-outlined is-primary has-no-shadow">3 days</button> <button @click="() => deferDays(3)" class="button has-no-shadow">3 days</button>
<button @click="() => deferDays(7)" class="button is-outlined is-primary has-no-shadow">1 week</button> <button @click="() => deferDays(7)" class="button has-no-shadow">1 week</button>
</div> </div>
<flat-pickr <flat-pickr
:class="{ 'disabled': taskService.loading}" :class="{ 'disabled': taskService.loading}"

6
src/styles/components/color-picker.scss
View File

@ -1,15 +1,11 @@
.color-picker-container { .color-picker-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
.verte__guide { .verte__guide {
border-radius: 100%; border-radius: 100%;
border: 1px solid $grey-light; border: 1px solid $grey-light;
box-shadow: $card-shadow; box-shadow: $card-shadow;
} }
a.reset {
font-size: .9em;
padding-left: .5rem;
}
} }

12
src/styles/components/datepicker.scss
View File

@ -15,7 +15,7 @@
border-radius: $radius; border-radius: $radius;
box-shadow: $card-shadow; box-shadow: $card-shadow;
a { a:not(.button) {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .5rem; padding: 0 .5rem;
@ -49,11 +49,11 @@
width: 2rem; width: 2rem;
text-align: center; text-align: center;
} }
}
&.button {
margin: 1rem; a.button {
width: calc(100% - 2rem); margin: 1rem;
} width: calc(100% - 2rem);
} }
.flatpickr-calendar { .flatpickr-calendar {

4
src/styles/theme/content.scss
View File

@ -55,3 +55,7 @@
font-size: 1rem; font-size: 1rem;
} }
} }
.underline-none {
text-decoration: none !important;
}

2
src/views/Home.vue
View File

@ -5,7 +5,7 @@
<p>Click on a list or namespace on the left to get started.</p> <p>Click on a list or namespace on the left to get started.</p>
<router-link <router-link
:to="{name: 'migrate.start'}" :to="{name: 'migrate.start'}"
class="button is-primary is-right noshadow is-outlined" class="button is-primary has-no-shadow"
v-if="migratorsEnabled" v-if="migratorsEnabled"
> >
Import your data into Vikunja Import your data into Vikunja

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

@ -1,6 +1,6 @@
<template> <template>
<div :class="{ 'is-loading': labelService.loading}" class="loader-container content"> <div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
<router-link :to="{name:'labels.create'}" class="button is-success button-right"> <router-link :to="{name:'labels.create'}" class="button is-primary button-right">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="plus"/> <icon icon="plus"/>
</span> </span>

2
src/views/labels/NewLabel.vue
View File

@ -15,7 +15,7 @@
v-model="label.title"/> v-model="label.title"/>
</p> </p>
<p class="control"> <p class="control">
<button class="button is-success noshadow" type="submit"> <button class="button is-primary noshadow" type="submit">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="plus"/> <icon icon="plus"/>
</span> </span>

2
src/views/list/NewList.vue
View File

@ -18,7 +18,7 @@
v-model="list.title"/> v-model="list.title"/>
</p> </p>
<p class="control"> <p class="control">
<button :disabled="list.title === ''" @click="newList()" class="button is-success noshadow"> <button :disabled="list.title === ''" @click="newList()" class="button is-primary noshadow">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="plus"/> <icon icon="plus"/>
</span> </span>

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

@ -62,7 +62,7 @@
</span> </span>
</p> </p>
<p class="control"> <p class="control">
<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-success"> <button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-primary">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="plus"/> <icon icon="plus"/>
</span> </span>

2
src/views/namespaces/NewNamespace.vue
View File

@ -18,7 +18,7 @@
v-model="namespace.title"/> v-model="namespace.title"/>
</p> </p>
<p class="control"> <p class="control">
<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-success noshadow"> <button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-primary noshadow">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="plus"/> <icon icon="plus"/>
</span> </span>

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

@ -30,9 +30,9 @@
/> />
</h3> </h3>
<div v-if="!showAll"> <div v-if="!showAll">
<a @click="showTodaysTasks()" class="button is-primary is-outlined noshadow mr-2">Today</a> <a @click="showTodaysTasks()" class="button noshadow mr-2">Today</a>
<a @click="setDatesToNextWeek()" class="button is-primary is-outlined noshadow mr-2">Next Week</a> <a @click="setDatesToNextWeek()" class="button noshadow mr-2">Next Week</a>
<a @click="setDatesToNextMonth()" class="button is-primary is-outlined noshadow">Next Month</a> <a @click="setDatesToNextMonth()" class="button noshadow">Next Month</a>
</div> </div>
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)"> <template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
<h3 class="nothing">Nothing to do - Have a nice day!</h3> <h3 class="nothing">Nothing to do - Have a nice day!</h3>

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

@ -236,9 +236,9 @@
</div> </div>
<div class="column is-one-third action-buttons" v-if="canWrite"> <div class="column is-one-third action-buttons" v-if="canWrite">
<a <a
:class="{'is-success': !task.done}" :class="{'is-success': !task.done, 'has-no-shadow': !task.done}"
@click="toggleTaskDone()" @click="toggleTaskDone()"
class="button is-outlined noshadow has-no-border"> class="button is-outlined has-no-border">
<span class="icon is-small"><icon icon="check-double"/></span> <span class="icon is-small"><icon icon="check-double"/></span>
<template v-if="task.done"> <template v-if="task.done">
Mark as undone Mark as undone

2
src/views/teams/NewTeam.vue
View File

@ -16,7 +16,7 @@
v-model="team.name"/> v-model="team.name"/>
</p> </p>
<p class="control"> <p class="control">
<button class="button is-success noshadow" type="submit"> <button class="button is-primary noshadow" type="submit">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="plus"/> <icon icon="plus"/>
</span> </span>

2
src/views/user/Settings.vue
View File

@ -248,7 +248,7 @@
<input type="text" v-model="caldavUrl" class="input" readonly/> <input type="text" v-model="caldavUrl" class="input" readonly/>
</div> </div>
<div class="control"> <div class="control">
<a @click="copy(caldavUrl)" class="button is-success noshadow" v-tooltip="'Copy to clipboard'"> <a @click="copy(caldavUrl)" class="button is-primary noshadow" v-tooltip="'Copy to clipboard'">
<span class="icon"> <span class="icon">
<icon icon="paste"/> <icon icon="paste"/>
</span> </span>