Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Remove absolute positioning for tab slots (#14836)

Browse source 
This PR reworks the `Tab` component to not use absolute positioning in
order to position the tab slots.

This should make any further adjustments we want to make to the spacing
easier to do.

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2024-07-19 15:11:27 -04:00 • committed by GitHub
parent 0a02691778
commit 5e635b8914
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

46
crates/ui/src/components/tab.rs
View file

@ -117,6 +117,21 @@ impl RenderOnce for Tab {
),
};
let (start_slot, end_slot) = {
let start_slot = h_flex().size_3().justify_center().children(self.start_slot);
let end_slot = h_flex()
.size_3()
.justify_center()
.visible_on_hover("")
.children(self.end_slot);
match self.close_side {
TabCloseSide::End => (start_slot, end_slot),
TabCloseSide::Start => (end_slot, start_slot),
}
};
self.div
.h(rems(Self::CONTAINER_HEIGHT_IN_REMS))
.bg(tab_bg)
@ -146,35 +161,12 @@ impl RenderOnce for Tab {
.group("")
.relative()
.h(rems(Self::CONTENT_HEIGHT_IN_REMS))
.px(crate::custom_spacing(cx, 20.))
.px(crate::custom_spacing(cx, 4.))
.gap(Spacing::Small.rems(cx))
.text_color(text_color)
// .hover(|style| style.bg(tab_hover_bg))
// .active(|style| style.bg(tab_active_bg))
.child(
h_flex()
.size_3()
.justify_center()
.absolute()
.map(|this| match self.close_side {
TabCloseSide::Start => this.right(Spacing::Small.rems(cx)),
TabCloseSide::End => this.left(Spacing::Small.rems(cx)),
})
.children(self.start_slot),
)
.child(
h_flex()
.size_3()
.justify_center()
.absolute()
.map(|this| match self.close_side {
TabCloseSide::Start => this.left(Spacing::Small.rems(cx)),
TabCloseSide::End => this.right(Spacing::Small.rems(cx)),
})
.visible_on_hover("")
.children(self.end_slot),
)
.children(self.children),
.child(start_slot)
.children(self.children)
.child(end_slot),
)
}
}