Apicurio / apicurio-ux-design

Track design work for the Apicurio UI/UX.
Apache License 2.0
0 stars 0 forks source link

Security - UI - Resize Behavior #53

Open Mgranfie opened 5 years ago

Mgranfie commented 5 years ago

When long names are given to Scopes, in both the creation stage (security requirements) and the assignment stage (security schemes), the presentation of the content is not displaying or resizing properly.

screen shot 2018-12-07 at 10 46 49 am screen shot 2018-12-07 at 10 46 34 am
Mgranfie commented 5 years ago

@EricWittmann including the resize suggestions here...

This design is following the PatternFly Table resize behavior

  1. Set default size and truncate text to fit and wrap and fit, depending on how many lines per row.
  2. Icons are anchored to the right margins and top line of text
  3. Set a minimum table size, wrapping and stacking the text

Default Table scope_default

Resized table with minimum sizes scope_resized

List of Security Configurations

This looks like it uses the PatternFly list view and launched this layout from that. Would inherit the list behaviors. The only behaviors that were not defined and are not clear are the check all at the top of the list vs. checking an individual line item. Typically the interaction goes something like this:

  1. Check All at top of list has a hover text and when selected, all items in the list are selected.
  2. In the case that the line item is rolled up, and the user clicks the select all box, we may want to expand the content below to show they have all been selected and that there is more content.
  3. If All is selected and the user de-selects one of the line items in the subcontent, the main select all button should be deselected.
  4. If the user individually selects all the line items, one at a time, once they have all been selected, the "select all" box should become selected.
configure_security

Let me know what your thoughts are and if I am understanding the tasks and interactions correctly. Thanks, Monica

EricWittmann commented 5 years ago

The mockups of course makes sense. What's missing from the screenshots but present in your explanatory text is the Check All functionality. However, I don't think we need that in this use-case. It is quite unlikely that the user will ever want to select all checkboxes, either for the list of security schemes or the list of scopes within a selected scheme. So I'd suggest we leave that off.

The other concern I have is scaling - in the case that there are a LOT of scopes. But that's probably pretty unlikely as well. Showing them in a list is probably the right thing to do.

So this looks good I think.

Mgranfie commented 5 years ago

@EricWittmann I would agree with leaving the select all off, unless there are large volumes of information it's not needed. The list, although another list : ) the challenge of all data heavy applications... is clean, expected and extensible in a variety of ways, and easily scales for interaction/resize. So it is a logical selection in those ways. So it sounds like we are good with this?...

EricWittmann commented 5 years ago

I think so yes! Thanks. :)

Mgranfie commented 5 years ago

Current resize

Before resize

Screen Shot 2019-03-19 at 4 03 24 PM

Resized (the fonts get bigger and the name gets cut off...)

Screen Shot 2019-03-19 at 4 03 06 PM

EricWittmann commented 5 years ago

The fonts getting bigger is a surprise.

Mgranfie commented 5 years ago

Oh yikes. I know, funky huh. It's good though I can read it without my glasses on!! : )

On Tue, Mar 19, 2019 at 8:44 PM Eric Wittmann notifications@github.com wrote:

The fonts getting bigger is a surprise.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/Apicurio/apicurio-ux-design/issues/53#issuecomment-474639541, or mute the thread https://github.com/notifications/unsubscribe-auth/ARTwq5rYxerg3576g9rqAwXc13rso5O0ks5vYYRxgaJpZM4ZIsAv .