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

Improve editor buttons UX (#361)

Browse source 
Co-authored-by: konrad <konrad@kola-entertainments.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/361
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: profi248 <kostal.david8@gmail.com>
Co-committed-by: profi248 <kostal.david8@gmail.com>
This commit is contained in:
profi248 2020-12-30 21:52:43 +00:00 committed by konrad
parent 8fe362c267
commit bb2800ec40
2 changed files with 20 additions and 18 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') cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
.type('{selectall}New Description') .type('{selectall}New Description')
cy.get('.task-view .details.content.description .editor a') cy.get('.task-view .details.content.description .editor a')
.contains('Preview') .contains('Done')
.click() .click()
cy.get('.task-view .details.content.description h3 span.is-small.has-text-success') cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')

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

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