From dc037dc258535ff3e8bec0b29a1155f49a37c5e5 Mon Sep 17 00:00:00 2001 From: Sean Oh Date: Wed, 15 Mar 2017 13:35:51 -0400 Subject: [PATCH 1/3] Style pass for COMPASS-153: Added max-width limits to editable fields, prevent breakage in insert document dialog as well --- .../crud/styles/editable-element-field.less | 4 ++++ .../crud/styles/editable-element-value.less | 4 +++- src/internal-packages/crud/styles/editable-element.less | 1 - .../crud/styles/insert-document-dialog.less | 8 ++++++++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/internal-packages/crud/styles/editable-element-field.less b/src/internal-packages/crud/styles/editable-element-field.less index c683fca3a28..331cf845cd8 100644 --- a/src/internal-packages/crud/styles/editable-element-field.less +++ b/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; diff --git a/src/internal-packages/crud/styles/editable-element-value.less b/src/internal-packages/crud/styles/editable-element-value.less index b247f5b4d4e..53d29d9c3a3 100644 --- a/src/internal-packages/crud/styles/editable-element-value.less +++ b/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; diff --git a/src/internal-packages/crud/styles/editable-element.less b/src/internal-packages/crud/styles/editable-element.less index a3405236bd8..27c9c932533 100644 --- a/src/internal-packages/crud/styles/editable-element.less +++ b/src/internal-packages/crud/styles/editable-element.less @@ -1,5 +1,4 @@ .editable-element { - width: 100%; display: block; diff --git a/src/internal-packages/crud/styles/insert-document-dialog.less b/src/internal-packages/crud/styles/insert-document-dialog.less index dc97cc982f4..5e4746c01fa 100644 --- a/src/internal-packages/crud/styles/insert-document-dialog.less +++ b/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; From 6e3562fd7b2b790b1e4383d791397d98f1800f58 Mon Sep 17 00:00:00 2001 From: Sean Oh Date: Wed, 15 Mar 2017 13:43:51 -0400 Subject: [PATCH 2/3] Style pass for COMPASS-532: Remove extra height on expand icon --- src/internal-packages/crud/styles/document.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/internal-packages/crud/styles/document.less b/src/internal-packages/crud/styles/document.less index 5dd4db23cf2..ac0053d9c9a 100644 --- a/src/internal-packages/crud/styles/document.less +++ b/src/internal-packages/crud/styles/document.less @@ -50,7 +50,6 @@ } i { - font-size: 18px; color: #CCCCCC; } } From f2bd6a82c3e6782c921a4adfd1444e2427f3261b Mon Sep 17 00:00:00 2001 From: Sean Oh Date: Thu, 16 Mar 2017 13:47:27 -0400 Subject: [PATCH 3/3] Changed style of expand / collapse button --- .../crud/lib/component/editable-document.jsx | 10 ++--- .../crud/lib/component/readonly-document.jsx | 10 ++--- .../crud/styles/document.less | 41 ++++--------------- 3 files changed, 18 insertions(+), 43 deletions(-) diff --git a/src/internal-packages/crud/lib/component/editable-document.jsx b/src/internal-packages/crud/lib/component/editable-document.jsx index 55d70309db4..1e21c1af16d 100644 --- a/src/internal-packages/crud/lib/component/editable-document.jsx +++ b/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. @@ -398,7 +398,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`; } @@ -446,9 +446,9 @@ class EditableDocument extends React.Component {
    {this.renderElements()} + {this.renderExpansion()}
{this.renderActions()} - {this.renderExpansion()} {this.renderFooter()}
); diff --git a/src/internal-packages/crud/lib/component/readonly-document.jsx b/src/internal-packages/crud/lib/component/readonly-document.jsx index 6ec72dc9920..bca83b3c683 100644 --- a/src/internal-packages/crud/lib/component/readonly-document.jsx +++ b/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 {
    {this.renderElements()} + {this.renderExpansion()}
- {this.renderExpansion()}
); } diff --git a/src/internal-packages/crud/styles/document.less b/src/internal-packages/crud/styles/document.less index ac0053d9c9a..0aada2aff0a 100644 --- a/src/internal-packages/crud/styles/document.less +++ b/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,37 +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 { - color: #CCCCCC; - } - } }