From 1d516077e9129d52195fbc45a8dac61e72130d03 Mon Sep 17 00:00:00 2001 From: dbwinger Date: Thu, 24 Mar 2022 09:57:54 -0400 Subject: [PATCH] Refactor --- app/assets/stylesheets/alchemy/elements.scss | 155 +++++++++------- app/decorators/alchemy/element_editor.rb | 23 +++ .../alchemy/admin/elements/_element.html.erb | 32 +++- spec/dummy/config/alchemy/elements.yml | 175 ++++-------------- spec/dummy/config/alchemy/page_layouts.yml | 6 +- 5 files changed, 169 insertions(+), 222 deletions(-) diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss index 0c04517c2d..0ee15ebc33 100644 --- a/app/assets/stylesheets/alchemy/elements.scss +++ b/app/assets/stylesheets/alchemy/elements.scss @@ -280,6 +280,7 @@ } .content_editor, + .ingredient-editor, .picture_thumbnail { width: 100%; } @@ -413,7 +414,39 @@ } } -.element-content-editors { +.content-group { + width: 100%; + padding: $default-padding 0; + position: relative; + border-bottom: 1px solid $medium-gray; + + &:last-child { border-bottom: none;} + + .content-group-header { + font-weight: bold; + + .content-group-expand { + position: absolute; + right: 8px; + top: 8px; + } + } + + .content-group-contents { display: none; } + + &.expanded { + .content-group-contents { + display: block; + } + + .content-group-expand { + @extend .fa-minus; + } + } +} + +.element-content-editors, +.element-ingredient-editors { display: flex; flex-wrap: wrap; } @@ -524,7 +557,8 @@ } } -.essence_picture { +.essence_picture, +.ingredient-editor.picture { position: relative; .picture_thumbnail { @@ -559,47 +593,49 @@ } } -.content_editor { - &.essence_audio, - &.essence_file, - &.essence_video { - .file { - display: flex; - align-items: center; - margin: 6px 0 $default-margin; - border: $default-border; - background-color: $white; - border-radius: $default-border-radius; - height: $form-field-height; +.content_editor.essence_audio, +.content_editor.essence_file, +.content_editor.essence_video, +.ingredient-editor.audio, +.ingredient-editor.file, +.ingredient-editor.video { + .file { + display: flex; + align-items: center; + margin: 6px 0 $default-margin; + border: $default-border; + background-color: $white; + border-radius: $default-border-radius; + height: $form-field-height; - .validation_failed & { - color: $error_text_color; - border-color: $error_border_color; - } + .validation_failed & { + color: $error_text_color; + border-color: $error_border_color; } + } - .file_icon { - text-align: center; - width: 24px; - padding: $default-padding; - } + .file_icon { + text-align: center; + width: 24px; + padding: $default-padding; + } - .file_name { - white-space: nowrap; - overflow: hidden; - max-width: 80%; - font-size: $small-font-size; - text-overflow: ellipsis; - padding: $default-padding; - } + .file_name { + white-space: nowrap; + overflow: hidden; + max-width: 80%; + font-size: $small-font-size; + text-overflow: ellipsis; + padding: $default-padding; + } - .remove_file_link { - width: 24px; - padding: $default-padding; - } + .remove_file_link { + width: 24px; + padding: $default-padding; } } +.file_tools, .essence_file_tools { display: flex; align-items: center; @@ -635,38 +671,6 @@ select.long { padding: 0; } - -.content-group { - width: 100%; - padding: $default-padding 0; - position: relative; - border-bottom: 1px solid $medium-gray; - - &:last-child { border-bottom: none;} - - .content-group-header { - font-weight: bold; - - .content-group-expand { - position: absolute; - right: 8px; - top: 8px; - } - } - - .content-group-contents { display: none; } - - &.expanded { - .content-group-contents { - display: block; - } - - .content-group-expand { - @extend .fa-minus; - } - } -} - .content_editor, .ingredient-editor { width: 100%; @@ -709,7 +713,7 @@ select.long { } &.validation_failed { - label { + > label { color: $error_text_color; } @@ -760,7 +764,8 @@ select.long { } } - &.essence_select { + &.essence_select, + &.select { label { margin-bottom: 2 * $default-margin; } @@ -774,6 +779,7 @@ select.long { } } + select.ingredient-editor-select, select.essence_editor_select { border-radius: $default-border-radius; background: white; @@ -801,12 +807,14 @@ select.long { } } - &.essence_picture { + &.essence_picture, + &.picture { width: 50%; padding-left: 1px; // Compensate the box shadow padding-right: $default-padding; - + .essence_picture { + + .essence_picture, + + .picture { padding-left: $default-padding; padding-right: 1px; // Compensate the box shadow } @@ -858,6 +866,8 @@ textarea.has_tinymce { .content_editor .hint-with-icon, .content_editor .with-hint, +.ingredient-editor .hint-with-icon, +.ingredient-editor .with-hint, .element-handle .hint-with-icon { margin: 0; @@ -917,8 +927,9 @@ textarea.has_tinymce { } } +.ingredient-date--label, .essence_date--label { position: absolute; right: 7px; top: 37px; -} +} \ No newline at end of file diff --git a/app/decorators/alchemy/element_editor.rb b/app/decorators/alchemy/element_editor.rb index 60500e07e8..c9d1466eeb 100644 --- a/app/decorators/alchemy/element_editor.rb +++ b/app/decorators/alchemy/element_editor.rb @@ -36,6 +36,29 @@ def has_ingredients_defined? element.definition.fetch(:ingredients, []).any? end + # Returns the translated content/ingredient group for displaying in admin editor group headings + # + # Translate it in your locale yml file: + # + # alchemy: + # element_groups: + # foo: Bar + # + # Optionally you can scope your ingredient role to an element: + # + # alchemy: + # element_groups: + # article: + # foo: Baz + # + def translated_group group + Alchemy.t( + group, + scope: "element_groups.#{element.name}", + default: Alchemy.t("element_groups.#{group}", default: group.humanize), + ) + end + # CSS classes for the element editor partial. def css_classes [ diff --git a/app/views/alchemy/admin/elements/_element.html.erb b/app/views/alchemy/admin/elements/_element.html.erb index 349794c9cf..a5a5423f1e 100644 --- a/app/views/alchemy/admin/elements/_element.html.erb +++ b/app/views/alchemy/admin/elements/_element.html.erb @@ -24,22 +24,38 @@
+ + <% if element.has_ingredients_defined? %> +
+ <%= render element.ingredients.select { |i| i.definition[:group].blank? }, element_form: f %> + + + <% element.ingredients.select { |i| i.definition[:group].present? }.group_by { |i| i.definition[:group] }.each do |group, ingredients| %> +
+ <%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %> + + <%= element.translated_group group %> + <% end %> + <%= content_tag :div, id: "element_#{element.id}_content_group_#{group.parameterize.underscore}", class: 'content-group-contents' do %> + <%= render ingredients, element_form: f %> + <% end %> +
+ <% end %> +
+ <% end %> +
- <% element.contents.select { |c| c.definition[:group].blank? }.each do |content| %> - <%= render content %> - <% end %> + <%= render element.contents.select { |c| c.definition[:group].blank? } %> - <% element.contents.map { |c| c.definition[:group] }.compact.uniq.each do |group| %> + <% element.contents.select { |c| c.definition[:group].present? }.group_by { |c| c.definition[:group] }.each do |group, contents| %>
<%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %> - <%= group %> + <%= element.translated_group group %> <% end %> <%= content_tag :div, id: "element_#{element.id}_content_group_#{group.parameterize.underscore}", class: 'content-group-contents' do %> - <% element.contents.select { |c| c.definition[:group] == group }.each do |content| %> - <%= render content %> - <% end %> + <%= render contents, element_form: f %> <% end %>
<% end %> diff --git a/spec/dummy/config/alchemy/elements.yml b/spec/dummy/config/alchemy/elements.yml index b219136ea7..cc5c80c4cc 100644 --- a/spec/dummy/config/alchemy/elements.yml +++ b/spec/dummy/config/alchemy/elements.yml @@ -82,146 +82,6 @@ - name: all_you_can_eat hint: true - taggable: true - contents: - - name: essence_text - type: EssenceText - hint: true - - name: essence_picture - type: EssencePicture - hint: true - settings: - size: 1200x480 - crop: true - - name: essence_richtext - type: EssenceRichtext - hint: true - - name: essence_select - type: EssenceSelect - hint: true - settings: - select_values: [A, B, C] - - name: essence_boolean - type: EssenceBoolean - hint: true - - name: essence_date - type: EssenceDate - hint: true - - name: essence_audio - type: EssenceAudio - hint: true - - name: essence_file - type: EssenceFile - hint: true - - name: essence_video - type: EssenceVideo - hint: true - - name: essence_html - type: EssenceHtml - hint: true - deprecated: true - - name: essence_link - type: EssenceLink - hint: true - -- name: all_you_can_eat_ingredients - hint: true - taggable: true - ingredients: - - role: headline - type: Headline - hint: true - validate: - - presence - - role: text - type: Text - hint: true - validate: - - format: !ruby/regexp '/\w+/i' - - role: picture - type: Picture - hint: true - settings: - size: 1200x480 - crop: true - - role: richtext - type: Richtext - hint: true - settings: - tinymce: - toolbar: bold italic underline | undo redo | pastetext alchemy_link unlink | fullscreen code - - role: select - type: Select - hint: true - settings: - select_values: [A, B, C] - validate: - - uniqueness - - role: boolean - type: Boolean - hint: true - default: true - - role: datetime - type: Datetime - hint: true - - role: file - type: File - hint: true - - role: html - type: Html - hint: true - deprecated: true - - role: link - type: Link - hint: true - - role: node - type: Node - hint: true - - role: audio - type: Audio - hint: true - - role: video - type: Video - hint: true - - role: page - type: Page - hint: true - -- name: <%= 'erb_' + 'element' %> - contents: - - name: text - type: EssenceRichtext - -- name: slide - compact: true - contents: - - name: picture - type: EssencePicture - - name: caption - type: EssenceText - as_element_title: true - -- name: slider - nestable_elements: - - slide - autogenerate: - - slide - -- name: gallery - nestable_elements: - - gallery_picture - -- name: gallery_picture - compact: true - contents: - - name: picture - type: EssencePicture - settings: - size: 160x120 - crop: true - -- name: right_column - fixed: true unique: true contents: - name: title @@ -261,3 +121,38 @@ - role: text type: Richtext default: :lorem_ipsum + +- name: element_with_ingredient_groups + ingredients: + - role: title + type: Text + - role: description + type: Richtext + group: content + - role: width + type: Text + group: size + - role: height + type: Text + group: size + - role: key_words + type: Text + group: content + +- name: element_with_content_groups + contents: + - name: title + type: EssenceText + - name: description + type: EssenceRichtext + group: content + - name: width + type: EssenceText + group: size + - name: height + type: EssenceText + group: size + - name: key_words + type: EssenceText + group: content + diff --git a/spec/dummy/config/alchemy/page_layouts.yml b/spec/dummy/config/alchemy/page_layouts.yml index 957e6c478d..74286ecf14 100644 --- a/spec/dummy/config/alchemy/page_layouts.yml +++ b/spec/dummy/config/alchemy/page_layouts.yml @@ -32,9 +32,11 @@ left_column, old, all_you_can_eat_ingredients, - element_with_ingredients + element_with_ingredients, + element_with_ingredient_groups, + element_with_content_groups ] - autogenerate: [all_you_can_eat, right_column, left_column] + autogenerate: [all_you_can_eat] - name: news feed: true