Commit 4b3ea191 authored by xjm's avatar xjm

Issue #2840832 by tim.plunkett, DickJohnson, yoroy, DyanneNova, webchick: Add...

Issue #2840832 by tim.plunkett, DickJohnson, yoroy, DyanneNova, webchick: Add Panels layouts to core
parent 89a9510a
# @todo Move to layout_discovery in https://www.drupal.org/node/2840832.
layout_onecol:
label: 'One column'
path: layouts/onecol
template: layout--onecol
category: 'Columns: 1'
default_region: content
regions:
content:
label: Content
layout_twocol:
label: 'Two column'
path: layouts/twocol
template: layout--twocol
library: field_layout/drupal.layout.twocol
category: 'Columns: 2'
default_region: left
regions:
left:
label: Left
right:
label: Right
drupal.layout.twocol:
version: VERSION
css:
layout:
layouts/twocol/twocol.layout.css: {}
......@@ -90,7 +90,7 @@ public function testEntityForm() {
// The field is moved to the default region for the new layout.
$this->assertSession()->pageTextContains('Your settings have been saved.');
$this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->drupalGet('entity_test/manage/1/edit');
// No fields are visible, and the regions don't display when empty.
......@@ -99,7 +99,7 @@ public function testEntityForm() {
// After a refresh the new regions are still there.
$this->drupalGet('entity_test/structure/entity_test/form-display');
$this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
// Drag the field to the right region.
$field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
......@@ -147,7 +147,7 @@ public function testEntityView() {
$this->submitForm([], 'Save');
$this->assertSession()->pageTextContains('Your settings have been saved.');
$this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->drupalGet('entity_test/1');
// No fields are visible, and the regions don't display when empty.
......@@ -157,7 +157,7 @@ public function testEntityView() {
// After a refresh the new regions are still there.
$this->drupalGet('entity_test/structure/entity_test/display');
$this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
// Drag the field to the left region.
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
......
......@@ -68,6 +68,7 @@ public function testPreSave() {
$expected['dependencies']['module'] = [
'entity_test',
'field_layout',
'layout_discovery',
];
// A third party setting is added by the entity_test module.
$expected['third_party_settings']['entity_test'] = ['foo' => 'bar'];
......
layout_onecol:
label: 'One column'
path: layouts/onecol
template: layout--onecol
library: layout_discovery/onecol
category: 'Columns: 1'
default_region: content
regions:
content:
label: Content
layout_twocol:
label: 'Two column'
path: layouts/twocol
template: layout--twocol
library: layout_discovery/twocol
category: 'Columns: 2'
default_region: left
regions:
top:
label: Top
left:
label: Left
right:
label: Right
bottom:
label: Bottom
layout_twocol_bricks:
label: 'Two column bricks'
path: layouts/twocol_bricks
template: layout--twocol-bricks
library: layout_discovery/twocol_bricks
category: 'Columns: 2'
default_region: middle
regions:
top:
label: Top
left_above:
label: 'Left above'
right_above:
label: 'Right above'
middle:
label: Middle
left_below:
label: 'Left below'
right_below:
label: 'Right below'
bottom:
label: Bottom
layout_threecol_25_50_25:
label: 'Three column 25/50/25'
path: layouts/threecol_25_50_25
template: layout--threecol-25-50-25
library: layout_discovery/threecol_25_50_25
category: 'Columns: 3'
default_region: left
regions:
top:
label: Top
left:
label: Left
middle:
label: Middle
right:
label: Right
bottom:
label: Bottom
layout_threecol_33_34_33:
label: 'Three column 33/34/33'
path: layouts/threecol_33_34_33
template: layout--threecol-33-34-33
library: layout_discovery/threecol_33_34_33
category: 'Columns: 3'
default_region: left
regions:
top:
label: Top
left:
label: Left
middle:
label: Middle
right:
label: Right
bottom:
label: Bottom
onecol:
version: VERSION
css:
theme:
layouts/onecol/onecol.css: {}
twocol_bricks:
version: VERSION
css:
theme:
layouts/twocol_bricks/twocol_bricks.css: {}
twocol:
version: VERSION
css:
theme:
layouts/twocol/twocol.css: {}
threecol_25_50_25:
version: VERSION
css:
theme:
layouts/threecol_25_50_25/threecol_25_50_25.css: {}
threecol_33_34_33:
version: VERSION
css:
theme:
layouts/threecol_33_34_33/threecol_33_34_33.css: {}
.layout--onecol .layout-region {
width: 100%;
}
{#
/**
* @file
* Default theme implementation for a three column layout.
*
* This template provides a three column 25%-50%-25% display layout, with
* additional areas for the top and the bottom.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
*
* @ingroup themeable
*/
#}
{%
set classes = [
'layout--threecol',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
{% endif %}
<div class="layout-region layout-region--side">
{{ content.left }}
</div>
<div class="layout-region layout-region--middle">
{{ content.middle }}
</div>
<div class="layout-region layout-region--side">
{{ content.right }}
</div>
{% if content.bottom %}
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
</div>
{% endif %}
</div>
{% endif %}
.layout--threecol {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--threecol > .layout-region {
flex: 0 1 25%;
}
.layout--threecol > .layout-region--fullwidth {
flex: 0 1 100%;
}
.layout--threecol > .layout-region--middle {
flex: 0 1 50%;
}
{#
/**
* @file
* Default theme implementation for a three column layout.
*
* This template provides a three column 33%-34%-33% display layout, with
* additional areas for the top and the bottom.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
*
* @ingroup themeable
*/
#}
{%
set classes = [
'layout--threecol-33',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
{% endif %}
<div class="layout-region">
{{ content.left }}
</div>
<div class="layout-region">
{{ content.middle }}
</div>
<div class="layout-region">
{{ content.right }}
</div>
{% if content.bottom %}
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
</div>
{% endif %}
</div>
{% endif %}
.layout--threecol-33 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--threecol-33 > .layout-region {
flex: 0 1 33%;
}
.layout--threecol-33 > .layout-region--fullwidth {
flex: 0 1 100%;
}
......@@ -17,6 +17,10 @@ set classes = [
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
<div class="layout-region layout-region--left">
{{ content.left }}
</div>
......@@ -24,5 +28,9 @@ set classes = [
<div class="layout-region layout-region--right">
{{ content.right }}
</div>
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
</div>
</div>
{% endif %}
......@@ -3,12 +3,11 @@
flex-wrap: wrap;
justify-content: space-between;
}
.layout--twocol > .layout-region {
flex: 0 1 50%;
max-width: 50%;
}
.layout--twocol > .layout-region--left {
max-width: calc(50% - 10px);
margin-right: 10px;
.layout--twocol > .layout-region--fullwidth {
flex: 0 1 100%;
}
{#
/**
* @file
* Default theme implementation for a two column layout.
*
* This template provides a two column display layout with full width areas at
* the top, bottom and in the middle.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
*
* @ingroup themeable
*/
#}
{%
set classes = [
'layout--twocol-bricks',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
<div class="layout-region layout-region--left_above">
{{ content.left_above }}
</div>
<div class="layout-region layout-region--right_above">
{{ content.right_above }}
</div>
<div class="layout-region layout-region--middle">
{{ content.middle }}
</div>
<div class="layout-region layout-region--left_below">
{{ content.left_below }}
</div>
<div class="layout-region layout-region--right_below">
{{ content.right_below }}
</div>
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
</div>
</div>
{% endif %}
.layout--twocol-bricks {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--twocol-bricks > .layout-region {
flex: 0 1 50%;
}
.layout--twocol-bricks > .layout-region--fullwidth {
flex: 0 1 100%;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment