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

@ -86,7 +86,8 @@ describe "Local dates", type: :system do
it "allows selecting a date without a time and inserts into the post" do
topic_page.visit_topic_and_open_composer(topic)
expect(topic_page).to have_expanded_composer
composer.click_toolbar_button("local-dates")
find(".d-editor-button-bar .toolbar-popup-menu-options").click
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
expect(insert_datetime_modal).to be_open
insert_datetime_modal.calendar_date_time_picker.select_year(year)
insert_datetime_modal.calendar_date_time_picker.select_day(16)
@ -99,7 +100,8 @@ describe "Local dates", type: :system do
it "allows selecting a date with a time and inserts into the post" do
topic_page.visit_topic_and_open_composer(topic)
expect(topic_page).to have_expanded_composer
composer.click_toolbar_button("local-dates")
find(".d-editor-button-bar .toolbar-popup-menu-options").click
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
expect(insert_datetime_modal).to be_open
insert_datetime_modal.calendar_date_time_picker.select_year(year)
insert_datetime_modal.calendar_date_time_picker.select_day(16)
@ -114,7 +116,8 @@ describe "Local dates", type: :system do
it "allows selecting a start date and time and an end date and time" do
topic_page.visit_topic_and_open_composer(topic)
expect(topic_page).to have_expanded_composer
composer.click_toolbar_button("local-dates")
find(".d-editor-button-bar .toolbar-popup-menu-options").click
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
expect(insert_datetime_modal).to be_open
insert_datetime_modal.calendar_date_time_picker.select_year(year)
insert_datetime_modal.calendar_date_time_picker.select_day(16)
@ -136,7 +139,8 @@ describe "Local dates", type: :system do
expect(topic_page).to have_expanded_composer
composer.click_toolbar_button("local-dates")
find(".d-editor-button-bar .toolbar-popup-menu-options").click
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
expect(insert_datetime_modal).to be_open