Improve editor buttons UX #361

profi248 · 2020-12-30T19:13:40Z

profi248 commented

2020-12-30 19:13:40 +00:00

When I first saw the editor, I had no idea how to actually save your edit of description/comment. I don't think we need a preview button, as the editor is wysiwyg. I removed the preview button and made it so that the edit button changes into "done" button that closes the editor. Also changed order of buttons in comments to be more friendly.

When I first saw the editor, I had no idea how to actually save your edit of description/comment. I don't think we need a preview button, as the editor is wysiwyg. I removed the preview button and made it so that the edit button changes into "done" button that closes the editor. Also changed order of buttons in comments to be more friendly. ![image](/attachments/efb579d4-0ea6-45d9-8f50-5bd45fd17f79)

image.png

68 KiB

profi248 commented

2020-12-30 19:22:28 +00:00

Oh it broke the test, I need to fix that

profi248 force-pushed edit-button from 0818977c56 to de295d8683

2020-12-30 19:27:09 +00:00

Compare

konrad commented

2020-12-30 19:28:56 +00:00

So it changes back to preview when clicking "done"?

profi248 commented

2020-12-30 19:35:12 +00:00

Yeah, exactly that. I think the user doesn't see it as a preview, but as a saved edit.

konrad requested changes 2020-12-30 19:55:55 +00:00

src/components/input/editor.vue Outdated

						
				@ -33,2 +25,3 @@

								<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">Save</a>

konrad commented

2020-12-30 19:54:08 +00:00

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

src/components/input/editor.vue Outdated

						
				@ -401,0 +395,4 @@

								this.isPreviewActive = true;

								this.isEditActive = false;

								this.renderPreview();

								this.$emit('change');

konrad commented

2020-12-30 19:55:51 +00:00

Please use this.bubble().

Please use `this.bubble()`.

konrad reviewed 2020-12-30 19:59:10 +00:00

src/components/input/editor.vue Outdated

						
				@ -5,4 +5,1 @@

								<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">

									<a @click="showPreview">Preview</a>

								</li>

								<li :class="{'is-active': isEditActive}">

konrad commented

2020-12-30 19:59:10 +00:00

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"

profi248 commented

2020-12-30 20:40:14 +00:00

Changes pushed - is that what you had in mind?

profi248 force-pushed edit-button from a0de14aa1b to ca45c28a5a

2020-12-30 20:49:05 +00:00

Compare

profi248 force-pushed edit-button from ca45c28a5a to c16c454f36

2020-12-30 20:49:50 +00:00

Compare

konrad approved these changes 2020-12-30 21:01:30 +00:00

konrad left a comment

Exactly, thanks!

profi248 commented

2020-12-30 21:10:51 +00:00

CI is being pretty moody it seems

konrad commented

2020-12-30 21:24:01 +00:00

Frontend Tests are somewhat flaky by nature but I've yet to figure out a way to stabilize the runs a bit better.
I think throwing more hardware at it could help but I'd like to avoid that if possible.

Oh also you don't need to force push all the time, I'll squash merge anyway at the end.

Frontend Tests are somewhat flaky by nature but I've yet to figure out a way to stabilize the runs a bit better. I think throwing more hardware at it could help but I'd like to avoid that if possible. Oh also you don't need to force push all the time, I'll squash merge anyway at the end.

konrad added 1 commit 2020-12-30 21:24:07 +00:00