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

Add styles for user menu

Browse source
This commit is contained in:
Piotr Osiewicz 2023-06-26 18:56:30 +02:00
parent f6edc68613
commit 71c0b7d74d
4 changed files with 107 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
crates/collab_ui/src/collab_titlebar_item.rs
View file

@ -639,12 +639,17 @@ impl CollabTitlebarItem {
avatar: Option<Arc<ImageData>>,
cx: &mut ViewContext<Self>,
) -> AnyElement<Self> {
let titlebar = &theme.workspace.titlebar;
let avatar_style = &theme.workspace.titlebar.follower_avatar;
let tooltip = theme.tooltip.clone();
let user_menu_button = &theme.titlebar;
let avatar_style = &user_menu_button.user_menu_button.avatar;
Stack::new()
.with_child(
MouseEventHandler::<ToggleUserMenu, Self>::new(0, cx, |state, _| {
let style = titlebar.call_control.style_for(state);
let style = user_menu_button
.user_menu_button
.user_menu
.inactive_state()
.style_for(state);
let mut dropdown = Flex::row().align_children_center();
@ -658,15 +663,15 @@ impl CollabTitlebarItem {
dropdown
.with_child(
Svg::new("icons/caret_down_8.svg")
.with_color(style.color)
.with_color(theme.titlebar.user_menu_button.icon.color)
.constrained()
.with_width(style.icon_width)
.with_width(theme.titlebar.user_menu_button.icon.width)
.contained()
.into_any(),
)
.aligned()
.constrained()
.with_height(style.button_width)
.with_height(style.width)
.contained()
.with_style(style.container)
.into_any()
@ -679,11 +684,10 @@ impl CollabTitlebarItem {
0,
"Toggle user menu".to_owned(),
Some(Box::new(ToggleUserMenu)),
theme.tooltip.clone(),
tooltip,
cx,
)
.contained()
.with_margin_left(theme.workspace.titlebar.item_spacing),
.contained(),
)
.with_child(
ChildView::new(&self.user_menu, cx)

11
crates/theme/src/theme.rs
View file

@ -65,6 +65,7 @@ pub struct Theme {
pub feedback: FeedbackStyle,
pub welcome: WelcomeStyle,
pub color_scheme: ColorScheme,
pub titlebar: UserMenu,
}
#[derive(Deserialize, Default, Clone)]
@ -140,6 +141,16 @@ pub struct Titlebar {
pub toggle_contacts_badge: ContainerStyle,
}
#[derive(Clone, Deserialize, Default)]
pub struct UserMenu {
pub user_menu_button: UserMenuButton,
}
#[derive(Clone, Deserialize, Default)]
pub struct UserMenuButton {
pub user_menu: Toggleable<Interactive<Icon>>,
pub avatar: AvatarStyle,
pub icon: Icon,
}
#[derive(Copy, Clone, Deserialize, Default)]
pub struct AvatarStyle {
#[serde(flatten)]

2
styles/src/styleTree/app.ts
View file

@ -23,6 +23,7 @@ import feedback from "./feedback"
import welcome from "./welcome"
import copilot from "./copilot"
import assistant from "./assistant"
import { titlebar } from "./titlebar"
export default function app(colorScheme: ColorScheme): Object {
return {
@ -36,6 +37,7 @@ export default function app(colorScheme: ColorScheme): Object {
incomingCallNotification: incomingCallNotification(colorScheme),
picker: picker(colorScheme),
workspace: workspace(colorScheme),
titlebar: titlebar(colorScheme),
copilot: copilot(colorScheme),
welcome: welcome(colorScheme),
contextMenu: contextMenu(colorScheme),

81
styles/src/styleTree/titlebar.ts Normal file
View file

@ -0,0 +1,81 @@
import { ColorScheme } from "../common";
import { interactive, toggleable } from "../element"
import { background, foreground, text } from "./components";
const titlebarButton = (theme: ColorScheme) => toggleable({
base: interactive({
base: {
cornerRadius: 6,
height: 24,
width: 24,
padding: {
top: 4,
bottom: 4,
left: 4,
right: 4,
},
...text(theme.lowest, "sans", { size: "xs" }),
background: background(theme.lowest),
},
state: {
hovered: {
...text(theme.lowest, "sans", "hovered", {
size: "xs",
}),
background: background(theme.lowest, "hovered"),
},
clicked: {
...text(theme.lowest, "sans", "pressed", {
size: "xs",
}),
background: background(theme.lowest, "pressed"),
},
},
}),
state: {
active: {
default: {
...text(theme.lowest, "sans", "active", { size: "xs" }),
background: background(theme.middle),
},
hovered: {
...text(theme.lowest, "sans", "active", { size: "xs" }),
background: background(theme.middle, "hovered"),
},
clicked: {
...text(theme.lowest, "sans", "active", { size: "xs" }),
background: background(theme.middle, "pressed"),
},
},
}
});
/**
* Opens the User Menu when toggled
*
* When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron.
*/
function userMenuButton(theme: ColorScheme) {
return {
userMenu: titlebarButton(theme),
avatar: {
icon_width: 16,
icon_height: 16,
cornerRadius: 4,
outerWidth: 10,
outerCornerRadius: 10
},
icon: {
width: 11,
height: 11,
color: foreground(theme.lowest)
}
}
}
export function titlebar(theme: ColorScheme) {
return {
userMenuButton: userMenuButton(theme)
}
}