aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/global/globalCssVariables.scss2
-rw-r--r--src/client/views/topbar/TopBar.scss224
-rw-r--r--src/client/views/topbar/TopBar.tsx42
3 files changed, 143 insertions, 125 deletions
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
- <div style={{ pointerEvents: "all" }} className="topbar-container">
- <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
+ <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
+ <div className="topbar-inner-container">
<div className="topbar-left">
<div className="topbar-button-text" onClick={this.navigateToHome}>Home</div>
</div>
<div className="topbar-center" >
- <div className="topbar-title">
- {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
- </div>
</div>
<div className="topbar-right" >
<div className="topbar-button-icon" >
@@ -46,6 +43,22 @@ export class TopBar extends React.Component {
<FontAwesomeIcon icon="cog" />
</div>
</div>
+ </div>
+ <div className="topbar-inner-container">
+ <div className="topbar-left">
+ {activeDashboard ? <div className="topbar-button-text">Freeform View (Placeholder)</div> : (null)}
+ </div>
+ <div className="topbar-center" >
+ <div className="topbar-title">
+ {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
+ </div>
+ </div>
+ <div className="topbar-right" >
+ <div className="topbar-button-text" >Share</div>
+ </div>
+ </div>
+ </div>
+
{/* <div className="topbar-left">
<div className="topbar-lozenge-user">
@@ -55,19 +68,19 @@ export class TopBar extends React.Component {
{"Log out"}
</div>
</div> */}
- {/* <div className="topbar-center" >
+ {/* <div className="topbar-center" >
<div className="topbar-lozenge-dashboard">
<div style={{ color: Colors.WHITE }}>
{activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
</div> */}
- {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
+ {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
style={{ color: Colors.WHITE }}>
{myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
</select> */}
- {/* </div> */}
- {/* <div className="topbar-dashboards">
+ {/* </div> */ }
+ {/* <div className="topbar-dashboards">
<Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
const batch = UndoManager.StartBatch("new dash");
await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
@@ -91,24 +104,23 @@ export class TopBar extends React.Component {
</div>
</Tooltip>
</div> */}
- {/* </div> */}
- {/* <div className="topbar-right" > */}
- {/* <div onClick={() => window.open(
+ {/* </div> */ }
+ {/* <div className="topbar-right" > */ }
+ {/* <div onClick={() => window.open(
"https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
<FontAwesomeIcon icon="question-circle" />
</div>
<div onClick={() => SettingsManager.Instance.open()}>
<FontAwesomeIcon icon="cog" />
</div> */}
- {/* <div className="topbar-icon" >
+ {/* <div className="topbar-icon" >
<FontAwesomeIcon icon="question-circle" />
</div>
<div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
<FontAwesomeIcon icon="cog" />
</div>
</div> */}
- </div>
- </div >
+
);
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 17:42:57 +0000