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

Improve editor buttons UX

Browse Source 
Rename "preview" buttons, as they are confusing, there's no obvious way to save your edit.
Change order of buttons in comments to be more friendly.
This commit is contained in:
profi248 2020-12-30 17:56:20 +01:00 committed by David Košťál
parent 624e4e6d27
commit 5cde4c3ab8
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/task/task.spec.js
View File

@ -165,7 +165,7 @@ describe('Task', () => {
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')
.contains('Preview')
.contains('Done')
.click()
cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')

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

@ -2,11 +2,9 @@
<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
<div class="tabs is-right" v-if="hasPreview && isEditEnabled && !hasEditBottom">
<ul>
<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
<a @click="showPreview">Preview</a>
</li>
<li :class="{'is-active': isEditActive}">
<a @click="() => {isPreviewActive = false; isEditActive = true}">Edit</a>
<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
<a v-else @click="toggleEdit">Done</a>
</li>
</ul>
</div>
@ -23,17 +21,15 @@
</div>
<ul class="actions">
<template v-if="hasEditBottom">
<li :class="{'is-active': isEditActive}">
<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
<a v-else @click="toggleEdit">Save</a>
</li>
</template>
<li v-for="(action, k) in bottomActions" :key="k">
<a @click="action.action">{{ action.title }}</a>
</li>
<template v-if="hasEditBottom">
<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
<a @click="showPreview">Preview</a>
</li>
<li :class="{'is-active': isEditActive}">
<a @click="() => {isPreviewActive = false; isEditActive = true}">Edit</a>
</li>
</template>
</ul>
</div>
</template>
@ -394,10 +390,16 @@ export default {
this.bubble()
this.renderPreview()
},
showPreview() {
this.isPreviewActive = true
this.isEditActive = false
this.renderPreview()
toggleEdit() {
if (this.isEditActive) {
this.isPreviewActive = true;
this.isEditActive = false;
this.renderPreview();
this.$emit('change');
} else {
this.isPreviewActive = false;
this.isEditActive = true;
}
},
},
}