change element highlights to sticky closes #206

relax · Jan 11, 2016 · 965a5d1 · 965a5d1
1 parent ffdcbbb
commit 965a5d1
Show file tree

Hide file tree

Showing 32 changed files with 144 additions and 91 deletions.
diff --git a/assets/less/components/element/highlight.less b/assets/less/components/element/highlight.less
@@ -6,7 6,7 @@
  border: @borderSize solid @adminPrimary;
  .alphaColorToRgb(@adminPrimary, 0.1);
  border-radius: 1px;
- z-index: 2;
  z-index: 1;
  color: #ffffff;
 
  .element-identifier {
@@ -39,7 39,6 @@
  }
 
  &.selected {
- z-index: 1;
  border: 1px solid @adminPrimary;
  background-color: transparent;
 

diff --git a/assets/less/components/page-builder/canvas.less b/assets/less/components/page-builder/canvas.less
@@ -3,7 3,7 @@
  top: 0;
  left: 0;
  bottom: 0;
- right: 0;
  right: @pageBuilderAdvancedMenuWidth;
  background-color: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
@@ -16,6 16,7 @@
 .preview .page-builder-canvas {
  left: 0;
  bottom: 0;
  right: 0;
 }
 
 .pb-empty-placeholder {

diff --git a/assets/less/components/page-builder/chrome/props-menu/index.less b/assets/less/components/page-builder/chrome/props-menu/index.less
@@ -1,27 1,25 @@
 @triggerButtonsSize: 35px;
 
 .previewing .advanced-menu {
- right: -@pageBuilderAdvancedMenuWidth - @triggerButtonsSize;
  transform: ~'translateX(@{pageBuilderAdvancedMenuWidth})';
 }
 
 .advanced-menu {
- position: absolute;
  position: fixed;
  z-index: 4;
 
- top: ~'calc(50% - 37vh)';
- right: -@pageBuilderAdvancedMenuWidth;
  top: @pageBuilderTopMenuHeight;
  right: 0;
  bottom: 0;
  width: @pageBuilderAdvancedMenuWidth;
- height: 75vh;
 
  background-color: @pageBuilderAdvancedMenu;
  color: @pageBuilderChromeText;
  border-left: 1px solid @pageBuilderChromeBorders;
  border-top: 1px solid @pageBuilderChromeBorders;
 
  .transition(0.4s);
 
- &.opened {
- right: 40px;
- }
-
  &.linking {
  z-index: 99999;
  }
@@ -53,7 51,6 @@
  line-height: 50px;
  text-transform: uppercase;
  position: relative;
- top: 1px;
  border-right: 1px solid @pageBuilderChromeBorders;
  border-bottom: 1px solid @pageBuilderChromeBorders;
 

diff --git a/assets/less/components/page-builder/general-elements-menu.less b/assets/less/components/page-builder/general-elements-menu.less
@@ -8,6 8,7 @@
  position: fixed;
  bottom: @margin;
  left: @margin;
  z-index: 999;
  .transition(0.5s);
 
  .previewing &, .pb-linking-data & {

diff --git a/assets/less/main.less b/assets/less/main.less
@@ -7,7 7,7 @@ img {
  max-width: 100%;
 }
 
-html, body, #view, .max-size, .max-size >div:first-child, .max-size >div:first-child >div {
 html, body, #view, .max-size {
  width: 100%;
  height: 100%;
 }

diff --git a/lib/components/admin/index.jsx b/lib/components/admin/index.jsx
@@ -35,15 35,13 @@ export default class Admin extends Component {
 
  render () {
  return (
- <div>
- <div className={cx('blurr', this.props.blurred && 'blurred', !this.props.editing && 'previewing', this.props.linkingData && 'pb-linking-data')}>
- <div className='close-preview' onClick={this.props.pageBuilderActions.toggleEditing}>Close preview</div>
- <TopMenu {...this.props} />
- <div className='admin-holder'>
- {this.props.activePanelType !== 'pageBuild' && <MenuBar user={this.props.user} activePanelType={this.props.activePanelType} breadcrumbs={this.props.breadcrumbs} />}
- <div className='admin-content'>
- {this.props.loading ? <Loading /> : this.props.children}
- </div>
  <div id='admin-holder' className={cx('blurr', this.props.blurred && 'blurred', !this.props.editing && 'previewing', this.props.linkingData && 'pb-linking-data')}>
  <div className='close-preview' onClick={this.props.pageBuilderActions.toggleEditing}>Close preview</div>
  <TopMenu {...this.props} />
  <div className='admin-holder'>
  {this.props.activePanelType !== 'pageBuild' && <MenuBar user={this.props.user} activePanelType={this.props.activePanelType} breadcrumbs={this.props.breadcrumbs} />}
  <div className='admin-content'>
  {this.props.loading ? <Loading /> : this.props.children}
  </div>
  </div>
  </div>

diff --git a/lib/components/elements/button/index.jsx b/lib/components/elements/button/index.jsx
@@ -6,8 6,8 @@ import classes from './classes';
 import propsSchema from './props-schema';
 import settings from './settings';
 import style from './style';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 export default class Button extends Component {
 

diff --git a/lib/components/elements/column/index.jsx b/lib/components/elements/column/index.jsx
@@ -2,8 2,8 @@ import React, {PropTypes} from 'react';
 
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 export default class Column extends Component {
  static propTypes = {

diff --git a/lib/components/elements/columns/index.jsx b/lib/components/elements/columns/index.jsx
@@ -3,8 3,8 @@ import React, {PropTypes} from 'react';
 import classes from './classes';
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 import Utils from '../../../utils';
 import {Droppable} from '../../dnd';
 

diff --git a/lib/components/component.jsx → lib/components/elements/component.jsx b/lib/components/component.jsx → lib/components/elements/component.jsx
@@ -1,7 1,7 @@
 import React, {PropTypes} from 'react';
 import {Component} from 'relax-framework';
 
-import {Droppable} from './dnd';
 import {Droppable} from '../dnd';
 
 export default class ElementComponent extends Component {
  static propTypes = {

diff --git a/lib/components/elements/container/index.jsx b/lib/components/elements/container/index.jsx
@@ -3,8 3,8 @@ import React, {PropTypes} from 'react';
 import propsSchema from './props-schema';
 import settings from './settings';
 import style from './style';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 export default class Container extends Component {
  static propTypes = {

diff --git a/lib/components/elements/counter/index.jsx b/lib/components/elements/counter/index.jsx
@@ -4,8 4,8 @@ import React, {PropTypes} from 'react';
 
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 export default class Counter extends Component {
  static propTypes = {

diff --git a/lib/components/elements/dynamic-list/container.jsx b/lib/components/elements/dynamic-list/container.jsx
@@ -7,8 7,8 @@ import {buildQueryAndVariables} from 'relax-framework';
 
 import settings from './settings';
 import utils from '../../../utils';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 import List from './list';
 
 @connect(

diff --git a/lib/components/elements/dynamic-list/index.jsx b/lib/components/elements/dynamic-list/index.jsx
@@ -2,7 2,7 @@ import React from 'react';
 
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
 import Component from '../component';
 import Container from './container';
 
 export default class DynamicList extends Component {

diff --git a/lib/components/element.jsx → lib/components/elements/element.jsx b/lib/components/element.jsx → lib/components/elements/element.jsx
@@ -4,8 4,10 @@ import React, {PropTypes} from 'react';
 import {findDOMNode} from 'react-dom';
 import {Component} from 'relax-framework';
 
-import Utils from '../utils';
-import {Droppable, Draggable} from './dnd';
 import Highlight from './highlight';
 import Portal from '../portal';
 import Utils from '../../utils';
 import {Droppable, Draggable} from '../dnd';
 
 export default class Element extends Component {
  static propTypes = {
@@ -161,24 163,17 @@ export default class Element extends Component {
  const editing = pageBuilder && pageBuilder.editing;
 
  if (editing && settings.drag) {
- const {selectedParent} = pageBuilder;
- const overed = this.isOvered();
  const selected = this.isSelected();
  const {dragging, dragInfo} = dnd;
 
- if ((!dragging && (overed || selected)) || dragging || selectedParent === elementId) {
- tagProps.style = tagProps.style || {};
- tagProps.style.position = tagProps.style.position || 'relative';
- }
-
  if (this.state.animatedEditing && this.state.animation && !this.state.animated) {
  tagProps.style = tagProps.style || {};
  tagProps.style.opacity = 0;
  }
 
  if (element.subComponent) {
  result = (
- <this.props.htmlTag {...tagProps} onMouseOver={this.onMouseOver.bind(this)} onMouseOut={this.onMouseOut.bind(this)} onClick={this.onElementClick.bind(this)}>
  <this.props.htmlTag {...tagProps} onMouseOver={this.onMouseOver.bind(this)} onMouseOut={this.onMouseOut.bind(this)} onClick={this.onElementClick.bind(this)} ref={(ref) => this.ref = ref}>
  {this.renderContent()}
  {this.renderHighlight()}
  </this.props.htmlTag>
@@ -217,7 212,7 @@ export default class Element extends Component {
 
  result = (
  <Draggable {...draggableProps} dnd={dnd} dndActions={dndActions}>
- <this.props.htmlTag {...tagProps} onMouseOver={this.onMouseOver.bind(this)} onMouseOut={this.onMouseOut.bind(this)} id={elementId}>
  <this.props.htmlTag {...tagProps} onMouseOver={this.onMouseOver.bind(this)} onMouseOut={this.onMouseOut.bind(this)} id={elementId} ref={(ref) => this.ref = ref}>
  {this.renderContent()}
  {this.renderHighlight()}
  </this.props.htmlTag>
@@ -306,19 301,12 @@ export default class Element extends Component {
  const overed = this.isOvered();
  const selected = this.isSelected();
 
- if (!dragging && (overed || selected)) {
- const elementType = element.tag;
- const ElementClass = elements[elementType];
- const inside = this.state.offset.top <= 65 || (this.props.style && this.props.style.overflow === 'hidden');
- const subComponent = element.subComponent;
-
  if (!dragging && (overed || selected) && this.ref) {
  const ElementClass = elements[element.tag];
  return (
- <div className={cx('element-highlight', selected && 'selected', inside && 'inside', subComponent && 'sub-component')}>
- <div className='element-identifier'>
- <i className={ElementClass.settings.icon.class}>{ElementClass.settings.icon.content}</i>
- <span>{element.label || elementType}</span>
- </div>
- </div>
  <Portal attachTo='admin-holder'>
  <Highlight element={element} ElementClass={ElementClass} selected={selected} dom={this.ref} />
  </Portal>
  );
  }
  }

diff --git a/lib/components/elements/form/index.jsx b/lib/components/elements/form/index.jsx
@@ -5,8 5,8 @@ import {findDOMNode} from 'react-dom';
 
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 // import slugify from 'slug';
 

diff --git a/lib/components/elements/gap/index.jsx b/lib/components/elements/gap/index.jsx
@@ -2,8 2,8 @@ import React from 'react';
 
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 export default class Gap extends Component {
  static propTypes = {

diff --git a/lib/components/elements/google-maps/index.jsx b/lib/components/elements/google-maps/index.jsx
@@ -3,8 3,8 @@ import {GoogleMap, GoogleMapLoader, Marker} from 'react-google-maps';
 
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 import Utils from '../../../utils';
 
 export default class GoogleMapsElem extends Component {

diff --git a/lib/components/elements/highlight.jsx b/lib/components/elements/highlight.jsx
@@ -0,0 1,69 @@
 import cx from 'classnames';
 import React, {PropTypes} from 'react';
 import {Component} from 'relax-framework';
 
 export default class Highlight extends Component {
  static propTypes = {
  ElementClass: PropTypes.object.isRequired,
  element: PropTypes.object.isRequired,
  children: PropTypes.node.isRequired,
  dom: PropTypes.node.isRequired,
  selected: PropTypes.bool.isRequired
  }
 
  getInitState () {
  return {
  left: 0,
  top: 0
  };
  }
 
  componentDidMount () {
  this.mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';
  this.scrollBind = ::this.onScroll;
  this.resizeBind = ::this.onResize;
  document.body.addEventListener(this.mousewheelevt, this.scrollBind, false);
  window.addEventListener('resize', this.resizeBind, false);
  }
 
  componentWillUnmount () {
  document.body.removeEventListener(this.mousewheelevt, this.scrollBind);
  window.removeEventListener('resize', this.resizeBind);
  }
 
  onScroll () {
  this.updatePosition();
  this.updateTimeout = setTimeout(::this.updatePosition, 0);
  }
 
  onResize () {
  this.updatePosition();
  this.updateTimeout = setTimeout(::this.updatePosition, 10);
  }
 
  updatePosition () {
  this.forceUpdate();
  }
 
  getPosition () {
  const rect = this.props.dom.getBoundingClientRect();
  return {
  left: rect.left,
  top: rect.top,
  width: rect.width || (rect.right - rect.left),
  height: rect.height || (rect.bottom - rect.top)
  };
  }
 
  render () {
  const style = this.getPosition();
  return (
  <div className={cx('element-highlight', this.props.selected && 'selected', this.props.element.subComponent && 'sub-component', style.top < 60 && 'inside')} style={style}>
  <div className='element-identifier'>
  <i className={this.props.ElementClass.settings.icon.class}>{this.props.ElementClass.settings.icon.content}</i>
  <span>{this.props.element.label || this.props.element.tag}</span>
  </div>
  </div>
  );
  }
 }
diff --git a/lib/components/elements/icon/index.jsx b/lib/components/elements/icon/index.jsx
@@ -5,8 5,8 @@ import classes from './classes';
 import propsSchema from './props-schema';
 import settings from './settings';
 import style from './style';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 
 export default class Icon extends Component {
  static propTypes = {

diff --git a/lib/components/elements/image/index.jsx b/lib/components/elements/image/index.jsx
@@ -5,8 5,8 @@ import {findDOMNode} from 'react-dom';
 import classes from './classes';
 import propsSchema from './props-schema';
 import settings from './settings';
-import Component from '../../component';
-import Element from '../../element';
 import Component from '../component';
 import Element from '../element';
 import MediaImage from '../../image';
 import Utils from '../../../utils';
 import {getColorString} from '../../../helpers/colors';