Make editor edit button at the bottom the default and make sure the done button stands out more
This commit is contained in:
parent
3a46032c63
commit
9c6369e8d8
4 changed files with 19 additions and 48 deletions
|
@ -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,9 +450,13 @@ export default {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview.content ul li input[type="checkbox"] {
|
.preview.content {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
ul li input[type="checkbox"] {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
|
@ -548,6 +534,10 @@ ul.actions {
|
||||||
|
|
||||||
&, a {
|
&, a {
|
||||||
color: $grey-500;
|
color: $grey-500;
|
||||||
|
|
||||||
|
&.done-edit {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -117,21 +117,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.description .editor {
|
|
||||||
|
|
||||||
&.is-pulled-up {
|
|
||||||
margin-top: -3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.details, .heading {
|
.details, .heading {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue