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

Improve editor buttons UX #361

Merged
konrad merged 3 commits from profi248/frontend:edit-button into master 2020-12-30 21:52:44 +00:00
Conversation 7 Commits 3 Files Changed 2 +20 -18
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')
.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')

36
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>
<li>
konrad commented 2020-12-30 19:59:10 +00:00
Outdated
Review
Copy Link

I think we can also remove this since there's only ever one item now - that way all of them have the same "visual hierachy"

I think we can also remove this since there's only ever one item now - that way all of them have the same "visual hierachy"
<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>
<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
<a v-else @click="toggleEdit">Done</a>
konrad commented 2020-12-30 19:54:08 +00:00
Outdated
Review
Copy Link

I think this should say "Done" as well to be consistent with the rest.

I think this should say "Done" as well to be consistent with the rest.
</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.bubble(0); // save instantly
konrad commented 2020-12-30 19:55:51 +00:00
Outdated
Review
Copy Link

Please use this.bubble().

Please use `this.bubble()`.
} else {
this.isPreviewActive = false;
this.isEditActive = true;
}
},
},
}