Skip to content

Commit

Permalink
Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbwinger
dbwinger committed Mar 24, 2022
1 parent 615311e commit 1d51607
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 222 deletions.
155 changes: 83 additions & 72 deletions app/assets/stylesheets/alchemy/elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,7 @@
}

.content_editor,
.ingredient-editor,
.picture_thumbnail {
width: 100%;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -524,7 +557,8 @@
}
}

.essence_picture {
.essence_picture,
.ingredient-editor.picture {
position: relative;

.picture_thumbnail {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -709,7 +713,7 @@ select.long {
}

&.validation_failed {
label {
> label {
color: $error_text_color;
}

Expand Down Expand Up @@ -760,7 +764,8 @@ select.long {
}
}

&.essence_select {
&.essence_select,
&.select {
label {
margin-bottom: 2 * $default-margin;
}
Expand All @@ -774,6 +779,7 @@ select.long {
}
}

select.ingredient-editor-select,
select.essence_editor_select {
border-radius: $default-border-radius;
background: white;
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -917,8 +927,9 @@ textarea.has_tinymce {
}
}

.ingredient-date--label,
.essence_date--label {
position: absolute;
right: 7px;
top: 37px;
}
}
23 changes: 23 additions & 0 deletions app/decorators/alchemy/element_editor.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
[
Expand Down
32 changes: 24 additions & 8 deletions app/views/alchemy/admin/elements/_element.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,38 @@

<div id="element_<%= element.id %>_errors" class="element_errors"></div>

<!-- Ingredients -->
<% if element.has_ingredients_defined? %>
<div class="element-ingredient-editors">
<%= render element.ingredients.select { |i| i.definition[:group].blank? }, element_form: f %>

<!-- Each ingredient group -->
<% element.ingredients.select { |i| i.definition[:group].present? }.group_by { |i| i.definition[:group] }.each do |group, ingredients| %>
<div class="content-group">
<%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %>
<i class="content-group-expand icon fa-fw fa-plus fas" />
<%= 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 %>
</div>
<% end %>
</div>
<% end %>
<!-- Contents -->
<div id="element_<%= element.id %>_content" class="element-content-editors">
<% element.contents.select { |c| c.definition[:group].blank? }.each do |content| %>
<%= render content %>
<% end %>
<%= render element.contents.select { |c| c.definition[:group].blank? } %>

<!-- Each content group -->
<% 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| %>
<div class="content-group">
<%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %>
<i class="content-group-expand icon fa-fw fa-plus fas" />
<%= 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 %>
</div>
<% end %>
Expand Down
Loading

0 comments on commit 1d51607

Please sign in to comment.