fix: nested styles prevent external controls

src/js/components/controls/index.js

@@ -269,8 +269,8 @@ export class Controls {
     const _this = this
     const groupedFields = this.groupElements()
     const formActions = this.formActions()
-    _this.panels = new Panels({ panels: groupedFields, type: 'controls' })
-    const groupsWrapClasses = ['control-groups', 'panels-wrap', `panel-count-${groupedFields.length}`]
+    _this.panels = new Panels({ panels: groupedFields, type: 'controls', displayType: 'slider' })
+    const groupsWrapClasses = ['control-groups', 'formeo-panels-wrap', `panel-count-${groupedFields.length}`]
     const groupsWrap = dom.create({
       className: groupsWrapClasses,
       content: _this.panels.children,

src/js/components/fields/field.js

@@ -200,7 +200,7 @@ export default class Field extends Component {
     const allowedPanels = panelOrder.filter(panelName => !noPanels.includes(panelName))
 
     const fieldEdit = {
-      className: ['field-edit', 'slide-toggle', 'panels-wrap'],
+      className: ['field-edit', 'slide-toggle', 'formeo-panels-wrap'],
     }
 
     allowedPanels.forEach(panelName => {
@@ -252,7 +252,7 @@ export default class Field extends Component {
     prevData.id = `prev-${this.id}`
 
     if (this.data.config.editableContent) {
-      prevData.attrs = Object.assign({}, prevData.attrs, {contenteditable: true})
+      prevData.attrs = Object.assign({}, prevData.attrs, { contenteditable: true })
     }
 
     const fieldPreview = {

src/js/components/panels.js

@@ -2,7 +2,6 @@ import i18n from 'mi18n'
 import Sortable from 'sortablejs'
 import h, { indexOfNode } from '../common/helpers'
 import dom from '../common/dom'
-// import Fields from './fields'
 
 const defaults = {
   type: 'field',
@@ -27,11 +26,8 @@ export default class Panels {
     this.panels = panels.childNodes
     this.currentPanel = _this.panels[0]
     this.nav = _this.navActions()
-    // if (_this.opts.type === 'field') {
-    //   setTimeout(_this.setPanelsHeight.bind(_this), 100)
-    // }
 
-    this.panelDisplay = 'slider'
+    this.panelDisplay = this.opts.displayType || 'slider'
 
     return {
       children: [_this.labels, panels],
@@ -50,8 +46,9 @@ export default class Panels {
     const panelsWrap = this.panelsWrap
     const column = panelsWrap.parentElement.parentElement
     const width = parseInt(dom.getStyle(column, 'width'))
-    const isTabbed = width > 390
-    this.panelDisplay = isTabbed ? 'tabbed' : 'slider'
+    const autoDisplayType = width > 390 ? 'tabbed' : 'slider'
+    this.panelDisplay = this.opts.displayType || autoDisplayType
+    const isTabbed = this.panelDisplay === 'tabbed'
     panelsWrap.parentElement.classList.toggle('tabbed-panels', isTabbed)
     const panelStyle = panelsWrap.style
     const activePanelHeight = dom.getStyle(this.currentPanel, 'height')
@@ -62,27 +59,6 @@ export default class Panels {
     return activePanelHeight
   }
 
-  /**
-   * Set panel height so we can animate it with css
-   */
-  // setPanelsHeight() {
-  //   const field = Fields.get(this.opts.id).dom
-  //   this.slideToggle = field.querySelector('.field-edit')
-
-  //   // temp styles
-  //   this.slideToggle.style.display = 'block'
-  //   this.slideToggle.style.position = 'absolute'
-  //   this.slideToggle.style.opacity = 0
-
-  //   this.resizePanels()
-
-  //   // reset styles
-  //   this.slideToggle.style.display = 'none'
-  //   this.slideToggle.style.position = 'relative'
-  //   this.slideToggle.style.opacity = 1
-  //   this.slideToggle.style.height = 'auto'
-  // }
-
   /**
    * Wrap a panel and make properties sortable
    * if the panel belongs to a field
@@ -133,17 +109,6 @@ export default class Panels {
     })
   }
 
-  /**
-   * Save a fields' property
-   * @param  {Object} group property group
-   * @return {Object}       DOM node for updated property preview
-   */
-  // propertySave(group) {
-  //   const field = dom.fields.get(this.opts.id)
-  //   data.save(group.editGroup, group, false)
-  //   return field.instance.updatePreview()
-  // }
-
   /**
    * Panel navigation, tabs and arrow buttons for slider
    * @return {Object} DOM object for panel navigation wrapper

src/sass/components/_controls.scss

@@ -55,11 +55,12 @@
       &.prev-group {
         border-top-left-radius: $border-radius;
         border-bottom-left-radius: 0;
+        left: 0;
       }
     }
   }
 
-  .panels-wrap {
+  .formeo-panels-wrap {
     font-size: 0.85em;
     line-height: 1.8em;
   }

src/sass/components/_panels.scss

@@ -1,4 +1,4 @@
-.panels-wrap {
+.formeo-panels-wrap {
   h5 {
     margin: 0;
     padding: 0.55em 0;

src/sass/components/_stage.scss

@@ -4,7 +4,6 @@
 @import 'components/column';
 @import 'components/field';
 @import 'components/field-edit';
-@import 'components/panels';
 
 .highlight-component {
   box-shadow: 0 0 space() 2px $brand-info;

src/sass/formeo.scss

@@ -3,6 +3,7 @@
 @import 'base/mixins';
 @import 'base/icons';
 @import 'components/autocomplete';
+@import 'components/panels';
 
 .formeo-sprite {
   display: none !important;
@@ -23,7 +24,6 @@
     text-align: left;
     @import 'components/component';
     @import 'components/stage';
-    @import 'components/controls';
 
     @import 'base/rtl';
   }
@@ -33,6 +33,8 @@
   }
 }
 
+@import 'components/controls';
+
 .field-control {
   @extend %field-control;