Detailed changes
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#8b8792",
- "size": 12,
"border": {
"color": "#19171c",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#efecf4",
+ "color": "#8b8792",
"size": 12,
- "border": {
- "color": "#19171c",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#efecf4",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#8b8792"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#58526052",
- "color": "#8b8792"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#8b8792",
+ "hover": {
+ "background": "#58526052",
+ "color": "#8b8792"
},
- "background": "#58526052",
- "color": "#efecf4"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#5852607a",
+ "color": "#efecf4"
},
- "background": "#5852607a",
- "color": "#efecf4"
+ "active_hover": {
+ "background": "#58526052",
+ "color": "#efecf4"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#585260",
- "size": 12,
"border": {
"color": "#efecf4",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#19171c",
+ "color": "#585260",
"size": 12,
- "border": {
- "color": "#efecf4",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#19171c",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#585260"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#8b87921f",
- "color": "#585260"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#585260",
+ "hover": {
+ "background": "#8b87921f",
+ "color": "#585260"
},
- "background": "#8b87921f",
- "color": "#19171c"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#8b87922e",
+ "color": "#19171c"
},
- "background": "#8b87922e",
- "color": "#19171c"
+ "active_hover": {
+ "background": "#8b87921f",
+ "color": "#19171c"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#9c9c9c",
- "size": 12,
"border": {
"color": "#070707",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#ffffff",
+ "color": "#9c9c9c",
"size": 12,
- "border": {
- "color": "#070707",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#ffffff",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#9c9c9c"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#323232",
- "color": "#9c9c9c"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#9c9c9c",
+ "hover": {
+ "background": "#323232",
+ "color": "#9c9c9c"
},
- "background": "#323232",
- "color": "#ffffff"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#1c1c1c",
+ "color": "#ffffff"
},
- "background": "#1c1c1c",
- "color": "#ffffff"
+ "active_hover": {
+ "background": "#323232",
+ "color": "#ffffff"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#474747",
- "size": 12,
"border": {
"color": "#d5d5d5",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#000000",
+ "color": "#474747",
"size": 12,
- "border": {
- "color": "#d5d5d5",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#000000",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#717171"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#e3e3e3",
- "color": "#717171"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#717171",
+ "hover": {
+ "background": "#e3e3e3",
+ "color": "#717171"
},
- "background": "#e3e3e3",
- "color": "#000000"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#d5d5d5",
+ "color": "#000000"
},
- "background": "#d5d5d5",
- "color": "#000000"
+ "active_hover": {
+ "background": "#e3e3e3",
+ "color": "#000000"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#93a1a1",
- "size": 12,
"border": {
"color": "#002b36",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#fdf6e3",
+ "color": "#93a1a1",
"size": 12,
- "border": {
- "color": "#002b36",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#fdf6e3",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#93a1a1"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#586e7552",
- "color": "#93a1a1"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#93a1a1",
+ "hover": {
+ "background": "#586e7552",
+ "color": "#93a1a1"
},
- "background": "#586e7552",
- "color": "#fdf6e3"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#586e757a",
+ "color": "#fdf6e3"
},
- "background": "#586e757a",
- "color": "#fdf6e3"
+ "active_hover": {
+ "background": "#586e7552",
+ "color": "#fdf6e3"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#586e75",
- "size": 12,
"border": {
"color": "#fdf6e3",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#002b36",
+ "color": "#586e75",
"size": 12,
- "border": {
- "color": "#fdf6e3",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#002b36",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#586e75"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#93a1a11f",
- "color": "#586e75"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#586e75",
+ "hover": {
+ "background": "#93a1a11f",
+ "color": "#586e75"
},
- "background": "#93a1a11f",
- "color": "#002b36"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#93a1a12e",
+ "color": "#002b36"
},
- "background": "#93a1a12e",
- "color": "#002b36"
+ "active_hover": {
+ "background": "#93a1a11f",
+ "color": "#002b36"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#979db4",
- "size": 12,
"border": {
"color": "#202746",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#f5f7ff",
+ "color": "#979db4",
"size": 12,
- "border": {
- "color": "#202746",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#f5f7ff",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#979db4"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#5e668752",
- "color": "#979db4"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#979db4",
+ "hover": {
+ "background": "#5e668752",
+ "color": "#979db4"
},
- "background": "#5e668752",
- "color": "#f5f7ff"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#5e66877a",
+ "color": "#f5f7ff"
},
- "background": "#5e66877a",
- "color": "#f5f7ff"
+ "active_hover": {
+ "background": "#5e668752",
+ "color": "#f5f7ff"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -347,9 +347,6 @@
"bottom": true
},
"sign_in_prompt": {
- "family": "Zed Sans",
- "color": "#5e6687",
- "size": 12,
"border": {
"color": "#f5f7ff",
"width": 1
@@ -362,24 +359,14 @@
"padding": {
"left": 6,
"right": 6
- }
- },
- "hovered_sign_in_prompt": {
+ },
"family": "Zed Sans",
- "color": "#202746",
+ "color": "#5e6687",
"size": 12,
- "border": {
- "color": "#f5f7ff",
- "width": 1
- },
- "corner_radius": 6,
- "margin": {
- "top": 1,
- "right": 6
- },
- "padding": {
- "left": 6,
- "right": 6
+ "hover": {
+ "family": "Zed Sans",
+ "color": "#202746",
+ "size": 12
}
},
"offline_icon": {
@@ -395,34 +382,19 @@
"top": 3,
"bottom": 2
},
- "color": "#5e6687"
- },
- "hovered_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
- },
- "background": "#979db41f",
- "color": "#5e6687"
- },
- "hovered_active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "color": "#5e6687",
+ "hover": {
+ "background": "#979db41f",
+ "color": "#5e6687"
},
- "background": "#979db41f",
- "color": "#202746"
- },
- "active_share_icon": {
- "corner_radius": 6,
- "margin": {
- "top": 3,
- "bottom": 2
+ "active": {
+ "background": "#979db42e",
+ "color": "#202746"
},
- "background": "#979db42e",
- "color": "#202746"
+ "active_hover": {
+ "background": "#979db41f",
+ "color": "#202746"
+ }
},
"outdated_warning": {
"family": "Zed Sans",
@@ -55,13 +55,9 @@ pub struct Titlebar {
pub avatar_width: f32,
pub avatar_ribbon: AvatarRibbon,
pub offline_icon: OfflineIcon,
- pub share_icon: ShareIcon,
- pub hovered_share_icon: ShareIcon,
- pub active_share_icon: ShareIcon,
- pub hovered_active_share_icon: ShareIcon,
+ pub share_icon: Interactive<ShareIcon>,
pub avatar: ImageStyle,
- pub sign_in_prompt: ContainedText,
- pub hovered_sign_in_prompt: ContainedText,
+ pub sign_in_prompt: Interactive<ContainedText>,
pub outdated_warning: ContainedText,
}
@@ -418,6 +414,7 @@ pub struct Interactive<T> {
pub default: T,
pub hover: Option<T>,
pub active: Option<T>,
+ pub active_hover: Option<T>,
}
impl<T> Interactive<T> {
@@ -428,6 +425,10 @@ impl<T> Interactive<T> {
pub fn hover(&self) -> &T {
self.hover.as_ref().unwrap_or(&self.default)
}
+
+ pub fn active_hover(&self) -> &T {
+ self.active_hover.as_ref().unwrap_or(self.active())
+ }
}
impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive<T> {
@@ -441,46 +442,40 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive<T> {
default: Value,
hover: Option<Value>,
active: Option<Value>,
+ active_hover: Option<Value>,
}
let json = Helper::deserialize(deserializer)?;
- let hover = if let Some(mut hovered) = json.hover {
- if let Value::Object(hovered) = &mut hovered {
- if let Value::Object(default) = &json.default {
- for (key, value) in default {
- if !hovered.contains_key(key) {
- hovered.insert(key.clone(), value.clone());
- }
- }
- }
- }
- Some(serde_json::from_value::<T>(hovered).map_err(serde::de::Error::custom)?)
- } else {
- None
- };
-
- let active = if let Some(mut active) = json.active {
- if let Value::Object(active) = &mut active {
- if let Value::Object(default) = &json.default {
- for (key, value) in default {
- if !active.contains_key(key) {
- active.insert(key.clone(), value.clone());
+ let deserialize_state = |state_json: Option<Value>| -> Result<Option<T>, D::Error> {
+ if let Some(mut state_json) = state_json {
+ if let Value::Object(state_json) = &mut state_json {
+ if let Value::Object(default) = &json.default {
+ for (key, value) in default {
+ if !state_json.contains_key(key) {
+ state_json.insert(key.clone(), value.clone());
+ }
}
}
}
+ Ok(Some(
+ serde_json::from_value::<T>(state_json).map_err(serde::de::Error::custom)?,
+ ))
+ } else {
+ Ok(None)
}
- Some(serde_json::from_value::<T>(active).map_err(serde::de::Error::custom)?)
- } else {
- None
};
+ let hover = deserialize_state(json.hover)?;
+ let active = deserialize_state(json.active)?;
+ let active_hover = deserialize_state(json.active_hover)?;
let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?;
Ok(Interactive {
default,
hover,
active,
+ active_hover,
})
}
}
@@ -1575,9 +1575,9 @@ impl Workspace {
Some(
MouseEventHandler::new::<Authenticate, _, _>(0, cx, |state, _| {
let style = if state.hovered {
- &theme.workspace.titlebar.hovered_sign_in_prompt
+ &theme.workspace.titlebar.sign_in_prompt.hover()
} else {
- &theme.workspace.titlebar.sign_in_prompt
+ &theme.workspace.titlebar.sign_in_prompt.default
};
Label::new("Sign in".to_string(), style.text.clone())
.contained()
@@ -1649,18 +1649,17 @@ impl Workspace {
{
Some(
MouseEventHandler::new::<ToggleShare, _, _>(0, cx, |state, cx| {
+ let style = &theme.workspace.titlebar.share_icon;
let style = if self.project().read(cx).is_shared() {
if state.hovered {
- &theme.workspace.titlebar.hovered_active_share_icon
+ style.active_hover()
} else {
- &theme.workspace.titlebar.active_share_icon
+ &style.active()
}
+ } else if state.hovered {
+ &style.active()
} else {
- if state.hovered {
- &theme.workspace.titlebar.hovered_share_icon
- } else {
- &theme.workspace.titlebar.share_icon
- }
+ &style.default
};
Svg::new("icons/share.svg")
.with_color(style.color)
@@ -2,20 +2,6 @@ import Theme from "../themes/theme";
import { backgroundColor, border, iconColor, text } from "./components";
export default function workspace(theme: Theme) {
- const signInPrompt = {
- ...text(theme, "sans", "secondary", { size: "xs" }),
- border: border(theme, "primary"),
- cornerRadius: 6,
- margin: {
- top: 1,
- right: 6,
- },
- padding: {
- left: 6,
- right: 6,
- },
- };
-
const tab = {
height: 32,
background: backgroundColor(theme, 300),
@@ -52,10 +38,6 @@ export default function workspace(theme: Theme) {
padding: { left: 6, right: 6 },
...text(theme, "sans", "primary", { size: "sm" }),
};
- const shareIcon = {
- cornerRadius: 6,
- margin: { top: 3, bottom: 2 },
- };
return {
background: backgroundColor(theme, 300),
@@ -183,10 +165,19 @@ export default function workspace(theme: Theme) {
// set with a token, not hardcoded in rust
},
border: border(theme, "primary", { bottom: true }),
- signInPrompt,
- hoveredSignInPrompt: {
- ...signInPrompt,
- ...text(theme, "sans", "active", { size: "xs" }),
+ signInPrompt: {
+ border: border(theme, "primary"),
+ cornerRadius: 6,
+ margin: {
+ top: 1,
+ right: 6,
+ },
+ padding: {
+ left: 6,
+ right: 6,
+ },
+ ...text(theme, "sans", "secondary", { size: "xs" }),
+ hover: text(theme, "sans", "active", { size: "xs" }),
},
offlineIcon: {
color: iconColor(theme, "secondary"),
@@ -196,23 +187,21 @@ export default function workspace(theme: Theme) {
},
},
shareIcon: {
- ...shareIcon,
- color: iconColor(theme, "secondary")
- },
- hoveredShareIcon: {
- ...shareIcon,
- background: backgroundColor(theme, 100, "hovered"),
+ cornerRadius: 6,
+ margin: { top: 3, bottom: 2 },
color: iconColor(theme, "secondary"),
- },
- hoveredActiveShareIcon: {
- ...shareIcon,
- background: backgroundColor(theme, 100, "hovered"),
- color: iconColor(theme, "active"),
- },
- activeShareIcon: {
- ...shareIcon,
- background: backgroundColor(theme, 100, "active"),
- color: iconColor(theme, "active"),
+ hover: {
+ background: backgroundColor(theme, 100, "hovered"),
+ color: iconColor(theme, "secondary"),
+ },
+ active: {
+ background: backgroundColor(theme, 100, "active"),
+ color: iconColor(theme, "active"),
+ },
+ activeHover: {
+ background: backgroundColor(theme, 100, "hovered"),
+ color: iconColor(theme, "active"),
+ }
},
outdatedWarning: {
...text(theme, "sans", "warning"),