New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Exit Code Editor" toolbar. #10061

Merged
merged 2 commits into from Sep 25, 2018

Conversation

@jasmussen
Contributor

jasmussen commented Sep 20, 2018

This PR intends to fix #9445. It adds a toolbar to the code editor with a label showing what you are doing, as well as an "Exit Code Editor" button that takes you back to the visual editor.

I hope the space between this label and the close button can be used, in the future, to add a slot fill so a plugin could add quicktags here.

Screenshot:

screen shot 2018-09-20 at 11 08 43

The PR also cleans up a few things, removes some redundant rules, refactors the centering stuff. It is tested for all breakpoints. However, it is not yet wired up, and I could use some help here. Essentially the button doesn't do anything yet. @tofumatt or @gziolo can you help me wire this up? Thanks.

Add "Exit Code Editor" toolbar.
This PR intends to fix #9445. It adds a toolbar to the code editor with a label showing what you are doing, as well as an "Exit Code Editor" button that takes you back to the visual editor.

I hope the space between this label and the close button can be used, in the future, to add a slot fill so a plugin could add quicktags here.
@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Sep 20, 2018

Member

I can totally help with this, though I might be a bit delayed until tomorrow or the weekend.

First thoughts though is the "Exit Code Editor" thing doesn't look super "button-y"… any way to make it seem more like something I'd expect to click on? 🤷‍♂️

Member

tofumatt commented Sep 20, 2018

I can totally help with this, though I might be a bit delayed until tomorrow or the weekend.

First thoughts though is the "Exit Code Editor" thing doesn't look super "button-y"… any way to make it seem more like something I'd expect to click on? 🤷‍♂️

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 20, 2018

Contributor

Thanks, I don't think a fix is urgent. Would love your help some time next week, thank you.

First thoughts though is the "Exit Code Editor" thing doesn't look super "button-y"… any way to make it seem more like something I'd expect to click on?

It's buttony as soon as you hover :D and in that vein it follows the same pattern as the "Close" button on the sidebar.

Adding "Needs Design Feedback" for thoughts on that! Thanks for your help!

Contributor

jasmussen commented Sep 20, 2018

Thanks, I don't think a fix is urgent. Would love your help some time next week, thank you.

First thoughts though is the "Exit Code Editor" thing doesn't look super "button-y"… any way to make it seem more like something I'd expect to click on?

It's buttony as soon as you hover :D and in that vein it follows the same pattern as the "Close" button on the sidebar.

Adding "Needs Design Feedback" for thoughts on that! Thanks for your help!

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Sep 25, 2018

Member

Switching back to the visual mode is super slow. We probably should optimize it in a separate PR. From what I see we unmount visual editor when going into code editing mode. In my opinion, we should have visual mode always rendered but hidden with CSS when we switch to the text mode to improve the user experience and accommodate. Another option is to finally add some optimizations to the editor's visual mode to render only those blocks that are visible on the screen. /cc @mtias

Member

gziolo commented Sep 25, 2018

Switching back to the visual mode is super slow. We probably should optimize it in a separate PR. From what I see we unmount visual editor when going into code editing mode. In my opinion, we should have visual mode always rendered but hidden with CSS when we switch to the text mode to improve the user experience and accommodate. Another option is to finally add some optimizations to the editor's visual mode to render only those blocks that are visible on the screen. /cc @mtias

@gziolo

gziolo approved these changes Sep 25, 2018

LGTM after my commit landed 💯

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 25, 2018

Contributor

Thank you so much for the help!

Contributor

jasmussen commented Sep 25, 2018

Thank you so much for the help!

@jasmussen jasmussen added this to the 4.0 milestone Sep 25, 2018

@jasmussen jasmussen merged commit 0261991 into master Sep 25, 2018

2 checks passed

codecov/project 48.82% (+0.13%) compared to d5bbd81
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/exit-code-editor branch Sep 25, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 25, 2018

Contributor

@gziolo could also try implementing the Editor Mode as a modal.

Contributor

mtias commented Sep 25, 2018

@gziolo could also try implementing the Editor Mode as a modal.

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 25, 2018

Contributor

The modal would also have the advantage of having a clear non-ad-hoc closing mechanism.

Contributor

mtias commented Sep 25, 2018

The modal would also have the advantage of having a clear non-ad-hoc closing mechanism.

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Sep 25, 2018

Member

That's an interesting idea. Initially, I thought about making it look like a screen takeover but we don't have this UI piece yet :) Modal seems like a good compromise. There is still a question what about those users which prefer to use Code editor instead as a default mode. It was raised by @jasmussen in our chat on Slack.

Member

gziolo commented Sep 25, 2018

That's an interesting idea. Initially, I thought about making it look like a screen takeover but we don't have this UI piece yet :) Modal seems like a good compromise. There is still a question what about those users which prefer to use Code editor instead as a default mode. It was raised by @jasmussen in our chat on Slack.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 25, 2018

Contributor

Either way I'm very glad to have this clear affordance in place, as it fixes a usability issue where it can be hard to switch back. Separate improvements would be lovely to explore in separate PRs. Thanks again!

Contributor

jasmussen commented Sep 25, 2018

Either way I'm very glad to have this clear affordance in place, as it fixes a usability issue where it can be hard to switch back. Separate improvements would be lovely to explore in separate PRs. Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment