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 {
background,
border,
border_color,
foreground,
text,
} from "./components"
import { interactive, toggleable } from "../element"
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 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 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"),
corner_radius: 6,
text: text(layer, "sans", "base"),
@ -37,58 +60,23 @@ export default function contacts_panel(): any {
right: 8,
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: {
body: text(layer, "sans", "base"),
sender: {
padding: {
left: 4,
right: 4,
margin: {
right: 8,
},
...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: {
body: text(layer, "sans", "base"),
sender: {
padding: {
left: 4,
right: 4,
margin: {
right: 8,
},
...text(layer, "sans", "base", "disabled"),
},
@ -96,16 +84,6 @@ export default function contacts_panel(): any {
},
sign_in_prompt: {
default: text(layer, "sans", "base"),
},
timestamp: {
body: text(layer, "sans", "base"),
sender: {
padding: {
left: 4,
right: 4,
},
...text(layer, "sans", "base", "disabled"),
}
}
}
}