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

prettier format

Browse Source
This commit is contained in:
Mikayla Maki
2023-06-28 10:35:28 -07:00
parent bf2c2fe242
commit 1d4a922185
9 changed files with 288 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/assistant.ts
+43 -40
View File
@@ -26,15 +26,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 12, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
splitButton: interactive({
base: {
@@ -48,15 +48,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
quoteButton: interactive({
base: {
@@ -70,15 +70,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
assistButton: interactive({
base: {
@@ -92,15 +92,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
zoomInButton: interactive({
base: {
@@ -114,15 +114,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
zoomOutButton: interactive({
base: {
@@ -136,15 +136,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
plusButton: interactive({
base: {
@@ -158,29 +158,29 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
title: {
...text(layer, "sans", "default", { size: "sm" })
...text(layer, "sans", "default", { size: "sm" }),
},
savedConversation: {
container: interactive({
base: {
background: background(layer, "on"),
padding: { top: 4, bottom: 4 }
padding: { top: 4, bottom: 4 },
},
state: {
hovered: {
background: background(layer, "on", "hovered"),
}
},
},
}),
savedAt: {
@@ -189,8 +189,11 @@ export default function assistant(colorScheme: ColorScheme) {
},
title: {
margin: { left: 16 },
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
}
...text(layer, "sans", "default", {
size: "sm",
weight: "bold",
}),
},
},
userSender: {
default: {
styles/src/styleTree/projectPanel.ts
+72 -35
View File
@@ -1,6 +1,13 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { Border, TextStyle, background, border, foreground, text } from "./components"
import {
Border,
TextStyle,
background,
border,
foreground,
text,
} from "./components"
import { interactive, toggleable } from "../element"
import merge from "ts-deepmerge"
export default function projectPanel(colorScheme: ColorScheme) {
@@ -9,20 +16,19 @@ export default function projectPanel(colorScheme: ColorScheme) {
let layer = colorScheme.middle
type EntryStateProps = {
background?: string,
border?: Border,
text?: TextStyle,
iconColor?: string,
background?: string
border?: Border
text?: TextStyle
iconColor?: string
}
type EntryState = {
default: EntryStateProps,
hovered?: EntryStateProps,
clicked?: EntryStateProps,
default: EntryStateProps
hovered?: EntryStateProps
clicked?: EntryStateProps
}
const entry = (unselected?: EntryState, selected?: EntryState) => {
const git_status = {
git: {
modified: isLight
@@ -45,18 +51,44 @@ export default function projectPanel(colorScheme: ColorScheme) {
iconSpacing: 5,
text: text(layer, "mono", "variant", { size: "sm" }),
status: {
...git_status
}
...git_status,
},
}
const selectedStyle: EntryState | undefined = selected ? selected : unselected
const selectedStyle: EntryState | undefined = selected
? selected
: unselected
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") })
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: {
@@ -74,9 +106,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
clicked: selected_clicked_style,
},
}),
}
},
})
}
const defaultEntry = entry()
@@ -123,25 +154,31 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: withOpacity(background(layer, "on"), 0.9),
border: border(layer),
},
ignoredEntry: entry({
default: {
text: text(layer, "mono", "disabled"),
ignoredEntry: entry(
{
default: {
text: text(layer, "mono", "disabled"),
},
},
}, {
default: {
iconColor: foreground(layer, "variant"),
{
default: {
iconColor: foreground(layer, "variant"),
},
}
}),
cutEntry: entry({
default: {
text: text(layer, "mono", "disabled"),
),
cutEntry: entry(
{
default: {
text: text(layer, "mono", "disabled"),
},
},
}, {
default: {
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
{
default: {
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
},
}
}),
),
filenameEditor: {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),
styles/src/styleTree/titlebar.ts
+21 -21
View File
@@ -1,9 +1,9 @@
import { ColorScheme } from "../common";
import { ColorScheme } from "../common"
import { icon_button, toggleable_icon_button } from "../component/icon_button"
import { toggleable_text_button } from "../component/text_button"
import { interactive, toggleable } from "../element"
import { withOpacity } from "../theme/color";
import { background, border, foreground, text } from "./components";
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
const ITEM_SPACING = 8
const TITLEBAR_HEIGHT = 32
@@ -25,7 +25,7 @@ function build_spacing(
function call_controls(theme: ColorScheme) {
const button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING);
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const marginY = {
top: space.marginY,
bottom: space.marginY,
@@ -38,14 +38,14 @@ function call_controls(theme: ColorScheme) {
left: space.group,
right: space.half_item,
},
active_color: 'negative'
active_color: "negative",
}),
toggle_speakers_button: toggleable_icon_button(theme, {
margin: {
...marginY,
left: space.half_item,
right: space.half_item
right: space.half_item,
},
}),
@@ -53,9 +53,9 @@ function call_controls(theme: ColorScheme) {
margin: {
...marginY,
left: space.half_item,
right: space.group
right: space.group,
},
active_color: 'accent'
active_color: "accent",
}),
muted: foreground(theme.lowest, "negative"),
@@ -64,15 +64,15 @@ function call_controls(theme: ColorScheme) {
}
/**
* Opens the User Menu when toggled
*
* When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron.
*/
* Opens the User Menu when toggled
*
* When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron.
*/
function user_menu(theme: ColorScheme) {
const button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING);
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const build_button = ({ online }: { online: boolean }) => {
const button = toggleable({
@@ -124,8 +124,8 @@ function user_menu(theme: ColorScheme) {
background: background(theme.middle, "pressed"),
},
},
}
});
},
})
return {
user_menu: button,
@@ -134,7 +134,7 @@ function user_menu(theme: ColorScheme) {
icon_height: 16,
corner_radius: 4,
outer_width: 16,
outer_corner_radius: 16
outer_corner_radius: 16,
},
icon: {
margin: {
@@ -145,8 +145,8 @@ function user_menu(theme: ColorScheme) {
},
width: 11,
height: 11,
color: foreground(theme.lowest)
}
color: foreground(theme.lowest),
},
}
}
return {
@@ -240,7 +240,7 @@ export function titlebar(theme: ColorScheme) {
leave_call_button: icon_button(theme, {
margin: {
left: ITEM_SPACING / 2,
right: ITEM_SPACING
right: ITEM_SPACING,
},
}),
@@ -261,6 +261,6 @@ export function titlebar(theme: ColorScheme) {
background: foreground(theme.lowest, "accent"),
},
shareButton: toggleable_text_button(theme, {}),
user_menu: user_menu(theme)
user_menu: user_menu(theme),
}
}