Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start styling the chat panel

Browse source
This commit is contained in:
Max Brunsfeld 2023-09-14 15:16:08 -07:00
parent 9d8c6a7ed1
commit 89327eb84e
1 changed files with 34 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

90
styles/src/style_tree/chat_panel.ts
View file

@ -1,53 +1,21 @@
import { import {
background, background,
border, border,
border_color,
foreground,
text, text,
} from "./components" } from "./components"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme" import { useTheme } from "../theme"
import collab_modals from "./collab_modals"
import { icon_button, toggleable_icon_button } from "../component/icon_button"
import { indicator } from "../component/indicator"
export default function contacts_panel(): any { export default function chat_panel(): any {
const theme = useTheme() const theme = useTheme()
const CHANNEL_SPACING = 4 as const
const NAME_MARGIN = 6 as const
const SPACING = 12 as const
const INDENT_SIZE = 8 as const
const ITEM_HEIGHT = 28 as const
const layer = theme.middle const layer = theme.middle
const input_editor = { const SPACING = 12 as const
background: background(layer, "on"),
corner_radius: 6,
text: text(layer, "sans", "base"),
placeholder_text: text(layer, "sans", "base", "disabled", {
size: "xs",
}),
selection: theme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: SPACING,
right: SPACING,
},
}
const channel_name = { const channel_name = {
padding: { padding: {
top: 4, // top: 4,
bottom: 4, bottom: 4,
left: 4, // left: 4,
right: 4, right: 4,
}, },
hash: { hash: {
@ -58,8 +26,14 @@ export default function contacts_panel(): any {
return { return {
background: background(layer), background: background(layer),
padding: {
top: SPACING,
bottom: SPACING,
left: SPACING,
right: SPACING,
},
channel_select: { channel_select: {
header: channel_name, header: { ...channel_name },
item: channel_name, item: channel_name,
active_item: channel_name, active_item: channel_name,
hovered_item: channel_name, hovered_item: channel_name,
@ -71,24 +45,38 @@ export default function contacts_panel(): any {
} }
} }
}, },
input_editor, input_editor: {
background: background(layer, "on"),
corner_radius: 6,
text: text(layer, "sans", "base"),
placeholder_text: text(layer, "sans", "base", "disabled", {
size: "xs",
}),
selection: theme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
},
message: { message: {
body: text(layer, "sans", "base"), body: text(layer, "sans", "base"),
sender: { sender: {
padding: { margin: {
left: 4, right: 8,
right: 4,
}, },
...text(layer, "sans", "base", "disabled"), ...text(layer, "sans", "base", { weight: "bold" }),
}, },
timestamp: text(layer, "sans", "base"), timestamp: text(layer, "sans", "base", "disabled"),
margin: { bottom: SPACING }
}, },
pending_message: { pending_message: {
body: text(layer, "sans", "base"), body: text(layer, "sans", "base"),
sender: { sender: {
padding: { margin: {
left: 4, right: 8,
right: 4,
}, },
...text(layer, "sans", "base", "disabled"), ...text(layer, "sans", "base", "disabled"),
}, },
@ -96,16 +84,6 @@ export default function contacts_panel(): any {
}, },
sign_in_prompt: { sign_in_prompt: {
default: text(layer, "sans", "base"), default: text(layer, "sans", "base"),
},
timestamp: {
body: text(layer, "sans", "base"),
sender: {
padding: {
left: 4,
right: 4,
},
...text(layer, "sans", "base", "disabled"),
}
} }
} }
} }