jsonforms-editor icon indicating copy to clipboard operation
jsonforms-editor copied to clipboard

[WIP] Refactor layout

Open eneufeld opened this issue 4 years ago • 9 comments

eneufeld avatar Dec 21 '20 17:12 eneufeld

Some feedback, solely based on the Preview without looking at the code. Looking at it with the eyes of a first time user:

  • I would like to suggest open the Palette by default. It offers a natural starting point
  • Would be great to have the Palette title next to the expand symbol when expanded.
  • We should start with a simple ui schema already loaded. This eases the starting experience.
  • When there is no ui schema the React preview shows the default generated one while the Angular preview doesn't show anything. They should be aligned
  • When there is no ui schema it should be indicated to the user in some way that the default generated one is used
  • When there is no ui schema we should offer a button to default generate one
  • It would be great to have tooltips on the palette buttons so they indicate what they are without clicking them
  • The textual schema and ui schema should be removed from the Palette, as they don't really belong there and clutter the interface. Suggestion: Add a gear icon next to the download icon and let the user edit them in a modal when necessary.
  • The download button should show a menu of two entries to allow "downloading" a schema and ui schema json file. If this is to much effort we can also just remove it and only show the gear icon mentioned above.

Of course all of these are optional however I think they would improve the user experience. I think as a long as the inline editing is not 100% perfect we should keep the palette (so probably for a very long time) and polish it accordingly too.

sdirix avatar Mar 05 '21 09:03 sdirix

Hmm using the editor for a while: The properties view is too inaccessible. We should maybe permanently show it in some way. For example when I want to modify a label I created inline I have to open the palette and switch to it. This is way too cumbersome.

Just an idea: Maybe merge it with the Layout/Control page, e.g. always show it on 50% height? When we additionally remove the schema/ui schema entries then there is only this single palette panel left. Then drag and dropping in an element would require no further clicks to edit its properties.

sdirix avatar Mar 05 '21 09:03 sdirix

Before I drop off even more "complains", I like the idea to make the editor more approachable to users :)

Improvement ideas:

  • OnMouseOver Tooltips for the icons in the panel
  • Panel should be expanded on UI Schema on load (agree with Stefan)
  • Where is the property view to edit properties, e.g. of Label ?

Please let me know when there is an update, I would like to review again

koegel avatar Mar 05 '21 10:03 koegel

Thank you for the feedback. From the comments I see three groups of issues:

  1. follow up issues
  • We should start with a simple ui schema already loaded. This eases the starting experience.
  • When there is no ui schema the React preview shows the default generated one while the Angular preview doesn't show anything. They should be aligned
  • When there is no ui schema it should be indicated to the user in some way that the default generated one is used
  • When there is no ui schema we should offer a button to default generate one
  • The textual schema and ui schema should be removed from the Palette, as they don't really belong there and clutter the interface. Suggestion: Add a gear icon next to the download icon and let the user edit them in a modal when necessary.
  • The download button should show a menu of two entries to allow "downloading" a schema and ui schema json file. If this is to much effort we can also just remove it and only show the gear icon mentioned above.
  1. low hanging fruits
  • OnMouseOver Tooltips for the icons in the panel This will solve
    • Where is the property view to edit properties, e.g. of Label ?
  • Would be great to have the Palette title next to the expand symbol when expanded.
  • It would be great to have tooltips on the palette buttons so they indicate what they are without clicking them
  1. issues that need a decision
  • I would like to suggest open the Palette by default. It offers a natural starting point
  • Panel should be expanded on UI Schema on load (agree with Stefan) Here we need to decide whether to go with the simple solution of showing the panel or spent a bit more time and add inline editing for controls which would support selecting the scope and setting the label.

I would first fix issues in group 2. In the meantime I would love to hear which solution for group 3 you would prefer and whether creating follow up issues from group 1 is fine with you.

eneufeld avatar Mar 05 '21 23:03 eneufeld

I would first fix issues in group 2. In the meantime I would love to hear which solution for group 3 you would prefer and whether creating follow up issues from group 1 is fine with you.

+1 on how to proceed with groups 2 and 1. For group 3 a property view in the panel is good enough for now imho.

koegel avatar Mar 06 '21 00:03 koegel

Group 2 issues should be fixed. For Group 3 I added inline editing :-P as it was simple to do. ~The label is missing the inline editing,~ I hope I didn't miss any controls.

eneufeld avatar Mar 07 '21 11:03 eneufeld

I (also) think Palette should be open by default. The property view is shown with a horizontal scrollbar for me. image

koegel avatar Mar 08 '21 14:03 koegel

I (also) think Palette should be open by default.

Why do you need the palette with the inline editing available?

eneufeld avatar Mar 08 '21 14:03 eneufeld

I (also) think Palette should be open by default.

Why do you need the palette with the inline editing available?

I personally feel the palette is more approachable to new users because I can see my options right away, but I might be wrong.

koegel avatar Mar 10 '21 16:03 koegel