[MGNLUI-4950] New filter design for find bar Created: 15/Jan/19  Updated: 10/Apr/19  Resolved: 10/Apr/19

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

Type: Task Priority: Neutral
Reporter: Simon Lutz Assignee: Milan Divilek
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: 0d Remaining Estimate: Not Specified
Σ Time Spent: 4d 2.75h Time Spent: Not Specified
Σ Original Estimate: 3d Original Estimate: Not Specified

Issue Links:
causality
is causing MGNLUI-5031 DOC: Update pages that focus on the F... Closed
dependency
depends upon MGNLUI-4937 M6 vertical spacing Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-5079 New design for filter layout Sub-task Closed Milan Divilek  
MGNLUI-5080 Scrolling behavior for new filter layout Sub-task Closed Sang Ngo Huu  
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Epic Link: Resurface finalisation
Sprint: Features 7, Features 8
Story Points: 13

 Description   

Align find bar filter design with the filters introduced by MGNLUI-4937.

 

The new pattern is now consistent throughout the UI (see in use fx. in definitions app).

Collected mockups for find bar filters & behavior are on zeplin under the section "find bar improvements"

https://app.zeplin.io/project/5acc848ede054e0a4865f805/dashboard?seid=5c3f4f01c1a57933c04c19ce

https://app.zeplin.io/project/5acc848ede054e0a4865f805/screen/5c3f4eb233b923337966f1c1

 

Collapsed filters / default view

  • move filter icon above grid on the right side (same as in definitions)
  • add title row for results grid
  • move checkbox "Show results from current app first" to the first column in title row
  • font size in title row 12px

Expanded filters

  • filter icon is activated (icon bg grey)
  • add new filter style for the select boxes as in definitions
  • display of "black tags" for the filter selections stay the in same style as current

Collapsed filters with "black tags"

  • filter icon is de-activated (icon bg white)
  • filters are collapsed
  • "black tags" move to a visible row under title space in the same style as current

Scrolling behavior

  • follows the general pattern as described in MGNLUI-4944
  • scrollable area includes the title space
  • sticky elements when scrolling
    • toolbar (with filter icon)
    • row with "black tags"
    • title row of results grid

 


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