UX: composer toolbar changes (icon, style, placement) (#32918)

Changes the gear icon for the more menu to a circle-plus icon.

Changes the emoji icon to its outline version, to make it less similar
to the circle-plus icon.

Changes the styles (eg. icon sizes) of the toolbar, using a flexbox
instead of a grid, with some tweaks and animations to the toggle switch,
which occupies a smaller width now.

Removes the gray button-bar bottom border.

Moves the Insert Date/Time item to the more menu, and changes its icon
to a clock.

### Before, hovering more menu

<img width="758" alt="image"
src="https://github.com/user-attachments/assets/84d8f5aa-519e-40a2-ba44-d58d7294f6b0"
/>

### After, hovering more menu

![image](https://github.com/user-attachments/assets/b54eac09-9dd0-4b7f-b93c-82d452cc5ded)

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
This commit is contained in:
Renato Atilio
2025-06-10 12:16:19 -03:00
committed by GitHub
parent 0c6dec79e5
commit 512a31339a
9 changed files with 87 additions and 80 deletions

View File

@ -78,7 +78,9 @@ acceptance("Local Dates - composer", function (needs) {
const categoryChooser = selectKit(".category-chooser");
await categoryChooser.expand();
await categoryChooser.selectRowByValue(2);
await click(".d-editor-button-bar .local-dates");
const optionsMenu = selectKit(".toolbar-popup-menu-options");
await optionsMenu.expand();
await optionsMenu.selectRowByName("local-dates");
const timezoneChooser = selectKit(".timezone-input");
await timezoneChooser.expand();
@ -95,7 +97,9 @@ acceptance("Local Dates - composer", function (needs) {
const categoryChooser = selectKit(".category-chooser");
await categoryChooser.expand();
await categoryChooser.selectRowByValue(2);
await click(".d-editor-button-bar .local-dates");
const optionsMenu = selectKit(".toolbar-popup-menu-options");
await optionsMenu.expand();
await optionsMenu.selectRowByName("local-dates");
await click('.pika-table td[data-day="5"] > .pika-button');