Adjustable preview sizes

Gemfile

@@ -17,6 +17,8 @@ gem "pg", "~> 1.0" if ENV["DB"] == "postgresql"
 
 gem "alchemy_i18n", git: "https://github.com/AlchemyCMS/alchemy_i18n.git", branch: "main"
 
+gem "sprockets-rails", "< 3.5.0"
+
 group :development, :test do
   gem "execjs", "~> 2.9.1"
   gem "rubocop", require: false

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);
   }
 }
 

app/helpers/alchemy/admin/pages_helper.rb

@@ -5,18 +5,14 @@ module Admin
     module PagesHelper
       include Alchemy::Admin::BaseHelper
 
-      # Returns options tags for the screen sizes select in page edit view.
+      # Returns screen sizes for the preview size select in page edit view.
+      #
+      # You can configure the screen sizes in your +config/alchemy/config.yml+.
       #
       def preview_sizes_for_select
-        options_for_select([
-          "auto",
-          [Alchemy.t("240", scope: "preview_sizes"), 240],
-          [Alchemy.t("320", scope: "preview_sizes"), 320],
-          [Alchemy.t("480", scope: "preview_sizes"), 480],
-          [Alchemy.t("768", scope: "preview_sizes"), 768],
-          [Alchemy.t("1024", scope: "preview_sizes"), 1024],
-          [Alchemy.t("1280", scope: "preview_sizes"), 1280]
-        ])
+        Alchemy::Config.get(:page_preview_sizes).map do |size|
+          [Alchemy.t(size, scope: "preview_sizes"), size]
+        end
       end
 
       # Renders a label for page's page layout

app/javascript/alchemy_admin/components/preview_window.js

@@ -66,12 +66,11 @@ 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
 
-      if (width === "auto") {
+      if (width === "") {
         this.style.width = null
       } else {
         this.resize(width)

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",
+        options_for_select(preview_sizes_for_select),
+        include_blank: Alchemy.t("auto", scope: "preview_sizes") %>
+    </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
   <% if @preview_urls.many? %>

config/alchemy/config.yml

@@ -205,3 +205,12 @@ format_matchers:
 
 # The layout used for rendering the +alchemy/admin/pages#show+ action.
 admin_page_preview_layout: application
+
+# The sizes for the preview size select in the page editor.
+page_preview_sizes:
+  - 360
+  - 640
+  - 768
+  - 1024
+  - 1280
+  - 1440

config/locales/alchemy.en.yml

@@ -572,14 +572,15 @@ en:
     please_confirm: "Please confirm"
     please_wait: "Please wait"
     position_in_text: "Position in text"
-    preview_size: "Preview size"
+    preview_size: "Preview Size"
     preview_sizes:
-      "240": "240px (small phone)"
-      "320": "320px (iPhone)"
-      "480": "480px (small Tablet)"
-      "768": "768px (iPad - Portrait)"
-      "1024": "1024px (iPad - Landscape)"
-      "1280": "1280px (Desktop)"
+      "auto": "Auto"
+      "360": "Phone (360px)"
+      "640": "Small Tablet (640px)"
+      "768": "iPad Portrait (768px)"
+      "1024": "iPad Landscape (1024px)"
+      "1280": "Laptop (1280px)"
+      "1440": "Desktop (1440px)"
     preview_url: Preview
     publish_page_language_not_public: Cannot publish page if language is not public
     publish_page_not_allowed: You have not the permission to publish this page

lib/alchemy/config.rb

@@ -46,17 +46,17 @@ def replaced_config_keys
 
       # Alchemy default configuration
       def alchemy_config
-        read_file(File.join(File.dirname(__FILE__), "..", "..", "config/alchemy/config.yml"))
+        read_file Engine.root.join("config/alchemy/config.yml")
       end
 
       # Application specific configuration
       def main_app_config
-        read_file("#{Rails.root}/config/alchemy/config.yml")
+        read_file Rails.root.join("config/alchemy/config.yml")
       end
 
       # Rails Environment specific configuration
       def env_specific_config
-        read_file("#{Rails.root}/config/alchemy/#{Rails.env}.config.yml")
+        read_file Rails.root.join("config/alchemy/#{Rails.env}.config.yml")
       end
 
       # Tries to load yaml file from given path.

spec/helpers/alchemy/admin/pages_helper_spec.rb

@@ -5,7 +5,14 @@
 describe Alchemy::Admin::PagesHelper do
   describe "#preview_sizes_for_select" do
     it "returns a options string of preview screen sizes for select tag" do
-      expect(helper.preview_sizes_for_select).to include("option", "auto", "240", "320", "480", "768", "1024", "1280")
+      expect(helper.preview_sizes_for_select).to match_array([
+        ["Phone (360px)", 360],
+        ["Small Tablet (640px)", 640],
+        ["iPad Portrait (768px)", 768],
+        ["iPad Landscape (1024px)", 1024],
+        ["Laptop (1280px)", 1280],
+        ["Desktop (1440px)", 1440]
+      ])
     end
   end
 

spec/libraries/config_spec.rb

@@ -91,7 +91,7 @@ module Alchemy
     end
 
     describe ".main_app_config" do
-      let(:main_app_config_path) { "#{Rails.root}/config/alchemy/config.yml" }
+      let(:main_app_config_path) { Rails.root.join("config/alchemy/config.yml") }
 
       it "should call and return .read_file with the correct config path" do
         expect(Config).to receive(:read_file).with(main_app_config_path).once.and_return({setting: "true"})
@@ -100,7 +100,7 @@ module Alchemy
     end
 
     describe ".env_specific_config" do
-      let(:env_specific_config_path) { "#{Rails.root}/config/alchemy/#{Rails.env}.config.yml" }
+      let(:env_specific_config_path) { Rails.root.join("config/alchemy/#{Rails.env}.config.yml") }
 
       it "should call and return .read_file with the correct config path" do
         expect(Config).to receive(:read_file).with(env_specific_config_path).once.and_return({setting: "true"})