oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
Nate Butler
2023-08-29 16:02:04 -04:00
parent 33c9f14852
commit d91a9615b5
27 changed files with 354 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/component/button.ts
+32 -23
View File
@@ -5,7 +5,7 @@ import { TextStyle, background } from "../style_tree/components"
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace Button {
export type Options = {
layer: Layer,
layer: Layer
background: keyof Theme["lowest"]
color: keyof Theme["lowest"]
variant: Button.Variant
@@ -16,13 +16,13 @@ export namespace Button {
bottom?: number
left?: number
right?: number
},
}
states: {
enabled?: boolean,
hovered?: boolean,
pressed?: boolean,
focused?: boolean,
disabled?: boolean,
enabled?: boolean
hovered?: boolean
pressed?: boolean
focused?: boolean
disabled?: boolean
}
}
@@ -38,26 +38,26 @@ export namespace Button {
export const CORNER_RADIUS = 6
export const variant = {
Default: 'filled',
Outline: 'outline',
Ghost: 'ghost'
Default: "filled",
Outline: "outline",
Ghost: "ghost",
} as const
export type Variant = typeof variant[keyof typeof variant]
export type Variant = (typeof variant)[keyof typeof variant]
export const shape = {
Rectangle: 'rectangle',
Square: 'square'
Rectangle: "rectangle",
Square: "square",
} as const
export type Shape = typeof shape[keyof typeof shape]
export type Shape = (typeof shape)[keyof typeof shape]
export const size = {
Small: "sm",
Medium: "md"
Medium: "md",
} as const
export type Size = typeof size[keyof typeof size]
export type Size = (typeof size)[keyof typeof size]
export type BaseStyle = {
corder_radius: number
@@ -67,8 +67,8 @@ export namespace Button {
bottom: number
left: number
right: number
},
margin: Button.Options['margin']
}
margin: Button.Options["margin"]
button_height: number
}
@@ -81,15 +81,18 @@ export namespace Button {
shape: Button.shape.Rectangle,
states: {
hovered: true,
pressed: true
}
pressed: true,
},
}
): BaseStyle => {
const theme = useTheme()
const layer = options.layer ?? theme.middle
const color = options.color ?? "base"
const background_color = options.variant === Button.variant.Ghost ? null : background(layer, options.background ?? color)
const background_color =
options.variant === Button.variant.Ghost
? null
: background(layer, options.background ?? color)
const m = {
top: options.margin?.top ?? 0,
@@ -106,8 +109,14 @@ export namespace Button {
padding: {
top: padding,
bottom: padding,
left: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding,
right: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding
left:
options.shape === Button.shape.Rectangle
? padding + Button.RECTANGLE_PADDING
: padding,
right:
options.shape === Button.shape.Rectangle
? padding + Button.RECTANGLE_PADDING
: padding,
},
margin: m,
button_height: 16,
styles/src/component/icon_button.ts
+20 -11
View File
@@ -11,10 +11,7 @@ export type Margin = {
}
interface IconButtonOptions {
layer?:
| Theme["lowest"]
| Theme["middle"]
| Theme["highest"]
layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
variant?: Button.Variant
@@ -26,15 +23,20 @@ type ToggleableIconButtonOptions = IconButtonOptions & {
active_layer?: Layer
}
export function icon_button({ color, margin, layer, variant, size }: IconButtonOptions = {
variant: Button.variant.Default,
size: Button.size.Medium,
}) {
export function icon_button(
{ color, margin, layer, variant, size }: IconButtonOptions = {
variant: Button.variant.Default,
size: Button.size.Medium,
}
) {
const theme = useTheme()
if (!color) color = "base"
const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color)
const background_color =
variant === Button.variant.Ghost
? null
: background(layer ?? theme.lowest, color)
const m = {
top: margin?.top ?? 0,
@@ -77,7 +79,14 @@ export function icon_button({ color, margin, layer, variant, size }: IconButtonO
})
}
export function toggleable_icon_button({ color, active_color, margin, variant, size, active_layer }: ToggleableIconButtonOptions) {
export function toggleable_icon_button({
color,
active_color,
margin,
variant,
size,
active_layer,
}: ToggleableIconButtonOptions) {
if (!color) color = "base"
return toggleable({
@@ -87,7 +96,7 @@ export function toggleable_icon_button({ color, active_color, margin, variant, s
color: active_color ? active_color : color,
margin,
layer: active_layer,
size
size,
}),
},
})
styles/src/component/indicator.ts
+7 -1
View File
@@ -1,7 +1,13 @@
import { foreground } from "../style_tree/components"
import { Layer, StyleSets } from "../theme"
export const indicator = ({ layer, color }: { layer: Layer, color: StyleSets }) => ({
export const indicator = ({
layer,
color,
}: {
layer: Layer
color: StyleSets
}) => ({
corner_radius: 4,
padding: 4,
margin: { top: 12, left: 12 },
styles/src/component/input.ts
+1 -1
View File
@@ -18,6 +18,6 @@ export const input = () => {
bottom: 3,
left: 12,
right: 8,
}
},
}
}
styles/src/component/margin.ts
+15 -8
View File
@@ -16,19 +16,26 @@ export type MarginStyle = {
export const margin_style = (options: MarginOptions): MarginStyle => {
const { all, top, bottom, left, right } = options
if (all !== undefined) return {
top: all,
bottom: all,
left: all,
right: all
}
if (all !== undefined)
return {
top: all,
bottom: all,
left: all,
right: all,
}
if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Margin must have at least one value")
if (
top === undefined &&
bottom === undefined &&
left === undefined &&
right === undefined
)
throw new Error("Margin must have at least one value")
return {
top: top || 0,
bottom: bottom || 0,
left: left || 0,
right: right || 0
right: right || 0,
}
}
styles/src/component/padding.ts
+15 -8
View File
@@ -16,19 +16,26 @@ export type PaddingStyle = {
export const padding_style = (options: PaddingOptions): PaddingStyle => {
const { all, top, bottom, left, right } = options
if (all !== undefined) return {
top: all,
bottom: all,
left: all,
right: all
}
if (all !== undefined)
return {
top: all,
bottom: all,
left: all,
right: all,
}
if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Padding must have at least one value")
if (
top === undefined &&
bottom === undefined &&
left === undefined &&
right === undefined
)
throw new Error("Padding must have at least one value")
return {
top: top || 0,
bottom: bottom || 0,
left: left || 0,
right: right || 0
right: right || 0,
}
}
styles/src/component/tab.ts
+10 -10
View File
@@ -9,7 +9,7 @@ type TabProps = {
export const tab = ({ layer }: TabProps) => {
const active_color = text(layer, "sans", "base").color
const inactive_border: Border = {
color: '#FFFFFF00',
color: "#FFFFFF00",
width: 1,
bottom: true,
left: false,
@@ -27,7 +27,7 @@ export const tab = ({ layer }: TabProps) => {
top: 8,
left: 8,
right: 8,
bottom: 6
bottom: 6,
},
border: inactive_border,
}
@@ -35,17 +35,17 @@ export const tab = ({ layer }: TabProps) => {
const i = interactive({
state: {
default: {
...base
...base,
},
hovered: {
...base,
...text(layer, "sans", "base", "hovered")
...text(layer, "sans", "base", "hovered"),
},
clicked: {
...base,
...text(layer, "sans", "base", "pressed")
...text(layer, "sans", "base", "pressed"),
},
}
},
})
return toggleable({
@@ -60,14 +60,14 @@ export const tab = ({ layer }: TabProps) => {
hovered: {
...i,
...text(layer, "sans", "base", "hovered"),
border: active_border
border: active_border,
},
clicked: {
...i,
...text(layer, "sans", "base", "pressed"),
border: active_border
border: active_border,
},
}
}
},
},
})
}
styles/src/component/tab_bar_button.ts
+35 -32
View File
@@ -12,44 +12,47 @@ type TabBarButtonProps = TabBarButtonOptions & {
state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
}
export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
export function tab_bar_button(
theme: Theme,
{ icon, color = "base" }: TabBarButtonProps
) {
const button_spacing = 8
return (
interactive({
base: {
icon: {
color: foreground(theme.middle, color),
asset: icon,
dimensions: {
width: 15,
height: 15,
},
return interactive({
base: {
icon: {
color: foreground(theme.middle, color),
asset: icon,
dimensions: {
width: 15,
height: 15,
},
},
container: {
corner_radius: 4,
padding: {
top: 4,
bottom: 4,
left: 4,
right: 4,
},
margin: {
left: button_spacing / 2,
right: button_spacing / 2,
},
},
},
state: {
hovered: {
container: {
corner_radius: 4,
padding: {
top: 4, bottom: 4, left: 4, right: 4
},
margin: {
left: button_spacing / 2,
right: button_spacing / 2,
},
background: background(theme.middle, color, "hovered"),
},
},
state: {
hovered: {
container: {
background: background(theme.middle, color, "hovered"),
}
},
clicked: {
container: {
background: background(theme.middle, color, "pressed"),
}
clicked: {
container: {
background: background(theme.middle, color, "pressed"),
},
},
})
)
},
})
}
styles/src/component/text_button.ts
+36 -18
View File
@@ -10,10 +10,7 @@ import { Button } from "./button"
import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?:
| Theme["lowest"]
| Theme["middle"]
| Theme["highest"]
layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
variant?: Button.Variant
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
@@ -36,7 +33,10 @@ export function text_button({
const theme = useTheme()
if (!color) color = "base"
const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color)
const background_color =
variant === Button.variant.Ghost
? null
: background(layer ?? theme.lowest, color)
const text_options: TextProperties = {
size: "xs",
@@ -67,20 +67,38 @@ export function text_button({
state: {
default: {
background: background_color,
color:
disabled
? foreground(layer ?? theme.lowest, "disabled")
: foreground(layer ?? theme.lowest, color),
},
hovered:
disabled ? {} : {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: disabled ? {} : {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
color: disabled
? foreground(layer ?? theme.lowest, "disabled")
: foreground(layer ?? theme.lowest, color),
},
hovered: disabled
? {}
: {
background: background(
layer ?? theme.lowest,
color,
"hovered"
),
color: foreground(
layer ?? theme.lowest,
color,
"hovered"
),
},
clicked: disabled
? {}
: {
background: background(
layer ?? theme.lowest,
color,
"pressed"
),
color: foreground(
layer ?? theme.lowest,
color,
"pressed"
),
},
},
})
}