mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-12 05:15:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Improve styling of chat messages and channel select

Browse source 
Co-Authored-By: Nathan Sobo <nathan@zed.dev>
This commit is contained in:
Max Brunsfeld 2021-09-01 16:14:51 -07:00
parent 985788b855
commit 6821c47e3d
3 changed files with 44 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
zed/assets/themes/_base.toml
View file

@ -28,22 +28,23 @@ color = "$text.0.color"
[chat_panel]
channel_name = { extends = "$text.0", weight = "bold" }
channel_name_hash = { text = "$text.2", padding.right = 5 }
padding = 10
[chat_panel.message]
body = "$text.1"
sender = { extends = "$text.0", weight = "bold", margin.right = 10.0 }
sender = { extends = "$text.0", weight = "bold", margin.right = 10 }
timestamp = "$text.2"
padding = { top = 10, bottom = 10, left = 10, right = 10 }
padding.bottom = 10
[chat_panel.channel_select.item]
padding = { top = 4, bottom = 4, left = 4, right = 4 }
padding = 4
name = "$text.1"
hash = { extends = "$text.2", margin.right = 5.0 }
hash = { extends = "$text.2", margin.right = 5 }
[chat_panel.channel_select.hovered_item]
extends = "$chat_panel.channel_select.item"
background = "$surface.2"
corner_radius = 6.0
corner_radius = 6
[chat_panel.channel_select.active_item]
extends = "$chat_panel.channel_select.item"
@ -56,27 +57,28 @@ name = "$text.0"
[chat_panel.channel_select.header]
extends = "$chat_panel.channel_select.active_item"
padding.bottom = 0
padding.left = 0
[chat_panel.channel_select.menu]
padding = { top = 4, bottom = 4, left = 4, right = 4 }
corner_radius = 6.0
border = { color = "#000000", width = 1.0 }
padding = 4
corner_radius = 6
border = { color = "#000000", width = 1 }
background = "$surface.0"
[selector]
background = "$surface.2"
text = "$text.0"
padding = { top = 6.0, bottom = 6.0, left = 6.0, right = 6.0 }
margin.top = 12.0
corner_radius = 6.0
shadow = { offset = [0.0, 0.0], blur = 12.0, color = "#00000088" }
padding = 6
margin.top = 12
corner_radius = 6
shadow = { offset = [0, 0], blur = 12, color = "#00000088" }
[selector.item]
background = "#424344"
text = "$text.1"
highlight_text = { extends = "$text.base", color = "#18a3ff", weight = "bold" }
border = { color = "#000000", width = 1.0 }
padding = { top = 6.0, bottom = 6.0, left = 6.0, right = 6.0 }
border = { color = "#000000", width = 1 }
padding = 6
[selector.active_item]
extends = "$selector.item"

48
zed/src/chat_panel.rs
View file

@ -172,35 +172,39 @@ impl ChatPanel {
let now = OffsetDateTime::now_utc();
let settings = self.settings.borrow();
let theme = &settings.theme.chat_panel.message;
Flex::column()
.with_child(
Flex::row()
.with_child(
Container::new(
Label::new(
message.sender.github_login.clone(),
theme.sender.text.clone(),
Container::new(
Flex::column()
.with_child(
Flex::row()
.with_child(
Container::new(
Label::new(
message.sender.github_login.clone(),
theme.sender.text.clone(),
)
.boxed(),
)
.with_style(&theme.sender.container)
.boxed(),
)
.with_style(&theme.sender.container)
.boxed(),
)
.with_child(
Container::new(
Label::new(
format_timestamp(message.timestamp, now),
theme.timestamp.text.clone(),
.with_child(
Container::new(
Label::new(
format_timestamp(message.timestamp, now),
theme.timestamp.text.clone(),
)
.boxed(),
)
.with_style(&theme.timestamp.container)
.boxed(),
)
.with_style(&theme.timestamp.container)
.boxed(),
)
.boxed(),
)
.with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
.boxed()
)
.with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
.boxed(),
)
.with_style(&theme.container)
.boxed()
}
fn render_input_box(&self) -> ElementBox {

2
zed/src/theme.rs
View file

@ -73,6 +73,8 @@ pub struct ChatPanel {
#[derive(Deserialize)]
pub struct ChatMessage {
#[serde(flatten)]
pub container: ContainerStyle,
pub body: TextStyle,
pub sender: ContainedText,
pub timestamp: ContainedText,