github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-25 01:30:17 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/composer-editor.gjs
View File

@ -924,7 +924,7 @@ export default class ComposerEditor extends Component {
toolbar.addButton({
id: "options",
group: "extras",
icon: "gear",
icon: "circle-plus",
title: "composer.options",
sendAction: this.onExpandPopupMenuOptions.bind(this),
popupMenu: {

12
app/assets/javascripts/discourse/app/components/d-editor.gjs
View File

@ -140,18 +140,22 @@ export default class DEditor extends Component {
};
});
if (this.popupMenuOptions && this.onPopupMenuAction) {
this.popupMenuOptions.forEach((popupButton) => {
this.popupMenuOptions?.forEach((popupButton) => {
if (popupButton.shortcut && popupButton.condition) {
const shortcut =
`${PLATFORM_KEY_MODIFIER}+${popupButton.shortcut}`.toLowerCase();
keymap[shortcut] = () => {
this.onPopupMenuAction(popupButton, this.newToolbarEvent());
this.onPopupMenuAction(
{
...popupButton,
action: popupButton.shortcutAction ?? popupButton.action,
},
this.newToolbarEvent()
);
return false;
};
}
});
}
keymap["tab"] = () => this.textManipulation.indentSelection("right");
keymap["shift+tab"] = () => this.textManipulation.indentSelection("left");

2
app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js
View File

@ -16,7 +16,7 @@ export default {
toolbar.addButton({
id: "emoji",
group: "extras",
icon: "face-smile",
icon: "far-face-smile",
sendAction: () => {
const menu = api.container.lookup("service:menu");
menu.show(document.querySelector(".insert-composer-emoji"), {

55
app/assets/stylesheets/common/components/composer-toggle-switch.scss
View File

@ -1,8 +1,6 @@
.composer-toggle-switch {
--toggle-switch-width: 40px;
--toggle-switch-height: 24px;
height: 100%;
grid-column: span 2;
justify-content: center;
display: flex;
align-items: center;
@ -38,21 +36,20 @@
display: block;
position: absolute;
background-color: var(--tertiary-low);
width: calc(var(--toggle-switch-height) - 2px);
height: calc(var(--toggle-switch-height) - 4px);
top: 2px;
transition:
left 0.25s,
right 0.25s;
width: calc(var(--toggle-switch-height) - 0.125rem);
height: calc(var(--toggle-switch-height) - 0.25rem);
top: 0.125rem;
border-radius: 0.25em;
box-shadow: 0 1px 3px 1px rgb(0, 0, 0, 0.1);
box-shadow: 0 1px 2px 1px rgb(var(--tertiary-rgb), 0.2);
.--markdown & {
left: 2px;
transform: translateX(0.125rem);
}
.--rte & {
right: 2px;
transform: translateX(
calc(var(--toggle-switch-width) - var(--toggle-switch-height))
);
}
@media (prefers-reduced-motion: reduce) {
@ -63,35 +60,37 @@
&__left-icon,
&__right-icon {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
opacity: 0;
transition:
opacity 0.25s left 0.25s,
right 0.25s;
height: 100%;
width: calc(var(--toggle-switch-height) - 2px);
width: calc(var(--toggle-switch-height) - 0.125rem);
.d-icon {
color: var(--primary);
vertical-align: text-bottom;
}
@media (prefers-reduced-motion: reduce) {
transition-duration: 0ms;
}
}
&__left-icon {
left: 0.125rem;
.--markdown & {
left: 2px;
}
.--rte & {
right: 2px;
}
&.--active {
opacity: 1;
}
}
.d-icon {
font-size: var(--font-down-1);
color: var(--primary);
vertical-align: text-bottom;
&__right-icon {
right: 0.125rem;
.--rte & {
opacity: 1;
}
}
}

25
app/assets/stylesheets/common/d-editor.scss
View File

@ -313,21 +313,14 @@
// d-editor bar button sizing
.d-editor-button-bar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
border-bottom: var(--d-input-border);
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
margin-top: 0.25rem;
@include viewport.until(md) {
// occupy available space on narrower screens
grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
}
@include viewport.until(sm) {
font-size: var(--font-down-1);
.composer-toggle-switch {
padding: 0 0.5rem;
}
.btn:focus-visible {
@ -346,7 +339,11 @@
.discourse-no-touch & {
&:hover {
color: var(--primary-low);
background-color: var(--primary-low);
.d-icon {
color: var(--primary-medium);
}
}
}
}

2
app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
View File

@ -28,6 +28,8 @@
font-size: var(--font-down-2);
color: var(--primary-high);
margin-left: 1.8rem;
font-family: var(--font-family);
font-weight: bold;
}
&:last-child {

13
plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js
View File

@ -162,13 +162,11 @@ function initializeDiscourseLocalDates(api) {
});
});
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
title: "discourse_local_dates.title",
id: "local-dates",
group: "extras",
icon: "calendar-days",
perform: (event) =>
api.addComposerToolbarPopupMenuOption({
name: "local-dates",
label: "discourse_local_dates.title",
icon: "far-clock",
action: (event) =>
modal.show(LocalDatesCreateModal, {
model: { insertDate: (markup) => event.addText(markup) },
}),
@ -181,7 +179,6 @@ function initializeDiscourseLocalDates(api) {
event.addText(`[date=${date} time=${time} timezone="${timezone}"]`);
},
});
});
addTextDecorateCallback(
function (text, nextElement, _previousElement, metadata) {

12
plugins/discourse-local-dates/spec/system/local_dates_spec.rb
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

8
plugins/discourse-local-dates/test/javascripts/acceptance/local-dates-composer-test.js
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');