[PUI] Make actions recognisable

[matmair]

Action Dropdowns are not very recognisable right now. Therefore, I propose adding indicators similar to the screenshots below to buttons with more than 1 action. I am not sure how to style that, below solution is not the final goal - maybe a single indicator could be enough for example.

Current

Proposed

Fixes invenhost#98

[netlify]

✅ Deploy Preview for inventree-web-pui-preview ready!

Name	Link
🔨 Latest commit	f4cb6e0
🔍 Latest deploy log	https://app.netlify.com/sites/inventree-web-pui-preview/deploys/66d437ebe8724c00080a20c0
😎 Deploy Preview	https://deploy-preview-8005--inventree-web-pui-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 86 (no change from production) Best Practices: 92 (no change from production) SEO: 70 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 75.00000% with 2 lines in your changes missing coverage. Please review.

Project coverage is 83.63%. Comparing base (1634258) to head (f4cb6e0).
Report is 327 commits behind head on master.

Files with missing lines	Patch %	Lines
...c/frontend/src/components/items/ActionDropdown.tsx	75.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8005      +/-   ##
==========================================
+ Coverage   83.57%   83.63%   +0.05%     
==========================================
  Files        1140     1141       +1     
  Lines       50874    50878       +4     
  Branches     1774     1783       +9     
==========================================
+ Hits        42520    42552      +32     
+ Misses       7913     7882      -31     
- Partials      441      444       +3     

Flag	Coverage Δ
pui	65.20% <75.00%> (+0.35%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[SchrodingersGat]

Maybe a "down caret" indicator would be clearer here? It seems a bit more "traditional". But I agree with the concept in general

[wolflu05]

I like the suggestion from @SchrodingersGat

[matmair]

What do we think about this:

[SchrodingersGat]

That's pretty clean IMO

[wolflu05]

I think now its really hard to tell, which "down caret" belongs to what action, maybe an outline would help to add some separation, but not sure how that will look like.

[matmair]

It looks atrocious with an outline

[wolflu05]

That's true. Maybe its just me having problems to see the separation.

[SchrodingersGat]

What about a mantine indicator with the caret attached directly to the button

https://mantine.dev/core/indicator/

[matmair]

I find that more confusing than not having them

[matmair]

I have tried another thing: light

[matmair]

I find vertical dots also match the flow better:

[matmair]

And the same thing in dark mode with dots instead of chevrons

[SchrodingersGat]

Light with chevrons is my pick :)

And maybe we add the chevron to the vertical dot menu too?

[matmair]

Ok then this is ready for merge - light with chevron is the current state of the PR.

And maybe we add the chevron to the vertical dot menu too?

I would not add chevrons to the dot menu, I think that 3 dots are universally understood as "more" - that is why I suggested usage of them in the first place.

[SchrodingersGat]

I would not add chevrons to the dot menu, I think that 3 dots are universally understood as "more" - that is why I suggested usage of them in the first place.

In this case, should we add a special dropdown menu just for the "more" actions - I see that you have added a lot of instances of noindicator - this could be refactored into a special dropdown with the dots icon and no indicator?

[matmair]

Sure, I can look into that.

[matmair]

@SchrodingersGat I have added a special dropdown to adress this

[matmair]

@SchrodingersGat this is ready for review and merge

[SchrodingersGat]

Nice work, thanks for this!