Merge pull request #30 from eea/develop

Various improvements
eea · Sep 24, 2021 · cd39905 · cd39905
2 parents 74e38ae + a648d0e
commit cd39905
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 100 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,123 +303,148 @@ export class Slider extends Component {
     });
   }
 
+  handleKnobClick(e) {
+    if (e.detail > 1 && !this.state.showNumericInput) {
+      this.setState({ showNumericInput: true });
+    }
+  }
+
   render() {
     return (
       <div className="slider-widget-wrapper">
-        <div
-          tabIndex="-1"
-          role="button"
-          onMouseDown={(event) => 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 : {}),
-          }}
-        >
-          <div
-            className="semantic_ui_range_inner"
-            ref={(inner) => {
-              this.inner = inner;
+        {this.state.showNumericInput ? (
+          <input
+            defaultValue={this.props.value}
+            onKeyDown={(e) => {
+              // 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));
+                });
+              }
             }}
+          />
+        ) : (
+          <div
+            tabIndex="-1"
+            role="button"
+            onMouseDown={(event) => 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 : {}),
             }}
           >
             <div
-              className="slider-track"
-              ref={(track) => {
-                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
                     : {}
                   : {}),
               }}
-            />
-            <div
-              className="slider-track-active"
-              ref={(trackFill) => {
-                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
+            >
+              <div
+                className="slider-track"
+                ref={(track) => {
+                  this.track = track;
+                }}
+                style={{
+                  ...styles.track,
+                  ...(this.props.inverted ? styles.invertedTrack : {}),
+                  ...(this.props.style
+                    ? this.props.style.track
+                      ? this.props.style.track
+                      : {}
+                    : {}),
+                }}
+              />
+              <div
+                className="slider-track-active"
+                ref={(trackFill) => {
+                  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) => (
+                  <div
+                    className="slider-knob multiple"
+                    key={i}
+                    style={{
+                      ...styles.knob,
+                      ...(this.props.style
+                        ? this.props.style.knob
+                          ? this.props.style.knob
+                          : {}
+                        : {}),
+                      ...{ left: pos + 'px' },
+                    }}
+                  />
+                ))
+              ) : (
                 <div
-                  className="slider-knob multiple"
-                  key={i}
+                  tabindex="-1"
+                  role="button"
+                  className="slider-knob single"
+                  onKeyDown={this.handleKnobKeydown}
+                  onClick={this.handleKnobClick}
                   style={{
                     ...styles.knob,
                     ...(this.props.style
                       ? this.props.style.knob
                         ? this.props.style.knob
                         : {}
                       : {}),
-                    ...{ left: pos + 'px' },
+                    ...{ left: this.state.position + 'px' },
                   }}
-                />
-              ))
-            ) : (
-              <div
-                className="slider-knob single"
-                style={{
-                  ...styles.knob,
-                  ...(this.props.style
-                    ? this.props.style.knob
-                      ? this.props.style.knob
-                      : {}
-                    : {}),
-                  ...{ left: this.state.position + 'px' },
-                }}
-              >
-                {this.props.extra}
-              </div>
-            )}
+                >
+                  {this.props.extra}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     );
   }
@@ -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
@@ -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))',