INT-1838: Indent carats in edit mode

mongodb-js · Oct 3, 2016 · 3b51490 · 3b51490
1 parent 4f1deb2
commit 3b51490
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 20 deletions.
diff --git a/src/internal-packages/crud/lib/component/document.jsx b/src/internal-packages/crud/lib/component/document.jsx
@@ -259,7 +259,7 @@ class Document extends React.Component {
   editableElements() {
     const components = [];
     for (const element of this.state.doc.elements) {
-      components.push(<EditableElement key={element.uuid} element={element} indent={0} />);
+      components.push(<EditableElement key={element.uuid} element={element} />);
     }
     components.push(<Hotspot key="hotspot" element={this.state.doc} />);
     return components;

diff --git a/src/internal-packages/crud/lib/component/editable-element.jsx b/src/internal-packages/crud/lib/component/editable-element.jsx
@@ -99,15 +99,6 @@ class EditableElement extends React.Component {
     this.setState({ expanded: !this.state.expanded });
   }
 
-  /**
-   * Get the inline style for the element.
-   *
-   * @returns {Object} The inline style object.
-   */
-  inlineStyle() {
-    return { paddingLeft: `${this.props.indent}px` };
-  }
-
   /**
    * Get the style for the element component.
    *
@@ -139,7 +130,7 @@ class EditableElement extends React.Component {
     const components = [];
     let index = 0;
     for (const element of this.element.elements) {
-      components.push(<EditableElement key={element.uuid} element={element} index={index} indent={this.props.indent + 16}/>);
+      components.push(<EditableElement key={element.uuid} element={element} index={index} />);
       index++;
     }
     return components;
@@ -152,7 +143,7 @@ class EditableElement extends React.Component {
    */
   renderNonExpandable() {
     return (
-      <li className={this.style()} style={{ paddingLeft: `${this.props.indent}px` }}>
+      <li className={this.style()}>
         <ElementAction element={this.element} />
         <LineNumber />
         <EditableKey element={this.element} index={this.props.index} />
@@ -172,7 +163,7 @@ class EditableElement extends React.Component {
   renderExpandable() {
     return (
       <li className={this.style(BEM_EXP_BASE)}>
-        <div className={this.style(HEADER)} style={this.inlineStyle()}>
+        <div className={this.style(HEADER)}>
           <ElementAction element={this.element} />
           <LineNumber />
           <div className={HEADER_TOGGLE} onClick={this.toggleExpandable.bind(this)}></div>
@@ -203,8 +194,7 @@ EditableElement.displayName = 'EditableElement';
 
 EditableElement.propTypes = {
   element: React.PropTypes.object.isRequired,
-  index: React.PropTypes.number,
-  indent: React.PropTypes.number
+  index: React.PropTypes.number
 };
 
 module.exports = EditableElement;
diff --git a/src/internal-packages/crud/lib/component/insert-document.jsx b/src/internal-packages/crud/lib/component/insert-document.jsx
@@ -45,7 +45,7 @@ class InsertDocument extends React.Component {
   renderElements() {
     const components = [];
     for (const element of this.doc.elements) {
-      components.push(<EditableElement key={element.uuid} element={element} indent={0} />);
+      components.push(<EditableElement key={element.uuid} element={element} />);
     }
     components.push(<Hotspot key="hotspot" element={this.doc} />);
     return components;

diff --git a/src/internal-packages/crud/styles/crud.less b/src/internal-packages/crud/styles/crud.less
@@ -26,6 +26,20 @@
   }
 }
 
+.editable-expandable-element-header {
+
+  &-toggle {
+    margin-left: -10px;
+    margin-right: 6px;
+  }
+
+  &-is-expanded {
+    .editable-expandable-element-header-toggle {
+      margin-left: -14px;
+    }
+  }
+}
+
 .document {
 
   &:hover {

diff --git a/src/internal-packages/crud/styles/document.less b/src/internal-packages/crud/styles/document.less
@@ -21,4 +21,8 @@
   &-is-editing {
     box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.2);
   }
+
+  .editable-element, .editable-expandable-element {
+    margin-left: 15px;
+  }
 }
diff --git a/src/internal-packages/crud/styles/editable-element.less b/src/internal-packages/crud/styles/editable-element.less
@@ -6,7 +6,6 @@
   &-field {
     display: inline-block;
     vertical-align: top;
-    margin-left: 22px;
   }
 
   &-separator {

diff --git a/src/internal-packages/crud/styles/editable-expandable-element.less b/src/internal-packages/crud/styles/editable-expandable-element.less
@@ -87,9 +87,6 @@
       border-right: 0;
       border-top: @caret-width-base solid transparent;
       border-bottom: @caret-width-base solid transparent;
-      position: absolute;
-      left: 44px;
-      margin-top: 4px;
     }
 
     &-is-expanded {