savanni
/
monorepo
1
0
Fork 0
Code Issues 76 Pull Requests Projects 6 Releases Wiki Activity

Working on styling for the dashboard and launchpad

This commit is contained in:
Savanni D'Gerinel 2024-11-08 10:14:17 -05:00
parent 2836369b3b
commit 2697a728fb
5 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gm-dash/ui/src/Dashboard.tsx
View File

@ -28,6 +28,7 @@ const Tracks = () =>
const Presets = () => const Presets = () =>
<Launchpad <Launchpad
title="Presets" title="Presets"
orientation="vertical"
exclusive={true} exclusive={true}
options={[ options={[
{ title: "Gilcrest Falls day" }, { title: "Gilcrest Falls day" },

2
gm-dash/ui/src/Design.tsx
View File

@ -37,7 +37,7 @@ const Launchpads = () => <div className="design_horizontal">
<Launchpad <Launchpad
exclusive={false} exclusive={false}
flow={"vertical"} orientation={"vertical"}
options={[ options={[
{ title: "Grey" }, { title: "Grey" },
{ title: "Purple" }, { title: "Purple" },

9
gm-dash/ui/src/components/Launchpad/Launchpad.css
View File

@ -6,15 +6,18 @@
} }
.launchpad__title { .launchpad__title {
color: var(--title-color); color: var(--label-color);
font-variant-caps: all-small-caps;
font-size: medium;
margin: var(--spacer-m);
} }
.launchpad_horizontal-flow { .launchpad_horizontal-orientation {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.launchpad_vertical-flow { .launchpad_vertical-orientation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

8
gm-dash/ui/src/components/Launchpad/Launchpad.tsx
View File

@ -6,12 +6,12 @@ export interface Selectable {
onSelected?: (key: string) => void; onSelected?: (key: string) => void;
} }
export type Flow = "horizontal" | "vertical"; export type Orientation = "horizontal" | "vertical";
interface LaunchpadProps { interface LaunchpadProps {
title?: string; title?: string;
exclusive: boolean; exclusive: boolean;
flow?: Flow; orientation?: Orientation;
options: Array<LaunchpadButtonProps>; options: Array<LaunchpadButtonProps>;
} }
@ -28,7 +28,7 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
} }
} }
const Launchpad = ({ title, flow = "horizontal", options, exclusive }: LaunchpadProps) => { const Launchpad = ({ title, orientation = "horizontal", options, exclusive }: LaunchpadProps) => {
const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {}); const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});
let tiedOptions = options.map(option => let tiedOptions = options.map(option =>
@ -37,7 +37,7 @@ const Launchpad = ({ title, flow = "horizontal", options, exclusive }: Launchpad
return (<div className="launchpad"> return (<div className="launchpad">
{title && <h1 className="launchpad__title"> {title} </h1>} {title && <h1 className="launchpad__title"> {title} </h1>}
<div className={flow === "horizontal" ? "launchpad_horizontal-flow" : "launchpad_vertical-flow"}> <div className={orientation === "horizontal" ? "launchpad_horizontal-orientation" : "launchpad_vertical-orientation"}>
{tiedOptions} {tiedOptions}
<EditPadButton text="Add" /> <EditPadButton text="Add" />
</div> </div>

3
gm-dash/ui/src/index.css
View File

@ -13,11 +13,12 @@
--grey-1: hsl(210, 0%, 25%); --grey-1: hsl(210, 0%, 25%);
--grey-2: hsl(210, 0%, 40%); --grey-2: hsl(210, 0%, 40%);
--grey-3: hsl(210, 0%, 55%); --grey-3: hsl(210, 0%, 50%);
--grey-4: hsl(210, 0%, 70%); --grey-4: hsl(210, 0%, 70%);
--grey-5: hsl(210, 0%, 85%); --grey-5: hsl(210, 0%, 85%);
--title-color: var(--grey-1); --title-color: var(--grey-1);
--label-color: var(--grey-3);
--border: 1px solid var(--purple-1); --border: 1px solid var(--purple-1);
--border-faint: 1px solid var(--grey-4); --border-faint: 1px solid var(--grey-4);