zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-08 07:35:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use Interactive helper to theme titlebar buttons

Browse Source
This commit is contained in:
Max Brunsfeld 2022-04-28 12:08:15 -07:00
parent b41bf65c96
commit 6578ae5393
11 changed files with 284 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
assets/themes/cave-dark.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#19171c",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#8b8792",
"size": 12,
"border": {
"color": "#19171c",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#efecf4",
"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
"color": "#8b8792",
"hover": {
"background": "#58526052",
"color": "#8b8792"
},
"background": "#58526052",
"color": "#8b8792"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#5852607a",
"color": "#efecf4"
},
"background": "#58526052",
"color": "#efecf4"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#5852607a",
"color": "#efecf4"
"active_hover": {
"background": "#58526052",
"color": "#efecf4"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/cave-light.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#efecf4",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#585260",
"size": 12,
"border": {
"color": "#efecf4",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#19171c",
"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
"color": "#585260",
"hover": {
"background": "#8b87921f",
"color": "#585260"
},
"background": "#8b87921f",
"color": "#585260"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#8b87922e",
"color": "#19171c"
},
"background": "#8b87921f",
"color": "#19171c"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#8b87922e",
"color": "#19171c"
"active_hover": {
"background": "#8b87921f",
"color": "#19171c"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/dark.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#070707",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#9c9c9c",
"size": 12,
"border": {
"color": "#070707",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#ffffff",
"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
"color": "#9c9c9c",
"hover": {
"background": "#323232",
"color": "#9c9c9c"
},
"background": "#323232",
"color": "#9c9c9c"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#1c1c1c",
"color": "#ffffff"
},
"background": "#323232",
"color": "#ffffff"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#1c1c1c",
"color": "#ffffff"
"active_hover": {
"background": "#323232",
"color": "#ffffff"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/light.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#d5d5d5",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#474747",
"size": 12,
"border": {
"color": "#d5d5d5",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#000000",
"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
"color": "#717171",
"hover": {
"background": "#e3e3e3",
"color": "#717171"
},
"background": "#e3e3e3",
"color": "#717171"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#d5d5d5",
"color": "#000000"
},
"background": "#e3e3e3",
"color": "#000000"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#d5d5d5",
"color": "#000000"
"active_hover": {
"background": "#e3e3e3",
"color": "#000000"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/solarized-dark.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#002b36",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#93a1a1",
"size": 12,
"border": {
"color": "#002b36",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#fdf6e3",
"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
"color": "#93a1a1",
"hover": {
"background": "#586e7552",
"color": "#93a1a1"
},
"background": "#586e7552",
"color": "#93a1a1"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#586e757a",
"color": "#fdf6e3"
},
"background": "#586e7552",
"color": "#fdf6e3"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#586e757a",
"color": "#fdf6e3"
"active_hover": {
"background": "#586e7552",
"color": "#fdf6e3"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/solarized-light.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#fdf6e3",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#586e75",
"size": 12,
"border": {
"color": "#fdf6e3",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#002b36",
"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
"color": "#586e75",
"hover": {
"background": "#93a1a11f",
"color": "#586e75"
},
"background": "#93a1a11f",
"color": "#586e75"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#93a1a12e",
"color": "#002b36"
},
"background": "#93a1a11f",
"color": "#002b36"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#93a1a12e",
"color": "#002b36"
"active_hover": {
"background": "#93a1a11f",
"color": "#002b36"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/sulphurpool-dark.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#202746",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#979db4",
"size": 12,
"border": {
"color": "#202746",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#f5f7ff",
"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
"color": "#979db4",
"hover": {
"background": "#5e668752",
"color": "#979db4"
},
"background": "#5e668752",
"color": "#979db4"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#5e66877a",
"color": "#f5f7ff"
},
"background": "#5e668752",
"color": "#f5f7ff"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#5e66877a",
"color": "#f5f7ff"
"active_hover": {
"background": "#5e668752",
"color": "#f5f7ff"
}
},
"outdated_warning": {
"family": "Zed Sans",

84
assets/themes/sulphurpool-light.json
View File

@ -347,39 +347,26 @@
"bottom": true
},
"sign_in_prompt": {
"border": {
"color": "#f5f7ff",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
},
"family": "Zed Sans",
"color": "#5e6687",
"size": 12,
"border": {
"color": "#f5f7ff",
"width": 1
},
"corner_radius": 6,
"margin": {
"top": 1,
"right": 6
},
"padding": {
"left": 6,
"right": 6
}
},
"hovered_sign_in_prompt": {
"family": "Zed Sans",
"color": "#202746",
"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
"color": "#5e6687",
"hover": {
"background": "#979db41f",
"color": "#5e6687"
},
"background": "#979db41f",
"color": "#5e6687"
},
"hovered_active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
"active": {
"background": "#979db42e",
"color": "#202746"
},
"background": "#979db41f",
"color": "#202746"
},
"active_share_icon": {
"corner_radius": 6,
"margin": {
"top": 3,
"bottom": 2
},
"background": "#979db42e",
"color": "#202746"
"active_hover": {
"background": "#979db41f",
"color": "#202746"
}
},
"outdated_warning": {
"family": "Zed Sans",

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

@ -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());
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>(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());
}
}
}
}
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,
})
}
}

17
crates/workspace/src/workspace.rs
View File

@ -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)

65
styles/src/styleTree/workspace.ts
View File

@ -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"),