wagtail icon indicating copy to clipboard operation
wagtail copied to clipboard

Published 20 hours ago • verified publisher icon wagtail

Improved UI visual styles of chooser fields

Open tmsndrs opened this issue 7 years ago • 5 comments

Current implementation feels clunky. screen shot 2017-11-23 at 12 04 09

I've put together some early thinking on how these could be improved but it requires further conversation. image

tmsndrs avatar Nov 23 '17 12:11 tmsndrs

It might be good to consider #2364 relating to visual indication of loading the next page of selectable images within chooser modal, maybe filling in non-loaded images with a placeholder blank / greyed out image and also add a spinner to indicate loading.

lb- avatar Nov 24 '17 12:11 lb-

Hi

I've refined these designs for the chooser fields - as mocked up by @tmsndrs above. I'm attempting to reflect the global button size/style for the initial view, and then creating a more padded stroked area once the media has been chosen - to house more cleanly the media title and grouped actions associated with it ( Clear / Edit / Replace) - replacing the existing buttons: Trash button / 'Edit this page' / 'Choose another page'

Ignore the fact the icons vary slightly from the existing ones - happy to continue using existing icons for now (wholesale change to icons would be a separate issue). But I do feel we could move towards using the white icon on teal (default btn view) and the darker shade of grey for the populated item.

One thing to bear in mind is the top aligned label. Labels are currently aligned left but this ties in to work on'WIP Streamfield UI changes' #3942 where there is a move towards top aligned labels.

screen shot 2018-02-14 at 14 09 26

screen shot 2018-02-14 at 14 09 34

Ben

benenright avatar Feb 14 '18 14:02 benenright

Hi

The designs above are now agreed by the Wagtail UX/UI working group and ready for FE implementation for anyone who is keen to take this on.

Here is a mockup to show how these will work in situ with existing fields (note the key difference in label placement - vertically aligned labels in place of left-aligned which we hope to roll out globally soon to help with narrow screen alignment issues). choosers in situ

Here's the Sketch file. wagtail-chooser-fields.sketch.zip

Ben

benenright avatar Mar 02 '18 12:03 benenright

Would be great to take have a solution for file field. See discussion in #4790

m1kola avatar Oct 28 '18 12:10 m1kola

Should be mostly addressed now that https://github.com/wagtail/wagtail/pull/8934 is merged @thibaudcolas please can you review this issue.

lb- avatar Aug 10 '22 05:08 lb-

This is indeed implemented!

thibaudcolas avatar Aug 16 '22 10:08 thibaudcolas