Skip to content

Commit

Permalink
Merge pull request #1709 from tvdeyen/element-editor-changes
Browse files Browse the repository at this point in the history 
Element editor layout changes
  • Loading branch information
@tvdeyen
tvdeyen authored Jan 8, 2020
2 parents 89e4035 + e97fbe9 commit 859ecda
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 100 deletions.
52 changes: 21 additions & 31 deletions app/assets/stylesheets/alchemy/elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,22 @@
}
}

&.expanded {
&.not-fixed {
.nestable-elements {
box-shadow: inset 0 4px 8px -2px darken($medium-gray, 15%);
background-color: $medium-gray;
padding: 8px 4px 4px;

.add-nestable-element-button {
width: calc(50% - 8px);
margin: 4px;
text-align: center;
}
}
}
}

&.dragged {
border-style: dotted;
overflow: hidden;
Expand All @@ -165,15 +181,6 @@
}
}

&.with-contents,
&.without-contents.not-nestable {

.element-content {
padding: 2*$default-padding 2*$default-padding 0;
border-top: 1px solid $medium-gray;
}
}

&.compact {
.element-toolbar {
visibility: hidden;
Expand All @@ -194,7 +201,6 @@
}

.element-footer {
margin-top: 0;
padding-top: 0;
border-top: 0;

Expand Down Expand Up @@ -223,7 +229,7 @@
}

.element-content {
padding: 4px 8px;
margin: 4px 8px;
}

.button_with_label {
Expand Down Expand Up @@ -253,8 +259,8 @@
}
}

form {
margin: 0;
.element-content {
margin: 2*$default-padding;
}

.validation_notice {
Expand All @@ -266,8 +272,7 @@
}

.message {
width: 100%;
margin: 2*$default-margin 0;
margin: 2*$default-margin;
}

.foot_note {
Expand Down Expand Up @@ -332,6 +337,7 @@
.element-toolbar {
padding: $default-padding 0;
height: $element-toolbar-height;
border-bottom: 1px solid $medium-gray;

.element_tools {
float: left;
Expand All @@ -341,7 +347,6 @@

.element-footer {
border-top: 1px solid $medium-gray;
margin: 8px 0 0 0;
padding: 2*$default-padding;
text-align: right;

Expand Down Expand Up @@ -762,21 +767,6 @@ textarea.has_tinymce {
top: -1px;
}

.not-fixed .nestable-elements {
box-shadow: inset 0 4px 8px -2px darken($medium-gray, 15%);
background-color: $medium-gray;

.expanded.element-editor>& {
padding: 8px 4px 4px;
}

.add-nestable-element-button {
width: calc(50% - 8px);
margin: 4px;
text-align: center;
}
}

.is-fixed {
&.with-contents {
>.element-footer {
Expand Down
10 changes: 3 additions & 7 deletions app/helpers/alchemy/admin/elements_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,10 @@ def element_editor_classes(element)
].join(' ')
end

# Tells us, if we should show the element footer.
def show_element_footer?(element, with_nestable_elements = nil)
# Tells us, if we should show the element footer and form inputs.
def element_editable?(element)
return false if element.folded?
if with_nestable_elements
element.content_definitions.present? || element.taggable?
else
element.nestable_elements.empty?
end
element.content_definitions.present? || element.taggable?
end
end
end
Expand Down
63 changes: 31 additions & 32 deletions app/views/alchemy/admin/elements/_element.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,44 +10,47 @@
<% if element.expanded? || element.fixed? %>
<%= render 'alchemy/admin/elements/element_toolbar', element: element %>

<%= form_for [alchemy, :admin, element], remote: true,
html: {id: "element_#{element.id}_form".html_safe, class: 'element-content'} do |f| %>
<% element.definition[:message].tap do |message| %>
<%= render_message(:info, sanitize(message)) if message %>
<% end %>

<div id="element_<%= element.id %>_errors" class="element_errors"></div>
<% element.definition[:warning].tap do |warning| %>
<%= render_message(:warning, sanitize(warning)) if warning %>
<% end %>

<div id="element_<%= element.id %>_content" class="element-content-editors">
<% element.definition[:message].tap do |message| %>
<%= render_message(:info, sanitize(message)) if message %>
<% end %>
<% element.definition[:warning].tap do |warning| %>
<%= render_message(:warning, sanitize(warning)) if warning %>
<% end %>
<% if lookup_context.exists?("#{element.name}_editor", ["alchemy/elements"], true) %>
<%= render_editor(element) %>
<% else %>
<%= element_editor_for(element) do %>
<% element.contents.each do |content| %>
<%= render "alchemy/essences/#{content.essence_partial_name}_editor", {
content: content
} %>
<% if element_editable?(element) %>
<%= form_for [alchemy, :admin, element], remote: true,
html: {id: "element_#{element.id}_form".html_safe, class: 'element-content'} do |f| %>

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

<div id="element_<%= element.id %>_content" class="element-content-editors">
<% if lookup_context.exists?("#{element.name}_editor", ["alchemy/elements"], true) %>
<%= render_editor(element) %>
<% else %>
<%= element_editor_for(element) do %>
<% element.contents.each do |content| %>
<%= render "alchemy/essences/#{content.essence_partial_name}_editor", {
content: content
} %>
<% end %>
<% end %>
<% end %>
<% end %>
</div>

<% if element.taggable? %>
<div class="autocomplete_tag_list">
<%= f.label :tag_list %>
<%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
</div>

<% if element.taggable? %>
<div class="autocomplete_tag_list">
<%= f.label :tag_list %>
<%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
</div>
<% end %>
<% end %>

<%= render 'alchemy/admin/elements/element_footer', element: element %>
<% end %>
<% end %>

<% if element.nestable_elements.any? %>
<% if show_element_footer?(element, :with_nestable_elements) %>
<%= render 'alchemy/admin/elements/element_footer', element: element %>
<% end %>
<div class="nestable-elements">
<%= content_tag :div,
class: "nested-elements", data: {
Expand Down Expand Up @@ -82,8 +85,4 @@
<% end %>
</div>
<% end %>

<% if show_element_footer?(element) %>
<%= render 'alchemy/admin/elements/element_footer', element: element %>
<% end %>
<% end %>
41 changes: 11 additions & 30 deletions spec/helpers/alchemy/admin/elements_helper_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,9 @@ module Alchemy
end
end

describe "#show_element_footer?" do
subject { show_element_footer?(element, nestable_elements) }
describe "#element_editable?" do
subject { element_editable?(element) }
let(:element) { build_stubbed(:alchemy_element) }
let(:nestable_elements) { nil }

context "for folded element" do
before { allow(element).to receive(:folded?) { true } }
Expand All @@ -155,39 +154,21 @@ module Alchemy
context "for expanded element" do
before { allow(element).to receive(:folded?) { false } }

context "with nestable_elements argument" do
let(:nestable_elements) { true }

context "and element having contents defined" do
before { allow(element).to receive(:content_definitions) { [1] } }
it { is_expected.to eq(true) }
end

context "and element having no contents defined" do
before { allow(element).to receive(:content_definitions) { [] } }

context "and element beeing taggable" do
before { allow(element).to receive(:taggable?) { true } }
it { is_expected.to eq(true) }
end

context "and element not beeing taggable" do
before { allow(element).to receive(:taggable?) { false } }
it { is_expected.to eq(false) }
end
end
context "and element having contents defined" do
before { allow(element).to receive(:content_definitions) { [1] } }
it { is_expected.to eq(true) }
end

context "without nestable_elements argument" do
let(:nestable_elements) { nil }
context "and element having no contents defined" do
before { allow(element).to receive(:content_definitions) { [] } }

context "and element having no nestable elements defined" do
before { allow(element).to receive(:nestable_elements) { [] } }
context "and element beeing taggable" do
before { allow(element).to receive(:taggable?) { true } }
it { is_expected.to eq(true) }
end

context "and element having nestable elements defined" do
before { allow(element).to receive(:nestable_elements) { [1] } }
context "and element not beeing taggable" do
before { allow(element).to receive(:taggable?) { false } }
it { is_expected.to eq(false) }
end
end
Expand Down

0 comments on commit 859ecda

Please sign in to comment.