dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Do not preset padding when input with affix (#70)

Browse source
This commit is contained in:
Floyd Wang 2024-07-25 11:02:04 +08:00 committed by GitHub
parent 7489a4ffdd
commit f02c2a82b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 39 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
crates/story/src/input_story.rs
View file

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

2
crates/ui/src/dropdown.rs
View file

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

6
crates/ui/src/event.rs
View file

@ -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<E: InteractiveElement> InterativeElementExt for Focusable<E> {}
impl<E: InteractiveElement> InteractiveElementExt for Focusable<E> {}
// impl<E> InterativeElementExt for Stateful<E>
// impl<E> InteractiveElementExt for Stateful<E>
// where
// E: Element,
// Self: InteractiveElement,

15
crates/ui/src/input/input.rs
View file

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

2
crates/ui/src/lib.rs
View file

@ -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};

22
crates/ui/src/styled_ext.rs
View file

@ -195,18 +195,36 @@ impl From<Pixels> for Size {
}
#[allow(unused)]
pub trait Sizeful<T: Styled> {
pub trait StyleSized<T: Styled> {
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<T: Styled> Sizeful<T> for T {
impl<T: Styled> StyleSized<T> 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(),