Skip to content
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
Merged

Add "Exit Code Editor" toolbar. #10061

merged 2 commits into from Sep 25, 2018

Conversation

@jasmussen
Copy link
Contributor

@jasmussen 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.

Joen Asmussen
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
Copy link
Member

@tofumatt 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
Copy link
Contributor Author

@jasmussen 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
Copy link
Member

@gziolo 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
Copy link
Member

@gziolo gziolo left a comment

LGTM after my commit landed 💯

@jasmussen
Copy link
Contributor Author

@jasmussen 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
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
Copy link
Contributor

@mtias mtias commented Sep 25, 2018

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

@mtias
Copy link
Contributor

@mtias mtias commented Sep 25, 2018

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

@gziolo
Copy link
Member

@gziolo 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
Copy link
Contributor Author

@jasmussen 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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

4 participants
You can’t perform that action at this time.