Skip to content

Commit aea87bd

Browse files
renatorenato
committed
UX: composer toolbar changes (icon, style, placement)
1 parent fc9703a commit aea87bd

File tree

8 files changed

+104
-77
lines changed

8 files changed

+104
-77
lines changed

‎app/assets/javascripts/discourse/app/components/composer-editor.gjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -917,7 +917,7 @@ export default class ComposerEditor extends Component {
917917
toolbar.addButton({
918918
id: "options",
919919
group: "extras",
920-
icon: "gear",
920+
icon: "circle-plus",
921921
title: "composer.options",
922922
sendAction: this.onExpandPopupMenuOptions.bind(this),
923923
popupMenu: true,

‎app/assets/javascripts/discourse/app/components/d-editor.gjs

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -139,18 +139,22 @@ export default class DEditor extends Component {
139139
};
140140
});
141141

142-
if (this.popupMenuOptions && this.onPopupMenuAction) {
143-
this.popupMenuOptions.forEach((popupButton) => {
144-
if (popupButton.shortcut && popupButton.condition) {
145-
const shortcut =
146-
`${PLATFORM_KEY_MODIFIER}+${popupButton.shortcut}`.toLowerCase();
147-
keymap[shortcut] = () => {
148-
this.onPopupMenuAction(popupButton, this.newToolbarEvent());
149-
return false;
150-
};
151-
}
152-
});
153-
}
142+
this.popupMenuOptions?.forEach((popupButton) => {
143+
if (popupButton.shortcut && popupButton.condition) {
144+
const shortcut =
145+
`${PLATFORM_KEY_MODIFIER}+${popupButton.shortcut}`.toLowerCase();
146+
keymap[shortcut] = () => {
147+
this.onPopupMenuAction(
148+
{
149+
...popupButton,
150+
action: popupButton.shortcutAction ?? popupButton.action,
151+
},
152+
this.newToolbarEvent()
153+
);
154+
return false;
155+
};
156+
}
157+
});
154158

155159
keymap["tab"] = () => this.textManipulation.indentSelection("right");
156160
keymap["shift+tab"] = () => this.textManipulation.indentSelection("left");

‎app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default {
1616
toolbar.addButton({
1717
id: "emoji",
1818
group: "extras",
19-
icon: "face-smile",
19+
icon: "far-face-smile",
2020
sendAction: () => {
2121
const menu = api.container.lookup("service:menu");
2222
menu.show(document.querySelector(".insert-composer-emoji"), {

‎app/assets/stylesheets/common/components/composer-toggle-switch.scss

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
.composer-toggle-switch {
22
--toggle-switch-width: 40px;
33
--toggle-switch-height: 24px;
4-
height: 100%;
5-
grid-column: span 2;
64
justify-content: center;
75
display: flex;
86
align-items: center;
@@ -38,21 +36,24 @@
3836
display: block;
3937
position: absolute;
4038
background-color: var(--tertiary-low);
41-
width: calc(var(--toggle-switch-height) - 2px);
42-
height: calc(var(--toggle-switch-height) - 4px);
43-
top: 2px;
39+
width: calc(var(--toggle-switch-height) - 0.125rem);
40+
height: calc(var(--toggle-switch-height) - 0.25rem);
41+
top: 0.125rem;
4442
transition:
4543
left 0.25s,
46-
right 0.25s;
44+
right 0.25s,
45+
transform 0.25s;
4746
border-radius: 0.25em;
48-
box-shadow: 0 1px 3px 1px rgb(0, 0, 0, 0.1);
47+
box-shadow: 0 1px 2px 1px rgb(var(--tertiary-rgb), 0.2);
4948

5049
.--markdown & {
51-
left: 2px;
50+
transform: translateX(0.125rem);
5251
}
5352

5453
.--rte & {
55-
right: 2px;
54+
transform: translateX(
55+
calc(var(--toggle-switch-width) - var(--toggle-switch-height))
56+
);
5657
}
5758

5859
@media (prefers-reduced-motion: reduce) {
@@ -63,35 +64,38 @@
6364

6465
&__left-icon,
6566
&__right-icon {
66-
display: inline-block;
67+
display: inline-flex;
68+
align-items: center;
69+
justify-content: center;
6770
position: absolute;
6871
opacity: 0;
69-
transition:
70-
opacity 0.25s left 0.25s,
71-
right 0.25s;
72+
transition: opacity 0.25s ease;
7273
height: 100%;
73-
width: calc(var(--toggle-switch-height) - 2px);
74+
width: calc(var(--toggle-switch-height) - 0.125rem);
75+
76+
.d-icon {
77+
color: var(--primary);
78+
vertical-align: text-bottom;
79+
}
7480

7581
@media (prefers-reduced-motion: reduce) {
7682
transition-duration: 0ms;
7783
}
84+
}
85+
86+
&__left-icon {
87+
left: 0.125rem;
7888

7989
.--markdown & {
80-
left: 2px;
90+
opacity: 1;
8191
}
92+
}
8293

83-
.--rte & {
84-
right: 2px;
85-
}
94+
&__right-icon {
95+
right: 0.125rem;
8696

87-
&.--active {
97+
.--rte & {
8898
opacity: 1;
8999
}
90-
91-
.d-icon {
92-
font-size: var(--font-down-1);
93-
color: var(--primary);
94-
vertical-align: text-bottom;
95-
}
96100
}
97101
}

‎app/assets/stylesheets/common/d-editor.scss

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
flex-direction: column;
3636
background-color: var(--secondary);
3737
position: relative;
38-
border: 1px solid var(--primary-400);
3938
border-radius: var(--d-input-border-radius);
4039
min-height: 0;
4140

@@ -319,42 +318,57 @@
319318

320319
// d-editor bar button sizing
321320
.d-editor-button-bar {
322-
display: grid;
323-
grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
321+
display: flex;
322+
flex-direction: row;
323+
flex-wrap: wrap;
324324
align-items: center;
325-
border-bottom: 1px solid var(--primary-low);
326-
width: 100%;
327-
box-sizing: border-box;
328-
flex-shrink: 0;
325+
margin-top: 0.25rem;
329326

330-
@include viewport.until(md) {
331-
// occupy available space on narrower screens
332-
grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
327+
.composer-toggle-switch {
328+
min-width: 3.35em;
329+
height: 2.2rem;
333330
}
334331

335-
@include viewport.until(sm) {
336-
font-size: var(--font-down-1);
332+
@include viewport.until(md) {
333+
.composer-toggle-switch {
334+
min-width: 3.5rem;
335+
}
336+
337+
.btn {
338+
min-width: 2.5rem;
339+
}
337340
}
338341

339342
.btn:focus-visible {
340343
@include default-focus;
341344
}
342345

343346
.btn {
347+
min-width: 2.35em;
348+
height: 2.2rem;
344349
margin: 0;
345350
background-color: transparent;
346351
color: var(--primary-medium);
347352
border-radius: var(--d-border-radius);
353+
transition: background-color 0.2s ease;
348354

349355
.d-icon {
350356
color: currentcolor;
351357
}
352358

353359
.discourse-no-touch & {
354360
&:hover {
355-
color: var(--primary-low);
361+
background-color: var(--primary-low);
362+
363+
.d-icon {
364+
color: var(--primary-medium);
365+
}
356366
}
357367
}
368+
369+
@media (prefers-reduced-motion: reduce) {
370+
transition-duration: 0ms;
371+
}
358372
}
359373

360374
.select-kit-header-wrapper {

‎plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -162,25 +162,22 @@ function initializeDiscourseLocalDates(api) {
162162
});
163163
});
164164

165-
api.onToolbarCreate((toolbar) => {
166-
toolbar.addButton({
167-
title: "discourse_local_dates.title",
168-
id: "local-dates",
169-
group: "extras",
170-
icon: "calendar-days",
171-
perform: (event) =>
172-
modal.show(LocalDatesCreateModal, {
173-
model: { insertDate: (markup) => event.addText(markup) },
174-
}),
175-
shortcut: "Shift+.",
176-
shortcutAction: (event) => {
177-
const timezone = api.getCurrentUser().user_option.timezone;
178-
const time = moment().format("HH:mm:ss");
179-
const date = moment().format("YYYY-MM-DD");
180-
181-
event.addText(`[date=${date} time=${time} timezone="${timezone}"]`);
182-
},
183-
});
165+
api.addComposerToolbarPopupMenuOption({
166+
name: "local-dates",
167+
label: "discourse_local_dates.title",
168+
icon: "far-clock",
169+
action: (event) =>
170+
modal.show(LocalDatesCreateModal, {
171+
model: { insertDate: (markup) => event.addText(markup) },
172+
}),
173+
shortcut: "Shift+.",
174+
shortcutAction: (event) => {
175+
const timezone = api.getCurrentUser().user_option.timezone;
176+
const time = moment().format("HH:mm:ss");
177+
const date = moment().format("YYYY-MM-DD");
178+
179+
event.addText(`[date=${date} time=${time} timezone="${timezone}"]`);
180+
},
184181
});
185182

186183
addTextDecorateCallback(

‎plugins/discourse-local-dates/spec/system/local_dates_spec.rb

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,8 @@ def formatted_date_for_year(month, day)
8686
it "allows selecting a date without a time and inserts into the post" do
8787
topic_page.visit_topic_and_open_composer(topic)
8888
expect(topic_page).to have_expanded_composer
89-
composer.click_toolbar_button("local-dates")
89+
find(".d-editor-button-bar .toolbar-popup-menu-options").click
90+
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
9091
expect(insert_datetime_modal).to be_open
9192
insert_datetime_modal.calendar_date_time_picker.select_year(year)
9293
insert_datetime_modal.calendar_date_time_picker.select_day(16)
@@ -99,7 +100,8 @@ def formatted_date_for_year(month, day)
99100
it "allows selecting a date with a time and inserts into the post" do
100101
topic_page.visit_topic_and_open_composer(topic)
101102
expect(topic_page).to have_expanded_composer
102-
composer.click_toolbar_button("local-dates")
103+
find(".d-editor-button-bar .toolbar-popup-menu-options").click
104+
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
103105
expect(insert_datetime_modal).to be_open
104106
insert_datetime_modal.calendar_date_time_picker.select_year(year)
105107
insert_datetime_modal.calendar_date_time_picker.select_day(16)
@@ -114,7 +116,8 @@ def formatted_date_for_year(month, day)
114116
it "allows selecting a start date and time and an end date and time" do
115117
topic_page.visit_topic_and_open_composer(topic)
116118
expect(topic_page).to have_expanded_composer
117-
composer.click_toolbar_button("local-dates")
119+
find(".d-editor-button-bar .toolbar-popup-menu-options").click
120+
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
118121
expect(insert_datetime_modal).to be_open
119122
insert_datetime_modal.calendar_date_time_picker.select_year(year)
120123
insert_datetime_modal.calendar_date_time_picker.select_day(16)
@@ -136,7 +139,8 @@ def formatted_date_for_year(month, day)
136139

137140
expect(topic_page).to have_expanded_composer
138141

139-
composer.click_toolbar_button("local-dates")
142+
find(".d-editor-button-bar .toolbar-popup-menu-options").click
143+
page.find(".toolbar-popup-menu-options [data-name=local-dates]").click
140144

141145
expect(insert_datetime_modal).to be_open
142146

‎plugins/discourse-local-dates/test/javascripts/acceptance/local-dates-composer-test.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,9 @@ acceptance("Local Dates - composer", function (needs) {
7878
const categoryChooser = selectKit(".category-chooser");
7979
await categoryChooser.expand();
8080
await categoryChooser.selectRowByValue(2);
81-
await click(".d-editor-button-bar .local-dates");
81+
const optionsMenu = selectKit(".toolbar-popup-menu-options");
82+
await optionsMenu.expand();
83+
await optionsMenu.selectRowByName("local-dates");
8284

8385
const timezoneChooser = selectKit(".timezone-input");
8486
await timezoneChooser.expand();
@@ -95,7 +97,9 @@ acceptance("Local Dates - composer", function (needs) {
9597
const categoryChooser = selectKit(".category-chooser");
9698
await categoryChooser.expand();
9799
await categoryChooser.selectRowByValue(2);
98-
await click(".d-editor-button-bar .local-dates");
100+
const optionsMenu = selectKit(".toolbar-popup-menu-options");
101+
await optionsMenu.expand();
102+
await optionsMenu.selectRowByName("local-dates");
99103

100104
await click('.pika-table td[data-day="5"] > .pika-button');
101105

0 commit comments

Comments
 (0)