git_ui: Commit modal refinement (#25484)
Closes #ISSUE Release Notes: - N/A *or* Added/Fixed/Improved ... --------- Co-authored-by: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
Nate Butler
GitHub
parent
ceb7fc2cb2
commit
30af8d0a81
14 changed files with 510 additions and 146 deletions
|
|
@ -1,7 +1,8 @@
|
|||
use crate::KeyBinding;
|
||||
use crate::{h_flex, prelude::*};
|
||||
use crate::{ElevationIndex, KeyBinding};
|
||||
use gpui::{point, AnyElement, App, BoxShadow, IntoElement, Window};
|
||||
use gpui::{point, AnyElement, App, BoxShadow, FontStyle, Hsla, IntoElement, Window};
|
||||
use smallvec::smallvec;
|
||||
use theme::Appearance;
|
||||
|
||||
/// Represents a hint for a keybinding, optionally with a prefix and suffix.
|
||||
///
|
||||
|
|
@ -23,7 +24,7 @@ pub struct KeybindingHint {
|
|||
suffix: Option<SharedString>,
|
||||
keybinding: KeyBinding,
|
||||
size: Option<Pixels>,
|
||||
elevation: Option<ElevationIndex>,
|
||||
background_color: Hsla,
|
||||
}
|
||||
|
||||
impl KeybindingHint {
|
||||
|
|
@ -37,15 +38,15 @@ impl KeybindingHint {
|
|||
/// ```
|
||||
/// use ui::prelude::*;
|
||||
///
|
||||
/// let hint = KeybindingHint::new(KeyBinding::from_str("Ctrl+C"));
|
||||
/// let hint = KeybindingHint::new(KeyBinding::from_str("Ctrl+C"), Hsla::new(0.0, 0.0, 0.0, 1.0));
|
||||
/// ```
|
||||
pub fn new(keybinding: KeyBinding) -> Self {
|
||||
pub fn new(keybinding: KeyBinding, background_color: Hsla) -> Self {
|
||||
Self {
|
||||
prefix: None,
|
||||
suffix: None,
|
||||
keybinding,
|
||||
size: None,
|
||||
elevation: None,
|
||||
background_color,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,15 +60,19 @@ impl KeybindingHint {
|
|||
/// ```
|
||||
/// use ui::prelude::*;
|
||||
///
|
||||
/// let hint = KeybindingHint::with_prefix("Copy:", KeyBinding::from_str("Ctrl+C"));
|
||||
/// let hint = KeybindingHint::with_prefix("Copy:", KeyBinding::from_str("Ctrl+C"), Hsla::new(0.0, 0.0, 0.0, 1.0));
|
||||
/// ```
|
||||
pub fn with_prefix(prefix: impl Into<SharedString>, keybinding: KeyBinding) -> Self {
|
||||
pub fn with_prefix(
|
||||
prefix: impl Into<SharedString>,
|
||||
keybinding: KeyBinding,
|
||||
background_color: Hsla,
|
||||
) -> Self {
|
||||
Self {
|
||||
prefix: Some(prefix.into()),
|
||||
suffix: None,
|
||||
keybinding,
|
||||
size: None,
|
||||
elevation: None,
|
||||
background_color,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,15 +86,19 @@ impl KeybindingHint {
|
|||
/// ```
|
||||
/// use ui::prelude::*;
|
||||
///
|
||||
/// let hint = KeybindingHint::with_suffix(KeyBinding::from_str("Ctrl+V"), "Paste");
|
||||
/// let hint = KeybindingHint::with_suffix(KeyBinding::from_str("Ctrl+V"), "Paste", Hsla::new(0.0, 0.0, 0.0, 1.0));
|
||||
/// ```
|
||||
pub fn with_suffix(keybinding: KeyBinding, suffix: impl Into<SharedString>) -> Self {
|
||||
pub fn with_suffix(
|
||||
keybinding: KeyBinding,
|
||||
suffix: impl Into<SharedString>,
|
||||
background_color: Hsla,
|
||||
) -> Self {
|
||||
Self {
|
||||
prefix: None,
|
||||
suffix: Some(suffix.into()),
|
||||
keybinding,
|
||||
size: None,
|
||||
elevation: None,
|
||||
background_color,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,46 +152,37 @@ impl KeybindingHint {
|
|||
self.size = size.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the elevation of the keybinding hint.
|
||||
///
|
||||
/// This method allows specifying the elevation index for the keybinding hint,
|
||||
/// which affects its visual appearance in terms of depth or layering.
|
||||
///
|
||||
/// # Examples
|
||||
///
|
||||
/// ```
|
||||
/// use ui::prelude::*;
|
||||
///
|
||||
/// let hint = KeybindingHint::new(KeyBinding::from_str("Ctrl+A"))
|
||||
/// .elevation(ElevationIndex::new(1));
|
||||
/// ```
|
||||
pub fn elevation(mut self, elevation: impl Into<Option<ElevationIndex>>) -> Self {
|
||||
self.elevation = elevation.into();
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for KeybindingHint {
|
||||
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let colors = cx.theme().colors().clone();
|
||||
let is_light = cx.theme().appearance() == Appearance::Light;
|
||||
|
||||
let border_color =
|
||||
self.background_color
|
||||
.blend(colors.text.alpha(if is_light { 0.08 } else { 0.16 }));
|
||||
let bg_color =
|
||||
self.background_color
|
||||
.blend(colors.text.alpha(if is_light { 0.06 } else { 0.12 }));
|
||||
let shadow_color = colors.text.alpha(if is_light { 0.04 } else { 0.08 });
|
||||
|
||||
let size = self
|
||||
.size
|
||||
.unwrap_or(TextSize::Small.rems(cx).to_pixels(window.rem_size()));
|
||||
let kb_size = size - px(2.0);
|
||||
let kb_bg = if let Some(elevation) = self.elevation {
|
||||
elevation.on_elevation_bg(cx)
|
||||
} else {
|
||||
theme::color_alpha(colors.element_background, 0.6)
|
||||
};
|
||||
|
||||
h_flex()
|
||||
.items_center()
|
||||
let mut base = h_flex();
|
||||
|
||||
base.text_style()
|
||||
.get_or_insert_with(Default::default)
|
||||
.font_style = Some(FontStyle::Italic);
|
||||
|
||||
base.items_center()
|
||||
.gap_0p5()
|
||||
.font_buffer(cx)
|
||||
.text_size(size)
|
||||
.text_color(colors.text_muted)
|
||||
.text_color(colors.text_disabled)
|
||||
.children(self.prefix)
|
||||
.child(
|
||||
h_flex()
|
||||
|
|
@ -191,10 +191,10 @@ impl RenderOnce for KeybindingHint {
|
|||
.px_0p5()
|
||||
.mr_0p5()
|
||||
.border_1()
|
||||
.border_color(kb_bg)
|
||||
.bg(kb_bg.opacity(0.8))
|
||||
.border_color(border_color)
|
||||
.bg(bg_color)
|
||||
.shadow(smallvec![BoxShadow {
|
||||
color: cx.theme().colors().editor_background.opacity(0.8),
|
||||
color: shadow_color,
|
||||
offset: point(px(0.), px(1.)),
|
||||
blur_radius: px(0.),
|
||||
spread_radius: px(0.),
|
||||
|
|
@ -212,6 +212,8 @@ impl ComponentPreview for KeybindingHint {
|
|||
let enter = KeyBinding::for_action(&menu::Confirm, window, cx)
|
||||
.unwrap_or(KeyBinding::new(enter_fallback, cx));
|
||||
|
||||
let bg_color = cx.theme().colors().surface_background;
|
||||
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
|
|
@ -220,17 +222,17 @@ impl ComponentPreview for KeybindingHint {
|
|||
vec![
|
||||
single_example(
|
||||
"With Prefix",
|
||||
KeybindingHint::with_prefix("Go to Start:", enter.clone())
|
||||
KeybindingHint::with_prefix("Go to Start:", enter.clone(), bg_color)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"With Suffix",
|
||||
KeybindingHint::with_suffix(enter.clone(), "Go to End")
|
||||
KeybindingHint::with_suffix(enter.clone(), "Go to End", bg_color)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"With Prefix and Suffix",
|
||||
KeybindingHint::new(enter.clone())
|
||||
KeybindingHint::new(enter.clone(), bg_color)
|
||||
.prefix("Confirm:")
|
||||
.suffix("Execute selected action")
|
||||
.into_any_element(),
|
||||
|
|
@ -242,21 +244,21 @@ impl ComponentPreview for KeybindingHint {
|
|||
vec![
|
||||
single_example(
|
||||
"Small",
|
||||
KeybindingHint::new(enter.clone())
|
||||
KeybindingHint::new(enter.clone(), bg_color)
|
||||
.size(Pixels::from(12.0))
|
||||
.prefix("Small:")
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Medium",
|
||||
KeybindingHint::new(enter.clone())
|
||||
KeybindingHint::new(enter.clone(), bg_color)
|
||||
.size(Pixels::from(16.0))
|
||||
.suffix("Medium")
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Large",
|
||||
KeybindingHint::new(enter.clone())
|
||||
KeybindingHint::new(enter.clone(), bg_color)
|
||||
.size(Pixels::from(20.0))
|
||||
.prefix("Large:")
|
||||
.suffix("Size")
|
||||
|
|
@ -264,41 +266,6 @@ impl ComponentPreview for KeybindingHint {
|
|||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Elevations",
|
||||
vec![
|
||||
single_example(
|
||||
"Surface",
|
||||
KeybindingHint::new(enter.clone())
|
||||
.elevation(ElevationIndex::Surface)
|
||||
.prefix("Surface:")
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Elevated Surface",
|
||||
KeybindingHint::new(enter.clone())
|
||||
.elevation(ElevationIndex::ElevatedSurface)
|
||||
.suffix("Elevated")
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Editor Surface",
|
||||
KeybindingHint::new(enter.clone())
|
||||
.elevation(ElevationIndex::EditorSurface)
|
||||
.prefix("Editor:")
|
||||
.suffix("Surface")
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Modal Surface",
|
||||
KeybindingHint::new(enter.clone())
|
||||
.elevation(ElevationIndex::ModalSurface)
|
||||
.prefix("Modal:")
|
||||
.suffix("Enter")
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element()
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue