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;
+ }}
+ style={{
+ ...styles.inner,
+ ...(this.props.style
+ ? this.props.style.inner
+ ? this.props.style.inner
+ : {}
+ : {}),
+ }}
+ >
+
{
+ 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.style.trackFill
+ : {}
+ : {}),
+ ...(this.props.disabled ? styles.disabledTrackFill : {}),
+ ...(this.props.style
+ ? this.props.style.disabledTrackFill
+ ? 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.extra}
+
+ )}
+
+
+
+ );
+ }
+}
+
+Slider.defaultProps = {
+ color: 'red',
+ settings: {
+ min: 0,
+ max: 10,
+ step: 1,
+ start: 0,
+ },
+};
+
+Slider.propTypes = {
+ color: PropTypes.string,
+ disabled: PropTypes.bool,
+ discrete: PropTypes.bool,
+ inverted: PropTypes.bool,
+ multiple: PropTypes.bool,
+ settings: PropTypes.shape({
+ min: PropTypes.number,
+ max: PropTypes.number,
+ step: PropTypes.number,
+ start: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.arrayOf(PropTypes.number),
+ ]),
+ onChange: PropTypes.func,
+ }),
+};
+
+const SliderWidget = (props) => {
+ const { id, onChange, value, settings = {}, ...rest } = props;
+ return (
+
+ {
+ onChange(id, value);
+ },
+ }}
+ value={value}
+ extra={{value}}
+ />
+
+ );
+};
+
+export default SliderWidget;
diff --git a/src/Widgets/StyleSelect.jsx b/src/Widgets/StyleSelect.jsx
index 25f94a7..599c303 100644
--- a/src/Widgets/StyleSelect.jsx
+++ b/src/Widgets/StyleSelect.jsx
@@ -43,7 +43,7 @@ const StyleSelectWidget = (props) => {
className={cx({ active: style.id === value })}
>
- {renderPreview(style)}
+ {renderPreview(style)}
{style.title}
diff --git a/src/Widgets/range.css.js b/src/Widgets/range.css.js
new file mode 100644
index 0000000..74ea060
--- /dev/null
+++ b/src/Widgets/range.css.js
@@ -0,0 +1,179 @@
+const styles = {
+ range: {
+ cursor: 'pointer',
+ width: '100%',
+ height: '20px',
+ },
+ inner: {
+ margin: '0 10px 0 10px',
+ height: '20px',
+ position: 'relative',
+ },
+ /*
+ .ui.range .inner:hover {
+ cursor: pointer;
+ }*/
+ track: {
+ position: 'absolute',
+ width: '100%',
+ height: '4px',
+ borderRadius: '4px',
+ top: '9px',
+ left: '0',
+ backgroundColor: 'rgba(0,0,0,.05)',
+ },
+ invertedTrack: {
+ backgroundColor: 'rgba(255,255,255,.08)',
+ },
+ trackFill: {
+ position: 'absolute',
+ width: '0',
+ height: '4px',
+ borderRadius: '4px',
+ top: '9px',
+ left: '0',
+ backgroundColor: '#1b1c1d',
+ },
+ invertedTrackFill: {
+ backgroundColor: '#545454',
+ },
+ knob: {
+ position: 'absolute',
+ top: '0px',
+ left: '0',
+ height: '20px',
+ 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))',
+ // background: '#fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.5))',
+ // background: '#fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.5))',
+ borderRadius: '6px',
+ backgroundColor: '#205c90',
+ boxShadow:
+ '0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset',
+ display: 'flex',
+ color: 'white',
+ flexDirection: 'column',
+ textAlign: 'center',
+ fontSize: 'xx-small',
+ },
+ red: {
+ backgroundColor: '#DB2828',
+ },
+ 'inverted-red': {
+ backgroundColor: '#FF695E',
+ },
+ /* Orange */
+ orange: {
+ backgroundColor: '#F2711C',
+ },
+ 'inverted-orange': {
+ backgroundColor: '#FF851B',
+ },
+ /* Yellow */
+ yellow: {
+ backgroundColor: '#FBBD08',
+ },
+ 'inverted-yellow': {
+ backgroundColor: '#FFE21F',
+ },
+ /* Olive */
+ olive: {
+ backgroundColor: '#B5CC18',
+ },
+ 'inverted-olive': {
+ backgroundColor: '#D9E778',
+ },
+ /* Green */
+ green: {
+ backgroundColor: '#21BA45',
+ },
+ 'inverted-green': {
+ backgroundColor: '#2ECC40',
+ },
+ /* Teal */
+ teal: {
+ backgroundColor: '#00B5AD',
+ },
+ 'inverted-teal': {
+ backgroundColor: '#6DFFFF',
+ },
+ /* Blue */
+ blue: {
+ backgroundColor: '#2185D0',
+ },
+ 'inverted-blue': {
+ backgroundColor: '#54C8FF',
+ },
+ /* Violet */
+ violet: {
+ backgroundColor: '#6435C9',
+ },
+ 'inverted-violet': {
+ backgroundColor: '#A291FB',
+ },
+ /* Purple */
+ purple: {
+ backgroundColor: '#A333C8',
+ },
+ 'inverted-purple': {
+ backgroundColor: '#DC73FF',
+ },
+ /* Pink */
+ pink: {
+ backgroundColor: '#E03997',
+ },
+ 'inverted-pink': {
+ backgroundColor: '#FF8EDF',
+ },
+ /* Brown */
+ brown: {
+ backgroundColor: '#A5673F',
+ },
+ 'inverted-brown': {
+ backgroundColor: '#D67C1C',
+ },
+ /* Grey */
+ grey: {
+ backgroundColor: '#767676',
+ },
+ 'inverted-grey': {
+ backgroundColor: '#DCDDDE',
+ },
+ /* Black */
+ black: {
+ backgroundColor: '#1b1c1d',
+ },
+ 'inverted-black': {
+ backgroundColor: '#545454',
+ },
+ /*--------------
+ Disabled
+---------------*/
+ disabled: {
+ cursor: 'not-allowed',
+ opacity: '.5',
+ },
+
+ /*--------------
+ Disabled
+---------------*/
+
+ disabledTrackFill: {
+ backgroundColor: '#ccc',
+ },
+
+ /*--------------
+ Invalid-Input
+---------------*/
+ invalidInputTrack: {
+ cursor: 'not-allowed',
+ opacity: '.3',
+ background: '#ff0000',
+ },
+ invalidInputTrackFill: {
+ opacity: '.0',
+ },
+};
+
+export default styles;
diff --git a/src/index.js b/src/index.js
index a0108ae..c47f6a9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,11 +6,47 @@ import {
import StyleSelectWidget from './Widgets/StyleSelect';
import AlignWidget from './Widgets/Align';
import TextAlignWidget from './Widgets/TextAlign';
+import SliderWidget from './Widgets/Slider';
import SizeWidget from './Widgets/Size';
import SimpleColorPicker from './Widgets/SimpleColorPicker';
+import QuadSizeWidget from './Widgets/QuadSize';
import './styles.less';
+/**
+ * Given a block's config object, it wrapps the view and edit in style wrappers
+ */
+export const applyStyleWrapperToBlock = (blockConfig) => {
+ const BaseEditComponent = blockConfig.edit;
+ let EditComponent = BaseEditComponent;
+ if (!EditComponent._styleWrapped) {
+ EditComponent = (props) => (
+
+
+
+ );
+ EditComponent.displayName = `
`;
+ EditComponent._styleWrapped = true;
+ }
+
+ const BaseViewComponent = blockConfig.view;
+ let ViewComponent = BaseViewComponent;
+ if (!ViewComponent._styleWrapped) {
+ ViewComponent = (props) => (
+
+
+
+ );
+ ViewComponent.displayName = ``;
+ ViewComponent._styleWrapped = true;
+ }
+ return {
+ ...blockConfig,
+ view: ViewComponent,
+ edit: EditComponent,
+ };
+};
+
const applyConfig = (config) => {
const { settings } = config;
const whitelist = settings.pluggableStylesBlocksWhitelist;
@@ -23,21 +59,7 @@ const applyConfig = (config) => {
(whitelist ? whitelist.includes(name) : true),
);
okBlocks.forEach((name) => {
- const EditComponent = blocksConfig[name].edit;
- const ViewComponent = blocksConfig[name].view;
- blocksConfig[name].edit = (props) => (
-
-
-
- );
- blocksConfig[name].edit.displayName = 'EditBlockWithStyleWrapper';
-
- blocksConfig[name].view = (props) => (
-
-
-
- );
- blocksConfig[name].view.displayName = 'ViewBlockWithStyleWrapper';
+ blocksConfig[name] = applyStyleWrapperToBlock(blocksConfig[name]);
});
config.widgets.widget.style_select = StyleSelectWidget;
@@ -45,6 +67,8 @@ const applyConfig = (config) => {
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;
+ config.widgets.widget.slider = SliderWidget;
+ config.widgets.widget.quad_size = QuadSizeWidget;
// types of blocks that natively integrate with the volto-block-style and
// allow passing the style as a prop;
diff --git a/src/styles.less b/src/styles.less
index 0b44096..d6ee3bd 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -32,6 +32,10 @@
.style-select-widget {
.card {
cursor: pointer;
+
+ .extra.content {
+ padding: 0.4em !important;
+ }
}
.card.active {
@@ -52,14 +56,17 @@
}
&.small {
+ min-width: 10%;
max-width: 25%;
}
&.medium {
+ min-width: 25%;
max-width: 50%;
}
&.large {
+ min-width: 50%;
max-width: 100%;
}