From 4fe24111c6eafc58927fcca9d8c46a5b92cc4078 Mon Sep 17 00:00:00 2001 From: Ashley Cai Date: Sat, 10 Jul 2021 00:17:09 -0700 Subject: Standardizing Colors, changing global CSS variables --- src/client/views/DocumentButtonBar.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 09ae14016..e816c52a3 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -7,13 +7,13 @@ $linkGap : 3px; } .documentButtonBar-linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .documentButtonBar-linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -26,7 +26,7 @@ $linkGap : 3px; opacity: 0.9; pointer-events: auto; background-color: $dark-color; - color: $light-color; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -37,7 +37,7 @@ $linkGap : 3px; align-items: center; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -69,7 +69,7 @@ $linkGap : 3px; transition: 0.2s ease all; &:hover { - background-color: $main-accent; + background-color: $medium-gray; } } -- cgit v1.2.3-70-g09d2 From 1a1fc27a66c95c947dc8d2a812484f37586133cd Mon Sep 17 00:00:00 2001 From: Ashley Cai Date: Thu, 15 Jul 2021 12:37:31 -0700 Subject: Starting Color consistency --- src/client/views/AntimodeMenu.scss | 2 +- src/client/views/ContextMenu.scss | 2 +- src/client/views/DocumentButtonBar.scss | 4 +- src/client/views/DocumentDecorations.scss | 8 +-- src/client/views/MainView.scss | 58 +++++++++++----------- src/client/views/PropertiesButtons.scss | 6 +-- src/client/views/StyleProvider.tsx | 31 ++++++------ src/client/views/_nodeModuleOverrides.scss | 2 +- src/client/views/animationtimeline/Timeline.scss | 2 +- .../views/animationtimeline/TimelineMenu.scss | 4 +- src/client/views/animationtimeline/Track.scss | 2 +- .../views/collections/CollectionDockingView.scss | 14 +++--- .../views/collections/CollectionLinearView.scss | 4 +- src/client/views/collections/CollectionMenu.scss | 2 +- .../views/collections/CollectionStackingView.scss | 6 +-- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/global/globalCssVariables.scss | 18 ++++--- src/client/views/global/globalEnums.tsx | 17 ++++--- src/client/views/linking/LinkEditor.scss | 2 +- src/client/views/linking/LinkMenuItem.scss | 2 +- src/client/views/nodes/FontIconBox.scss | 13 +++-- src/client/views/search/CheckBox.scss | 2 +- src/client/views/search/IconButton.scss | 2 +- src/client/views/search/IconButton.tsx | 2 +- src/client/views/search/SearchBox.scss | 4 +- src/client/views/search/SelectorContextMenu.scss | 4 +- 26 files changed, 111 insertions(+), 104 deletions(-) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 8670b1747..2bac03af4 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -5,7 +5,7 @@ position: absolute; z-index: 10001; height: $antimodemenu-height; - background: #323232; + background: $dark-gray; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); // border-radius: 0px 6px 6px 6px; z-index: 1001; diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 2590e34c6..795529780 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -137,7 +137,7 @@ .contextMenu-item:hover { transition: all 0.1s ease; - background: $lighter-alt-accent; + background: $light-blue; } .contextMenu-description { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index e816c52a3..2a0b494f5 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -25,7 +25,7 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; color: $white; text-transform: uppercase; letter-spacing: 2px; @@ -64,7 +64,7 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; border: none; transition: 0.2s ease all; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 47a8326bb..1715f35e7 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -286,8 +286,8 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-color; - border: $dark-color 1px solid; + color: $dark-gray; + border: $dark-gray 1px solid; } .linkButton-linker:hover { @@ -302,7 +302,7 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; color: $white; text-transform: uppercase; letter-spacing: 2px; @@ -343,7 +343,7 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; font-size: 14; - background-color: $dark-color; + background-color: $dark-gray; color: $white; text-align: center; cursor: pointer; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index d76458460..07ca0257c 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -56,50 +56,50 @@ touch-action: none; .searchBox-container { - background: lightgray; + background: $light-gray; } } .mainView-container { - color: black; + color: $dark-gray; .lm_title { - background: #cacaca; - color: black; + background: $light-gray; + color: $dark-gray; } } .mainView-container-dark { - color: lightgray; + color: $light-gray; .lm_goldenlayout { - background: dimgray; + background: $medium-gray; } .lm_title { - background: black; + background: $dark-gray; color: unset; } .marquee { - border-color: white; + border-color: $white; } #search-input { - background: lightgray; + background: $light-gray; } .searchBox-container { - background: rgb(45, 45, 45); + background: $dark-gray; } .contextMenu-cont, .contextMenu-item { - background: dimGray; + background: $medium-gray; } .contextMenu-item:hover { - background: gray; + background: $medium-gray; } } @@ -113,7 +113,7 @@ .mainView-propertiesDragger { //background-color: rgb(140, 139, 139); - background-color: lightgrey; + background-color: $light-gray; height: 55px; width: 17px; position: absolute; @@ -163,10 +163,10 @@ flex-direction: column; position: relative; height: 100%; - background: dimgray; + background: $medium-gray; .documentView-node-topmost { - background: lightgrey; + background: $light-gray; } } @@ -174,32 +174,32 @@ right: 0; position: absolute; z-index: 2; - background-color: rgb(159, 159, 159); + background-color: $medium-gray; .editable-title { - background-color: lightgrey; + background-color: $light-gray; } } } .mainView-libraryHandle { - background-color: lightgrey; + background-color: $light-gray; } .mainView-innerContent-dark { .propertiesView { background-color: #252525; input { - background-color: dimgrey; + background-color: $medium-gray; } .propertiesView-sharingTable { - background-color: dimgrey; + background-color: $medium-gray; } .editable-title { - background-color: dimgrey; + background-color: $medium-gray; } .propertiesView-field { - background-color: dimgrey; + background-color: $medium-gray; } } .mainView-propertiesDragger, @@ -209,17 +209,17 @@ } .mainView-container-dark { .contextMenu-cont { - background: dimgrey; - color: white; + background: $medium-gray; + color: $white; input::placeholder { - color:white; + color:$white; } } } .mainView-menuPanel { min-width: var(--menuPanelWidth); - background-color: #121721; + background-color: $dark-gray; .collectionStackingView { scrollbar-width: none; @@ -233,13 +233,13 @@ padding: 7px; padding-left: 7px; width: 100%; - background: black; + background: $dark-gray; .mainView-menuPanel-button-wrap { width: 45px; /* padding: 5px; */ touch-action: none; - background: black; + background: $dark-gray; transform-origin: top left; /* margin-bottom: 5px; */ margin-top: 5px; @@ -247,7 +247,7 @@ border-radius: 8px; &:hover { - background: rgb(61, 61, 61); + background: $black; cursor: pointer; } } diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 4ef7763be..484522bc7 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -24,7 +24,7 @@ $linkGap : 3px; width: 29px; border-radius: 6px; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; color: #fcfbf7; text-transform: uppercase; letter-spacing: 2px; @@ -45,11 +45,11 @@ $linkGap : 3px; } .propertiesButtons-linkButton-empty.toggle-on { background-color: white; - color: $dark-color; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: gray; - color: $dark-color; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-off { color: white; diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 9e61351c4..1bf47f6ac 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,4 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Colors } from './global/globalEnums'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; @@ -97,14 +98,14 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "color"], StrCast(doc?._color)); if (docColor) return docColor; - const backColor = backgroundCol();// || (darkScheme() ? "black" : "white"); + const backColor = backgroundCol(); if (!backColor) return undefined; const nonAlphaColor = backColor.startsWith("#") ? (backColor as string).substring(0, 7) : backColor.startsWith("rgba") ? backColor.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : backColor const col = Color(nonAlphaColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); - if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return "black"; - return "white"; + if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY; + return Colors.WHITE; case StyleProp.Hidden: return BoolCast(doc?._hidden); case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"]); case StyleProp.TitleHeight: return 15; @@ -114,30 +115,30 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rgba(0,0,0,0.4)" : "")); - if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; + if (MainView.Instance.LastButton === doc) return darkScheme() ? Colors.MEDIUM_GRAY : Colors.LIGHT_GRAY; switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; - case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break; - case DocumentType.FONTICON: docColor = docColor || "black"; break; - case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break; - case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break; + case DocumentType.PRES: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break; + case DocumentType.FONTICON: docColor = docColor || Colors.DARK_GRAY; break; + case DocumentType.RTF: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; + case DocumentType.FILTER: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : "rgba(105, 105, 105, 0.432)"); break; case DocumentType.INK: docColor = doc?.isInkMask ? "rgba(0,0,0,0.7)" : undefined; break; case DocumentType.SLIDER: break; case DocumentType.EQUATION: docColor = docColor || "transparent"; break; case DocumentType.LABEL: docColor = docColor || (doc.annotationOn !== undefined ? "rgba(128, 128, 128, 0.18)" : undefined); break; - case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; - case DocumentType.LINKANCHOR: docColor = isAnchor ? "lightblue" : "transparent"; break; + case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; + case DocumentType.LINKANCHOR: docColor = isAnchor ? Colors.LIGHT_BLUE : "transparent"; break; case DocumentType.LINK: docColor = docColor || "transparent"; break; case DocumentType.IMG: case DocumentType.WEB: case DocumentType.PDF: case DocumentType.SCREENSHOT: - case DocumentType.VID: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; + case DocumentType.VID: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; case DocumentType.COL: if (StrCast(Doc.LayoutField(doc)).includes("SliderBox")) break; - docColor = docColor ? docColor : + docColor = docColor ? Colors.DARK_GRAY : doc?._isGroup ? "#00000004" : // very faint highlight to show bounds of group - (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : // system docs (seen in treeView) get a grayish background + (Doc.IsSystem(doc) ? (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY) : // system docs (seen in treeView) get a grayish background isBackground() ? "cyan" : // ?? is there a good default for a background collection doc.annotationOn ? "#00000015" : // faint interior for collections on PDFs, images, etc StrCast((props?.renderDepth || 0) > 0 ? @@ -145,7 +146,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Optspan { - background: $dark-color; + background: $dark-gray; color: $white; border-radius: 18px; margin-right: 6px; @@ -63,7 +63,7 @@ >label { margin-top: "auto"; margin-bottom: "auto"; - background: $dark-color; + background: $dark-gray; color: $white; display: inline-block; border-radius: 18px; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 328d7c081..7e507d6b5 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -411,7 +411,7 @@ } .switchToText:hover { - color: $dark-color; + color: $dark-gray; } } diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index f103d9581..4b123c8b6 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -96,7 +96,7 @@ height: 2vw; width: 100%; font-family: $sans-serif; - background: $dark-color; + background: $dark-gray; color: $white; } @@ -184,7 +184,7 @@ // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input { - color: $dark-color; + color: $dark-gray; } .editableView-input:hover, @@ -205,7 +205,7 @@ display: flex; align-items: center; justify-content: center; - color: $dark-color; + color: $dark-gray; .editableView-container-editing-oneLine, .editableView-container-editing { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 30f8e0112..7aa8dfd56 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -480,7 +480,7 @@ export class CollectionStackingView extends CollectionSubView{ hoverStyle = { opacity: 1, backgroundColor: "rgb(128, 128, 128)" - //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent + //backgroundColor: "rgb(178, 206, 248)" //$medium-blue }; render() { diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 8d6bc86cb..6a2fe6f19 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -20,7 +20,7 @@ display: flex; justify-content: center; align-items: center; - background-color: $dark-color; + background-color: $dark-gray; .searchBox-lozenges { position: absolute; @@ -86,7 +86,7 @@ &.searchBox-input { margin:5px; border-radius:20px; - border:$dark-color; + border:$dark-gray; display: block; width: 130px; -webkit-transition: width 0.4s; diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index 438b6a0c2..a114f679c 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,7 +1,7 @@ @import "../global/globalCssVariables"; .parents { - background: $lighter-alt-accent; + background: $light-blue; padding: 10px; // width: 300px; @@ -10,7 +10,7 @@ } .collection { - border-color: $darker-alt-accent; + border-color: $medium-blue; border-bottom-style: solid; } } \ No newline at end of file -- 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/DocumentButtonBar.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 From 41ccf50f2b551edd6827c9fd6296b9ff87a65915 Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 15:32:37 -0400 Subject: linking updates and tab updates --- deploy/index.html | 105 +++++++++++++++++++++++- src/client/views/DocumentButtonBar.scss | 11 ++- src/client/views/DocumentDecorations.scss | 4 +- src/client/views/collections/TabDocView.tsx | 7 +- src/client/views/nodes/DocumentLinksButton.scss | 15 +++- src/client/views/nodes/DocumentLinksButton.tsx | 83 ++++++++++--------- src/client/views/nodes/DocumentView.scss | 2 +- src/client/views/topbar/TopBar.scss | 10 ++- src/client/views/topbar/TopBar.tsx | 2 +- 9 files changed, 182 insertions(+), 57 deletions(-) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/deploy/index.html b/deploy/index.html index d96215391..c32aff638 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -11,8 +11,109 @@ - - + + diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 621c2bf1b..157f3a4f2 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -50,10 +50,13 @@ $linkGap : 3px; } .documentButtonBar-button { - pointer-events: auto; - padding-right: 5px; - width: 25px; - height: 25px; + cursor: pointer; + display: flex; + width: 30px; + height: 30px; + align-content: center; + justify-content: center; + align-items: center; } .documentButtonBar-linker { diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 1715f35e7..952d8d150 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -263,7 +263,6 @@ $linkGap : 3px; } .link-button-container { - padding: $linkGap; border-radius: 10px; width: max-content; height: auto; @@ -271,6 +270,9 @@ $linkGap : 3px; flex-direction: row; z-index: 998; position: absolute; + justify-content: center; + align-items: center; + gap: 5px; background: $medium-gray; } diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index d82810652..a24f1eb7a 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -169,7 +169,12 @@ export class TabDocView extends React.Component { })); //attach the selection doc buttons menu to the drag handle - const stack = tab.contentItem.parent; + const stack: HTMLDivElement = tab.contentItem.parent; + const header: HTMLDivElement = tab; + console.log("Stack: " + stack.id, stack.className) + stack.onscroll = action((e: any) => { + console.log('scrolling...') + }) const moreInfoDrag = document.createElement("div"); moreInfoDrag.className = "lm_iconWrap"; tab._disposers.buttonDisposer = reaction(() => this.view, view => diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 3809319d7..9bab72d55 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,6 +1,16 @@ @import "../global/globalCssVariables.scss"; +.documentLinksButton-menu { + width: 100%; + height: 100%; + position: relative; + display: flex; + align-content: center; + justify-content: center; + align-items: center; +} + .documentLinksButton-cont { min-width: 20; min-height: 20; @@ -10,8 +20,8 @@ .documentLinksButton, .documentLinksButton-endLink, .documentLinksButton-startLink { - height: 20px; - width: 20px; + height: 25px; + width: 25px; position: absolute; border-radius: 50%; opacity: 0.9; @@ -38,7 +48,6 @@ font-weight: bold; &:hover { - background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index ed0e2d1ad..cec06d2d4 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -252,49 +252,50 @@ export class DocumentLinksButton extends React.Component; - return
-
- {this.props.InMenu ? - this.props.StartLink ? - - : link - : Array.from(this.filteredLinks).length} -
- {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node -
+
DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> - {this.props.StartLink ? - - : link} -
- : (null) - } - {DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again -
- {this.props.StartLink ? - - : link} + backgroundColor: Colors.LIGHT_BLUE, + color: Colors.BLACK, + width: btnDim, + height: btnDim, + }}> + {Array.from(this.filteredLinks).length}
- : (null) - } -
; +
+ : +
+ {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node +
DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> + {this.props.StartLink ? + + : link} +
+ : (null) + } + { + this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again +
+ {this.props.StartLink ? + + : link} +
+ : (null)} +
+ ) } render() { diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 281f25fb3..7f164ca48 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -147,7 +147,7 @@ .documentView-titleWrapper, .documentView-titleWrapper-hover { overflow: hidden; - color: gray; + color: $black; transform-origin: top left; top: 0; width: 100%; diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index adb968948..ebdf030e7 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -58,8 +58,8 @@ .topbar-dashSelect { border: none; - background-color: transparent; - color: black; + background-color: $dark-gray; + color: $white; font-family: 'Roboto'; font-size: 17; font-weight: 500; @@ -78,6 +78,7 @@ display: flex; justify-content: flex-end; gap: 5px; + margin-right: 5px; } .topbar-left { @@ -89,6 +90,10 @@ width: 450; gap: 5px; + .topBar-icon:hover { + background-color: $logout-red; + } + .topbar-lozenge-user, .topbar-lozenge { height: 23; @@ -99,7 +104,6 @@ padding: 4px; align-self: center; margin-left: 7px; - margin-right: 7px; display: flex; align-items: center; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 6e4d4fe15..bd9935333 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -29,7 +29,7 @@ export class TopBar extends React.Component { {`${Doc.CurrentUserEmail}`}
window.location.assign(Utils.prepend("/logout"))}> - {"Logoff"} + {"Sign out"}
-- cgit v1.2.3-70-g09d2 From d3a7e378e26466b911733f76addfe9fc61a689df Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 18:17:35 -0400 Subject: fixed linking issues with dragging & updating linking UI --- src/client/views/DocumentButtonBar.scss | 21 +++++ src/client/views/DocumentButtonBar.tsx | 26 +++--- src/client/views/DocumentDecorations.scss | 2 +- .../views/collections/CollectionLinearView.scss | 8 +- src/client/views/global/globalCssVariables.scss | 2 +- src/client/views/nodes/DocumentLinksButton.scss | 38 ++++++-- src/client/views/nodes/DocumentLinksButton.tsx | 102 ++++++++++----------- src/client/views/topbar/TopBar.scss | 3 +- src/client/views/topbar/TopBar.tsx | 1 - 9 files changed, 119 insertions(+), 84 deletions(-) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 157f3a4f2..171e7134f 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -59,6 +59,7 @@ $linkGap : 3px; align-items: center; } +// depracated (now use .documentButtonBar-icon) for standard buttons .documentButtonBar-linker { height: 20px; width: 20px; @@ -74,6 +75,26 @@ $linkGap : 3px; } } +.documentButtonBar-icon { + height: 80%; + width: 80%; + font-size: 100%; + text-align: center; + border-radius: 50%; + pointer-events: auto; + background-color: $dark-gray; + border: none; + transition: 0.2s ease all; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + + &:hover { + background-color: $black; + } +} + .documentButtonBar-linker:hover { cursor: pointer; transform: scale(1.05); diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 1e5380971..df1e6899d 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -110,7 +110,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}>
{ await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); @@ -139,7 +139,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> -
{ if (e.altKey) { @@ -188,8 +188,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) : {"follow primary link on click"}
}> -
this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false, false)))}>
@@ -200,7 +200,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) : {SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}
}> -
this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}> @@ -243,7 +243,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const presPinWithViewIcon = ; const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{"Pin with current view"}
}> -
this.pinWithView(targetDoc)}> +
this.pinWithView(targetDoc)}> {presPinWithViewIcon}
; @@ -253,8 +253,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get shareButton() { const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{"Open Sharing Manager"}
}> -
SharingManager.Instance.open(this.view0, targetDoc)}> - +
SharingManager.Instance.open(this.view0, targetDoc)}> +
; } @@ -262,8 +262,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get menuButton() { const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{`Open Context Menu`}
}> -
this.openContextMenu(e)}> - +
this.openContextMenu(e)}> +
; } @@ -271,9 +271,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get moreButton() { const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{`${CurrentUserUtils.propertiesWidth > 0 ? "Close" : "Open"} Properties Panel`}
}> -
+
CurrentUserUtils.propertiesWidth = CurrentUserUtils.propertiesWidth > 0 ? 0 : 250)}> -
; } @@ -286,7 +286,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV dv).map(dv => dv!.props.Document)} suggestWithFunction /> /* tfs: @bcz This might need to be the data document? */}>
e.stopPropagation()} > - {} + {}
; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 952d8d150..316f63240 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -336,7 +336,7 @@ $linkGap : 3px; } .documentdecorations-icon { - margin-top: 3px; + margin: 0px; } .templating-button, .docDecs-tagButton { diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 86610ac20..913a65774 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -20,7 +20,7 @@ } .bottomPopup-background { - background: $light-blue; + background: $medium-blue; display: flex; height: 35; transform: translate3d(6px, 0px, 0px); @@ -30,7 +30,7 @@ } .bottomPopup-text { - color: black; + color: $white; display: inline; white-space: nowrap; padding-left: 8px; @@ -45,7 +45,7 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: #efefef; + background-color: $light-gray; border-radius: 3px; color: black; margin-right: 5px; @@ -58,7 +58,7 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: #f3b6b6; + background-color: $close-red; border-radius: 3px; color: black; } diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index a9f33c4da..1b881ba43 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -11,7 +11,7 @@ $medium-blue: #4476F7; $pink: #E0217D; $yellow: #F5D747; -$logout-red: #ca4444; +$close-red: #e48282; $drop-shadow: "#32323215"; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 9bab72d55..b37b68249 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -44,25 +44,43 @@ } .documentLinksButton { - background-color: black; + background-color: $dark-gray; + color: $white; font-weight: bold; + width: 80%; + height: 80%; + font-size: 100%; + transition: 0.2s ease all; &:hover { - transform: scale(1.05); - cursor: pointer; + background-color: $black; + } +} + +.documentLinksButton.startLink { + background-color: $medium-blue; + color: $white; + font-weight: bold; + width: 80%; + height: 80%; + font-size: 100%; + transition: 0.2s ease all; + + &:hover { + background-color: $black; } } .documentLinksButton-endLink { border: $medium-blue 2px dashed; color: $medium-blue; + background-color: none !important; + width: 80%; + height: 80%; + font-size: 100%; + transition: 0.2s ease all; + &:hover { - background: $light-gray; - transform: scale(1.05); - cursor: pointer; + background-color: $light-blue; } -} - -.documentLinksButton-startLink { - background-color: $medium-blue; } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index cec06d2d4..482f551b5 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -68,6 +68,40 @@ export class DocumentLinksButton extends React.Component { + setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { + if (doubleTap) { + const rootDoc = this.props.View.rootDoc; + const docid = Doc.CurrentUserEmail + Doc.GetProto(rootDoc)[Id] + "-pivotish"; + DocServer.GetRefField(docid).then(async docx => { + const rootAlias = () => { + const rootAlias = Doc.MakeAlias(rootDoc); + rootAlias.x = rootAlias.y = 0; + return rootAlias; + }; + let wid = rootDoc[WidthSym](); + const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid); + const docs = await DocListCastAsync(Doc.GetProto(target).data); + if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target); + DocListCast(rootDoc.links).forEach(link => { + const other = LinkManager.getOppositeAnchor(link, rootDoc); + const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other; + if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) { + const alias = Doc.MakeAlias(otherdoc); + alias.x = wid; + alias.y = 0; + alias._lockedPosition = false; + wid += otherdoc[WidthSym](); + Doc.AddDocToList(Doc.GetProto(target), "data", alias); + } + }); + LightboxView.SetLightboxDoc(target); + }); + } + else DocumentLinksButton.LinkEditorDocView = this.props.View; + })); + } + @undoBatch onLinkButtonDown = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { @@ -80,37 +114,7 @@ export class DocumentLinksButton extends React.Component { - const rootAlias = () => { - const rootAlias = Doc.MakeAlias(rootDoc); - rootAlias.x = rootAlias.y = 0; - return rootAlias; - }; - let wid = rootDoc[WidthSym](); - const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid); - const docs = await DocListCastAsync(Doc.GetProto(target).data); - if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target); - DocListCast(rootDoc.links).forEach(link => { - const other = LinkManager.getOppositeAnchor(link, rootDoc); - const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other; - if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) { - const alias = Doc.MakeAlias(otherdoc); - alias.x = wid; - alias.y = 0; - alias._lockedPosition = false; - wid += otherdoc[WidthSym](); - Doc.AddDocToList(Doc.GetProto(target), "data", alias); - } - }); - LightboxView.SetLightboxDoc(target); - }); - } - else DocumentLinksButton.LinkEditorDocView = this.props.View; - } + }; })); } @@ -126,7 +130,6 @@ export class DocumentLinksButton extends React.Component Doc.BrushDoc(this.props.View.Document)); } else if (!this.props.InMenu) { DocumentLinksButton.LinkEditorDocView = this.props.View; @@ -247,17 +250,19 @@ export class DocumentLinksButton extends React.Component; - + const isActive = (DocumentLinksButton.StartLink === this.props.View.props.Document) && this.props.StartLink; return (!this.props.InMenu ? -
: -
+
{this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node
DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> - {this.props.StartLink ? - - : link} +
: (null) } { - this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again -
- {this.props.StartLink ? - - : link} + this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again +
+
- : (null)} + : + (null) + }
) } diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index ebdf030e7..ac6ec9b30 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -23,6 +23,7 @@ .topBar-icon { cursor: pointer; font-size: 12px; + font-family: 'Roboto'; width: fit-content; display: flex; justify-content: center; @@ -91,7 +92,7 @@ gap: 5px; .topBar-icon:hover { - background-color: $logout-red; + background-color: $close-red; } .topbar-lozenge-user, diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index bd9935333..05edb975c 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -12,7 +12,6 @@ import { Borders, Colors } from "../global/globalEnums"; import "./TopBar.scss"; /** - * REACT TYPE: FUNCTIONAL * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. */ -- cgit v1.2.3-70-g09d2 From b1361eec6d3f554d4927931c339b5c169b9a54a7 Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 22:23:55 -0400 Subject: mini css changes --- src/client/views/DocumentButtonBar.scss | 1 - src/client/views/topbar/TopBar.scss | 9 ++++++--- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 171e7134f..a112f4745 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -46,7 +46,6 @@ $linkGap : 3px; .documentButtonBar { display: flex; flex-direction: row; - gap: 3px; } .documentButtonBar-button { diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index ac6ec9b30..164cc29cd 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -50,12 +50,15 @@ align-items: center; gap: 5px; + .topbar-dashboards { + display: flex; + flex-direction: row; + } + .topbar-lozenge-dashboard { display: flex; - .topbar-dashboards { - display: inline-flex; - } + .topbar-dashSelect { border: none; -- cgit v1.2.3-70-g09d2