mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-25 01:34:02 +00:00
Change dragged tab styling
This commit is contained in:
parent
5c38021a4d
commit
0a97a9c0fd
4 changed files with 36 additions and 17 deletions
|
@ -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,
|
||||
}
|
||||
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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],
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in a new issue