From cf8e0befc86f51b41a675ba6b08f579e7c8cb135 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 28 Jun 2023 13:27:41 -0400 Subject: [PATCH] Update --- styles/src/styleTree/components.ts | 8 ++ styles/src/styleTree/projectPanel.ts | 171 ++++++++++----------------- 2 files changed, 69 insertions(+), 110 deletions(-) diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index bfd1f75cb07eae0e805eeb6632fdcb92a3f8354d..3b6f26066bffc26d2d4451adaecd985ef41560ff 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -93,6 +93,14 @@ interface Text extends Object { underline?: boolean } +export interface TextStyle extends Object { + family: keyof typeof fontFamilies + color: string + size: number + weight?: FontWeight + underline?: boolean +} + export interface TextProperties { size?: keyof typeof fontSizes weight?: FontWeight diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 25606d8ca68043a2f10dd422f25af5f9550b3b03..eada2444f426f25990d16a5265efa9818d22da9a 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -1,63 +1,28 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" -import { Border, TextProperties, background, border, foreground, text } from "./components" +import { Border, TextStyle, background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" -import { InteractiveState } from "../element/interactive" +import merge from "ts-deepmerge" export default function projectPanel(colorScheme: ColorScheme) { const { isLight } = colorScheme let layer = colorScheme.middle - const default_entry = interactive({ - base: { - ...baseEntry, - status, - }, - state: { - default: { - background: background(layer), - }, - hovered: { - background: background(layer, "variant", "hovered"), - }, - clicked: { - background: background(layer, "variant", "pressed"), - }, - }, - }) - - let base_entry = toggleable({ - base: default_entry, - state: { - active: interactive({ - base: { - ...default_entry, - }, - state: { - default: { - background: background(colorScheme.lowest), - }, - hovered: { - background: background(colorScheme.lowest, "hovered"), - }, - clicked: { - background: background(colorScheme.lowest, "pressed"), - }, - }, - }), - }, - }) - type EntryStateProps = { background?: string, - border: Border, - text: TextProperties, - iconColor: string, + border?: Border, + text?: TextStyle, + iconColor?: string, + } + + type EntryState = { + default: EntryStateProps, + hovered?: EntryStateProps, + clicked?: EntryStateProps, } - type EntryState = Record, EntryStateProps> + const entry = (unselected?: EntryState, selected?: EntryState) => { - const entry = (base: object, unselected: EntryState, selected: EntryState) => { const git_status = { git: { modified: isLight @@ -74,6 +39,7 @@ export default function projectPanel(colorScheme: ColorScheme) { const base_properties = { height: 22, + background: background(layer), iconColor: foreground(layer, "variant"), iconSize: 7, iconSpacing: 5, @@ -83,51 +49,38 @@ export default function projectPanel(colorScheme: ColorScheme) { } } - const unselected_i = interactive({ - base: base_properties, - state: { - default: { - background: background(layer), - ...unselected.default ?? {}, - }, - hovered: { - background: background(layer, "variant", "hovered"), - ...unselected.hovered ?? {}, - }, - clicked: { - background: background(layer, "variant", "pressed"), - ...unselected.clicked ?? {}, - }, - }, - }) + const selectedStyle: EntryState | undefined = selected ? selected : unselected - const selected_i = interactive({ - base: base, - state: { - default: { - ...base_entry, - ...(selected.default ?? {}), - }, - hovered: { - ...base_entry, - ...selected.hovered ?? {}, - }, - clicked: { - ...base_entry, - ...selected.clicked ?? {}, - }, - } - }) + const unselected_default_style = merge(base_properties, unselected?.default ?? {}, {}) + const unselected_hovered_style = merge(base_properties, unselected?.hovered ?? {}, { background: background(layer, "variant", "hovered") }) + const unselected_clicked_style = merge(base_properties, unselected?.clicked ?? {}, { background: background(layer, "variant", "pressed") }) + const selected_default_style = merge(base_properties, selectedStyle?.default ?? {}, { background: background(layer) }) + const selected_hovered_style = merge(base_properties, selectedStyle?.hovered ?? {}, { background: background(layer, "variant", "hovered") }) + const selected_clicked_style = merge(base_properties, selectedStyle?.clicked ?? {}, { background: background(layer, "variant", "pressed") }) return toggleable({ state: { - inactive: unselected_i, - active: selected_i, + inactive: interactive({ + state: { + default: unselected_default_style, + hovered: unselected_hovered_style, + clicked: unselected_clicked_style, + }, + }), + active: interactive({ + state: { + default: selected_default_style, + hovered: selected_hovered_style, + clicked: selected_clicked_style, + }, + }), } }) } + const defaultEntry = entry() + return { openProjectButton: interactive({ base: { @@ -163,35 +116,33 @@ export default function projectPanel(colorScheme: ColorScheme) { background: background(layer), padding: { left: 6, right: 6, top: 0, bottom: 6 }, indentWidth: 12, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - status, - }, - ignoredEntry: { - ...entry, - iconColor: foreground(layer, "disabled"), - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - iconColor: foreground(layer, "variant"), + defaultEntry, + draggedEntry: entry({ + default: { + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + } + }), + ignoredEntry: entry({ + default: { + text: text(layer, "mono", "disabled"), }, - }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - default: { - ...entry.active.default, - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), - }, + }, { + default: { + iconColor: foreground(layer, "variant"), + } + }), + cutEntry: entry({ + default: { + text: text(layer, "mono", "disabled"), }, - }, + }, { + default: { + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), + } + }), filenameEditor: { background: background(layer, "on"), text: text(layer, "mono", "on", { size: "sm" }),