zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-10 05:37:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

WIP Restyle channel modal

Browse Source 
Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
Nate Butler 2023-08-11 13:32:46 -04:00
parent b21b17c120
commit ff1261b300
5 changed files with 64 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
crates/collab_ui/src/collab_panel/channel_modal.rs
View File

@ -175,19 +175,16 @@ impl View for ChannelModal {
this.set_mode(mode, cx);
}
})
.with_cursor_style(if active {
CursorStyle::Arrow
} else {
CursorStyle::PointingHand
})
.with_cursor_style(CursorStyle::PointingHand)
.into_any()
}
Flex::column()
.with_child(Label::new(
format!("#{}", channel.name),
theme.header.clone(),
))
.with_child(
Label::new(format!("#{}", channel.name), theme.header.text.clone())
.contained()
.with_style(theme.header.container.clone()),
)
.with_child(Flex::row().with_children([
render_mode_button::<InviteMembers>(
Mode::InviteMembers,

2
crates/theme/src/theme.rs
View File

@ -253,7 +253,7 @@ pub struct CollabPanel {
pub struct ChannelModal {
pub container: ContainerStyle,
pub height: f32,
pub header: TextStyle,
pub header: ContainedText,
pub mode_button: Toggleable<Interactive<ContainedText>>,
pub picker: Picker,
pub row_height: f32,

26
styles/src/component/input.ts Normal file
View File

@ -0,0 +1,26 @@
import { useTheme } from "../common"
import { background, border, text } from "../style_tree/components"
export const input = () => {
const theme = useTheme()
return {
background: background(theme.highest),
corner_radius: 8,
min_width: 200,
max_width: 500,
placeholder_text: text(theme.highest, "mono", "disabled"),
selection: theme.players[0],
text: text(theme.highest, "mono", "default"),
border: border(theme.highest),
margin: {
right: 12,
},
padding: {
top: 3,
bottom: 3,
left: 12,
right: 8,
}
}
}

9
styles/src/component/text_button.ts
View File

@ -13,6 +13,7 @@ interface TextButtonOptions {
| Theme["lowest"]
| Theme["middle"]
| Theme["highest"]
variant?: "default" | "ghost"
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
text_properties?: TextProperties
@ -23,6 +24,7 @@ type ToggleableTextButtonOptions = TextButtonOptions & {
}
export function text_button({
variant = "default",
color,
layer,
margin,
@ -59,7 +61,7 @@ export function text_button({
},
state: {
default: {
background: background(layer ?? theme.lowest, color),
background: variant !== "ghost" ? background(layer ?? theme.lowest, color) : null,
color: foreground(layer ?? theme.lowest, color),
},
hovered: {
@ -76,14 +78,15 @@ export function text_button({
export function toggleable_text_button(
theme: Theme,
{ color, active_color, margin }: ToggleableTextButtonOptions
{ variant, color, active_color, margin }: ToggleableTextButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: text_button({ color, margin }),
inactive: text_button({ variant, color, margin }),
active: text_button({
variant,
color: active_color ? active_color : color,
margin,
layer: theme.middle,

88
styles/src/style_tree/channel_modal.ts
View File

@ -2,6 +2,8 @@ import { useTheme } from "../theme"
import { interactive, toggleable } from "../element"
import { background, border, foreground, text } from "./components"
import picker from "./picker"
import { input } from "../component/input"
import { toggleable_text_button } from "../component/text_button"
export default function channel_modal(): any {
const theme = useTheme()
@ -19,29 +21,10 @@ export default function channel_modal(): any {
delete picker_style.shadow
delete picker_style.border
const picker_input = {
background: background(theme.middle, "on"),
corner_radius: 6,
text: text(theme.middle, "mono"),
placeholder_text: text(theme.middle, "mono", "on", "disabled", {
size: "xs",
}),
selection: theme.players[0],
border: border(theme.middle),
padding: {
bottom: 8,
left: 8,
right: 8,
top: 4,
},
margin: {
left: side_margin,
right: side_margin,
bottom: 8,
},
}
const picker_input = input()
return {
// This is used for the icons that are rendered to the right of channel Members in both UIs
member_icon: {
background: background(theme.middle),
padding: {
@ -53,6 +36,7 @@ export default function channel_modal(): any {
width: 5,
color: foreground(theme.middle, "accent"),
},
// This is used for the icons that are rendered to the right of channel invites in both UIs
invitee_icon: {
background: background(theme.middle),
padding: {
@ -89,54 +73,32 @@ export default function channel_modal(): any {
}
},
container: {
background: background(theme.lowest),
border: border(theme.lowest),
background: background(theme.middle),
border: border(theme.middle),
shadow: theme.modal_shadow,
corner_radius: 12,
padding: {
bottom: 4,
left: 20,
right: 20,
top: 20,
bottom: 0,
left: 0,
right: 0,
top: 0,
},
},
height: 400,
header: text(theme.middle, "sans", "on", { size: "lg" }),
mode_button: toggleable({
base: interactive({
base: {
...text(theme.middle, "sans", { size: "xs" }),
border: border(theme.middle, "active"),
corner_radius: 4,
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
margin: { left: 6, top: 6, bottom: 6 },
},
state: {
hovered: {
...text(theme.middle, "sans", "default", { size: "xs" }),
background: background(theme.middle, "hovered"),
border: border(theme.middle, "active"),
},
},
}),
state: {
active: {
default: {
color: foreground(theme.middle, "accent"),
},
hovered: {
color: foreground(theme.middle, "accent", "hovered"),
},
clicked: {
color: foreground(theme.middle, "accent", "pressed"),
},
},
header: {
...text(theme.middle, "sans", "on", { size: "lg" }),
padding: {
left: 6,
}
},
mode_button: toggleable_text_button(theme, {
variant: "ghost",
layer: theme.middle,
active_color: "accent",
margin: {
top: 8,
bottom: 8,
right: 4
}
}),
picker: {