76873c508a
This PR adds project and branch switchers in top left corner. Release Notes: - Added a project & branch switcher under project name.
132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
import { with_opacity } from "../theme/color"
|
|
import { background, border, text } from "./components"
|
|
import { interactive, toggleable } from "../element"
|
|
import { useTheme } from "../theme"
|
|
|
|
export default function picker(): any {
|
|
const theme = useTheme()
|
|
|
|
const container = {
|
|
background: background(theme.lowest),
|
|
border: border(theme.lowest),
|
|
shadow: theme.modal_shadow,
|
|
corner_radius: 12,
|
|
padding: {
|
|
bottom: 4,
|
|
},
|
|
}
|
|
const input_editor = {
|
|
placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
|
|
selection: theme.players[0],
|
|
text: text(theme.lowest, "mono", "on"),
|
|
border: border(theme.lowest, { bottom: true }),
|
|
padding: {
|
|
bottom: 8,
|
|
left: 16,
|
|
right: 16,
|
|
top: 8,
|
|
},
|
|
margin: {
|
|
bottom: 4,
|
|
},
|
|
}
|
|
const empty_input_editor: any = { ...input_editor }
|
|
delete empty_input_editor.border
|
|
delete empty_input_editor.margin
|
|
|
|
return {
|
|
...container,
|
|
empty_container: {
|
|
...container,
|
|
padding: {},
|
|
},
|
|
item: toggleable({
|
|
base: interactive({
|
|
base: {
|
|
padding: {
|
|
bottom: 4,
|
|
left: 12,
|
|
right: 12,
|
|
top: 4,
|
|
},
|
|
margin: {
|
|
top: 1,
|
|
left: 4,
|
|
right: 4,
|
|
},
|
|
corner_radius: 8,
|
|
text: text(theme.lowest, "sans", "variant"),
|
|
highlight_text: text(theme.lowest, "sans", "accent", {
|
|
weight: "bold",
|
|
}),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
background: with_opacity(
|
|
background(theme.lowest, "hovered"),
|
|
0.5
|
|
),
|
|
},
|
|
clicked: {
|
|
background: with_opacity(
|
|
background(theme.lowest, "pressed"),
|
|
0.5
|
|
),
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
background: with_opacity(
|
|
background(theme.lowest, "base", "active"),
|
|
0.5
|
|
),
|
|
},
|
|
hovered: {
|
|
background: with_opacity(
|
|
background(theme.lowest, "hovered"),
|
|
0.5
|
|
),
|
|
},
|
|
clicked: {
|
|
background: with_opacity(
|
|
background(theme.lowest, "pressed"),
|
|
0.5
|
|
),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
|
|
input_editor,
|
|
empty_input_editor,
|
|
no_matches: {
|
|
text: text(theme.lowest, "sans", "variant"),
|
|
padding: {
|
|
bottom: 8,
|
|
left: 16,
|
|
right: 16,
|
|
top: 8,
|
|
},
|
|
},
|
|
header: {
|
|
text: text(theme.lowest, "sans", "variant", { size: "xs" }),
|
|
|
|
margin: {
|
|
top: 1,
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
},
|
|
footer: {
|
|
text: text(theme.lowest, "sans", "variant", { size: "xs" }),
|
|
margin: {
|
|
top: 1,
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|