diff --git a/CHANGELOG.md b/CHANGELOG.md index f666398..c90fcca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,17 @@ 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.5.0](https://github.com/eea/volto-block-style/compare/3.4.5...3.5.0) + +- Various improvements [`#29`](https://github.com/eea/volto-block-style/pull/29) +- Release 3.5.0 [`0a5a98e`](https://github.com/eea/volto-block-style/commit/0a5a98e531f93470956673e50b6c71f37f59b49e) +- Add Sonarqube tag using ims-frontend addons list [`30bb3aa`](https://github.com/eea/volto-block-style/commit/30bb3aa5f49ed5264cf609d6b8f234b07b7988ca) + #### [3.4.5](https://github.com/eea/volto-block-style/compare/3.4.4...3.4.5) +> 31 August 2021 + +- Develop [`#28`](https://github.com/eea/volto-block-style/pull/28) - Lint fix 2 [`dbdf49a`](https://github.com/eea/volto-block-style/commit/dbdf49a842f07019444ad3ee87ceccf6504c48f1) - Lint fix [`20ea653`](https://github.com/eea/volto-block-style/commit/20ea653087ec1f9167b46e482128412d25dcdf05) - Stretch fix overflow for wide screens [`535d8be`](https://github.com/eea/volto-block-style/commit/535d8be197eb6a8720cb90c1f35e8b5332661f85) diff --git a/Jenkinsfile b/Jenkinsfile index b60644d..0bee52d 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -4,7 +4,7 @@ pipeline { environment { GIT_NAME = "volto-block-style" NAMESPACE = "@eeacms" - SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,biodiversity.europa.eu" + SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,biodiversity.europa.eu,www.eea.europa.eu-ims" DEPENDENCIES = "" } @@ -75,6 +75,12 @@ pipeline { } stage('Integration tests') { + // Exclude Pull-Requests. Already running on branch + when { + allOf { + environment name: 'CHANGE_ID', value: '' + } + } steps { parallel( diff --git a/package.json b/package.json index 9af4bbe..679c6d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-block-style", - "version": "3.4.5", + "version": "3.5.0", "description": "volto-block-style: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx index a6a2b86..acbfa27 100644 --- a/src/StyleWrapper/StyleWrapperView.jsx +++ b/src/StyleWrapper/StyleWrapperView.jsx @@ -16,7 +16,7 @@ const getLineHeight = (fontSize) => { }; const getSide = (side, v) => - `${v[side] ? `${v[side]}${v.unit ? v.unit : 'px'}` : ''}`; + `${v[side] ? `${v[side]}${v.unit ? v.unit : 'px'}` : '0px'}`; const getSides = (v) => { return `${getSide('top', v)} ${getSide('right', v)} ${getSide( diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js index 7ab237b..d526adf 100644 --- a/src/StyleWrapper/schema.js +++ b/src/StyleWrapper/schema.js @@ -98,7 +98,7 @@ export const StyleSchema = () => ({ }, backgroundImage: { title: 'Background image', - widget: 'object_by_path', + widget: 'url', }, backgroundColor: { title: 'Background color', diff --git a/src/Widgets/Slider.jsx b/src/Widgets/Slider.jsx index f22a6aa..caebb73 100644 --- a/src/Widgets/Slider.jsx +++ b/src/Widgets/Slider.jsx @@ -5,11 +5,15 @@ import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import { FormFieldWrapper } from '@plone/volto/components'; -// import { withParentSize } from '@visx/responsive'; import styles from './range.css.js'; import './range.css'; +function isNumeric(str) { + if (typeof str != 'string') return false; // we only process strings! + return !isNaN(str); +} + export class Slider extends Component { constructor(props) { super(props); @@ -25,10 +29,12 @@ export class Slider extends Component { offset: 10, precision: 0, mouseDown: false, + showNumericInput: false, }; this.determinePosition = this.determinePosition.bind(this); this.rangeMouseUp = this.rangeMouseUp.bind(this); this.refresh = this.refresh.bind(this); + this.handleKnobClick = this.handleKnobClick.bind(this); } componentDidMount() { @@ -297,94 +303,132 @@ export class Slider extends Component { }); } + handleKnobClick(e) { + if (e.detail > 1 && !this.state.showNumericInput) { + this.setState({ showNumericInput: true }); + } + } + render() { return (
-
this.rangeMouseDown(false, event)} - onMouseMove={(event) => this.rangeMouseMove(false, event)} - onMouseUp={(event) => this.rangeMouseUp(false, event)} - onTouchEnd={(event) => this.rangeMouseUp(true, event)} - onTouchMove={(event) => this.rangeMouseMove(true, event)} - onTouchStart={(event) => this.rangeMouseDown(true, event)} - style={{ - ...styles.range, - ...(this.props.disabled ? styles.disabled : {}), - ...(this.props.style ? this.props.style : {}), - }} - > -
{ - this.inner = inner; + {this.state.showNumericInput ? ( + { + // TODO: handle multiple knobs + if (e.key === 'Enter' && isNumeric(e.target.value)) { + const value = e.target.value; + this.setState({ showNumericInput: false }, () => { + this.props.settings.onChange(parseInt(value)); + }); + } }} + /> + ) : ( +
this.rangeMouseDown(false, event)} + onMouseMove={(event) => this.rangeMouseMove(false, event)} + onMouseUp={(event) => this.rangeMouseUp(false, event)} + onTouchEnd={(event) => this.rangeMouseUp(true, event)} + onTouchMove={(event) => this.rangeMouseMove(true, event)} + onTouchStart={(event) => this.rangeMouseDown(true, event)} style={{ - ...styles.inner, - ...(this.props.style - ? this.props.style.inner - ? this.props.style.inner - : {} - : {}), + ...styles.range, + ...(this.props.disabled ? styles.disabled : {}), + ...(this.props.style ? this.props.style : {}), }} >
{ - this.track = track; + className="semantic_ui_range_inner" + ref={(inner) => { + this.inner = inner; }} style={{ - ...styles.track, - ...(this.props.inverted ? styles.invertedTrack : {}), + ...styles.inner, ...(this.props.style - ? this.props.style.track - ? this.props.style.track + ? this.props.style.inner + ? this.props.style.inner : {} : {}), }} - /> -
{ - this.trackFill = trackFill; - }} - style={{ - ...styles.trackFill, - ...(this.props.inverted ? styles.invertedTrackFill : {}), - ...styles[ - this.props.inverted - ? 'inverted-' + this.props.color - : this.props.color - ], - ...(this.props.style - ? this.props.style.trackFill + > +
{ + this.track = track; + }} + style={{ + ...styles.track, + ...(this.props.inverted ? styles.invertedTrack : {}), + ...(this.props.style + ? this.props.style.track + ? this.props.style.track + : {} + : {}), + }} + /> +
{ + this.trackFill = trackFill; + }} + style={{ + ...styles.trackFill, + ...(this.props.inverted ? styles.invertedTrackFill : {}), + ...styles[ + this.props.inverted + ? 'inverted-' + this.props.color + : this.props.color + ], + ...(this.props.style ? this.props.style.trackFill - : {} - : {}), - ...(this.props.disabled ? styles.disabledTrackFill : {}), - ...(this.props.style - ? this.props.style.disabledTrackFill + ? this.props.style.trackFill + : {} + : {}), + ...(this.props.disabled ? styles.disabledTrackFill : {}), + ...(this.props.style ? this.props.style.disabledTrackFill - : {} - : {}), - ...{ width: this.state.position + this.state.offset + 'px' }, - ...(this.props.multiple && this.state.position.length > 0 - ? { - left: this.state.position[0], - width: - this.state.position[this.state.numberOfKnobs - 1] - - this.state.position[0], - } - : {}), - }} - /> + ? this.props.style.disabledTrackFill + : {} + : {}), + ...{ width: this.state.position + this.state.offset + 'px' }, + ...(this.props.multiple && this.state.position.length > 0 + ? { + left: this.state.position[0], + width: + this.state.position[this.state.numberOfKnobs - 1] - + this.state.position[0], + } + : {}), + }} + /> - {this.props.multiple ? ( - this.state.position.map((pos, i) => ( + {this.props.multiple ? ( + this.state.position.map((pos, i) => ( +
+ )) + ) : (
- )) - ) : ( -
- {this.props.extra} -
- )} + > + {this.props.extra} +
+ )} +
-
+ )}
); } @@ -456,6 +487,7 @@ const SliderWidget = (props) => { settings={{ ...settings, onChange: (value) => { + // console.log('onchange', value); onChange(id, value); }, }} diff --git a/src/Widgets/range.css.js b/src/Widgets/range.css.js index 74ea060..76fc2f2 100644 --- a/src/Widgets/range.css.js +++ b/src/Widgets/range.css.js @@ -2,11 +2,11 @@ const styles = { range: { cursor: 'pointer', width: '100%', - height: '20px', + height: '30px', }, inner: { margin: '0 10px 0 10px', - height: '20px', + height: '30px', position: 'relative', }, /* @@ -18,7 +18,7 @@ const styles = { width: '100%', height: '4px', borderRadius: '4px', - top: '9px', + top: '12px', left: '0', backgroundColor: 'rgba(0,0,0,.05)', }, @@ -30,7 +30,7 @@ const styles = { width: '0', height: '4px', borderRadius: '4px', - top: '9px', + top: '12px', left: '0', backgroundColor: '#1b1c1d', }, @@ -41,7 +41,7 @@ const styles = { position: 'absolute', top: '0px', left: '0', - height: '20px', + height: '30px', width: '20px', background: '#fff linear-gradient(transparent, rgba(0, 0, 0, 0.5))', // background: '#fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5))',