Nate Butler created
styles/src/styleTree/components.ts | 8 +
styles/src/styleTree/projectPanel.ts | 171 ++++++++++-------------------
2 files changed, 69 insertions(+), 110 deletions(-)
@@ -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
@@ -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<Partial<InteractiveState>, 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" }),