From 83323cccd039c16ef1ec55c388e5fc075d69b487 Mon Sep 17 00:00:00 2001 From: Jenny Yu Date: Wed, 8 Jun 2022 23:13:31 -0700 Subject: feat: styling top bar(with share button) --- src/client/views/global/globalCssVariables.scss | 2 +- src/client/views/topbar/TopBar.scss | 224 ++++++++++++------------ src/client/views/topbar/TopBar.tsx | 42 +++-- 3 files changed, 143 insertions(+), 125 deletions(-) (limited to 'src') diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index d41f9e06a..ce9cc05d6 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -38,7 +38,7 @@ $small-text: 9px; // misc values $border-radius: 0.3em; $search-thumnail-size: 130; -$topbar-height: 50px; +$topbar-height: 55px; $antimodemenu-height: 36px; // dragged items diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index 9a8e7c2e5..6662386d4 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -1,10 +1,9 @@ @import "../global/globalCssVariables"; + .topbar-container { display: flex; flex-direction: column; - width: 100%; - position: relative; font-size: 10px; line-height: 1; overflow-y: auto; @@ -12,6 +11,21 @@ background: $dark-gray; overflow: visible; z-index: 1000; + height: $topbar-height; + background-color: $dark-gray; + + .topbar-inner-container { + display: flex; + flex-direction: row; + position: relative; + display: grid; + grid-auto-columns: 33.3% 33.3% 33.3%; + align-items: center; + + &:first-child { + height: 20px; + } + } .topbar-button-text { color: $white; @@ -47,144 +61,136 @@ font-weight: 500; } - .topbar-bar { - height: $topbar-height; - display: grid; - grid-auto-columns: 33.3% 33.3% 33.3%; + .topbar-center { + grid-column: 2; + display: inline-flex; + justify-content: center; align-items: center; - background-color: $dark-gray; + gap: 5px; - .topbar-center { - grid-column: 2; - display: inline-flex; - justify-content: center; - align-items: center; + .topbar-dashboards { + display: flex; + flex-direction: row; gap: 5px; - - .topbar-dashboards { - display: flex; - flex-direction: row; - gap: 5px; - } } + } - .topbar-right { - grid-column: 3; - position: relative; - display: flex; - justify-content: flex-end; - gap: 5px; - margin-right: 5px; + .topbar-right { + grid-column: 3; + position: relative; + display: flex; + justify-content: flex-end; + gap: 5px; + margin-right: 5px; + } + + .topbar-left { + grid-column: 1; + color: black; + font-family: 'Roboto'; + position: relative; + display: flex; + width: fit-content; + gap: 5px; + + .topBar-icon:hover { + background-color: $close-red; } - .topbar-left { - grid-column: 1; - color: black; + .topbar-lozenge-user, + .topbar-lozenge { + height: 23; + font-size: 12; + color: white; font-family: 'Roboto'; - position: relative; + font-weight: 400; + padding: 4px; + align-self: center; + margin-left: 7px; display: flex; - width: fit-content; - gap: 5px; - - .topBar-icon:hover { - background-color: $close-red; - } + align-items: center; - .topbar-lozenge-user, - .topbar-lozenge { - height: 23; - font-size: 12; - color: white; + .topbar-dashSelect { + border: none; + background-color: transparent; + color: black; font-family: 'Roboto'; - font-weight: 400; - padding: 4px; - align-self: center; - margin-left: 7px; - display: flex; - align-items: center; - - .topbar-dashSelect { - border: none; - background-color: transparent; - color: black; - font-family: 'Roboto'; - font-size: 17; - font-weight: 500; - - &:hover { - cursor: pointer; - } + font-size: 17; + font-weight: 500; + + &:hover { + cursor: pointer; } } + } - .topbar-logoff { - border-radius: 3px; - background: olivedrab; - color: white; - display: none; - margin-left: 5px; - padding: 1px 2px 1px 2px; - cursor: pointer; - } + .topbar-logoff { + border-radius: 3px; + background: olivedrab; + color: white; + display: none; + margin-left: 5px; + padding: 1px 2px 1px 2px; + cursor: pointer; + } - .topbar-logoff { - background: red; - } + .topbar-logoff { + background: red; + } - .topbar-lozenge-user:hover { - .topbar-logoff { - display: inline-block; - } + .topbar-lozenge-user:hover { + .topbar-logoff { + display: inline-block; } } + } - .topbar-barChild { + .topbar-barChild { - &.topbar-collection { - flex: 0 1 auto; - margin-left: 2px; - margin-right: 2px - } + &.topbar-collection { + flex: 0 1 auto; + margin-left: 2px; + margin-right: 2px + } - &.topbar-input { - margin: 5px; - border-radius: 20px; - border: $dark-gray; - display: block; - width: 130px; - -webkit-transition: width 0.4s; - transition: width 0.4s; - /* align-self: stretch; */ + &.topbar-input { + margin: 5px; + border-radius: 20px; + border: $dark-gray; + display: block; + width: 130px; + -webkit-transition: width 0.4s; + transition: width 0.4s; + /* align-self: stretch; */ + outline: none; + + &:focus { + width: 500px; outline: none; - - &:focus { - width: 500px; - outline: none; - } } + } - &.topbar-filter { - align-self: stretch; + &.topbar-filter { + align-self: stretch; - button { - transform: none; + button { + transform: none; - &:hover { - transform: none; - } + &:hover { + transform: none; } } + } - &.topbar-submit { - margin-left: 2px; - margin-right: 2px - } + &.topbar-submit { + margin-left: 2px; + margin-right: 2px + } - &.topbar-close { - color: $white; - max-height: $topbar-height; - } + &.topbar-close { + color: $white; + max-height: $topbar-height; } } } diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 1a11925dc..ae56bb4ad 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -28,15 +28,12 @@ export class TopBar extends React.Component { const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null) return ( //TODO:glr Add support for light / dark mode -
-
+
+
Home
-
- {activeDashboard ? StrCast(activeDashboard.title) : "Dash"} -
@@ -46,6 +43,22 @@ export class TopBar extends React.Component {
+
+
+
+ {activeDashboard ?
Freeform View (Placeholder)
: (null)} +
+
+
+ {activeDashboard ? StrCast(activeDashboard.title) : "Dash"} +
+
+
+
Share
+
+
+
+ {/*
@@ -55,19 +68,19 @@ export class TopBar extends React.Component { {"Log out"}
*/} - {/*
+ {/*
{activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
*/} - {/* CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))} value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)} style={{ color: Colors.WHITE }}> {myDashboards.map((dash, i) => )} */} - {/*
*/} - {/*
+ {/*
*/ } + {/*
Create a new dashboard
} placement="bottom">
{ const batch = UndoManager.StartBatch("new dash"); await CurrentUserUtils.createNewDashboard(Doc.UserDoc()); @@ -91,24 +104,23 @@ export class TopBar extends React.Component {
*/} - {/*
*/} - {/*
*/} - {/*
window.open( + {/*
*/ } + {/*
*/ } + {/*
window.open( "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
SettingsManager.Instance.open()}>
*/} - {/*
+ {/*
SettingsManager.Instance.open()}>
*/} -
-
+ ); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2