From 6cd729d3d59d87411c35df33b775574368570458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Tue, 30 Jun 2015 15:45:22 -0400 Subject: [PATCH 1/5] started working on sidebar open, close interaction --- .../src/document-view/document-list-item.jade | 2 +- scout-ui/src/document-view/document-list.jade | 2 +- scout-ui/src/home/collection.jade | 7 +++++-- scout-ui/src/home/index.less | 19 ++++++++++++++++++- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/scout-ui/src/document-view/document-list-item.jade b/scout-ui/src/document-view/document-list-item.jade index 8753b20a543..0d9f0527e9a 100644 --- a/scout-ui/src/document-view/document-list-item.jade +++ b/scout-ui/src/document-view/document-list-item.jade @@ -1,2 +1,2 @@ -.list-group-item +div div(data-hook='doc-subview') diff --git a/scout-ui/src/document-view/document-list.jade b/scout-ui/src/document-view/document-list.jade index 64f0255d497..ec56731d40f 100644 --- a/scout-ui/src/document-view/document-list.jade +++ b/scout-ui/src/document-view/document-list.jade @@ -1 +1 @@ -.list-group(data-hook='documents-container') +div(data-hook='documents-container') diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade index 50efd2bcfa2..d9c52de596e 100644 --- a/scout-ui/src/home/collection.jade +++ b/scout-ui/src/home/collection.jade @@ -11,7 +11,10 @@ .column-container .column.main div(data-hook='fields-subview') + .splitter + button.btn.btn-link.splitter-button + i.fa.fa-caret-left + | + i.fa.fa-file-text-o .column.side - .splitter - i.fa.fa-lg.fa-rotate-90.fa-sort div(data-hook='documents-subview') diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index 13e52bbe756..aa01e1afa26 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -86,7 +86,6 @@ } } .column-container { - padding-right: 20px; display: flex; overflow: hidden; height: 100vh; @@ -103,6 +102,7 @@ -webkit-overflow-scrolling: touch; -ms-overflow-style: none; position: relative; + transition: width 250ms ease; } .main { @@ -114,11 +114,28 @@ width: 350px; font-family: @font-family-monospace; font-size: 11px; + border-left: 2px solid @gray7; + right: -12px; } .splitter { width: 20px; height: 20px; + position: relative; + right: 20px; + } + .splitter-button { + outline: none; + color: @gray1; + text-decoration: none; + + &:hover { + text-decoration: none; + } + &:active { + outline: none; + color: @green2; + } } } From a83c873d88d17fe766e395bf7b599f7bdc13e8b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Thu, 2 Jul 2015 12:35:39 -0400 Subject: [PATCH 2/5] with help from lucas, updated sidebar open,close logic to only switch a CSS class --- scout-ui/src/home/collection.jade | 6 +++++- scout-ui/src/home/collection.js | 17 ++++------------- scout-ui/src/home/index.less | 6 +++++- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade index d9c52de596e..e39948691a7 100644 --- a/scout-ui/src/home/collection.jade +++ b/scout-ui/src/home/collection.jade @@ -16,5 +16,9 @@ i.fa.fa-caret-left | i.fa.fa-file-text-o - .column.side + button.btn.btn-link.splitter-button.hidden + i.fa.fa-file-text-o + | + i.fa.fa-caret-right + .column.side(data-hook='collection-side') div(data-hook='documents-subview') diff --git a/scout-ui/src/home/collection.js b/scout-ui/src/home/collection.js index d318e222910..63b987a1fe2 100644 --- a/scout-ui/src/home/collection.js +++ b/scout-ui/src/home/collection.js @@ -17,14 +17,6 @@ module.exports = AmpersandView.extend({ default: false } }, - derived: { - sidebarWidth: { - deps: ['open'], - fn: function() { - return this.open ? 400 : 0; - } - } - }, events: { 'click .splitter': 'onSplitterClick', }, @@ -32,11 +24,10 @@ module.exports = AmpersandView.extend({ 'model._id': { hook: 'name' }, - 'sidebarWidth': { - type: function(el, value) { - $(el).width(value); - }, - selector: '.side' + 'open': { + type: 'booleanClass', + yes: 'is-open', + hook: 'collection-side' } }, children: { diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index aa01e1afa26..f2ca47ec5a0 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -111,11 +111,15 @@ } .side { - width: 350px; + width: 0; font-family: @font-family-monospace; font-size: 11px; border-left: 2px solid @gray7; right: -12px; + + &.is-open { + width: 400px; + } } .splitter { From 1b422190d3d9576b4fac13d37cf88b06f9f0e75b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Thu, 2 Jul 2015 16:49:29 -0400 Subject: [PATCH 3/5] improvements to sidebar open-close interaction, changed to percent width for sidebar --- scout-ui/src/home/collection.jade | 8 +++---- scout-ui/src/home/collection.js | 4 ++-- scout-ui/src/home/index.less | 25 ++++++++++++++++----- scout-ui/src/object-tree/index.less | 3 +++ scout-ui/src/object-tree/jsobject-view.jade | 2 +- 5 files changed, 30 insertions(+), 12 deletions(-) diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade index e39948691a7..5eddf453b96 100644 --- a/scout-ui/src/home/collection.jade +++ b/scout-ui/src/home/collection.jade @@ -8,17 +8,17 @@ .col-md-6 div(data-hook='stats-subview') div(data-hook='refine-bar') - .column-container + .column-container(data-hook='json-sidebar-toggle-class') .column.main div(data-hook='fields-subview') .splitter - button.btn.btn-link.splitter-button + button.btn.btn-link.splitter-button.splitter-button-open i.fa.fa-caret-left | i.fa.fa-file-text-o - button.btn.btn-link.splitter-button.hidden + button.btn.btn-link.splitter-button.splitter-button-close i.fa.fa-file-text-o | i.fa.fa-caret-right - .column.side(data-hook='collection-side') + .column.side div(data-hook='documents-subview') diff --git a/scout-ui/src/home/collection.js b/scout-ui/src/home/collection.js index 70c02b95569..33e897201e3 100644 --- a/scout-ui/src/home/collection.js +++ b/scout-ui/src/home/collection.js @@ -29,8 +29,8 @@ module.exports = AmpersandView.extend({ }, 'open': { type: 'booleanClass', - yes: 'is-open', - hook: 'collection-side' + yes: 'sidebar-open', + hook: 'json-sidebar-toggle-class' } }, children: { diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less index f2ca47ec5a0..6970399cdc5 100644 --- a/scout-ui/src/home/index.less +++ b/scout-ui/src/home/index.less @@ -116,17 +116,15 @@ font-size: 11px; border-left: 2px solid @gray7; right: -12px; - - &.is-open { - width: 400px; - } + top: 30px; } .splitter { width: 20px; height: 20px; position: relative; - right: 20px; + right: 10px; + transition: right 250ms ease; } .splitter-button { outline: none; @@ -141,5 +139,22 @@ color: @green2; } } + .splitter-button-close { + display: none; + } + .column-container.sidebar-open { + .side { + width: 33%; + } + .splitter { + right: -15px; + } + .splitter-button-open { + display: none; + } + .splitter-button-close { + display: inline-block; + } + } } diff --git a/scout-ui/src/object-tree/index.less b/scout-ui/src/object-tree/index.less index 69aa2c96d09..6e8adcb57f8 100644 --- a/scout-ui/src/object-tree/index.less +++ b/scout-ui/src/object-tree/index.less @@ -22,6 +22,9 @@ font-family: @font-family-monospace; font-size: 11px; + padding-bottom: 10px; + margin-bottom: 10px; + border-bottom: 1px solid @gray7; .jsobject { margin-left: 8px; diff --git a/scout-ui/src/object-tree/jsobject-view.jade b/scout-ui/src/object-tree/jsobject-view.jade index 9027e78e1db..d76da16c099 100644 --- a/scout-ui/src/object-tree/jsobject-view.jade +++ b/scout-ui/src/object-tree/jsobject-view.jade @@ -1,2 +1,2 @@ -.jsobject +.jsobject.clearfix div(data-hook='members-container') From cff38ab7f744a964c6b2445d88a8925df3403e39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Thu, 2 Jul 2015 17:22:05 -0400 Subject: [PATCH 4/5] started working on truncation, commented CSS because this is going to be harder to solve --- scout-ui/src/object-tree/index.less | 9 +++++++++ scout-ui/src/object-tree/jsprimvalue-view.jade | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/scout-ui/src/object-tree/index.less b/scout-ui/src/object-tree/index.less index 6e8adcb57f8..147357259c5 100644 --- a/scout-ui/src/object-tree/index.less +++ b/scout-ui/src/object-tree/index.less @@ -66,3 +66,12 @@ span.caret-placeholder { cursor: pointer; } } + +// .truncate-jsprimvalue { +// max-width: 75%; +// overflow-x: hidden; +// text-overflow: ellipsis; +// display: inline-block; +// white-space: nowrap; +// margin-bottom: -4px; +// } \ No newline at end of file diff --git a/scout-ui/src/object-tree/jsprimvalue-view.jade b/scout-ui/src/object-tree/jsprimvalue-view.jade index 915f4152a4e..6c3f9df9bb9 100644 --- a/scout-ui/src/object-tree/jsprimvalue-view.jade +++ b/scout-ui/src/object-tree/jsprimvalue-view.jade @@ -1,5 +1,5 @@ span.jsprimvalue if (typeof(model.value) === 'string') - | "#{model.value}" + | "#[span(class='truncate-jsprimvalue', title="#{model.value}") #{model.value}]" else - = model.value + | #[span(class='truncate-jsprimvalue', title="#{model.value}") #{model.value}] From d622eee81e9f12a8737417a72a7a989737c1e7eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Sch=C3=A4ffner-Gurney?= Date: Thu, 2 Jul 2015 18:32:11 -0400 Subject: [PATCH 5/5] revert loading indicator to blue --- scout-style/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scout-style/index.less b/scout-style/index.less index c343a65a0ea..8ce3af9d4df 100644 --- a/scout-style/index.less +++ b/scout-style/index.less @@ -86,7 +86,7 @@ html, body{ width: 100%; height: 100%; border-radius: 50%; - background-color: @green2; + background-color: @mc-blue0; opacity: 0.6; position: absolute; top: 0;