[MGNLUI-5228] Polish filterable/sortable columns Created: 05/Jun/19  Updated: 18/Mar/20  Resolved: 14/Feb/20

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2

Type: Bug Priority: Neutral
Reporter: Anja von Gunten Assignee: Quach Hao Thien
Resolution: Fixed Votes: 0
Labels: M6-UI-1
Remaining Estimate: 0d
Time Spent: 6d 19m
Original Estimate: Not Specified

Attachments: PNG File Bildschirmfoto 2019-08-30 um 09.18.40.png     PNG File Bildschirmfoto 2019-08-30 um 09.18.48.png     PNG File Bildschirmfoto 2020-01-23 um 16.48.59.png     PNG File image-2020-02-12-13-59-19-952.png     PNG File screenshot-1.png    
Issue Links:
Relates
relates to MGNLRES-345 Polish filter component Closed
relates to MGNLUI-5671 Make sure Filters are in enabled in a... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: M6 UI & UX Improvements
Sprint: Declarative REST 15, 6.2 Ramp-up 16
Story Points: 3

 Description   

Polish styles in title row for filterable grid

(check w/Anja if unclear)

 

1. Labels

  • they are currently too small
  • change to size 12px, color black #2323232
  • same style as in default title rows

2. Input fields (eg. search, select box)

  • they are currently too strong
  • change placeholder text to color grey #888888, light, not italic
  • when typing change text to color black #232323, regular

3. Input fields alignment 

  • they are currently too low
  • adjust so label + input field are visually centre aligned in the row middle

4. Input field placeholder text

  • Write "Filter…" (instead of "Type" and "Select")

5. Checkboxes are too big

  • change to size 18x18px

6. Drop down menu is too long

  • limit height of drop down menu

7. First item in drop down list shouldn't be empty

  • change to "All"

 

Nice to have:

8. Cell borders

  • remove border 1px from cells
  • add 1px space btw cells
  • same as other content rows/cells
  • note: this needs to be fixed for all title rows, also the not filterable ones

 

 



 Comments   
Comment by Quach Hao Thien [ 03/Feb/20 ]

avongunten

4. Input field placeholder text

  • Write "Filter…" (instead of "Type" and "Select") -> placeholder is set individually in app definition (yaml), therefore it cannot be done once affect all, I think I will skip this requirement
Comment by Quach Hao Thien [ 04/Feb/20 ]

7. First item in drop down list shouldn't be empty

  • change to "All" -> this caption is set individually in app definition
$type: comboBoxField
emptySelectionAllowed: true
emptySelectionCaption: All
Comment by Anja von Gunten [ 04/Feb/20 ]

thien.quach (cc: slutz) As the filterable columns will be a new feature i think we should make sure the first experience is good. The end user doesn't really care if it is a global or app specific setting. Can we still have them configured for the apps that will have the filtering? Would be great.

Comment by Quach Hao Thien [ 04/Feb/20 ]

in this case, I would have to scan all the apps, having filtering, and configure them separately, scope of this ticket should be changed or create another ticket for this. what will you say slutz?

Comment by Simon Lutz [ 04/Feb/20 ]

I agree that we need to be consistent and have the same UX across all new apps with columns filtering.

I think we do have more differences today, there's the version of the definitions app shown in the screenshots here. The asset chooser has "Search..." as a placeholder; see screenshot. Will we stick to "Filter...", avongunten? I think it would be good to write down UX guidelines for that somewhere, so we can reference to it when porting more apps.

thien.quach, I think the scope of this ticket was covering all apps with column filtering (fully knowing that there was only one app at the time the ticket was created). If it is feasible to do in this ticket, then I'd keep it together in one (feel free to increase the Story Points) - otherwise we can create another one.

Comment by Anja von Gunten [ 04/Feb/20 ]

The default pattern is easy: the placeholder text is "Filter…", be it an input field or a select box.

Comment by Quach Hao Thien [ 05/Feb/20 ]

I would consider the default pattern "Filter..." is limited to Grid only, not standalone field; despite we can set default placeholder for filter in grid, whether user can modify it on their own?

Comment by Simon Lutz [ 05/Feb/20 ]

I have double-checked with Anja:

  • Yes, default placeholder "Filter..." is limited to Grids only
  • The default placeholder can be changed in the app definitions if wished by customers
Comment by Quach Hao Thien [ 12/Feb/20 ]

Definition app be like after changed:

Comment by Simon Lutz [ 12/Feb/20 ]

Thank you, looks good to me!
Could you have a look too, avongunten? Thanks.

Comment by Anja von Gunten [ 12/Feb/20 ]

Looks good to me too! Only one thing: the spacing between the columns in the title row disappeared. They are handy because the width is flexible and can be dragged. Any reason for that? thien.quach

Comment by Canh Nguyen [ 18/Feb/20 ]

Implemented as proposed in description.

Generated at Mon Feb 12 09:24:27 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.