goblin-gadgets 3.2.2 → 3.2.3

package/widgets/widget-doc-preview-container/styles.js

@@ -1,60 +1,60 @@
-import {ColorManipulator} from 'goblin-theme';
-
-/******************************************************************************/
-
-export const propNames = [
-  'frame',
-  'layoutFrame',
-  'color',
-  'scale',
-  'container',
-];
-
-export default function styles(theme, props) {
-  const {frame, layoutFrame, color, scale, container} = props;
-
-  const frameStyle = {};
-  if (frame) {
-    frameStyle.outline = '1px dashed red';
-  }
-  if (scale && scale !== 1) {
-    frameStyle.transform = `scale(${scale})`;
-    frameStyle.transformOrigin = 'top left';
-    // frameStyle.width = `${100 / scale}%`;
-    // frameStyle.height = `${100 / scale}%`;
-  }
-
-  const layoutFrameStyle = {};
-  if (layoutFrame) {
-    layoutFrameStyle.outline = '1px dashed green';
-  }
-
-  const r = container === 'resizable';
-  const frameKey = r ? '& > div > div > div > *' : '& > div > *';
-  const layoutFramekey = r ? '& > div > div > div' : '& > div';
-
-  const backgroundColor = theme.palette[color + 'Background'];
-
-  const widgetDocPreviewContainer = {
-    position: 'relative',
-    margin: '10px 0px',
-    flexGrow: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor,
-    color: ColorManipulator.emphasize(backgroundColor, 1),
-    [frameKey]: frameStyle,
-    [layoutFramekey]: layoutFrameStyle,
-  };
-
-  const grow = {
-    flexGrow: 1,
-  };
-
-  return {
-    widgetDocPreviewContainer,
-    grow,
-  };
-}
-
-/******************************************************************************/
+import {ColorManipulator} from 'goblin-theme';
+
+/******************************************************************************/
+
+export const propNames = [
+  'frame',
+  'layoutFrame',
+  'color',
+  'scale',
+  'container',
+];
+
+export default function styles(theme, props) {
+  const {frame, layoutFrame, color, scale, container} = props;
+
+  const frameStyle = {};
+  if (frame) {
+    frameStyle.outline = '1px dashed red';
+  }
+  if (scale && scale !== 1) {
+    frameStyle.transform = `scale(${scale})`;
+    frameStyle.transformOrigin = 'top left';
+    // frameStyle.width = `${100 / scale}%`;
+    // frameStyle.height = `${100 / scale}%`;
+  }
+
+  const layoutFrameStyle = {};
+  if (layoutFrame) {
+    layoutFrameStyle.outline = '1px dashed green';
+  }
+
+  const r = container === 'resizable';
+  const frameKey = r ? '& > div > div > div > *' : '& > div > *';
+  const layoutFramekey = r ? '& > div > div > div' : '& > div';
+
+  const backgroundColor = theme.palette[color + 'Background'];
+
+  const widgetDocPreviewContainer = {
+    position: 'relative',
+    margin: '10px 0px',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor,
+    color: ColorManipulator.emphasize(backgroundColor, 1),
+    [frameKey]: frameStyle,
+    [layoutFramekey]: layoutFrameStyle,
+  };
+
+  const grow = {
+    flexGrow: 1,
+  };
+
+  return {
+    widgetDocPreviewContainer,
+    grow,
+  };
+}
+
+/******************************************************************************/

package/widgets/widget-doc-preview-container/widget.js

@@ -1,129 +1,129 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import ResizableContainer from 'goblin-gadgets/widgets/resizable-container/widget';
-import Frame from 'goblin-laboratory/widgets/frame/widget';
-import * as styles from './styles';
-import {Unit} from 'goblin-theme';
-const px = Unit.toPx;
-
-/******************************************************************************/
-
-class WidgetDocPreviewContainer extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange(dx, dy) {
-    this.dispatch({
-      type: 'SET',
-      path: 'settings.containerWidth',
-      value: dx,
-    });
-    this.dispatch({
-      type: 'SET',
-      path: 'settings.containerHeight',
-      value: dy,
-    });
-  }
-
-  /******************************************************************************/
-
-  renderContainer() {
-    const style = {
-      display: 'flex',
-      flexGrow: this.props.flexGrow,
-      flexDirection: this.props.flexDirection,
-      flexWrap: this.props.flexWrap,
-      overflow: this.props.overflow,
-    };
-
-    const width =
-      this.props.containerWidth === 'unset' ||
-      this.props.containerWidth === 'other'
-        ? null
-        : this.props.containerWidth;
-
-    const height =
-      this.props.containerHeight === 'unset' ||
-      this.props.containerHeight === 'other'
-        ? null
-        : this.props.containerHeight;
-
-    if (this.props.container === 'div') {
-      if (width) {
-        style.minWidth = px(width);
-        style.maxWidth = px(width);
-      }
-      if (height) {
-        style.minHeight = px(height);
-        style.maxHeight = px(height);
-      }
-      return <div style={style}>{this.props.children}</div>;
-    }
-
-    if (this.props.container === 'resizable') {
-      return (
-        <ResizableContainer
-          style={style}
-          dx={width}
-          dy={height}
-          onChange={this.onChange}
-        >
-          {this.props.children}
-        </ResizableContainer>
-      );
-    }
-
-    return null;
-  }
-
-  renderThemeContext(theme, themeContext) {
-    if (theme && theme !== 'none') {
-      return (
-        <Frame
-          labId={this.context.labId}
-          store={this.context.store}
-          desktopId={this.context.desktopId}
-          themeContext={themeContext}
-          currentTheme={theme}
-        >
-          {this.renderContainer()}
-        </Frame>
-      );
-    }
-    return this.renderContainer();
-  }
-
-  render() {
-    return (
-      <div className={this.styles.classNames.widgetDocPreviewContainer}>
-        {this.renderThemeContext(this.props.theme, this.props.themeContext)}
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
-
-export default Widget.connectWidget((state) => {
-  const settings = state.get('settings');
-  return {
-    theme: settings.get('theme'),
-    themeContext: settings.get('themeContext'),
-    frame: settings.get('frame'),
-    layoutFrame: settings.get('layoutFrame'),
-    scale: settings.get('scale'),
-    color: settings.get('color'),
-    container: settings.get('container'),
-    containerWidth: settings.get('containerWidth'),
-    containerHeight: settings.get('containerHeight'),
-    flexGrow: settings.get('flexGrow'),
-    flexDirection: settings.get('flexDirection'),
-    flexWrap: settings.get('flexWrap'),
-    overflow: settings.get('overflow'),
-  };
-})(WidgetDocPreviewContainer);
-
-/******************************************************************************/
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import ResizableContainer from 'goblin-gadgets/widgets/resizable-container/widget';
+import Frame from 'goblin-laboratory/widgets/frame/widget';
+import * as styles from './styles';
+import {Unit} from 'goblin-theme';
+const px = Unit.toPx;
+
+/******************************************************************************/
+
+class WidgetDocPreviewContainer extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(dx, dy) {
+    this.dispatch({
+      type: 'SET',
+      path: 'settings.containerWidth',
+      value: dx,
+    });
+    this.dispatch({
+      type: 'SET',
+      path: 'settings.containerHeight',
+      value: dy,
+    });
+  }
+
+  /******************************************************************************/
+
+  renderContainer() {
+    const style = {
+      display: 'flex',
+      flexGrow: this.props.flexGrow,
+      flexDirection: this.props.flexDirection,
+      flexWrap: this.props.flexWrap,
+      overflow: this.props.overflow,
+    };
+
+    const width =
+      this.props.containerWidth === 'unset' ||
+      this.props.containerWidth === 'other'
+        ? null
+        : this.props.containerWidth;
+
+    const height =
+      this.props.containerHeight === 'unset' ||
+      this.props.containerHeight === 'other'
+        ? null
+        : this.props.containerHeight;
+
+    if (this.props.container === 'div') {
+      if (width) {
+        style.minWidth = px(width);
+        style.maxWidth = px(width);
+      }
+      if (height) {
+        style.minHeight = px(height);
+        style.maxHeight = px(height);
+      }
+      return <div style={style}>{this.props.children}</div>;
+    }
+
+    if (this.props.container === 'resizable') {
+      return (
+        <ResizableContainer
+          style={style}
+          dx={width}
+          dy={height}
+          onChange={this.onChange}
+        >
+          {this.props.children}
+        </ResizableContainer>
+      );
+    }
+
+    return null;
+  }
+
+  renderThemeContext(theme, themeContext) {
+    if (theme && theme !== 'none') {
+      return (
+        <Frame
+          labId={this.context.labId}
+          store={this.context.store}
+          desktopId={this.context.desktopId}
+          themeContext={themeContext}
+          currentTheme={theme}
+        >
+          {this.renderContainer()}
+        </Frame>
+      );
+    }
+    return this.renderContainer();
+  }
+
+  render() {
+    return (
+      <div className={this.styles.classNames.widgetDocPreviewContainer}>
+        {this.renderThemeContext(this.props.theme, this.props.themeContext)}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default Widget.connectWidget((state) => {
+  const settings = state.get('settings');
+  return {
+    theme: settings.get('theme'),
+    themeContext: settings.get('themeContext'),
+    frame: settings.get('frame'),
+    layoutFrame: settings.get('layoutFrame'),
+    scale: settings.get('scale'),
+    color: settings.get('color'),
+    container: settings.get('container'),
+    containerWidth: settings.get('containerWidth'),
+    containerHeight: settings.get('containerHeight'),
+    flexGrow: settings.get('flexGrow'),
+    flexDirection: settings.get('flexDirection'),
+    flexWrap: settings.get('flexWrap'),
+    overflow: settings.get('overflow'),
+  };
+})(WidgetDocPreviewContainer);
+
+/******************************************************************************/

package/widgets/widget-doc-properties/styles.js

@@ -1,41 +1,41 @@
-export default function styles() {
-  const filter = {
-    minHeight: '34px',
-    maxHeight: '34px',
-    margin: '0px 20px 20px 20px',
-    display: 'flex',
-    flexDirection: 'row',
-  };
-
-  const scenarios = {
-    minHeight: '34px',
-    margin: '0px 20px 20px 20px',
-    flexShrink: 0,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'baseline',
-  };
-
-  const scenarioButtons = {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  };
-
-  const empty = {
-    height: '300px',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  };
-
-  return {
-    filter,
-    scenarios,
-    scenarioButtons,
-    empty,
-  };
-}
-
-/******************************************************************************/
+export default function styles() {
+  const filter = {
+    minHeight: '34px',
+    maxHeight: '34px',
+    margin: '0px 20px 20px 20px',
+    display: 'flex',
+    flexDirection: 'row',
+  };
+
+  const scenarios = {
+    minHeight: '34px',
+    margin: '0px 20px 20px 20px',
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'baseline',
+  };
+
+  const scenarioButtons = {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  };
+
+  const empty = {
+    height: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return {
+    filter,
+    scenarios,
+    scenarioButtons,
+    empty,
+  };
+}
+
+/******************************************************************************/