Skip to content

Commit

Permalink
Merge pull request #25 from eea/develop
Browse files Browse the repository at this point in the history
Release
  • Loading branch information
avoinea authored Aug 24, 2021
2 parents f8c6b6d + a12b6ec commit 3bc5a48
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 5 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d

Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

#### [3.4.3](https://github.com/eea/volto-block-style/compare/3.4.2...3.4.3)

- Stretch styles [`eb1c548`](https://github.com/eea/volto-block-style/commit/eb1c5480106f4ac29d478a86b8491a4de3c289cf)
- Stretch style schema fix [`5e9e761`](https://github.com/eea/volto-block-style/commit/5e9e7616349e9a9265eb943aea51b57ad09425e5)
- Add Stretch style widget WIP [`a54f047`](https://github.com/eea/volto-block-style/commit/a54f0475184deb26f959135c6dd988bd5996fa2e)
- Use correct screen height property [`f52eccb`](https://github.com/eea/volto-block-style/commit/f52eccbbfb709b7c3216163f77fdfbca12d4cf11)

#### [3.4.2](https://github.com/eea/volto-block-style/compare/3.4.1...3.4.2)

> 2 August 2021
- Release [`#24`](https://github.com/eea/volto-block-style/pull/24)
- Add new controls [`#22`](https://github.com/eea/volto-block-style/pull/22)
- Make add-on dependencies more flexible [`#19`](https://github.com/eea/volto-block-style/pull/19)
- Fix dependencies [`#18`](https://github.com/eea/volto-block-style/pull/18)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@eeacms/volto-block-style",
"version": "3.4.2",
"version": "3.4.3",
"description": "volto-block-style: Volto add-on",
"main": "src/index.js",
"author": "European Environment Agency: IDM2 A-Team",
Expand Down
61 changes: 61 additions & 0 deletions src/Blocks/StretchBlock.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { Icon } from '@plone/volto/components';
import { Button } from 'semantic-ui-react';
import imageFitSVG from '@plone/volto/icons/image-fit.svg';
import imageFullSVG from '@plone/volto/icons/image-full.svg';

const messages = defineMessages({
fit: {
id: 'Fit',
defaultMessage: 'Fit',
},
stretch: {
id: 'Stretch',
defaultMessage: 'Stretch',
},
});

const StretchBlock = ({ stretch, onChangeBlock, data, intl, block }) => {
/**
* Stretch block handler
* @method onStretchBlock
* @param {string} stretch Stretchment option
* @returns {undefined}
*/
function onStretchBlock(stretch) {
onChangeBlock(block, {
...data,
stretch,
});
}

return (
<div>
<Button.Group>
<Button
icon
basic
aria-label={intl.formatMessage(messages.fit)}
onClick={() => onStretchBlock('fit')}
active={data.stretch === 'fit' || !data.stretch}
>
<Icon name={imageFitSVG} size="24px" />
</Button>
</Button.Group>
<Button.Group>
<Button
icon
basic
aria-label={intl.formatMessage(messages.stretch)}
onClick={() => onStretchBlock('stretch')}
active={data.stretch === 'stretch'}
>
<Icon name={imageFullSVG} size="24px" />
</Button>
</Button.Group>
</div>
);
};

export default injectIntl(StretchBlock);
8 changes: 6 additions & 2 deletions src/StyleWrapper/StyleWrapperView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function getInlineStyles(data, props = {}) {
...(data.fontSize
? { fontSize: data.fontSize, lineHeight: getLineHeight(data.fontSize) }
: {}),
...(data.isScreenHeight && props.screen.screenHeight
...(data.isScreenHeight && props.screen.height
? {
minHeight: (
props.screen.height -
Expand Down Expand Up @@ -86,7 +86,9 @@ const StyleWrapperView = (props) => {
isDropCap,
isScreenHeight,
hidden = false,
stretch,
} = styleData;

const containerType = data['@type'];
const backgroundImage = styleData.backgroundImage;

Expand All @@ -102,7 +104,8 @@ const StyleWrapperView = (props) => {
customClass ||
isDropCap ||
hidden ||
customId;
customId ||
stretch;

const attrs = {
style: inlineStyles,
Expand All @@ -112,6 +115,7 @@ const StyleWrapperView = (props) => {
'styled-with-bg': styleData.backgroundColor || backgroundImage,
'screen-height': isScreenHeight,
'full-width': align === 'full',
stretch: stretch === 'stretch',
large: size === 'l',
medium: size === 'm',
small: size === 's',
Expand Down
15 changes: 13 additions & 2 deletions src/StyleWrapper/schema.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,14 @@ export const StyleSchema = () => ({
{
id: 'standard',
title: 'Standard',
fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap'],
fields: [
'textAlign',
'fontSize',
'align',
'stretch',
'size',
'isDropCap',
],
},
{
id: 'decorations',
Expand All @@ -33,7 +40,7 @@ export const StyleSchema = () => ({
{
id: 'layout',
title: 'Layout',
fields: ['margin', 'padding', 'size', 'align'], // todo: width, conflicts with size
fields: ['margin', 'padding', 'size', 'align', 'stretch'], // todo: width, conflicts with size
},
{
id: 'advanced',
Expand All @@ -54,6 +61,10 @@ export const StyleSchema = () => ({
title: 'Align',
widget: 'style_align',
},
stretch: {
title: 'Stretch',
widget: 'style_stretch',
},
fontSize: {
title: 'Font size',
description: 'Relative to normal size of text in the block',
Expand Down
30 changes: 30 additions & 0 deletions src/Widgets/Stretch.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* StretchWidget component.
* To benefit from styling integration, use with a field named 'Stretch'
* @module components/manage/Widgets/StretchWidget
*/

import React from 'react';
import { injectIntl } from 'react-intl';

import { FormFieldWrapper } from '@plone/volto/components';
import StretchBlock from '../Blocks/StretchBlock';

const StretchWidget = (props) => {
const { id, onChange, value } = props;

return (
<FormFieldWrapper {...props} className="align-widget">
<div className="align-tools">
<StretchBlock
stretch={value}
onChangeBlock={(block, { stretch }) => onChange(id, stretch)}
data={{ stretch: value }}
block={id}
/>
</div>
</FormFieldWrapper>
);
};

export default injectIntl(StretchWidget);
10 changes: 10 additions & 0 deletions src/Widgets/range.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,13 @@
flex-direction: column;
justify-content: center;
}

.stretch {
margin: 0 -1rem;
}

@media (max-width: 1199px) {
.stretch {
margin: 0 -0.65rem;
}
}
3 changes: 3 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
} from './BlockStyleWrapper';
import StyleSelectWidget from './Widgets/StyleSelect';
import AlignWidget from './Widgets/Align';
import StretchWidget from './Widgets/Stretch';

import TextAlignWidget from './Widgets/TextAlign';
import SliderWidget from './Widgets/Slider';
import SizeWidget from './Widgets/Size';
Expand Down Expand Up @@ -64,6 +66,7 @@ const applyConfig = (config) => {

config.widgets.widget.style_select = StyleSelectWidget;
config.widgets.widget.style_align = AlignWidget; // avoid conflict for now
config.widgets.widget.style_stretch = StretchWidget; // Make stretch widget
config.widgets.widget.style_text_align = TextAlignWidget; // avoid conflict for now
config.widgets.widget.style_size = SizeWidget; // avoid conflict for now
config.widgets.widget.style_simple_color = SimpleColorPicker;
Expand Down

0 comments on commit 3bc5a48

Please sign in to comment.