split into body and header

This commit is contained in:
Mikayla 2023-08-11 11:35:51 -07:00
parent ff1261b300
commit 9b5551a079
No known key found for this signature in database
3 changed files with 60 additions and 38 deletions

View file

@ -181,31 +181,42 @@ impl View for ChannelModal {
Flex::column()
.with_child(
Label::new(format!("#{}", channel.name), theme.header.text.clone())
Flex::column()
.with_child(
Label::new(format!("#{}", channel.name), theme.title.text.clone())
.contained()
.with_style(theme.title.container.clone()),
)
.with_child(Flex::row().with_children([
render_mode_button::<InviteMembers>(
Mode::InviteMembers,
"Invite members",
mode,
theme,
cx,
),
render_mode_button::<ManageMembers>(
Mode::ManageMembers,
"Manage members",
mode,
theme,
cx,
),
]))
.expanded()
.contained()
.with_style(theme.header.container.clone()),
.with_style(theme.header),
)
.with_child(
ChildView::new(&self.picker, cx)
.contained()
.with_style(theme.body),
)
.with_child(Flex::row().with_children([
render_mode_button::<InviteMembers>(
Mode::InviteMembers,
"Invite members",
mode,
theme,
cx,
),
render_mode_button::<ManageMembers>(
Mode::ManageMembers,
"Manage members",
mode,
theme,
cx,
),
]))
.with_child(ChildView::new(&self.picker, cx))
.constrained()
.with_max_height(theme.height)
.with_max_height(theme.max_height)
.with_max_width(theme.max_width)
.contained()
.with_style(theme.container)
.with_style(theme.modal)
.into_any()
}

View file

@ -251,9 +251,9 @@ pub struct CollabPanel {
#[derive(Deserialize, Default, JsonSchema)]
pub struct ChannelModal {
pub container: ContainerStyle,
pub height: f32,
pub header: ContainedText,
pub max_height: f32,
pub max_width: f32,
pub title: ContainedText,
pub mode_button: Toggleable<Interactive<ContainedText>>,
pub picker: Picker,
pub row_height: f32,
@ -264,6 +264,9 @@ pub struct ChannelModal {
pub member_icon: Icon,
pub invitee_icon: Icon,
pub member_tag: ContainedText,
pub modal: ContainerStyle,
pub header: ContainerStyle,
pub body: ContainerStyle,
}
#[derive(Deserialize, Default, JsonSchema)]

View file

@ -24,6 +24,25 @@ export default function channel_modal(): any {
const picker_input = input()
return {
header: {
background: background(theme.middle, "accent"),
border: border(theme.middle, { "bottom": true, "top": false, left: false, right: false }),
},
body: {
background: background(theme.middle),
},
modal: {
background: background(theme.middle),
shadow: theme.modal_shadow,
corner_radius: 12,
padding: {
bottom: 0,
left: 0,
right: 0,
top: 0,
},
},
// This is used for the icons that are rendered to the right of channel Members in both UIs
member_icon: {
background: background(theme.middle),
@ -72,20 +91,9 @@ export default function channel_modal(): any {
right: 4,
}
},
container: {
background: background(theme.middle),
border: border(theme.middle),
shadow: theme.modal_shadow,
corner_radius: 12,
padding: {
bottom: 0,
left: 0,
right: 0,
top: 0,
},
},
height: 400,
header: {
max_height: 400,
max_width: 540,
title: {
...text(theme.middle, "sans", "on", { size: "lg" }),
padding: {
left: 6,