mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-27 04:44:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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
Show stats 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 {
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 = {
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 SPACING = 12 as const
const channel_name = {
padding: {
top: 4,
// top: 4,
bottom: 4,
left: 4,
// left: 4,
right: 4,
},
hash: {
@ -58,8 +26,14 @@ export default function contacts_panel(): any {
return {
background: background(layer),
padding: {
top: SPACING,
bottom: SPACING,
left: SPACING,
right: SPACING,
},
channel_select: {
header: channel_name,
header: { ...channel_name },
item: channel_name,
active_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: {
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"),
}
}
}
}