Use normal select for preview sizes

More accessible and one less select2 instance.
AlchemyCMS · Jun 6, 2024 · 57a7dd2 · 57a7dd2
1 parent ddd07db
commit 57a7dd2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss
@@ -269,8 +269,9 @@ select {
   align-items: center;
   margin: 0 3 * $default-margin;
 
-  label {
-    margin-right: 2 * $default-margin;
+  label,
+  alchemy-icon {
+    margin-right: var(--spacing-2);
   }
 }
 

diff --git a/app/javascript/alchemy_admin/components/preview_window.js b/app/javascript/alchemy_admin/components/preview_window.js
@@ -66,8 +66,7 @@ class PreviewWindow extends HTMLIFrameElement {
 
     key("alt+r", () => this.refresh())
 
-    // Need to listen with jQuery here because select2 does not emit native events.
-    $(this.sizeSelect).on("change", (evt) => {
+    this.sizeSelect.addEventListener("change", (evt) => {
       const select = evt.target
       const width = select.value
 

diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
@@ -94,10 +94,12 @@
   <% end %>
   <div class="toolbar_spacer"></div>
   <div class="select_with_label">
-    <label><%= Alchemy.t(:preview_size) %></label>
-    <%= select_tag 'preview_size',
-      preview_sizes_for_select,
-      class: 'medium', is: 'alchemy-select' %>
+    <sl-tooltip content="<%= Alchemy.t(:preview_size) %>" placement="top-start">
+      <%= render_icon(:computer) %>
+      <%= select_tag "preview_size",
+        preview_sizes_for_select,
+        include_blank: Alchemy.t("auto", scope: "preview_sizes") %>
+    </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
   <% if @preview_urls.many? %>