Style Edits for COMPASS-153 and COMPASS-532

src/internal-packages/crud/lib/component/editable-document.jsx

@@ -15,12 +15,12 @@ const debug = require('debug')('mongodb-compass:crud:editable-document');
 /**
  * The arrow up class.
  */
-const ARROW_UP = 'fa fa-arrow-circle-up';
+const ARROW_UP = 'fa fa-arrow-up';
 
 /**
  * The arrow down class.
  */
-const ARROW_DOWN = 'fa fa-arrow-circle-down';
+const ARROW_DOWN = 'fa fa-arrow-down';
 
 /**
  * The base class.
@@ -40,7 +40,7 @@ const FIELD_LIMIT = 30;
 /**
  * The expander class.
  */
-const EXPANDER = 'document document-expander';
+const EXPANDER = 'btn btn-default btn-xs';
 
 /**
  * The test id.
@@ -419,7 +419,7 @@ class EditableDocument extends React.Component {
  renderExpansionText() {
  const extraFields = this.doc.elements.size - FIELD_LIMIT;
  if (this.state.expanded) {
- return `Show ${extraFields} less fields`;
+ return `Hide ${extraFields} fields`;
  }
  return `Show ${extraFields} more fields`;
  }
@@ -467,9 +467,9 @@ class EditableDocument extends React.Component {
  <div className={this.style()} data-test-id={TEST_ID}>
  <ol className={ELEMENTS}>
  {this.renderElements()}
+ {this.renderExpansion()}
  </ol>
  {this.renderActions()}
- {this.renderExpansion()}
  {this.renderFooter()}
  </div>
  );

src/internal-packages/crud/lib/component/readonly-document.jsx

@@ -5,12 +5,12 @@ const Element = require('./element');
 /**
  * The arrow up class.
  */
-const ARROW_UP = 'fa fa-arrow-circle-up';
+const ARROW_UP = 'fa fa-arrow-up';
 
 /**
  * The arrow down class.
  */
-const ARROW_DOWN = 'fa fa-arrow-circle-down';
+const ARROW_DOWN = 'fa fa-arrow-down';
 
 /**
  * The base class.
@@ -30,7 +30,7 @@ const FIELD_LIMIT = 30;
 /**
  * The expander class.
  */
-const EXPANDER = 'document document-expander';
+const EXPANDER = 'btn btn-default btn-xs';
 
 /**
  * The test id.
@@ -105,7 +105,7 @@ class ReadonlyDocument extends React.Component {
  renderExpansionText() {
  const extraFields = this.doc.elements.size - FIELD_LIMIT;
  if (this.state.expanded) {
- return `Show ${extraFields} less fields`;
+ return `Hide ${extraFields} fields`;
  }
  return `Show ${extraFields} more fields`;
  }
@@ -129,8 +129,8 @@ class ReadonlyDocument extends React.Component {
  <div className={BASE} data-test-id={TEST_ID}>
  <ol className={ELEMENTS}>
  {this.renderElements()}
+ {this.renderExpansion()}
  </ol>
- {this.renderExpansion()}
  </div>
  );
  }

src/internal-packages/crud/styles/document.less

@@ -10,6 +10,14 @@
 
  &-elements {
  position: relative;
+
+ .btn {
+ margin: 10px 0px 0px 22px;
+
+ i {
+ margin-right: 5px;
+ }
+ }
  }
 
  &-is-deleting {
@@ -20,38 +28,4 @@
  &-is-editing {
  box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.2);
  }
-
- &-expander {
- width: 100%;
- background-color: #f3f3f3;
- text-align: center;
- margin-top: 20px;
- margin-bottom: -20px;
- vertical-align: middle;
- padding: 8px;
- box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
- cursor: pointer;
-
- &:hover {
- i {
- color: #999999;
- }
-
- span {
- color: #999999;
- }
- }
-
- span {
- color: #adacac;
- text-transform: uppercase;
- font-weight: bold;
- margin-left: 5px;
- }
-
- i {
- font-size: 18px;
- color: #CCCCCC;
- }
- }
 }

src/internal-packages/crud/styles/editable-element-field.less

@@ -3,6 +3,10 @@
  border: none;
  padding-left: 1px;
  -webkit-user-select: text;
+ max-width: 15vw; 
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
 
  &-is-editing {
  border: 1px solid @gray3;

src/internal-packages/crud/styles/editable-element-value.less

@@ -1,9 +1,11 @@
 .editable-element-value {
-
  display: inline-block;
  border: none;
  padding-left: 1px;
  max-width: 45vw;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
 
  &-is-string {
  white-space: pre-line;

src/internal-packages/crud/styles/editable-element.less

@@ -1,5 +1,4 @@
 .editable-element {
-
  width: 100%;
  display: block;
 

src/internal-packages/crud/styles/insert-document-dialog.less

@@ -14,6 +14,14 @@
  color: @gray3;
  }
 
+ .editable-element-field {
+ max-width: 10vw;
+ }
+
+ .editable-element-value {
+ max-width: 20vw; 
+ }
+
  .editable-element-is-added, .editable-expandable-element-header-is-added {
  background-color: @pw;