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

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

@ -1,28 +1,51 @@
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
const channel_name = {
padding: {
// top: 4,
bottom: 4,
// left: 4,
right: 4,
},
hash: {
...text(layer, "sans", "base"),
},
name: text(layer, "sans", "base"),
}
return {
background: background(layer),
padding: {
top: SPACING,
bottom: SPACING,
left: SPACING,
right: SPACING,
},
channel_select: {
header: { ...channel_name },
item: channel_name,
active_item: channel_name,
hovered_item: channel_name,
hovered_active_item: channel_name,
menu: {
padding: {
top: 10,
bottom: 10,
}
}
},
input_editor: {
background: background(layer, "on"), background: background(layer, "on"),
corner_radius: 6, corner_radius: 6,
text: text(layer, "sans", "base"), text: text(layer, "sans", "base"),
@ -37,58 +60,23 @@ export default function contacts_panel(): any {
right: 8, right: 8,
top: 4, top: 4,
}, },
margin: {
left: SPACING,
right: SPACING,
}, },
}
const channel_name = {
padding: {
top: 4,
bottom: 4,
left: 4,
right: 4,
},
hash: {
...text(layer, "sans", "base"),
},
name: text(layer, "sans", "base"),
}
return {
background: background(layer),
channel_select: {
header: channel_name,
item: channel_name,
active_item: channel_name,
hovered_item: channel_name,
hovered_active_item: channel_name,
menu: {
padding: {
top: 10,
bottom: 10,
}
}
},
input_editor,
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"),
}
} }
} }
} }