[MGNLUI-4688] Apply new theme & styles to FindBar Created: 18/May/18  Updated: 09/Oct/18  Resolved: 27/Sep/18

Status: Closed
Project: Magnolia UI
Component/s: find bar
Affects Version/s: None
Fix Version/s: 6.0

Type: Task Priority: Neutral
Reporter: Ilgun Ilgun Assignee: Unassigned
Resolution: Obsolete Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Cloners
is cloned by MGNLUI-4687 FindBar - search field styles & behavior Closed
is cloned by MGNLUI-4689 FindBar - responsiveness Closed
is cloned by MGNLUI-4690 FindBar - Search results styles Closed
is cloned by MGNLUI-4691 FindBar - Animation and behavior Closed
dependency
depends upon MGNLUI-4391 Resurface: header Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: Find Bar front-end MVP

 Description   

Acceptance criteria:

General

 

Search field styles & behavior

  • Replace placeholder text with "Find…"
  • Placeholder text color is dark-grey #cacaca
  • Input text color is black #232323
  • Hide placeholder text as soon as user clicks into search field
  • Show delete icon only after user started to type

 

Search results styles

  • Make sure all UI components are styled as in mock
    • title space, paddings and margins
    • text styles (sizes, colors, etc)
    • table styles: columns, rows
  • Re-order and re-size columns as in mock
  • Add icons (instead of text) in the type columns as in mock
  • Style & fix alignment of full text search snippet and position it under title as in mock

 

Find bar animation & behavior

Open find bar

  • Find bar search results slide down (animation) to bottom-border = 77px, when
    • clicking into search field
    • clicking on magnify icon
  • Tabsheet and Content also slide down and get a dark overlay
  • If available screen space is not enough for search results, make them scrollable within dedicated area
  • if available screen space is plenty for search results, fill remaining space to the "footer" with white color
    • If search results take time to come, slide down immediately anyway with white results curtain. 

Close find bar

  • Find bar search results slide up (animation), when
    • clicking on a search result
    • clicking on the magnify icon (works like a toggle button)
    • clicking on the dark overlay in the footer
    • writing a command such as "open assets app"
  • Tabsheet and Content slide back up and dark overlay is removed, taking you back to the app that was overlayed.
  • If find bar is closed, remove/delete search term (this needs to be tested if it makes sense to the user)

 

Responsive find bar

  • Based on 3 screen resolutions…
    • Tablet: 1024px (970px)
    • Desktop: 1440px (1312px)
    • HD: 1920px (1825px)
  • …there are 2 breakpoints
    • BP 1: 1200px
    • BP 2: 1600px

 



 Comments   
Comment by Antti Hietala [ 27/Sep/18 ]

Split into small items.

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