As a user, I perceive apps as well-designed and working well (MGNLUI-1251)

[MGNLUI-1253] Fix look and feel of the search box Created: 29/Apr/13  Updated: 04/Jun/13  Resolved: 03/Jun/13

Status: Closed
Project: Magnolia UI
Component/s: app framework, design, user interaction
Affects Version/s: None
Fix Version/s: 5.0

Type: Sub-task Priority: Neutral
Reporter: Andreas Weder Assignee: Christopher Zimmermann
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Template:
Date of First Response:

 Description   
  • When inactive, magnifyer in the same gray as the "Search" invitation text. When active turn to black.
  • When active, a white, downward-pointing arrow from the box to the list below marks that search is active.
    • Should be 16px in from left of search box.
  • There should be a icon in the search box for easy deleting the text in the box and start anew.
  • Right padding on the magnifyer should match the padding on right of search.

A few changes from review with Andreas:

  • Clicking the x icon, or manually removing text in the search: shows you all items, the search box is still white, but the arrow from the search box pointing down dissapears.


 Comments   
Comment by Christopher Zimmermann [ 03/Jun/13 ]

Look and feel and interaction already reviewed with Andreas.

Comment by Christopher Zimmermann [ 03/Jun/13 ]

Change layout of searchbox to have use normal icon magnifying glass so we can tune size and color.
Use .focus and .has-content classes to control visible state of search box.
Change interaction so that user stays in search mode untill explicitly exiting it.
Add down pointing arrow

Comment by Mikaël Geljić [ 03/Jun/13 ]

Search box width is no longer correct, and focus/prompt styling is not perfect, e.g. if you focus the field then blur it straight, it keeps the white background and black icons. Let's try not to introduce new CSS classes and see if we can adjust styling of icons with adjacent/sibling selectors.

Generated at Mon Feb 12 08:44:48 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.