From 0799e88ac92928a2e1655db5b18e7e9b12847fb2 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Mon, 12 Dec 2022 16:07:07 +0100
Subject: [PATCH] Add Headline size and level selects as input addons

Instead of having a second row in the editor we stick
with our theme of a single input per ingredient by
adding the selects as an input addons.

A commonly known UI element.
---
 .../stylesheets/alchemy/_variables.scss       | 13 +++-
 app/assets/stylesheets/alchemy/elements.scss  | 33 +++++++-
 app/assets/stylesheets/alchemy/forms.scss     | 76 ++++++++++++++-----
 app/decorators/alchemy/ingredient_editor.rb   |  3 +
 app/models/alchemy/ingredients/headline.rb    |  2 +-
 .../ingredients/_headline_editor.html.erb     | 40 +++++-----
 .../alchemy/ingredient_editor_spec.rb         | 34 +++++++++
 .../alchemy/ingredients/headline_spec.rb      |  2 +-
 8 files changed, 155 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
index 8d80fee2fe..b613123e5c 100644
--- a/app/assets/stylesheets/alchemy/_variables.scss
+++ b/app/assets/stylesheets/alchemy/_variables.scss
@@ -21,8 +21,10 @@ $anchor-color: $very-dark-orange !default;
 
 $body-background-color: $light-gray !default;
 
-$default-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif !default;
-$mono-font-family: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace !default;
+$default-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+  "Lucida Sans", Verdana, Tahoma, sans-serif !default;
+$mono-font-family: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
+  Terminal, monospace !default;
 $base-font-size: 12px !default;
 $default-font-size: 1em !default;
 $small-font-size: 0.9em !default;
@@ -44,15 +46,18 @@ $default-border-color: rgba(#afafaf, 0.5) !default;
 $border-inset-color: lighten($default-border-color, 10%) !default;
 $default-border-width: 1px !default;
 $default-border-style: solid !default;
-$default-border: $default-border-width $default-border-style $default-border-color !default;
+$default-border: $default-border-width $default-border-style
+  $default-border-color !default;
 $default-border-radius: 3px !default;
 
 $form-field-margin: $default-margin 0 !default;
 $form-field-height: 31px !default;
+$form-field-addon-width: 30px !default;
 $form-field-background-color: $white !default;
 $form-field-border-width: $default-border-width !default;
 $form-field-border-style: $default-border-style !default;
-$form-field-border-color: $default-border-color $default-border-color $border-inset-color $border-inset-color !default;
+$form-field-border-color: $default-border-color $default-border-color
+  $border-inset-color $border-inset-color !default;
 $form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
 $form-field-padding: 0.6em 0.75em !default;
 $form-field-font-size: $default-font-size !default;
diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
index 3fc1dfab9d..8fb3aaea57 100644
--- a/app/assets/stylesheets/alchemy/elements.scss
+++ b/app/assets/stylesheets/alchemy/elements.scss
@@ -487,7 +487,7 @@
       $focus-border-color: $focus-color,
       $focus-box-shadow: 0 0 0 2px $focus-color
     );
-    width: 29px;
+    width: $form-field-addon-width;
     height: $form-field-height;
 
     &.disabled,
@@ -601,6 +601,26 @@
   }
 }
 
+.ingredient-editor.headline {
+  &.with-level-select {
+    input[type="text"] {
+      padding-right: $form-field-addon-width + 2 * $default-padding;
+    }
+  }
+
+  &.with-size-select {
+    input[type="text"] {
+      padding-right: $form-field-addon-width + 2 * $default-padding;
+    }
+
+    &.with-level-select {
+      input[type="text"] {
+        padding-right: 2 * ($form-field-addon-width + $default-padding);
+      }
+    }
+  }
+}
+
 .content_editor.essence_audio,
 .content_editor.essence_file,
 .content_editor.essence_video,
@@ -690,6 +710,12 @@ select.long {
     width: 100%;
   }
 
+  &.linkable {
+    input[type="text"] {
+      padding-right: 2 * ($form-field-addon-width + $default-padding);
+    }
+  }
+
   &.missing {
     .message {
       margin: 0;
@@ -938,6 +964,7 @@ textarea.has_tinymce {
 .ingredient-date--label,
 .essence_date--label {
   position: absolute;
-  right: 7px;
-  top: 37px;
+  right: 2 * $default-padding;
+  bottom: $form-field-height / 2;
+  margin: 0 !important;
 }
diff --git a/app/assets/stylesheets/alchemy/forms.scss b/app/assets/stylesheets/alchemy/forms.scss
index 9dbd648dc4..6b990de561 100644
--- a/app/assets/stylesheets/alchemy/forms.scss
+++ b/app/assets/stylesheets/alchemy/forms.scss
@@ -1,8 +1,7 @@
 form {
-
   #main_content > &.alchemy {
     max-width: 600px;
-    padding: 2*$default-padding;
+    padding: 2 * $default-padding;
     margin: 2em auto;
   }
 
@@ -43,8 +42,8 @@ form {
     }
 
     > .autocomplete_tag_list {
-
-      .select2-container, .select2-choices {
+      .select2-container,
+      .select2-choices {
         width: 100%;
       }
     }
@@ -81,16 +80,16 @@ form {
     }
 
     &.field_with_errors {
-
       input[type="text"],
       input[type="email"],
       input[type="password"],
       textarea,
       .select2-choices {
-        @extend %field-with-error
+        @extend %field-with-error;
       }
 
-      .select2-choice, .select2-choices {
+      .select2-choice,
+      .select2-choices {
         border-color: $error_border_color;
         color: $error_text_color;
         margin-bottom: 4px;
@@ -100,7 +99,9 @@ form {
         }
       }
 
-      label { color: $error_text_color }
+      label {
+        color: $error_text_color;
+      }
     }
 
     small.error {
@@ -115,27 +116,71 @@ form {
 
     &.language_locale small.error {
       @include form-hint(
-      $background-color: $error_background_color,
-      $border-color: $error_border_color
+        $background-color: $error_background_color,
+        $border-color: $error_border_color
       );
       text-align: left;
     }
   }
 
+  .input-addon {
+    width: $form-field-addon-width;
+    position: absolute;
+    bottom: 2 * $default-padding;
+
+    select {
+      width: 100%;
+      padding: 0 2px;
+      text-align: center;
+    }
+
+    &.left {
+      left: 0;
+
+      select {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &.right {
+      left: unset;
+      right: 0;
+
+      select {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &.second {
+        left: unset;
+        right: $form-field-addon-width;
+
+        select {
+          border-right-width: 0;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+  }
+
   .input > .with-hint,
   .checkbox > .with-hint {
     cursor: default;
 
-    input, textarea {
+    input,
+    textarea {
       cursor: not-allowed;
     }
   }
 
   .inline-input {
     @include clearfix;
-    margin: 0 -1*$default-margin;
+    margin: 0 -1 * $default-margin;
 
-    .left-column, .right-column {
+    .left-column,
+    .right-column {
       padding: 0 $default-padding;
     }
 
@@ -192,9 +237,7 @@ form {
   }
 
   .input-row {
-
     .input-column {
-
       &:first-of-type {
         padding-left: 0;
       }
@@ -212,7 +255,6 @@ textarea#essence_picture_caption {
 
 // styles for link overlay selects
 .window_form {
-
   td.checkbox {
     text-align: left;
   }
@@ -224,5 +266,5 @@ textarea#essence_picture_caption {
 
 .input-column > label {
   display: block;
-  margin-top: $default-margin +1;
+  margin-top: $default-margin + 1;
 }
diff --git a/app/decorators/alchemy/ingredient_editor.rb b/app/decorators/alchemy/ingredient_editor.rb
index 99f4f09061..4c6c3f11a5 100644
--- a/app/decorators/alchemy/ingredient_editor.rb
+++ b/app/decorators/alchemy/ingredient_editor.rb
@@ -36,6 +36,9 @@ def css_classes
         "ingredient-editor",
         partial_name,
         deprecated? ? "deprecated" : nil,
+        respond_to?(:level_options) && level_options.many? ? "with-level-select" : nil,
+        respond_to?(:size_options) && size_options.many? ? "with-size-select" : nil,
+        settings[:linkable] ? "linkable" : nil,
       ].compact
     end
 
diff --git a/app/models/alchemy/ingredients/headline.rb b/app/models/alchemy/ingredients/headline.rb
index 0e5e3e6582..5afffd7349 100644
--- a/app/models/alchemy/ingredients/headline.rb
+++ b/app/models/alchemy/ingredients/headline.rb
@@ -20,7 +20,7 @@ def level_options
       end
 
       def size_options
-        sizes.map { |size| ["H#{size}", size] }
+        sizes.map { |size| [".h#{size}", size] }
       end
 
       private
diff --git a/app/views/alchemy/ingredients/_headline_editor.html.erb b/app/views/alchemy/ingredients/_headline_editor.html.erb
index cf8a440de5..2b3a2eb0eb 100644
--- a/app/views/alchemy/ingredients/_headline_editor.html.erb
+++ b/app/views/alchemy/ingredients/_headline_editor.html.erb
@@ -1,30 +1,26 @@
+<% has_level_select = headline_editor.level_options.many? %>
+<% has_size_select = headline_editor.size_options.many? %>
+
 <%= content_tag :div,
   class: headline_editor.css_classes,
   data: headline_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, headline_editor.ingredient) do |f| %>
     <%= ingredient_label(headline_editor) %>
     <%= f.text_field :value, id: nil %>
-
-    <div class="input-row">
-      <% if headline_editor.level_options.length > 1 %>
-        <div class="input-column">
-          <%= f.label :level %>
-          <%= f.select :level,
-            options_for_select(headline_editor.level_options, headline_editor.level),
-            {},
-            { class: "alchemy_selectbox full_width" } %>
-        </div>
-      <% end %>
-
-      <% if headline_editor.size_options.length > 1 %>
-        <div class="input-column">
-          <%= f.label :size %>
-          <%= f.select :size,
-            options_for_select(headline_editor.size_options, headline_editor.size),
-            {},
-            { class: "alchemy_selectbox full_width" } %>
-        </div>
-      <% end %>
-    </div>
+    <% if has_level_select %>
+      <div class="input-addon right<%= " second" if has_size_select %>">
+        <%= f.select :level,
+          options_for_select(headline_editor.level_options, headline_editor.level),
+          {},
+          { class: "custom-select", title: f.object.class.human_attribute_name(:level) } %>
+      </div>
+    <% end %>
+    <% if has_size_select %>
+      <div class="input-addon right">
+        <%= f.select :size, options_for_select(headline_editor.size_options, headline_editor.size),
+          {},
+          { class: "custom-select", title: f.object.class.human_attribute_name(:size) } %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/spec/decorators/alchemy/ingredient_editor_spec.rb b/spec/decorators/alchemy/ingredient_editor_spec.rb
index 088dd20966..584572f3ce 100644
--- a/spec/decorators/alchemy/ingredient_editor_spec.rb
+++ b/spec/decorators/alchemy/ingredient_editor_spec.rb
@@ -33,6 +33,40 @@
         is_expected.to include("deprecated")
       end
     end
+
+    context "when responding to level_options" do
+      context "and having many level options" do
+        before do
+          expect(ingredient).to receive(:level_options) do
+            [["H1", 1], ["H2", 2]]
+          end
+        end
+
+        it { is_expected.to include("with-level-select") }
+      end
+    end
+
+    context "when responding to size_options" do
+      context "and having many size options" do
+        before do
+          expect(ingredient).to receive(:size_options) do
+            [[".h1", 1], [".h2", 2]]
+          end
+        end
+
+        it { is_expected.to include("with-size-select") }
+      end
+    end
+
+    context "when linkable" do
+      before do
+        expect(ingredient).to receive(:settings) do
+          { linkable: true }
+        end
+      end
+
+      it { is_expected.to include("linkable") }
+    end
   end
 
   describe "#data_attributes" do
diff --git a/spec/models/alchemy/ingredients/headline_spec.rb b/spec/models/alchemy/ingredients/headline_spec.rb
index 11ddb23195..0fae5c558f 100644
--- a/spec/models/alchemy/ingredients/headline_spec.rb
+++ b/spec/models/alchemy/ingredients/headline_spec.rb
@@ -39,7 +39,7 @@
         expect(ingredient).to receive(:settings).and_return(sizes: [3, 4])
       end
 
-      it { is_expected.to eq([["H3", 3], ["H4", 4]]) }
+      it { is_expected.to eq([[".h3", 3], [".h4", 4]]) }
     end
   end