From b33e45f1f839b3c6eaf1076e605abacd1bc6883c Mon Sep 17 00:00:00 2001 From: geireann Date: Thu, 29 Jul 2021 15:35:39 -0400 Subject: lots of updates! --- .../views/collections/CollectionDockingView.scss | 98 ++++++++++++++++------ 1 file changed, 72 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.scss') diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index a054f0ae1..b8180fe24 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,40 +1,46 @@ -@import "../../views/global/globalCssVariables.scss"; +@import "../global/globalCssVariables.scss"; .lm_title { - margin-top: 3px; - border-radius: 5px; - border: solid 0px dimgray; - border-width: 2px 2px 0px; - height: 20px; - transform: translate(0px, -3px); + -webkit-appearance: none; + display: inline-block; + align-self: center; + align-items: center; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + background: transparent; + border: solid 0px transparent; cursor: grab; + color: $black; } .lm_title.focus-visible { + -webkit-appearance: none; cursor: text; } .lm_title_wrap { overflow: hidden; - height: 19px; - margin-top: -2px; - display: inline-block; + align-items: center; + align-self: center; + background: transparent; + width: max-content; + height: 100%; + display: flex; } .lm_active .lm_title { - border: solid 1px lightgray; -} - -.lm_header .lm_tab .lm_close_tab { - position: absolute; - text-align: center; + -webkit-appearance: none; + // font-weight: 700; } .lm_header .lm_tab { - padding-right: 20px; - margin-top: -1px; - border-bottom: 1px black; + padding: 0px; + opacity: 0.7; + box-shadow: none; + height: 19px; + // border-bottom: 1px black; .collectionDockingView-gear { display: none; @@ -42,9 +48,13 @@ } .lm_header .lm_tab.lm_active { - padding-right: 20px; - margin-top: 1px; - border-bottom: unset; + padding: 0; + opacity: 1; + margin: 0; + box-shadow: none; + height: 22px; + margin-right: 2px; + // border-bottom: unset; .collectionDockingView-gear { display: inline-block; @@ -55,6 +65,41 @@ display: inline; } +.lm_drag_tab { + padding: 0; + width: 15px !important; + height: 15px !important; + position: relative !important; + display: inline-flex !important; + align-items: center; + top: 0 !important; + right: unset !important; + left: 0 !important; +} + +.lm_close_tab { + padding: 0; + align-self: center; + margin-right: 5px; + background-color: black; + border-radius: 3px; + opacity: 1 !important; + width: 15px !important; + height: 15px !important; + position: relative !important; + display: inline-flex !important; + align-items: center; + top: 0 !important; + right: unset !important; + left: 0 !important; +} + +.lm_tab, +.lm_tab_active { + display: flex !important; + padding-right: 0 !important; +} + .collectiondockingview-container { width: 100%; height: 100%; @@ -82,16 +127,17 @@ } .lm_content { - background: white; + background: $white; } .lm_controls>li { - opacity: 0.6; - transform: scale(1.2); + opacity: 1; + transform: scale(1); } .lm_controls .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAAAAABHICnvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAHdElNRQfkCBsXMgbrEyzaAAAAT0lEQVQY02NgIAcIu8tgEW3/u4IDQ5B14/8LQlhFhckVFfCJjIyIOfP/QWpEZGSQJFS05s9fIPj3/z+YmseCTxS7CZS7DI+PsYcOjpAkDAA6H0KZxzDzlgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wOC0yN1QyMzo1MDowNi0wNDowMDvgVpQAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDgtMjdUMjM6NTA6MDYtMDQ6MDBKve4oAAAAAElFTkSuQmCC) + transform: rotate(45deg); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); } .lm_maximised .lm_controls .lm_maximise { -- cgit v1.2.3-70-g09d2 From fcc75a92643f35955a1e0bbe829e96b0e76c8a4e Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 08:09:45 -0400 Subject: updates ready for sprint (almost) --- src/client/goldenLayout.js | 37 +++++++-------- src/client/views/DocumentButtonBar.scss | 6 +-- src/client/views/_nodeModuleOverrides.scss | 3 +- .../views/collections/CollectionDockingView.scss | 6 +-- src/client/views/global/globalCssVariables.scss | 2 + src/client/views/topbar/TopBar.scss | 52 +++++++++++----------- src/client/views/topbar/TopBar.tsx | 34 +++++++------- 7 files changed, 69 insertions(+), 71 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.scss') diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js index b118a5f44..238f1ac0a 100644 --- a/src/client/goldenLayout.js +++ b/src/client/goldenLayout.js @@ -1571,11 +1571,11 @@ tabControlOffset: 10 }, dimensions: { - borderWidth: 5, + borderWidth: 3, borderGrabWidth: 5, minItemHeight: 10, - minItemWidth: 10, - headerHeight: 22, + minItemWidth: 20, + headerHeight: 27, dragProxyWidth: 300, dragProxyHeight: 200 }, @@ -2477,20 +2477,21 @@ } } - if (this.layoutManager.config.settings.reorderOnTabMenuClick) { - /** - * If the tab selected was in the dropdown, move everything down one to make way for this one to be the first. - * This will make sure the most used tabs stay visible. - */ - if (this._lastVisibleTabIndex !== -1 && this.parent.config.activeItemIndex > this._lastVisibleTabIndex) { - activeTab = this.tabs[this.parent.config.activeItemIndex]; - for (j = this.parent.config.activeItemIndex; j > 0; j--) { - this.tabs[j] = this.tabs[j - 1]; - } - this.tabs[0] = activeTab; - this.parent.config.activeItemIndex = 0; - } - } + // glr: removed for new tab manager + // if (this.layoutManager.config.settings.reorderOnTabMenuClick) { + // /** + // * If the tab selected was in the dropdown, move everything down one to make way for this one to be the first. + // * This will make sure the most used tabs stay visible. + // */ + // if (this._lastVisibleTabIndex !== -1 && this.parent.config.activeItemIndex > this._lastVisibleTabIndex) { + // activeTab = this.tabs[this.parent.config.activeItemIndex]; + // for (j = this.parent.config.activeItemIndex; j > 0; j--) { + // this.tabs[j] = this.tabs[j - 1]; + // } + // this.tabs[0] = activeTab; + // this.parent.config.activeItemIndex = 0; + // } + // } this._updateTabSizes(); this.parent.emitBubblingEvent('stateChanged'); @@ -4872,7 +4873,7 @@ this.layoutManager.dropTargetIndicator.highlightArea({ x1: headerOffset.left, x2: headerOffset.left + 100, - y1: headerOffset.top + this.header.element.height() - 20, + y1: headerOffset.top + this.header.element.height() - 25, y2: headerOffset.top + this.header.element.height() }); diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 2a0b494f5..621c2bf1b 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -44,18 +44,16 @@ $linkGap : 3px; } .documentButtonBar { - margin-top: $linkGap; - grid-column: 1/4; - width: max-content; - height: auto; display: flex; flex-direction: row; + gap: 3px; } .documentButtonBar-button { pointer-events: auto; padding-right: 5px; width: 25px; + height: 25px; } .documentButtonBar-linker { diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss index 140be2140..fd0ac9d5c 100644 --- a/src/client/views/_nodeModuleOverrides.scss +++ b/src/client/views/_nodeModuleOverrides.scss @@ -5,6 +5,7 @@ div .lm_header { background: $dark-gray; overflow: hidden; + height: 27px !important; } /* Width */ @@ -62,7 +63,7 @@ div .lm_header { border-radius: 5px; display: flex; justify-content: space-evenly; - height: 18px; + height: 23px; width: 65px; } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index b8180fe24..77e7b86ea 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -39,7 +39,7 @@ padding: 0px; opacity: 0.7; box-shadow: none; - height: 19px; + height: 24px; // border-bottom: 1px black; .collectionDockingView-gear { @@ -52,7 +52,7 @@ opacity: 1; margin: 0; box-shadow: none; - height: 22px; + height: 27px; margin-right: 2px; // border-bottom: unset; @@ -357,8 +357,6 @@ background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center; } - .flexlayout__popup_menu {} - .flexlayout__popup_menu_item { padding: 2px 10px 2px 10px; color: #ddd; diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index 72adc171b..a9f33c4da 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -11,6 +11,8 @@ $medium-blue: #4476F7; $pink: #E0217D; $yellow: #F5D747; +$logout-red: #ca4444; + $drop-shadow: "#32323215"; //padding diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index ce6636080..adb968948 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -20,11 +20,34 @@ align-items: center; background-color: $dark-gray; + .topBar-icon { + cursor: pointer; + font-size: 12px; + width: fit-content; + display: flex; + justify-content: center; + gap: 4px; + align-items: center; + justify-self: center; + align-self: center; + border-radius: 5px; + padding: 5px; + transition: linear 0.1s; + color: $black; + background-color: $light-gray; + } + + .topBar-icon:hover { + background-color: $light-blue; + } + + .topbar-center { grid-column: 2; display: inline-flex; justify-content: center; align-items: center; + gap: 5px; .topbar-lozenge-dashboard { display: flex; @@ -48,37 +71,13 @@ } } - .topBar-icon { - color: black; - cursor: pointer; - font-size: 15px; - height: 30; - width: 30; - display: flex; - justify-content: center; - align-items: center; - margin-right: 5px; - justify-self: center; - align-self: center; - border-radius: 100%; - transition: linear 0.1s; - background-color: #92adb900; - } - - .topBar-icon:hover { - background-color: rgba(0, 0, 0, 0.15); - } .topbar-right { grid-column: 3; position: relative; display: flex; justify-content: flex-end; - - - - - + gap: 5px; } .topbar-left { @@ -88,6 +87,7 @@ position: relative; display: flex; width: 450; + gap: 5px; .topbar-lozenge-user, .topbar-lozenge { @@ -98,10 +98,10 @@ font-weight: 400; padding: 4px; align-self: center; + margin-left: 7px; margin-right: 7px; display: flex; align-items: center; - border: white 1px solid; .topbar-dashSelect { border: none; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 02b597078..6e4d4fe15 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -27,9 +27,9 @@ export class TopBar extends React.Component {
{`${Doc.CurrentUserEmail}`} -
window.location.assign(Utils.prepend("/logout"))}> - Logoff -
+
+
window.location.assign(Utils.prepend("/logout"))}> + {"Logoff"}
@@ -39,26 +39,24 @@ export class TopBar extends React.Component { style={{ color: Colors.WHITE }}> {myDashboards.map((dash, i) => )} -
-
CurrentUserUtils.createNewDashboard(Doc.UserDoc()))} - style={{ color: Colors.WHITE }}> - {"New"} -
-
CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))} - style={{ color: Colors.WHITE }}> - {"Snapshot"} -
+
+
+
CurrentUserUtils.createNewDashboard(Doc.UserDoc()))} + > + {"New"}
+ {Doc.UserDoc().noviceMode ? (null) :
CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))} + > + {"Snapshot"} +
}
-
- +
+ {"Help"}
-
SettingsManager.Instance.open()} - style={{ color: Colors.WHITE }}> - +
SettingsManager.Instance.open()}> + {"Settings"}
-- cgit v1.2.3-70-g09d2