projectPanel.ts

 1import { ColorScheme } from "../themes/common/colorScheme"
 2import { withOpacity } from "../utils/color"
 3import { background, border, foreground, text } from "./components"
 4
 5export default function projectPanel(colorScheme: ColorScheme) {
 6    let layer = colorScheme.middle
 7
 8    let baseEntry = {
 9        height: 24,
10        iconColor: foreground(layer, "variant"),
11        iconSize: 8,
12        iconSpacing: 8,
13    }
14
15    let entry = {
16        ...baseEntry,
17        text: text(layer, "mono", "variant", { size: "sm" }),
18        hover: {
19            background: background(layer, "variant", "hovered"),
20        },
21        active: {
22            background: background(layer, "active"),
23            text: text(layer, "mono", "active", { size: "sm" }),
24        },
25        activeHover: {
26            background: background(layer, "active"),
27            text: text(layer, "mono", "active", { size: "sm" }),
28        },
29    }
30
31    return {
32        openProjectButton: {
33            ...text(layer, "mono", "active", { size: "sm" }),
34            background: background(layer, "on"),
35            cornerRadius: 6,
36            border: border(layer, "on"),
37            margin: {
38                top: 20,
39                left: 10,
40                right: 10
41            },
42            padding: {
43                bottom: 2,
44                left: 10,
45                right: 10,
46                top: 2,
47            },
48            active: {
49                ...text(layer, "mono", "on", "inverted"),
50                background: background(layer, "on", "inverted"),
51                border: border(layer, "on", "inverted"),
52            },
53            clicked: {
54                ...text(layer, "mono", "on", "pressed"),
55                background: background(layer, "on", "pressed"),
56                border: border(layer, "on", "pressed"),
57            },
58            hover: {
59                ...text(layer, "mono", "on", "hovered"),
60                background: background(layer, "on", "hovered"),
61                border: border(layer, "on", "hovered"),
62            },
63
64        },
65        background: background(layer),
66        padding: { left: 12, right: 12, top: 6, bottom: 6 },
67        indentWidth: 8,
68        entry,
69        draggedEntry: {
70            ...baseEntry,
71            text: text(layer, "mono", "on", { size: "sm" }),
72            background: withOpacity(background(layer, "on"), 0.9),
73            border: border(layer),
74        },
75        ignoredEntry: {
76            ...entry,
77            text: text(layer, "mono", "disabled"),
78        },
79        cutEntry: {
80            ...entry,
81            text: text(layer, "mono", "disabled"),
82            active: {
83                background: background(layer, "active"),
84                text: text(layer, "mono", "disabled", { size: "sm" }),
85            },
86        },
87        filenameEditor: {
88            background: background(layer, "on"),
89            text: text(layer, "mono", "on", { size: "sm" }),
90            selection: colorScheme.players[0],
91        },
92    }
93}