discourse · renato · May 27, 2025 · May 28, 2025 · May 29, 2025 · May 29, 2025
diff --git a/app/assets/javascripts/discourse/app/components/composer-editor.gjs b/app/assets/javascripts/discourse/app/components/composer-editor.gjs
@@ -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: true,

diff --git a/app/assets/javascripts/discourse/app/components/d-editor.gjs b/app/assets/javascripts/discourse/app/components/d-editor.gjs
@@ -139,18 +139,22 @@ export default class DEditor extends Component {
       };
     });
 
-    if (this.popupMenuOptions && this.onPopupMenuAction) {
-      this.popupMenuOptions.forEach((popupButton) => {
-        if (popupButton.shortcut && popupButton.condition) {
-          const shortcut =
-            `${PLATFORM_KEY_MODIFIER}+${popupButton.shortcut}`.toLowerCase();
-          keymap[shortcut] = () => {
-            this.onPopupMenuAction(popupButton, this.newToolbarEvent());
-            return false;
-          };
-        }
-      });
-    }
+    this.popupMenuOptions?.forEach((popupButton) => {
+      if (popupButton.shortcut && popupButton.condition) {
+        const shortcut =
+          `${PLATFORM_KEY_MODIFIER}+${popupButton.shortcut}`.toLowerCase();
+        keymap[shortcut] = () => {
+          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");

diff --git a/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js b/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js
@@ -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"), {

diff --git a/app/assets/stylesheets/common/components/composer-toggle-switch.scss b/app/assets/stylesheets/common/components/composer-toggle-switch.scss
@@ -1,14 +1,11 @@
 .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;
   border: 0;
   padding: 0;
   background: transparent;
+  -webkit-tap-highlight-color: transparent;
 
   &:focus-visible {
     outline: none;
@@ -21,38 +18,42 @@
 
   &__slider {
     display: inline-block;
-    background: var(--primary-low);
-    width: var(--toggle-switch-width);
-    height: var(--toggle-switch-height);
+    background: var(--primary-very-low);
+    width: 3rem;
+    height: 1.5rem;
     position: relative;
     vertical-align: middle;
-    border-radius: 0.25em;
+    border-radius: var(--d-border-radius-large);
+    border: 1px solid var(--primary-low);
 
     :focus-visible & {
       outline: 2px solid var(--tertiary);
       outline-offset: 2px;
     }
 
+    .no-touch &:hover {
+      background-color: var(--primary-low);
+    }
+
     &::before {
       content: "";
-      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;
-      border-radius: 0.25em;
-      box-shadow: 0 1px 3px 1px rgb(0, 0, 0, 0.1);
+      background: var(--tertiary);
+      width: calc(50% - 1px);
+      height: calc(100% - 2px);
+      top: 1px;
+      left: 1px;
+      border-radius: calc(var(--d-border-radius-large) - 1px);
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      will-change: transform;
+      box-shadow: 0 1px 2px rgb(var(--tertiary-rgb), 0.2);
 
       .--markdown & {
-        left: 2px;
+        transform: translateX(0);
       }
 
       .--rte & {
-        right: 2px;
+        transform: translateX(100%);
       }
 
       @media (prefers-reduced-motion: reduce) {
@@ -63,35 +64,48 @@
 
   &__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;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
     height: 100%;
-    width: calc(var(--toggle-switch-height) - 2px);
+    width: 1.5rem;
+    top: 0;
+
+    .d-icon {
+      color: var(--primary);
+      vertical-align: text-bottom;
+      transition: color 0.2s ease;
+    }
 
     @media (prefers-reduced-motion: reduce) {
       transition-duration: 0ms;
     }
+  }
+
+  &__left-icon {
+    left: 0;
 
     .--markdown & {
-      left: 2px;
-    }
+      opacity: 1;
 
-    .--rte & {
-      right: 2px;
+      .d-icon {
+        color: var(--secondary);
+      }
     }
+  }
 
-    &.--active {
+  &__right-icon {
+    right: 0;
+
+    .--rte & {
       opacity: 1;
-    }
 
-    .d-icon {
-      font-size: var(--font-down-1);
-      color: var(--primary);
-      vertical-align: text-bottom;
+      .d-icon {
+        color: var(--secondary);
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
@@ -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: var(--space-1);
 
-  @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 var(--space-2);
   }
 
   .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);
+        }
       }
     }
   }

diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
@@ -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 {

diff --git a/plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js b/plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js
@@ -162,25 +162,22 @@ function initializeDiscourseLocalDates(api) {
     });
   });
 
-  api.onToolbarCreate((toolbar) => {
-    toolbar.addButton({
-      title: "discourse_local_dates.title",
-      id: "local-dates",
-      group: "extras",
-      icon: "calendar-days",
-      perform: (event) =>
-        modal.show(LocalDatesCreateModal, {
-          model: { insertDate: (markup) => event.addText(markup) },
-        }),
-      shortcut: "Shift+.",
-      shortcutAction: (event) => {
-        const timezone = api.getCurrentUser().user_option.timezone;
-        const time = moment().format("HH:mm:ss");
-        const date = moment().format("YYYY-MM-DD");
-
-        event.addText(`[date=${date} time=${time} timezone="${timezone}"]`);
-      },
-    });
+  api.addComposerToolbarPopupMenuOption({
+    name: "local-dates",
+    label: "discourse_local_dates.title",
+    icon: "far-clock",
+    action: (event) =>
+      modal.show(LocalDatesCreateModal, {
+        model: { insertDate: (markup) => event.addText(markup) },
+      }),
+    shortcut: "Shift+.",
+    shortcutAction: (event) => {
+      const timezone = api.getCurrentUser().user_option.timezone;
+      const time = moment().format("HH:mm:ss");
+      const date = moment().format("YYYY-MM-DD");
+
+      event.addText(`[date=${date} time=${time} timezone="${timezone}"]`);
+    },
   });
 
   addTextDecorateCallback(

diff --git a/plugins/discourse-local-dates/spec/system/local_dates_spec.rb b/plugins/discourse-local-dates/spec/system/local_dates_spec.rb
@@ -86,7 +86,8 @@ def formatted_date_for_year(month, day)
     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 @@ def formatted_date_for_year(month, day)
     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 @@ def formatted_date_for_year(month, day)
     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 @@ def formatted_date_for_year(month, day)
 
       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
 

diff --git a/plugins/discourse-local-dates/test/javascripts/acceptance/local-dates-composer-test.js b/plugins/discourse-local-dates/test/javascripts/acceptance/local-dates-composer-test.js
@@ -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');