@configuratorware/configurator-frontendgui 1.28.0-beta.1 → 1.28.1

package/App/Modules/Creator/Layouts/DefaultLayout.js

@@ -1,260 +0,0 @@
-"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 _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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) {
-  var _$main, _container, _horizontal, _withBottomList, _outerContainer, _withBottomList2, _visualization;
-
-  return {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      overflowX: 'hidden',
-      overflowY: 'hidden',
-      '&$fallbackMode': {
-        '& $main': (_$main = {}, _defineProperty(_$main, theme.breakpoints.up('md'), {
-          width: '100%'
-        }), _defineProperty(_$main, '@media (orientation: landscape)', {
-          flexDirection: 'row'
-        }), _$main)
-      },
-      // helper classes can be used on contained elements
-      '& .noShrink': {
-        flexShrink: 0
-      },
-      '& .verticalSpacing': {
-        marginTop: theme.spacing(1),
-        marginBottom: theme.spacing(1)
-      },
-      '& .md': _defineProperty({}, theme.breakpoints.up('md'), {}),
-      '& .sm': _defineProperty({}, theme.breakpoints.down('sm'), {})
-    },
-    fallbackMode: {},
-    header: {
-      zIndex: 1
-    },
-    container: (_container = {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'row',
-      position: 'relative'
-    }, _defineProperty(_container, theme.breakpoints.down('xs'), {
-      flexDirection: 'column'
-    }), _defineProperty(_container, '&.fullSize', {
-      width: '100%',
-      height: '100%',
-      paddingLeft: 0
-    }), _defineProperty(_container, '&.reducedSize', {
-      width: 'calc(100% - 140px)',
-      marginLeft: 140
-    }), _defineProperty(_container, '&.fullScreen', {
-      width: '100%',
-      height: '100%',
-      marginLeft: 0
-    }), _defineProperty(_container, theme.breakpoints.between('xs', theme.creator.viewSelectBreakpoint), {
-      height: 'calc(100% - 136px)'
-    }), _container),
-    containerTabletPortrait: {
-      flexDirection: 'column'
-    },
-    main: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      // the pointer events should be passed through to the visualization component
-      pointerEvents: 'none' // important: don't remove this
-
-    },
-    productsList: {
-      position: 'absolute',
-      '&.horizontal': (_horizontal = {
-        bottom: 2,
-        height: 130
-      }, _defineProperty(_horizontal, theme.breakpoints.down('xs'), {
-        width: '100%',
-        left: 0,
-        bottom: 88
-      }), _defineProperty(_horizontal, theme.breakpoints.up('sm'), {
-        width: 'calc(100% - 370px)',
-        minWidth: 215,
-        marginBottom: 0
-      }), _horizontal),
-      '&.vertical': {
-        "float": 'left',
-        height: 'calc(100% - 310px)',
-        minHeight: 120,
-        width: 140,
-        left: theme.spacing(1),
-        top: theme.spacing(1)
-      }
-    },
-    shoppingCart: {
-      display: 'block'
-    },
-    outerContainer: (_outerContainer = {
-      height: '100%',
-      position: 'relative',
-      flex: 1,
-      display: 'flex',
-      marginRight: 20
-    }, _defineProperty(_outerContainer, theme.breakpoints.up('md'), {
-      marginBottom: 24
-    }), _defineProperty(_outerContainer, theme.breakpoints.down('md'), {
-      marginBottom: 16
-    }), _defineProperty(_outerContainer, theme.breakpoints.down('xs'), {
-      margin: 16
-    }), _defineProperty(_outerContainer, '&.withBottomList', (_withBottomList = {}, _defineProperty(_withBottomList, theme.breakpoints.down('xs'), {
-      height: 'calc(100% - 36px)'
-    }), _defineProperty(_withBottomList, '& .dots-container', _defineProperty({
-      bottom: 0
-    }, theme.breakpoints.down('xs'), {
-      bottom: -16
-    })), _withBottomList)), _outerContainer),
-    visualization: (_visualization = {
-      // the visualization is in the background with absolute positioning
-      position: 'absolute',
-      width: '100%',
-      height: '100%'
-    }, _defineProperty(_visualization, theme.breakpoints.down('xs'), {
-      height: '75%'
-    }), _defineProperty(_visualization, theme.breakpoints.down(theme.creator.viewSelectBreakpoint), {
-      height: 'calc(100% - 152px)'
-    }), _defineProperty(_visualization, '&.withBottomList', (_withBottomList2 = {}, _defineProperty(_withBottomList2, theme.breakpoints.between('xs', 'sm'), {
-      height: 'calc(100% - 198px)'
-    }), _defineProperty(_withBottomList2, theme.breakpoints.up('sm'), {
-      height: 'calc(100% - 152px)'
-    }), _withBottomList2)), _defineProperty(_visualization, '&.fullScreen', {
-      height: '100%'
-    }), _visualization)
-  };
-};
-
-var DefaultLayout = function DefaultLayout(_ref) {
-  var width = _ref.width,
-      classes = _ref.classes,
-      renderHeader = _ref.renderHeader,
-      renderMain = _ref.renderMain,
-      renderInForeground = _ref.renderInForeground,
-      renderProductsList = _ref.renderProductsList,
-      renderShoppingCart = _ref.renderShoppingCart,
-      renderVisualization = _ref.renderVisualization,
-      renderLoader = _ref.renderLoader,
-      renderLicenseNotice = _ref.renderLicenseNotice,
-      renderInvalidConfigurationNotice = _ref.renderInvalidConfigurationNotice,
-      fallbackMode = _ref.fallbackMode,
-      isPortraitMode = _ref.isPortraitMode,
-      displayVerticalList = _ref.displayVerticalList,
-      imageOnly = _ref.imageOnly;
-  var content = imageOnly ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _clsx["default"])(classes.outerContainer, !displayVerticalList && 'withBottomList')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.container, "  ").concat(imageOnly ? 'fullScreen' : '', " ").concat(isPortraitMode ? classes.containerTabletPortrait : '', " ").concat(displayVerticalList ? 'reducedSize' : 'fullSize')
-  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.visualization, " ").concat(imageOnly ? 'fullScreen' : '', " ").concat(displayVerticalList ? '' : 'withBottomList')
-  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.main
-  }, renderMain({
-    area: 'main',
-    width: width,
-    classes: classes
-  }))))) : renderInForeground() || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderLicenseNotice({
-    mobileOffset: 110
-  }), renderInvalidConfigurationNotice(), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.header
-  }, renderHeader({
-    area: 'header',
-    width: width,
-    classes: classes
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _clsx["default"])(classes.outerContainer, !displayVerticalList && 'withBottomList')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '', " ").concat(displayVerticalList ? 'reducedSize' : 'fullSize')
-  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.visualization, " ").concat(displayVerticalList ? '' : 'withBottomList')
-  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.main
-  }, renderMain({
-    area: 'main',
-    width: width,
-    classes: classes
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.shoppingCart
-  }, renderShoppingCart({
-    area: 'cart',
-    width: width,
-    classes: classes
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.productsList, " ").concat(displayVerticalList ? 'vertical' : 'horizontal')
-  }, renderProductsList({
-    area: 'products',
-    width: width,
-    classes: classes,
-    displayVerticalList: displayVerticalList
-  }))));
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
-  }, content, renderLoader());
-};
-
-var getDefaultComponent = function getDefaultComponent() {
-  return null;
-};
-
-DefaultLayout.propTypes = {
-  classes: _propTypes["default"].object,
-  width: _propTypes["default"].string,
-  renderHeader: _propTypes["default"].func,
-  renderMain: _propTypes["default"].func,
-  renderInForeground: _propTypes["default"].func,
-  renderProductsList: _propTypes["default"].func,
-  renderShoppingCart: _propTypes["default"].func,
-  renderVisualization: _propTypes["default"].func,
-  renderLoader: _propTypes["default"].func,
-  renderLicenseNotice: _propTypes["default"].func,
-  renderInvalidConfigurationNotice: _propTypes["default"].func,
-  fallbackMode: _propTypes["default"].bool,
-  isPortraitMode: _propTypes["default"].bool,
-  displayVerticalList: _propTypes["default"].bool,
-  imageOnly: _propTypes["default"].bool
-};
-DefaultLayout.defaultProps = {
-  renderHeader: getDefaultComponent,
-  renderLoader: getDefaultComponent,
-  renderMain: getDefaultComponent,
-  renderInForeground: getDefaultComponent,
-  renderProductsList: getDefaultComponent,
-  renderShoppingCart: getDefaultComponent,
-  renderVisualization: getDefaultComponent,
-  displayVerticalList: true
-};
-
-var _default = (0, _styles.withStyles)(styles, {
-  name: 'DefaultLayout'
-})((0, _withWidth["default"])({
-  initialWidth: 'xl'
-})(DefaultLayout));
-
-exports["default"] = _default;

package/App/Modules/Creator/Styles.scss

@@ -1,216 +0,0 @@
-@import "../../../App/Variables";
-@import "../../../Framework/Mixins";
-@import "../../../Resources/Icons/ionicons"; // ionicons
-@import "../../../Resources/Icons/ioniconsExtend"; // extendable ionicons
-@import "../../../Resources/Icons/MaterialUI/fontFace";
-
-.frame {
-  @include main-wrapper;
-}
-
-.configuratorscreen {
-  font-family: $font-family, $font-family-fallback;
-
-  min-width: 320px;
-  @include main-wrapper-inner;
-
-  a {
-    color: rgba(0,0,0,0.6);
-    @include transition(all 0.3s);
-
-    &:hover, &:active {
-      color: rgba(0,0,0,0.8);
-    }
-  }
-
-  * {
-    @media screen {
-      box-sizing: border-box;
-    }
-  }
-}
-
-.carousel-wrapper {
-  .carousel-nav {
-    transform: scale(1,1);
-    &.prev {
-      @extend %ion-ios-arrow-left;
-    }
-    &.next {
-      @extend %ion-ios-arrow-right;
-    }
-  }
-  &.vertical {
-    .carousel-nav {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.optionclassificationitem {
-  &.checked {
-    .optionclassificationitem-title:after {
-      @extend %ion-checkmark:before;
-      padding-left: 8px;
-    }
-  }
-}
-
-.optiondetail {
-  .optiondetail-nav {
-    transform: scale(1,1);
-    &.prev:before {
-      @extend %ion-ios-arrow-left;
-      line-height: $nav-button-height;
-    }
-    &.next:before {
-      @extend %ion-ios-arrow-right;
-      line-height: $nav-button-height;
-    }
-  }
-}
-
-@keyframes starthere {
-  0% {bottom: -5px;}
-  50% {bottom: 5px;}
-  100% {bottom: -5px;}
-}
-
-@keyframes starthere-left {
-  0% {left: -5px;}
-  50% {left: 5px;}
-  100% {left: -5px;}
-}
-
-.starthere {
-  &.horizontal {
-    &:before {
-      @extend %ion-android-arrow-back;
-      position: relative;
-      animation: starthere-left 1s ease-in-out 0s infinite;
-    }
-  }
-  &.vertical {
-    &:before {
-      @extend %ion-android-arrow-down;
-      position: relative;
-      animation: starthere 1s ease-in-out 0s infinite;
-    }
-  }
-}
-
-.fastconfiguration-select-arrow {
-  &:before {
-    @extend %ion-ios-arrow-down;
-  }
-}
-
-.primary-button {
-  background-color: rgba(0,0,0,0.2);
-  padding: 10px;
-}
-
-@media screen {
-  .visualizationcomponentcontainer {
-    position: absolute;
-    top: 0;
-    width: $visualization-container-width;
-    height: $visualization-container-height;
-    overflow: hidden;
-  }
-
-  .configuratorscreen {
-    > .price {
-      position: absolute;
-      top: $elements-padding;
-      right: $elements-padding;
-
-      height: $price-height;
-      font-size: $price-font-size;
-    }
-
-    > .itemtitle {
-      position: absolute;
-      top: $elements-padding;
-      left: $elements-padding;
-      z-index: 1;
-    }
-
-    > .tools {
-      position: absolute;
-      right: $elements-padding;
-      top: $elements-padding + 75px;
-      z-index: 1;
-    }
-
-    > .addtocart-button {
-      position: absolute;
-      right: $elements-padding;
-      top: $elements-padding + 35px;
-      z-index: 1;
-    }
-  }
-
-  .error {
-    padding: 10px 0;
-    color: red;
-  }
-
-  // .dock-bottom is the default
-  .dock-left {
-
-    .itemtitle {
-      left: $optionclassification-width-landscape + $elements-padding;
-    }
-
-    .visualizationcomponentcontainer {
-      left: $visualization-container-left-landscape;
-      width: $visualization-container-width-landscape;
-      height: $visualization-container-height-landscape;
-    }
-
-    .optionlist-dialog {
-      .dialog {
-        left: $optionclassification-width-landscape;
-      }
-    }
-
-  }
-}
-
-
-@media print {
-  .configuratorscreen {
-    padding: $print-padding 0;
-    height: calc(100% - #{2*$print-padding});
-  }
-  .price {
-    float: right;
-    font-size: 20px;
-    font-weight: bold;
-    padding-top: 30px;
-  }
-  .itemtitle {
-    padding-bottom: 20px;
-  }
-  .visualizationcomponentcontainer {
-    max-height: 50%;
-    overflow: hidden;
-  }
-
-  .optionclassificationitem {
-    &.checked {
-      .optionclassificationitem-title:after {
-        display: none;
-      }
-    }
-  }
-
-  // hidden elements
-  .addtocart-button,
-  .tools,
-  .starthere
-  {
-    display: none;
-  }
-}