@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

package/App/Screens/Configurator/Components/LandscapeInformation/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var styles = function styles() {
+  return {
+    LandscapeFullscreen: {
+      display: 'none'
+    },
+    '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)': {
+      LandscapeFullscreen: {
+        display: 'flex',
+        position: 'absolute',
+        top: 25,
+        width: '100%',
+        zIndex: 6,
+        margin: '-8px'
+      },
+      ContentWrapper: {
+        display: 'flex',
+        backgroundColor: 'rgba(255,255,255,0.8)',
+        alignItems: 'center',
+        margin: '0 auto',
+        padding: '0 8px',
+        '& span': {
+          display: 'block'
+        }
+      },
+      iconRotate: {
+        fontSize: 28,
+        margin: 8
+      }
+    }
+  };
+};
+
+var LandscapeInformation = function LandscapeInformation(_ref) {
+  var classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.LandscapeFullscreen
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.ContentWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    className: classes.iconRotate
+  }, "screen_rotation"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "body1"
+  }, (0, _i18n.t)('rotationInstructions'))));
+};
+
+LandscapeInformation.propTypes = {
+  classes: _propTypes["default"].object
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'LandscapeInformation'
+})(LandscapeInformation);
+
+exports["default"] = _default;

package/App/Screens/Configurator/Components/NoVisualization/NoVisualization.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NoVisualization = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _core = require("@material-ui/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var styles = {
+  root: {
+    paddingTop: 200,
+    textAlign: 'center'
+  }
+};
+var NoVisualization = (0, _core.withStyles)(styles, {
+  name: 'NoVisualization'
+})(function (_ref) {
+  var classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "body1",
+    className: classes.root
+  }, (0, _i18n.T)('visualization.errors.visualizationNotPossible'));
+});
+exports.NoVisualization = NoVisualization;
+var _default = NoVisualization;
+exports["default"] = _default;

package/App/Screens/Configurator/Components/PreviewPortal/index.js

@@ -0,0 +1,249 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = require("lodash");
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon/Icon"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth/withWidth"));
+
+var _core = require("@material-ui/core");
+
+var _AlignTargetProvider = require("redhotmagma-visualization/AlignTargetProvider");
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _AnalyticsWrapper = _interopRequireDefault(require("../../../../Shared/Components/Analytics/AnalyticsWrapper"));
+
+var _Thumbnail = _interopRequireDefault(require("../../Containers/Thumbnail"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(theme) {
+  return {
+    fullscreenPortal: {
+      background: 'white',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      zIndex: 2,
+      top: 0,
+      left: 0,
+      '& .previewClose': {
+        color: 'grey',
+        position: 'absolute',
+        right: 15,
+        top: 15,
+        '&:hover': {
+          cursor: 'pointer'
+        }
+      }
+    },
+    fullScreenTitle: _defineProperty({
+      zIndex: 3,
+      position: 'absolute',
+      width: '100%'
+    }, theme.breakpoints.down('xs'), {
+      borderTop: '7px solid ' + theme.palette.primary.main
+    }),
+    visualizationWrapperThumbs: _defineProperty({
+      height: 'calc(100% - 200px)'
+    }, theme.breakpoints.down('xs'), {
+      '& > div:first-child': {
+        height: '85% !important'
+      },
+      height: 'calc(100% - 130px)'
+    }),
+    visualizationWrapperCanvas: _defineProperty({
+      height: '100% '
+    }, theme.breakpoints.up('sm'), {
+      height: 'calc(100% - 100px)'
+    }),
+    closePreview: {
+      color: theme.palette.primary.darkText,
+      fontSize: 15,
+      fontWeight: 500,
+      lineHeight: '18px',
+      textTransform: 'none',
+      borderRadius: '4px',
+      marginTop: 10,
+      '& b': {
+        marginLeft: 8
+      }
+    },
+    ClosePreviewRoot: _defineProperty({
+      marginBottom: 35
+    }, theme.breakpoints.down('xs'), {
+      marginBottom: 16
+    }),
+    closPreviewIconRoot: {
+      height: 24,
+      width: 24,
+      fontSize: '24px',
+      lineHeight: '24px',
+      textAlign: 'center',
+      marginRight: 8
+    },
+    previewTitle: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      marginLeft: 32,
+      paddingTop: 16
+    }
+  };
+};
+
+var PreviewPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(PreviewPortal, _React$Component);
+
+  var _super = _createSuper(PreviewPortal);
+
+  function PreviewPortal() {
+    var _this;
+
+    _classCallCheck(this, PreviewPortal);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "onThumbnailClick", function () {
+      return function (thumbnails, src, active) {
+        if ((0, _lodash.isFunction)(_this.props.thumbnailClick)) {
+          _this.props.thumbnailClick(thumbnails, src, active);
+        }
+      };
+    });
+
+    return _this;
+  }
+
+  _createClass(PreviewPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.alignTarget.add(this.wrapperRef.current);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.alignTarget.remove(this.wrapperRef.current);
+    }
+  }, {
+    key: "renderPreview",
+    value: function renderPreview() {
+      var _this$props = this.props,
+          hasMoreItems = _this$props.hasMoreItems,
+          closePreviewMode = _this$props.closePreviewMode,
+          classes = _this$props.classes,
+          children = _this$props.children,
+          width = _this$props.width,
+          dialogStyle = _this$props.dialogStyle;
+      var portalStyle = dialogStyle ? classes.fullscreenPortal + ' ' + dialogStyle : classes.fullscreenPortal;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: portalStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.fullScreenTitle
+      }, width === 'xs' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+        component: "div",
+        className: classes.previewTitle
+      }, (0, _i18n.t)('configurator.previewTitle')), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        targetId: "preview_close"
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        className: "previewClose",
+        onClick: closePreviewMode
+      }, "close")))), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.wrapperRef,
+        className: hasMoreItems ? classes.visualizationWrapperThumbs : classes.visualizationWrapperCanvas
+      }, children), hasMoreItems && /*#__PURE__*/_react["default"].createElement(_Thumbnail["default"], {
+        previewOpen: true
+      }), width !== 'xs' && /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        targetId: "preview_close"
+      }, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+        container: true,
+        className: classes.CloseEditorRoot,
+        alignItems: "center",
+        justify: "center"
+      }, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+        variant: "text",
+        onClick: closePreviewMode,
+        classes: {
+          root: classes.closePreview
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        classes: {
+          root: classes.closePreviewIconRoot
+        }
+      }, "close"), /*#__PURE__*/_react["default"].createElement("b", null, (0, _i18n.t)('configurator.previewClose'))))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_reactDom["default"].createPortal(this.renderPreview(), document.getElementById('frame'));
+    }
+  }]);
+
+  return PreviewPortal;
+}(_react["default"].Component);
+
+_defineProperty(PreviewPortal, "propTypes", {
+  thumbnailClick: _propTypes["default"].func,
+  thumbnails: _propTypes["default"].array,
+  closePreviewMode: _propTypes["default"].func,
+  classes: _propTypes["default"].object,
+  width: _propTypes["default"].string,
+  dialogStyle: _propTypes["default"].string,
+  hasItems: _propTypes["default"].bool,
+  hasMoreItems: _propTypes["default"].bool,
+  alignTarget: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    remove: _propTypes["default"].func.isRequired
+  }).isRequired,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node])
+});
+
+var _default = (0, _withWidth["default"])()((0, _withStyles["default"])(styles, {
+  name: 'Portal'
+})((0, _AlignTargetProvider.withAlignTarget)(PreviewPortal)));
+
+exports["default"] = _default;

package/App/Screens/Configurator/Components/Styles.scss

@@ -0,0 +1 @@
+@import '../../../../Resources/Icons/MaterialUI/fontFace';