search

CollaboraOnline / online

Collabora Online is a collaborative online office suite based on LibreOffice technology. This is also the source for the Collabora Office apps for iOS and Android.
https://collaboraonline.com
Other
1.78k stars 680 forks source link

Improve split button styling #8566

Open eszkadev opened 6 months ago

eszkadev commented 6 months ago

This is an Easy Hack. Potential mentors: @pedropintosilva @eszkadev

Detailed description and rationale

Split buttons are buttons which have 2 parts: "<direct command button> | <dropdown arrow>" Left one applies/runs some command but right part opens dropdown with more options. It should be marked in the UI as 2 separate parts somehow. This is used for color pickers in notebookbar for example. Notice that there are MenuButtons which doesn't have different actions for arrow and icon - Paste button in notebookbar.

See how it looks now: split-button-2024-03-18_18.22.50.webm

Currently on hover we highlight full button. It is not possible to differentiate between split and regular menu button.

Code pointers

Split button is a kind of MenuButton: https://github.com/CollaboraOnline/online/blob/master/browser/src/control/jsdialog/Widget.MenuButton.js#L118

printfdebugging commented 2 weeks ago

I would like to work on this issue. Don't know much web-programming, but I hope I can come up with something working coming saturday-sunday.