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

Make editor edit button at the bottom the default and make sure the done button stands out more

Browse source
This commit is contained in:
kolaente 2021-08-17 21:10:32 +02:00
parent 3a46032c63
commit 9c6369e8d8
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
4 changed files with 19 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,5 @@
<template> <template>
<div :class="{'is-pulled-up': isEditEnabled}" class="editor"> <div class="editor">
<div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
<x-button
v-if="!isEditActive"
@click="toggleEdit"
:shadow="false"
type="secondary"
>
<icon icon="pen"/>
</x-button>
<x-button
v-else
@click="toggleEdit"
:shadow="false"
type="secondary"
>
{{ $t('input.editor.done') }}
</x-button>
</div>
<div class="clear"></div> <div class="clear"></div>
<vue-easymde <vue-easymde
@ -32,7 +13,7 @@
<div class="preview content" v-html="preview" v-if="isPreviewActive && text !== ''"> <div class="preview content" v-html="preview" v-if="isPreviewActive && text !== ''">
</div> </div>
<p class="has-text-centered has-text-grey is-italic" v-if="isPreviewActive && text === '' && emptyText !== ''"> <p class="has-text-centered has-text-grey is-italic" v-if="showPreviewText">
{{ emptyText }} {{ emptyText }}
<template v-if="isEditEnabled"> <template v-if="isEditEnabled">
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>. <a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>.
@ -40,10 +21,10 @@
</p> </p>
<ul class="actions"> <ul class="actions">
<template v-if="hasEditBottom && isEditEnabled"> <template v-if="isEditEnabled && !showPreviewText">
<li> <li>
<a v-if="!isEditActive" @click="toggleEdit">{{ $t('input.editor.edit') }}</a> <a v-if="!isEditActive" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
<a v-else @click="toggleEdit">{{ $t('input.editor.done') }}</a> <a v-else @click="toggleEdit" class="done-edit">{{ $t('input.editor.done') }}</a>
</li> </li>
</template> </template>
<li v-for="(action, k) in bottomActions" :key="k"> <li v-for="(action, k) in bottomActions" :key="k">
@ -97,10 +78,6 @@ export default {
isEditEnabled: { isEditEnabled: {
default: true, default: true,
}, },
hasEditBottom: {
type: Boolean,
default: false,
},
bottomActions: { bottomActions: {
default: () => [], default: () => [],
}, },
@ -109,6 +86,11 @@ export default {
default: () => '', default: () => '',
}, },
}, },
computed: {
showPreviewText() {
return this.isPreviewActive && this.text === '' && this.emptyText !== ''
},
},
data() { data() {
return { return {
text: '', text: '',
@ -468,8 +450,12 @@ export default {
clear: both; clear: both;
} }
.preview.content ul li input[type="checkbox"] { .preview.content {
margin-right: .5rem; margin-bottom: .5rem;
ul li input[type="checkbox"] {
margin-right: .5rem;
}
} }
} }
@ -548,6 +534,10 @@ ul.actions {
&, a { &, a {
color: $grey-500; color: $grey-500;
&.done-edit {
color: $primary;
}
} }
a:hover { a:hover {

1
src/components/tasks/partials/comments.vue
View file

@ -77,7 +77,6 @@
} }
" "
v-model="c.comment" v-model="c.comment"
:has-edit-bottom="true"
:bottom-actions="actions[c.id]" :bottom-actions="actions[c.id]"
/> />
</div> </div>

15
src/styles/components/task.scss
View file

@ -117,21 +117,6 @@
} }
} }
} }
&.description .editor {
&.is-pulled-up {
margin-top: -3rem;
}
.tabs {
margin-bottom: 0;
ul {
border-bottom: none;
}
}
}
} }
.details, .heading { .details, .heading {

3
src/styles/theme/variables/variables.scss
View file

@ -21,9 +21,6 @@ $transition-duration: 100ms;
$flash-background-duration: 750ms; $flash-background-duration: 750ms;
$vikunja-font: 'Quicksand', sans-serif; $vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: $grey-100;
$vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
$vikunja-green: #4DB788;
$navbar-padding: 2rem; $navbar-padding: 2rem;
$vikunja-nav-background: $light-background; $vikunja-nav-background: $light-background;