Change dragged tab styling

This commit is contained in:
K Simmons 2022-08-23 18:02:01 -07:00
parent 5c38021a4d
commit 0a97a9c0fd
4 changed files with 36 additions and 17 deletions

View file

@ -75,6 +75,7 @@ pub struct TabBar {
pub pane_button: Interactive<IconButton>,
pub active_pane: TabStyles,
pub inactive_pane: TabStyles,
pub dragged_tab: Tab,
pub height: f32,
}

View file

@ -1013,16 +1013,12 @@ impl Pane {
let detail = detail.clone();
let hovered = mouse_state.hovered;
let theme = cx.global::<Settings>().theme.clone();
move |_, cx| {
Self::render_tab(
&item,
pane,
detail,
hovered,
pane_active,
tab_active,
cx,
)
let tab_style =
theme.workspace.tab_bar.tab_style(pane_active, tab_active);
Self::render_tab(&item, pane, detail, hovered, tab_style, cx)
}
})
.with_cursor_style(if pane_active && tab_active {
@ -1053,15 +1049,17 @@ impl Pane {
pane: pane.clone(),
},
{
let theme = cx.global::<Settings>().theme.clone();
let detail = detail.clone();
move |dragged_item, cx: &mut RenderContext<Workspace>| {
let tab_style = &theme.workspace.tab_bar.dragged_tab;
Pane::render_tab(
&dragged_item.item,
dragged_item.pane.clone(),
detail,
false,
pane_active,
tab_active,
&tab_style,
cx,
)
}
@ -1130,13 +1128,10 @@ impl Pane {
pane: WeakViewHandle<Pane>,
detail: Option<usize>,
hovered: bool,
pane_active: bool,
tab_active: bool,
tab_style: &theme::Tab,
cx: &mut RenderContext<V>,
) -> ElementBox {
let theme = cx.global::<Settings>().theme.clone();
let tab_style = theme.workspace.tab_bar.tab_style(pane_active, tab_active);
let title = item.tab_content(detail, tab_style, cx);
let title = item.tab_content(detail, &tab_style, cx);
Flex::row()
.with_child(

View file

@ -94,3 +94,11 @@ export function popoverShadow(theme: Theme) {
offset: [1, 2],
};
}
export function draggedShadow(theme: Theme) {
return {
blur: 6,
color: theme.shadow,
offset: [1, 2],
};
}

View file

@ -1,5 +1,6 @@
import Theme from "../themes/common/theme";
import { iconColor, text, border, backgroundColor } from "./components";
import { withOpacity } from "../utils/color";
import { iconColor, text, border, backgroundColor, draggedShadow } from "./components";
export default function tabBar(theme: Theme) {
const height = 32;
@ -55,6 +56,19 @@ export default function tabBar(theme: Theme) {
},
}
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.8),
border: {
...tab.border,
top: false,
left: false,
right: false,
bottom: false,
},
shadow: draggedShadow(theme),
}
return {
height,
background: backgroundColor(theme, 300),
@ -71,6 +85,7 @@ export default function tabBar(theme: Theme) {
activeTab: inactivePaneActiveTab,
inactiveTab: inactivePaneInactiveTab,
},
draggedTab,
paneButton: {
color: iconColor(theme, "secondary"),
border: {