Skip to content

Commit

Permalink
New block layout sidebar (#2147)
Browse files Browse the repository at this point in the history 
Switch to using element groups and custom helper for rendering, to keep custom grouping markup but still allow modules to add their own inputs easily with the form events.

Also includes some final tweaks to styling and behavior, including an adjustment to allow unitless lengths for the constraints and padding (treated as pixels in that case).

Co-authored-by: Kim Nguyen <[email protected]>
  • Loading branch information
@jimsafley @kimisgold
jimsafley and kimisgold authored Feb 14, 2024
1 parent 2961370 commit f8d82e4
Show file tree
Hide file tree
Showing 17 changed files with 250 additions and 318 deletions.
2 changes: 1 addition & 1 deletion application/asset/css/style.css
View file

Large diffs are not rendered by default.

17 changes: 8 additions & 9 deletions application/asset/js/site-page-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -773,15 +773,14 @@
// Allow special handling of block layout data.
$(document).trigger('o:prepare-block-layout-data', [thisBlock]);

// blockGroup blocks use a subset of block layout data. Hide the rest.
blockLayoutDataSidebar.find('.field').each(function(e) {
const thisField = $(this);
thisField.show();
const blockGroupInputs = '#block-layout-data-class,#block-layout-data-background-image-asset';
if ('blockGroup' === blockLayout && !thisField.find(blockGroupInputs).length) {
thisField.hide();
}
});
// blockGroup blocks use a subset of block layout data.
blockLayoutDataSidebar.find('.block-layout-fieldset,.field').show();
if ('blockGroup' === blockLayout) {
// First, hide all fields that don't include themselves in blockGroup.
blockLayoutDataSidebar.find(':input:not(.block-group-include,button)').closest('.field').hide();
// Then, hide fieldsets that have no included fields.
blockLayoutDataSidebar.find('.block-layout-fieldset:not(:has(:input.block-group-include))').hide();
}

// Update the background color swatch.
const bgColorInput = $('#block-layout-data-background-color');
Expand Down
79 changes: 45 additions & 34 deletions application/asset/sass/_screen.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3261,63 +3261,63 @@ fieldset.section > legend {
width: 100%;
}

.sidebar-group {
.block-layout-fieldset {
border-bottom: 1px solid $border-gray;
margin-bottom: $spacing-medium;
padding-bottom: $spacing-medium;
}

.sidebar-group .expand,
.sidebar-group .collapse {
display: flex;
justify-content: space-between;
.block-layout-fieldset legend {
font-size: $base-font-size;
float: left;
max-width: calc(100% - #{2 * $spacing-large});
padding: 0;
}

.sidebar-group .expand label,
.sidebar-group .expand .label {
font-weight: normal;
.block-layout-fieldset .expand,
.block-layout-fieldset .collapse {
width: 100%;
display: flex;
justify-content: space-between;
}

.sidebar-group:not(:last-child) .expand {
border-bottom: 1px solid $border-gray;
padding-bottom: #{$spacing-medium - 1px};
margin-bottom: $spacing-medium;
.block-layout-fieldset .collapse {
font-weight: bold;
}

.sidebar-group .collapse {
padding-bottom: .5 * $spacing-small;
margin-bottom: $spacing-small;
.block-layout-fieldset .expand label,
.block-layout-fieldset .expand .label {
font-weight: normal;
}

.sidebar-group .collapse + .collapsible {
padding: 0 0 $spacing-medium $spacing-medium;
border-bottom: 1px solid $border-gray;
.block-layout-fieldset .collapse + .collapsible {
padding: 0 0 0 $spacing-medium;
}

.sidebar-group .collapsible .field:last-child {
.block-layout-fieldset .collapsible .field:last-child {
margin-bottom: 0;
}

.sidebar-group .collapsible label,
.sidebar-group .collapsible .label {
.block-layout-fieldset .collapsible label,
.block-layout-fieldset .collapsible .label {
font-weight: normal;
}

.sidebar-group .collapse label,
.sidebar-group .expand label,
.sidebar-group .collapse .label,
.sidebar-group .expand .label {
.block-layout-fieldset .collapse label,
.block-layout-fieldset .expand label,
.block-layout-fieldset .collapse .label,
.block-layout-fieldset .expand .label {
width: auto;
margin: 0;
padding: 0;
}

.sidebar-group .collapse label:after,
.sidebar-group .expand label:after,
.sidebar-group .collapse .label:after,
.sidebar-group .expand .label:after {
.block-layout-fieldset .collapsible .label:after,
.block-layout-fieldset .collapsible label:after {
content: none;
}

.sidebar-group .collapsible .field-meta {
.block-layout-fieldset .collapsible .field-meta {
border-bottom: 0;
margin-bottom: 0;
}
Expand Down Expand Up @@ -4825,12 +4825,23 @@ body.sidebar-open #content {
margin-left: $spacing-small;
}

.padding.sidebar-group .collapse + .collapsible {
columns: 2;
column-gap: $spacing-large;
[name="block-layout-fieldset-padding"].block-layout-fieldset .collapse + .collapsible {
display: grid;
grid-template-columns: 1fr 50%;
grid-column-gap: $spacing-large;
grid-row-gap: $spacing-medium;

.field {
margin-bottom: 0;
}

.field-meta,
.inputs {
width: 50%;
}
}

.padding.sidebar-group label {
[name="block-layout-fieldset-padding"].block-layout-fieldset label {
display: inline-flex;
justify-content: space-between;
padding: 0;
Expand Down
3 changes: 1 addition & 2 deletions application/config/module.config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,13 +436,12 @@
'formCkeditorInline' => Form\View\Helper\FormCkeditorInline::class,
'formRestoreTextarea' => Form\View\Helper\FormRestoreTextarea::class,
'formCollectionElementGroups' => Form\View\Helper\FormCollectionElementGroups::class,
'formCollectionElementGroupsCollapsible' => Form\View\Helper\FormCollectionElementGroupsCollapsible::class,
'queryToHiddenInputs' => View\Helper\QueryToHiddenInputs::class,
'formAsset' => Form\View\Helper\FormAsset::class,
'formQuery' => Form\View\Helper\FormQuery::class,
'formColumns' => Form\View\Helper\FormColumns::class,
'formBrowseDefaults' => Form\View\Helper\FormBrowseDefaults::class,
'formBackgroundImage' => Form\View\Helper\FormBackgroundImage::class,
'formPadding' => Form\View\Helper\FormPadding::class,
'themeSettingAsset' => View\Helper\ThemeSettingAsset::class,
'themeSettingAssetUrl' => View\Helper\ThemeSettingAssetUrl::class,
'formColorPicker' => Form\View\Helper\FormColorPicker::class,
Expand Down
144 changes: 133 additions & 11 deletions application/src/Form/BlockLayoutDataForm.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,13 @@ public function init()
);
}
}
$this->setOption('element_groups', [
'block-layout-fieldset-alignment' => 'Alignment', // @translate
'block-layout-fieldset-constraints' => 'Constraints', // @translate
'block-layout-fieldset-padding' => 'Padding', // @translate
'block-layout-fieldset-background' => 'Background', // @translate
]);
// Add the elements.
$this->add([
'type' => 'select',
'name' => 'template_name',
Expand All @@ -64,13 +71,15 @@ public function init()
],
'attributes' => [
'id' => 'block-layout-data-class',
'class' => 'block-group-include',
'data-key' => 'class',
],
]);
$this->add([
'name' => 'alignment_block',
'type' => 'select',
'options' => [
'element_group' => 'block-layout-fieldset-alignment',
'label' => 'Block alignment', // @translate
'empty_option' => 'Default', // @translate
'value_options' => [
Expand All @@ -88,6 +97,7 @@ public function init()
'name' => 'alignment_text',
'type' => 'select',
'options' => [
'element_group' => 'block-layout-fieldset-alignment',
'label' => 'Text alignment', // @translate
'empty_option' => 'Default', // @translate
'value_options' => [
Expand All @@ -106,6 +116,7 @@ public function init()
'name' => 'max_width',
'type' => 'Omeka\Form\Element\LengthCssDataType',
'options' => [
'element_group' => 'block-layout-fieldset-constraints',
'label' => 'Maximum width', // @translate
],
'attributes' => [
Expand All @@ -117,6 +128,7 @@ public function init()
'name' => 'min_height',
'type' => 'Omeka\Form\Element\LengthCssDataType',
'options' => [
'element_group' => 'block-layout-fieldset-constraints',
'label' => 'Minimum height', // @translate
],
'attributes' => [
Expand All @@ -125,37 +137,147 @@ public function init()
],
]);
$this->add([
'name' => 'padding',
'type' => 'Omeka\Form\Element\Padding',
'name' => 'padding_top',
'type' => 'Omeka\Form\Element\LengthCssDataType',
'options' => [
'element_group' => 'block-layout-fieldset-padding',
'label' => 'Top', // @translate
],
'attributes' => [
'id' => 'block-layout-data-padding-top',
'class' => 'block-group-include',
'data-key' => 'padding_top',
],
]);
$this->add([
'name' => 'padding_right',
'type' => 'Omeka\Form\Element\LengthCssDataType',
'options' => [
'label' => 'Padding',
'element_group' => 'block-layout-fieldset-padding',
'label' => 'Right', // @translate
],
'attributes' => [
'id' => 'block-layout-data-padding-right',
'class' => 'block-group-include',
'data-key' => 'padding_right',
],
]);
$this->add([
'name' => 'padding_bottom',
'type' => 'Omeka\Form\Element\LengthCssDataType',
'options' => [
'element_group' => 'block-layout-fieldset-padding',
'label' => 'Bottom', // @translate
],
'attributes' => [
'id' => 'block-layout-data-padding-bottom',
'class' => 'block-group-include',
'data-key' => 'padding_bottom',
],
]);
$this->add([
'name' => 'padding_left',
'type' => 'Omeka\Form\Element\LengthCssDataType',
'options' => [
'element_group' => 'block-layout-fieldset-padding',
'label' => 'Left', // @translate
],
'attributes' => [
'id' => 'block-layout-data-padding-left',
'class' => 'block-group-include',
'data-key' => 'padding_left',
],
]);
$this->add([
'name' => 'background_color',
'type' => 'Omeka\Form\Element\ColorPicker',
'options' => [
'label' => 'Background color', // @translate
'element_group' => 'block-layout-fieldset-background',
'label' => 'Color', // @translate
],
'attributes' => [
'id' => 'block-layout-data-background-color',
'class' => 'block-group-include',
'data-key' => 'background_color',
],
]);
$this->add([
'name' => 'background_image',
'type' => 'Omeka\Form\Element\BackgroundImage',
'type' => 'Omeka\Form\Element\Asset',
'name' => 'background_image_asset',
'options' => [
'label' => 'Background image',
'element_group' => 'block-layout-fieldset-background',
'label' => 'Image', // @translate
],
'attributes' => [
'id' => 'block-layout-data-background-image-asset',
'class' => 'block-group-include',
'data-key' => 'background_image_asset',
],
]);
$this->add([
'type' => 'select',
'name' => 'background_image_position_y',
'options' => [
'element_group' => 'block-layout-fieldset-background',
'label' => 'Vertical anchor position', // @translate
'empty_option' => 'Default', // @translate
'value_options' => [
'top' => 'Top', // @translate
'center' => 'Center', // @translate
'bottom' => 'Bottom', // @translate
],
],
'attributes' => [
'id' => 'block-layout-data-background-image-position-y',
'class' => 'block-group-include',
'data-key' => 'background_image_position_y',
],
]);
$this->add([
'type' => 'select',
'name' => 'background_image_position_x',
'options' => [
'element_group' => 'block-layout-fieldset-background',
'label' => 'Horizontal anchor position', // @translate
'empty_option' => 'Default', // @translate
'value_options' => [
'left' => 'Left', // @translate
'center' => 'Center', // @translate
'right' => 'Right', // @translate
],
],
'attributes' => [
'id' => 'block-layout-data-background-image-position-x',
'class' => 'block-group-include',
'data-key' => 'background_image_position_x',
],
]);
$this->add([
'type' => 'select',
'name' => 'background_image_size',
'options' => [
'element_group' => 'block-layout-fieldset-background',
'label' => 'Size', // @translate
'empty_option' => 'Default', // @translate
'value_options' => [
'cover' => 'Cover', // @translate
'contain' => 'Contain', // @translate
],
],
'attributes' => [
'id' => 'block-layout-data-background-image-size',
'class' => 'block-group-include',
'data-key' => 'background_image_size',
],
]);

/**
* Modules can add elements to this fieldset using the form.add_elements
* event. They can opt-in to automatically populate and apply the values
* by adding a "data-key" attribute containing the corresponding block
* layout data key. Elements that need more complex handling must attach
* to the following JS events on the document:
* event. They can include elements in the blockGroup configuration by
* adding the "block-group-include" class They can opt-in to automatically
* populate and apply the values by adding a "data-key" attribute containing
* the corresponding block layout data key. Elements that need more complex
* handling must attach to the following JS events on the document:
* - o:prepare-block-layout-data
* - o:apply-block-layout-data
*/
Expand Down
Loading

0 comments on commit f8d82e4

Please sign in to comment.