oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
1 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/ui/src/components/tab.rs
+19 -27
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),
)
}
}