From f02c2a82b102d4450914d152e59f3871dccf4e2e Mon Sep 17 00:00:00 2001 From: Floyd Wang Date: Thu, 25 Jul 2024 11:02:04 +0800 Subject: [PATCH] Do not preset padding when input with affix (#70) --- crates/story/src/input_story.rs | 12 ++++++------ crates/ui/src/dropdown.rs | 2 +- crates/ui/src/event.rs | 6 +++--- crates/ui/src/input/input.rs | 15 ++++++++------- crates/ui/src/lib.rs | 2 +- crates/ui/src/styled_ext.rs | 22 ++++++++++++++++++++-- 6 files changed, 39 insertions(+), 20 deletions(-) diff --git a/crates/story/src/input_story.rs b/crates/story/src/input_story.rs index 12cb6786..f2e1d0b7 100644 --- a/crates/story/src/input_story.rs +++ b/crates/story/src/input_story.rs @@ -1,5 +1,5 @@ use gpui::{ - actions, AppContext, FocusHandle, InteractiveElement, IntoElement, KeyBinding, + actions, div, AppContext, FocusHandle, InteractiveElement, IntoElement, KeyBinding, ParentElement as _, Render, SharedString, Styled, View, ViewContext, VisualContext, WindowContext, }; @@ -68,21 +68,21 @@ impl InputStory { let prefix_input1 = cx.new_view(|cx| { TextInput::new(cx) - .prefix(|_| IconName::Search) + .prefix(|_| div().child(IconName::Search).ml_3()) .placeholder("Search some thing...") .cleanable(true) }); let suffix_input1 = cx.new_view(|cx| { TextInput::new(cx) - .suffix(|_| IconName::Info) + .suffix(|_| div().child(IconName::Info).mr_3()) .placeholder("This input only support [a-zA-Z0-9] characters.") .pattern(regex::Regex::new(r"^[a-zA-Z0-9]*$").unwrap()) .cleanable(true) }); let both_input1 = cx.new_view(|cx| { TextInput::new(cx) - .prefix(|_| IconName::Search) - .suffix(|_| IconName::Info) + .prefix(|_| div().child(IconName::Search).ml_3()) + .suffix(|_| div().child(IconName::Info).mr_3()) .cleanable(true) .placeholder("This input have prefix and suffix.") }); @@ -198,7 +198,7 @@ impl Render for InputStory { .gap_3() .items_start() .child( - section("Preifx and Suffix", cx) + section("Prefix and Suffix", cx) .child(self.prefix_input1.clone()) .child(self.both_input1.clone()) .child(self.suffix_input1.clone()), diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs index b228bc06..947a1ba8 100644 --- a/crates/ui/src/dropdown.rs +++ b/crates/ui/src/dropdown.rs @@ -24,7 +24,7 @@ use crate::{ button::{Button, ButtonStyle}, h_flex, list::{self, List, ListDelegate, ListItem}, - styled_ext::Sizeful, + styled_ext::StyleSized, theme::ActiveTheme as _, Clickable as _, Icon, IconName, Size, StyledExt, }; diff --git a/crates/ui/src/event.rs b/crates/ui/src/event.rs index d84d1b5a..a54e59cc 100644 --- a/crates/ui/src/event.rs +++ b/crates/ui/src/event.rs @@ -1,6 +1,6 @@ use gpui::{ClickEvent, Focusable, InteractiveElement, WindowContext}; -pub trait InterativeElementExt: InteractiveElement { +pub trait InteractiveElementExt: InteractiveElement { /// Set the listener for a double click event. fn on_double_click( mut self, @@ -18,9 +18,9 @@ pub trait InterativeElementExt: InteractiveElement { } } -impl InterativeElementExt for Focusable {} +impl InteractiveElementExt for Focusable {} -// impl InterativeElementExt for Stateful +// impl InteractiveElementExt for Stateful // where // E: Element, // Self: InteractiveElement, diff --git a/crates/ui/src/input/input.rs b/crates/ui/src/input/input.rs index fd5a99c2..39e0657b 100644 --- a/crates/ui/src/input/input.rs +++ b/crates/ui/src/input/input.rs @@ -9,9 +9,9 @@ use super::blink_cursor::BlinkCursor; use super::history::History; use crate::button::{Button, ButtonStyle}; use crate::indicator::Indicator; -use crate::styled_ext::Sizeful; +use crate::styled_ext::StyleSized; use crate::theme::ActiveTheme; -use crate::{event::InterativeElementExt as _, Size}; +use crate::{event::InteractiveElementExt as _, Size}; use crate::{Clickable, IconName, StyledExt as _}; use gpui::prelude::FluentBuilder as _; use gpui::{ @@ -821,7 +821,7 @@ impl Element for TextElement { let cursor = input.cursor_offset(); let style = cx.text_style(); - let (disaplay_text, text_color) = if text.is_empty() { + let (display_text, text_color) = if text.is_empty() { (placeholder, cx.theme().muted_foreground) } else if input.masked { ( @@ -833,7 +833,7 @@ impl Element for TextElement { }; let run = TextRun { - len: disaplay_text.len(), + len: display_text.len(), font: style.font(), color: text_color, background_color: None, @@ -857,7 +857,7 @@ impl Element for TextElement { ..run.clone() }, TextRun { - len: disaplay_text.len() - marked_range.end, + len: display_text.len() - marked_range.end, ..run.clone() }, ] @@ -871,7 +871,7 @@ impl Element for TextElement { let font_size = style.font_size.to_pixels(cx.rem_size()); let line = cx .text_system() - .shape_line(disaplay_text, font_size, &runs) + .shape_line(display_text, font_size, &runs) .unwrap(); // Calculate the scroll offset to keep the cursor in view @@ -1036,7 +1036,8 @@ impl Render for TextInput { .rounded(px(cx.theme().radius)) .shadow_sm() .when(focused, |this| this.outline(cx)) - .input_px(self.size) + .when(prefix.is_none(), |this| this.input_pl(self.size)) + .when(suffix.is_none(), |this| this.input_pr(self.size)) .bg(if self.disabled { cx.theme().muted } else { diff --git a/crates/ui/src/lib.rs b/crates/ui/src/lib.rs index 6d96dd93..08838a3c 100644 --- a/crates/ui/src/lib.rs +++ b/crates/ui/src/lib.rs @@ -38,7 +38,7 @@ pub use wry; pub use clickable::Clickable; pub use disableable::Disableable; -pub use event::InterativeElementExt; +pub use event::InteractiveElementExt; pub use focusable::FocusableCycle; pub use selectable::{Selectable, Selection}; pub use styled_ext::{Size, StyledExt}; diff --git a/crates/ui/src/styled_ext.rs b/crates/ui/src/styled_ext.rs index 2633db90..5f409b67 100644 --- a/crates/ui/src/styled_ext.rs +++ b/crates/ui/src/styled_ext.rs @@ -195,18 +195,36 @@ impl From for Size { } #[allow(unused)] -pub trait Sizeful { +pub trait StyleSized { fn input_size(self, size: Size) -> Self; + fn input_pl(self, size: Size) -> Self; + fn input_pr(self, size: Size) -> Self; fn input_px(self, size: Size) -> Self; fn input_py(self, size: Size) -> Self; fn input_h(self, size: Size) -> Self; } -impl Sizeful for T { +impl StyleSized for T { fn input_size(self, size: Size) -> Self { self.input_px(size).input_py(size).input_h(size) } + fn input_pl(self, size: Size) -> Self { + match size { + Size::Large => self.pl_5(), + Size::Medium => self.pl_3(), + _ => self.pl_2(), + } + } + + fn input_pr(self, size: Size) -> Self { + match size { + Size::Large => self.pr_5(), + Size::Medium => self.pr_3(), + _ => self.pr_2(), + } + } + fn input_px(self, size: Size) -> Self { match size { Size::Large => self.px_5(),