Creating a New Redux/React Editor

Development
#1

Hey everyone,
I’m in the middle of creating a new Editor for Foreman. I thought about opening a thread because I want to open a debate about changing the current UX. This new editor will also help us get rid of a big Technical Debt(Lots of jquery code :slight_smile:) . I’ll jump right into showing the progress:

Editor Navbar

Current Editor Navbar:

31
Screenshot 2018-10-29 16.01.31.png1926×150 11.5 KB

New Editor Navbar:

30
Screenshot 2018-10-29 16.00.30.png1938×132 14.2 KB

My Thoughts:

  • Navbar should be a bit smaller
  • Buttons should have a fixed width
  • The button of the current view should be shown as active ( blue )
  • Tabs that change the view should be on the left
  • Functionality and Dropdowns should be on the right

I Know this should be a practical and easy to use application but I wanted to try using icons instead of text, every icon shows a tooltip on hover after a 500ms delay

49

Diff View

Current Diff View:

59
Screenshot 2018-10-29 16.01.59.png1948×930 96.7 KB

New Diff View:

38
Screenshot 2018-10-29 16.02.38.png1924×870 93.9 KB

This Diff view is being reviewed in another PR and being used in the Audits page aswell. It shares the Github theme and can be switched from Unified to Split. I’m not sure about the position of the Unified and Split button in this case, any feedback is appreciated.

Fullscreen
The previous fullscreen method would change CSS classes to display the editor inside the layout borders. Now clicking on fullscreen opens a modal that covers ~90% of the screen estate. The modal content is based on the current view as shown below:

24
Screenshot 2018-10-29 16.03.24.png2230×1374 291 KB

32
Screenshot 2018-10-29 16.03.32.png2218×1060 258 KB

I guess the most changed element is the Editor Navbar so any feedback on this is appreciated! Will soon link a WIP PR.

Thanks!

7 Likes
Foreman UI newsletter
#2

adding @ui_ux

#3

I do like the new diff. Perhaps because I’m very used to the Github one :slight_smile:

What’s under Default and Monokai in the new design and what does the Hide content button do? It also feels a bit cluttered.

#4

Thanks for mentioning the dropdowns.

Each of the dropdowns has a header when you open them to describe their purpose
10

So from left to right -> Syntax, Keybinding, Theme

I thought about giving an option for a light theme as addition to Monokai, so i added a theme dropdown aswell.

The hide content icon masks the content ( like a password )
I put all the icons in the screenshot for demonstration, they are never all together in our Editor views:

Provisioning Templates: Revert, Import, Fullscreen
Report Templates: Revert, Fullscreen
Global Parameters: Hide Content, Revert, Fullscreen

The Revert Button is also a concept. It helps you undo all your actions in the current session, not from the original template.

#5

Wow…impressive work so far. Correct me if I’m wrong…the “Default” dropdown changes the keybinding to for example Emacs ?

Imho the theme option (and a little bit the keybindings also) goes a bit too far for the usage of an editor within Foreman. But as I said, that is only my personal flavour.

#6

I agree it goes a bit far and can distract from the main UI elements. I wonder if we could hide these controls in an advanced sub-menu.

#7

How about this

01
Screenshot 2018-10-31 16.43.01.png578×572 12.6 KB

1 Like
Foreman UX newsletter - January 2019
#8

I think that looks cleaner and still covers 99% of the use cases when you open an editor.

2 Likes
#9

I agree