profi248
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve editor buttons UX 

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;
}
},
},
}