Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Header component #257

Merged
merged 16 commits into from
Mar 13, 2024
Merged

refactor: Header component #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fd9f74f
Merge branch 'feat/public-layout' into refactor/header-component
ShrimpCryptid Mar 6, 2024
cebd637
refactor: Moved logo components into a new file
ShrimpCryptid Mar 6, 2024
cdf5096
refactor: Moved header bar styling to a styled component
ShrimpCryptid Mar 6, 2024
21dc388
fix: Fix missing basename for routing
ShrimpCryptid Mar 7, 2024
0c4540e
refactor: Reorganized header components
ShrimpCryptid Mar 7, 2024
9af437b
Merge branch 'refactor/app-router' into refactor/header-component
ShrimpCryptid Mar 7, 2024
277ee21
refactor: Header file rename
ShrimpCryptid Mar 7, 2024
e0e8f42
feat: Added header to error page
ShrimpCryptid Mar 8, 2024
bbf27fd
fix: Changed AICS logo to open website in new tab
ShrimpCryptid Mar 8, 2024
8afd81e
fix: Removed basename to fix GitHub page loading as empty
ShrimpCryptid Mar 8, 2024
9a9e8c0
Merge branch 'main' into refactor/header-component
ShrimpCryptid Mar 8, 2024
3ee09cf
Merge branch 'refactor/app-router' into refactor/header-component
ShrimpCryptid Mar 8, 2024
2d49653
refactor: Code cleanup
ShrimpCryptid Mar 8, 2024
0d69677
Merge branch 'main' into refactor/header-component
ShrimpCryptid Mar 8, 2024
f16e37b
refactor: Code cleanup
ShrimpCryptid Mar 8, 2024
2aa8797
refactor: Merged Header content back into single styled header file
ShrimpCryptid Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 0 additions & 44 deletions src/Viewer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,3 @@
.header {
--header-content-height: 24px;

display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: auto;
height: fit-content;
min-height: var(--header-content-height);
padding: 12px 30px;
border-bottom: 1px solid var(--color-borders);
gap: 10px;
position: sticky;
background-color: var(--color-background);
z-index: 100;
top: 0;
left: 0;
}

.header > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}

.headerLeft {
gap: 20px;
}

.header h2 {
margin: 0;
line-height: normal;
}

.verticalDivider {
height: var(--header-content-height);
width: 1px;
background-color: var(--color-dividers);
display: inline-block;
}

.mainContent {
margin: 8px 30px;
}
Expand Down
28 changes: 3 additions & 25 deletions src/Viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import {
import { Checkbox, notification, Slider, Tabs } from "antd";
import { NotificationConfig } from "antd/es/notification/interface";
import React, { ReactElement, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
import styled from "styled-components";

import { AicsLogoSVG } from "./assets";
import { ColorizeCanvas, Dataset, Track } from "./colorizer";
import {
DEFAULT_CATEGORICAL_PALETTE_KEY,
Expand Down Expand Up @@ -46,6 +44,7 @@ import ColorRampDropdown from "./components/Dropdowns/ColorRampDropdown";
import HelpDropdown from "./components/Dropdowns/HelpDropdown";
import SelectionDropdown from "./components/Dropdowns/SelectionDropdown";
import Export from "./components/Export";
import Header from "./components/Header";
import HoverTooltip from "./components/HoverTooltip";
import IconButton from "./components/IconButton";
import LabeledRangeSlider from "./components/LabeledRangeSlider";
Expand All @@ -57,18 +56,6 @@ import { FeatureThresholdsTab, PlotTab, ScatterPlotTab, SettingsTab } from "./co
// TODO: Refactor with styled-components
import styles from "./Viewer.module.css";

const AicsLogoLink = styled.a`
position: relative;
width: 180px;
height: 46px;
`;

const StyledAicsLogo = styled(AicsLogoSVG)`
left: 0;
top: 0;
position: absolute;
`;

function Viewer(): ReactElement {
// STATE INITIALIZATION /////////////////////////////////////////////////////////
const theme = useContext(AppThemeContext);
Expand Down Expand Up @@ -708,16 +695,7 @@ function Viewer(): ReactElement {
<div>
<div ref={notificationContainer}>{notificationContextHolder}</div>

{/* Header bar: Contains dataset, feature, color ramp, and other top-level functionality. */}
{/* TODO: Split into its own component? */}
<div className={styles.header}>
<div className={styles.headerLeft}>
<AicsLogoLink href="https://www.allencell.org/" rel="noopener noreferrer">
<StyledAicsLogo />
</AicsLogoLink>
<span className={styles.verticalDivider}></span>
<h1 style={{ whiteSpace: "nowrap" }}>Timelapse Colorizer</h1>
</div>
<Header>
{/* <h3>Dataset Name</h3> */}
<FlexRowAlignCenter $gap={12}>
<FlexRowAlignCenter $gap={2}>
Expand All @@ -740,7 +718,7 @@ function Viewer(): ReactElement {
</FlexRowAlignCenter>
<HelpDropdown />
</FlexRowAlignCenter>
</div>
</Header>

{/** Main Content: Contains canvas and plot, ramp controls, time controls, etc. */}
<div className={styles.mainContent}>
Expand Down
Loading
Loading