[BUU] Dropdown UI tweaks (tom-select) #11932

dacook · 2023-12-12T06:11:04Z

What? Why?

Closes Dropdown UI tweaks #11518

What should we test?

With admin_style_v3 feature toggle,
Check that dropdowns behave as expected, eg in:

/admin/products
/admin/orders
/admin/enterprises/*/edit#/address_panel

Note that some dropdowns still have the older style, they can be changed over in future PRs

Single select with search:

Single select with no search:

We should be able to use @extend .icon-chevron-down, but I couldn't get it to work. I'd like to have a better method for this, but we should upgrade our ancient FontAwesome before worrying about that.

The query input can grow to fill the space.

Hmm, but this isn't useful until we get Tom-Select to work the way we want.. To do that, I think we'd ned to hook into TS to clear the current selection when focused, then set it back upon blur (if no selection was made). Hmm, but we still want it to show slected in the dropdown list. Can we do it with css maybe?

It's more compact, and we don't need to see the currently selected value because it's highlighted in the list already.

This is unrelated to the rest of the PR, I just noticed this issue so decided to fix it. I can't find any explanation, or think of any good reason for this rule, so I'm burning it.

mkllnk

Great!

dacook · 2023-12-28T05:58:11Z

i'd be good if when highlighted, this uses the Orient colour border

there's a strange double shadow showing when selected, see screenshot above.

We found that this only seems to affect Mario's browser (Brave), so won't try and fix it at this stage.

rioug

Nice one 👏 I just have a couple of comments

app/views/admin/products_v3/_sort.html.haml

app/webpacker/css/admin_v3/components/tom_select.scss

mariocarabotta · 2024-01-10T01:51:09Z

i'd be good if when highlighted, this uses the Orient colour border

there's a strange double shadow showing when selected, see screenshot above.

We found that this only seems to affect Mario's browser (Brave), so won't try and fix it at this stage.

this was bugging me too much ;D

I think it can be fixed by changing vertical padding from 0.5rem to 0.6 rem here

.plugin-dropdown_input .dropdown-input {
background-color: #fff;
border: 1px solid #f8f9fa;
box-shadow: none;
padding: 0.6rem 0.75rem;
}

rioug

Nice 1

I'm not sure why this requires extra padding here, but it looks good 🤷 Co-authored-by: Mario Carabotta <6696729+mariocarabotta@users.noreply.github.com>

dacook · 2024-01-10T03:31:40Z

Thanks Mario, that looks good to me. I've updated it, and started deploying to au_staging

dacook · 2024-01-11T05:14:42Z

As this is quite a different component now, and it affects multiple screens, I'm going to request some testing.

RachL · 2024-01-11T15:05:03Z

Note that some dropdowns still have the older style, they can be changed over in future PRs

@dacook just to be sure, when speaking about "old style" you include placeholder, size and "All" option?

dacook · 2024-01-11T21:17:44Z

when speaking about "old style" you include placeholder, size and "All" option?

More precisely, some dropdowns use the old "select2" plugin, which I have not restyled yet. These appear with a triangle icon, and a separate search input like this:

(The new dropdowns use the "tom-select" plugin)

sigmundpetersen · 2024-01-12T09:55:25Z

Hey @RachL are you choosing the rebase option when updating the branch?

RachL · 2024-01-12T10:14:01Z

@sigmundpetersen yes I thought I did, but does not look like it :/

filipefurtad0 · 2024-01-12T11:40:12Z

Merging and including it in the release, as per this discussion.

dacook added pr-no-test technical changes only These pull requests do not contain user facing changes and are grouped in release notes labels Dec 12, 2023

This comment was marked as resolved.

Sign in to view

mariocarabotta added the pr-staged-au staging.openfoodnetwork.org.au label Dec 13, 2023

dacook added 4 commits December 14, 2023 13:28

Use body font size on all form inputs

53c4905

Fix display of single-select dropdowns

05582b3

Style single-select as per design

3fbd5f6

Style list items as per design

0efda02

dacook force-pushed the buu-dropdown-tweaks-11518 branch from ef35776 to 8f7db84 Compare December 14, 2023 02:55

dacook added 8 commits December 14, 2023 14:13

Clip long content with ellipsis

1776420

Use chevron for dropdown icon

f29c1d5

We should be able to use @extend .icon-chevron-down, but I couldn't get it to work. I'd like to have a better method for this, but we should upgrade our ancient FontAwesome before worrying about that.

Responsive sizing for elements

ad797de

The query input can grow to fill the space.

Refactor: Code cleanup

a5b2a24

Refactor: use data hash

e578f69

Placeholder style

2756e37

Refactor

e8266ba

dacook force-pushed the buu-dropdown-tweaks-11518 branch from 8f7db84 to 01f4db3 Compare December 14, 2023 04:07

dacook added pr-staged-au staging.openfoodnetwork.org.au and removed pr-staged-au staging.openfoodnetwork.org.au labels Dec 14, 2023

dacook added 2 commits December 14, 2023 15:23

Style tom-select dropdown-input to appear over the main control

2cbe9a4

It's more compact, and we don't need to see the currently selected value because it's highlighted in the list already.

Prevent scrollbars on select2 item

37a1776

This is unrelated to the rest of the PR, I just noticed this issue so decided to fix it. I can't find any explanation, or think of any good reason for this rule, so I'm burning it.

dacook marked this pull request as ready for review December 15, 2023 04:48

mariocarabotta added pr-staged-au staging.openfoodnetwork.org.au and removed pr-staged-au staging.openfoodnetwork.org.au labels Dec 17, 2023

This comment was marked as resolved.

Sign in to view

mkllnk approved these changes Dec 18, 2023

View reviewed changes

mariocarabotta added pr-staged-au staging.openfoodnetwork.org.au and removed pr-staged-au staging.openfoodnetwork.org.au labels Dec 19, 2023

sigmundpetersen removed the pr-staged-au staging.openfoodnetwork.org.au label Dec 20, 2023

sigmundpetersen assigned dacook Dec 20, 2023

rioug reviewed Jan 3, 2024

View reviewed changes

app/views/admin/products_v3/_sort.html.haml Outdated Show resolved Hide resolved

app/webpacker/css/admin_v3/components/tom_select.scss Outdated Show resolved Hide resolved

mariocarabotta added pr-staged-au staging.openfoodnetwork.org.au and removed pr-staged-au staging.openfoodnetwork.org.au labels Jan 4, 2024

mariocarabotta mentioned this pull request Jan 4, 2024

[BUU] Change producer, category and tax category #11060

Closed

dacook force-pushed the buu-dropdown-tweaks-11518 branch from 01f4db3 to 37a1776 Compare January 9, 2024 05:24

dacook requested a review from rioug January 9, 2024 05:26

mariocarabotta added pr-staged-au staging.openfoodnetwork.org.au and removed pr-staged-au staging.openfoodnetwork.org.au labels Jan 10, 2024

rioug approved these changes Jan 10, 2024

View reviewed changes

Tweak padding

443b313

I'm not sure why this requires extra padding here, but it looks good 🤷 Co-authored-by: Mario Carabotta <6696729+mariocarabotta@users.noreply.github.com>

dacook force-pushed the buu-dropdown-tweaks-11518 branch from 8add6fa to 443b313 Compare January 10, 2024 03:27

dacook added the pr-staged-au staging.openfoodnetwork.org.au label Jan 10, 2024

dacook removed pr-no-test pr-staged-au staging.openfoodnetwork.org.au labels Jan 11, 2024

RachL added pr-staged-fr staging.coopcircuits.fr and removed technical changes only These pull requests do not contain user facing changes and are grouped in release notes labels Jan 11, 2024

dacook added the feature toggled These pull requests' changes are invisible by default and are grouped in release notes label Jan 11, 2024

Merge branch 'master' into buu-dropdown-tweaks-11518

877a145

filipefurtad0 merged commit 4c96eb4 into openfoodfoundation:master Jan 12, 2024
50 checks passed

RachL removed the pr-staged-fr staging.coopcircuits.fr label Jan 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUU] Dropdown UI tweaks (tom-select) #11932

[BUU] Dropdown UI tweaks (tom-select) #11932

dacook commented Dec 12, 2023 •

edited

This comment was marked as resolved.

This comment was marked as resolved.

mkllnk left a comment

dacook commented Dec 28, 2023

rioug left a comment

mariocarabotta commented Jan 10, 2024

rioug left a comment

dacook commented Jan 10, 2024

dacook commented Jan 11, 2024

RachL commented Jan 11, 2024

dacook commented Jan 11, 2024 •

edited

sigmundpetersen commented Jan 12, 2024

RachL commented Jan 12, 2024

filipefurtad0 commented Jan 12, 2024

[BUU] Dropdown UI tweaks (tom-select) #11932

[BUU] Dropdown UI tweaks (tom-select) #11932

Conversation

dacook commented Dec 12, 2023 • edited

What? Why?

What should we test?

Single select with search:

Single select with no search:

This comment was marked as resolved.

This comment was marked as resolved.

mkllnk left a comment

Choose a reason for hiding this comment

dacook commented Dec 28, 2023

rioug left a comment

Choose a reason for hiding this comment

mariocarabotta commented Jan 10, 2024

rioug left a comment

Choose a reason for hiding this comment

dacook commented Jan 10, 2024

dacook commented Jan 11, 2024

RachL commented Jan 11, 2024

dacook commented Jan 11, 2024 • edited

sigmundpetersen commented Jan 12, 2024

RachL commented Jan 12, 2024

filipefurtad0 commented Jan 12, 2024

dacook commented Dec 12, 2023 •

edited

dacook commented Jan 11, 2024 •

edited