mirror of
https://github.com/zed-industries/zed.git
synced 2024-09-19 18:41:56 +03:00
Add basic styling to keystrokes in command palette
This commit is contained in:
parent
3901d9d544
commit
bde52d5c93
@ -708,6 +708,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"command_palette": {
|
||||||
|
"keystroke_spacing": 8,
|
||||||
|
"key": {
|
||||||
|
"text": {
|
||||||
|
"family": "Zed Mono",
|
||||||
|
"color": "#9c9c9c",
|
||||||
|
"size": 12
|
||||||
|
},
|
||||||
|
"corner_radius": 3,
|
||||||
|
"background": "#2472f2",
|
||||||
|
"border": {
|
||||||
|
"color": "#2472f2",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"padding": {
|
||||||
|
"left": 3,
|
||||||
|
"right": 3
|
||||||
|
},
|
||||||
|
"margin": {
|
||||||
|
"left": 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"project_panel": {
|
"project_panel": {
|
||||||
"padding": {
|
"padding": {
|
||||||
"top": 6,
|
"top": 6,
|
||||||
|
@ -708,6 +708,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"command_palette": {
|
||||||
|
"keystroke_spacing": 8,
|
||||||
|
"key": {
|
||||||
|
"text": {
|
||||||
|
"family": "Zed Mono",
|
||||||
|
"color": "#474747",
|
||||||
|
"size": 12
|
||||||
|
},
|
||||||
|
"corner_radius": 3,
|
||||||
|
"background": "#c5dafc",
|
||||||
|
"border": {
|
||||||
|
"color": "#9ec1fa",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"padding": {
|
||||||
|
"left": 3,
|
||||||
|
"right": 3
|
||||||
|
},
|
||||||
|
"margin": {
|
||||||
|
"left": 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"project_panel": {
|
"project_panel": {
|
||||||
"padding": {
|
"padding": {
|
||||||
"top": 6,
|
"top": 6,
|
||||||
|
@ -35,7 +35,6 @@ struct Command {
|
|||||||
name: &'static str,
|
name: &'static str,
|
||||||
action: Box<dyn Action>,
|
action: Box<dyn Action>,
|
||||||
keystrokes: Vec<Keystroke>,
|
keystrokes: Vec<Keystroke>,
|
||||||
has_multiple_bindings: bool,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
impl CommandPalette {
|
impl CommandPalette {
|
||||||
@ -49,7 +48,6 @@ impl CommandPalette {
|
|||||||
keystrokes: bindings
|
keystrokes: bindings
|
||||||
.last()
|
.last()
|
||||||
.map_or(Vec::new(), |binding| binding.keystrokes().to_vec()),
|
.map_or(Vec::new(), |binding| binding.keystrokes().to_vec()),
|
||||||
has_multiple_bindings: bindings.len() > 1,
|
|
||||||
})
|
})
|
||||||
.collect();
|
.collect();
|
||||||
let selector = cx.add_view(|cx| SelectorModal::new(this, cx));
|
let selector = cx.add_view(|cx| SelectorModal::new(this, cx));
|
||||||
@ -180,12 +178,14 @@ impl SelectorModalDelegate for CommandPalette {
|
|||||||
let mat = &self.matches[ix];
|
let mat = &self.matches[ix];
|
||||||
let command = &self.actions[mat.candidate_id];
|
let command = &self.actions[mat.candidate_id];
|
||||||
let settings = cx.global::<Settings>();
|
let settings = cx.global::<Settings>();
|
||||||
let theme = &settings.theme.selector;
|
let theme = &settings.theme;
|
||||||
let style = if selected {
|
let style = if selected {
|
||||||
&theme.active_item
|
&theme.selector.active_item
|
||||||
} else {
|
} else {
|
||||||
&theme.item
|
&theme.selector.item
|
||||||
};
|
};
|
||||||
|
let key_style = &theme.command_palette.key;
|
||||||
|
let keystroke_spacing = theme.command_palette.keystroke_spacing;
|
||||||
|
|
||||||
Flex::row()
|
Flex::row()
|
||||||
.with_child(Label::new(mat.string.clone(), style.label.clone()).boxed())
|
.with_child(Label::new(mat.string.clone(), style.label.clone()).boxed())
|
||||||
@ -201,23 +201,28 @@ impl SelectorModalDelegate for CommandPalette {
|
|||||||
.into_iter()
|
.into_iter()
|
||||||
.filter_map(|(modifier, label)| {
|
.filter_map(|(modifier, label)| {
|
||||||
if modifier {
|
if modifier {
|
||||||
Some(Label::new(label.into(), style.label.clone()).boxed())
|
Some(
|
||||||
|
Label::new(label.into(), key_style.label.clone())
|
||||||
|
.contained()
|
||||||
|
.with_style(key_style.container)
|
||||||
|
.boxed(),
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
None
|
None
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
.with_child(Label::new(keystroke.key.clone(), style.label.clone()).boxed())
|
.with_child(
|
||||||
|
Label::new(keystroke.key.clone(), key_style.label.clone())
|
||||||
|
.contained()
|
||||||
|
.with_style(key_style.container)
|
||||||
|
.boxed(),
|
||||||
|
)
|
||||||
.contained()
|
.contained()
|
||||||
.with_margin_left(5.0)
|
.with_margin_left(keystroke_spacing)
|
||||||
.flex_float()
|
.flex_float()
|
||||||
.boxed()
|
.boxed()
|
||||||
}))
|
}))
|
||||||
.with_children(if command.has_multiple_bindings {
|
|
||||||
Some(Label::new("+".into(), style.label.clone()).boxed())
|
|
||||||
} else {
|
|
||||||
None
|
|
||||||
})
|
|
||||||
.contained()
|
.contained()
|
||||||
.with_style(style.container)
|
.with_style(style.container)
|
||||||
.boxed()
|
.boxed()
|
||||||
|
@ -21,6 +21,7 @@ pub struct Theme {
|
|||||||
pub chat_panel: ChatPanel,
|
pub chat_panel: ChatPanel,
|
||||||
pub contacts_panel: ContactsPanel,
|
pub contacts_panel: ContactsPanel,
|
||||||
pub project_panel: ProjectPanel,
|
pub project_panel: ProjectPanel,
|
||||||
|
pub command_palette: CommandPalette,
|
||||||
pub selector: Selector,
|
pub selector: Selector,
|
||||||
pub editor: Editor,
|
pub editor: Editor,
|
||||||
pub search: Search,
|
pub search: Search,
|
||||||
@ -187,6 +188,12 @@ pub struct ProjectPanelEntry {
|
|||||||
pub icon_spacing: f32,
|
pub icon_spacing: f32,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Deserialize, Default)]
|
||||||
|
pub struct CommandPalette {
|
||||||
|
pub key: ContainedLabel,
|
||||||
|
pub keystroke_spacing: f32,
|
||||||
|
}
|
||||||
|
|
||||||
#[derive(Deserialize, Default)]
|
#[derive(Deserialize, Default)]
|
||||||
pub struct ContactsPanel {
|
pub struct ContactsPanel {
|
||||||
#[serde(flatten)]
|
#[serde(flatten)]
|
||||||
@ -259,7 +266,7 @@ pub struct ContainedText {
|
|||||||
pub text: TextStyle,
|
pub text: TextStyle,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Clone, Deserialize, Default)]
|
#[derive(Clone, Debug, Deserialize, Default)]
|
||||||
pub struct ContainedLabel {
|
pub struct ContainedLabel {
|
||||||
#[serde(flatten)]
|
#[serde(flatten)]
|
||||||
pub container: ContainerStyle,
|
pub container: ContainerStyle,
|
||||||
|
@ -2,6 +2,7 @@ import Theme from "../themes/theme";
|
|||||||
import chatPanel from "./chatPanel";
|
import chatPanel from "./chatPanel";
|
||||||
import { text } from "./components";
|
import { text } from "./components";
|
||||||
import contactsPanel from "./contactsPanel";
|
import contactsPanel from "./contactsPanel";
|
||||||
|
import commandPalette from "./commandPalette";
|
||||||
import editor from "./editor";
|
import editor from "./editor";
|
||||||
import projectPanel from "./projectPanel";
|
import projectPanel from "./projectPanel";
|
||||||
import search from "./search";
|
import search from "./search";
|
||||||
@ -29,6 +30,7 @@ export default function app(theme: Theme): Object {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
commandPalette: commandPalette(theme),
|
||||||
projectPanel: projectPanel(theme),
|
projectPanel: projectPanel(theme),
|
||||||
chatPanel: chatPanel(theme),
|
chatPanel: chatPanel(theme),
|
||||||
contactsPanel: contactsPanel(theme),
|
contactsPanel: contactsPanel(theme),
|
||||||
|
21
styles/src/styleTree/commandPalette.ts
Normal file
21
styles/src/styleTree/commandPalette.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import Theme from "../themes/theme";
|
||||||
|
import { text, backgroundColor, border } from "./components";
|
||||||
|
|
||||||
|
export default function commandPalette(theme: Theme) {
|
||||||
|
return {
|
||||||
|
keystrokeSpacing: 8,
|
||||||
|
key: {
|
||||||
|
text: text(theme, "mono", "secondary", { size: "xs" }),
|
||||||
|
cornerRadius: 3,
|
||||||
|
background: backgroundColor(theme, "info", "base"),
|
||||||
|
border: border(theme, "info"),
|
||||||
|
padding: {
|
||||||
|
left: 3,
|
||||||
|
right: 3,
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
left: 3
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -38,7 +38,7 @@ export default function selectorModal(theme: Theme): Object {
|
|||||||
},
|
},
|
||||||
inputEditor: {
|
inputEditor: {
|
||||||
background: backgroundColor(theme, 500),
|
background: backgroundColor(theme, 500),
|
||||||
corner_radius: 6,
|
cornerRadius: 6,
|
||||||
placeholderText: text(theme, "sans", "placeholder"),
|
placeholderText: text(theme, "sans", "placeholder"),
|
||||||
selection: player(theme, 1).selection,
|
selection: player(theme, 1).selection,
|
||||||
text: text(theme, "mono", "primary"),
|
text: text(theme, "mono", "primary"),
|
||||||
|
Loading…
Reference in New Issue
Block a user