diff --git a/crates/story/src/input_story.rs b/crates/story/src/input_story.rs index a645fba4..6e48cbf2 100644 --- a/crates/story/src/input_story.rs +++ b/crates/story/src/input_story.rs @@ -85,8 +85,9 @@ impl InputStory { fraction: Some(3), }) }); - let custom_input = - cx.new(|cx| InputState::new(window, cx).placeholder("here is a custom input")); + let custom_input = cx.new(|cx| { + InputState::new(window, cx).placeholder("Custom Input use monospace, 0123456789.") + }); let code_input = cx.new(|cx| { InputState::new(window, cx) @@ -247,11 +248,12 @@ impl Render for InputStory { ))), ) .child( - section("Appearance false").max_w_md().child( + section("Custom Appearance").max_w_md().child( div() .border_b_2() .px_6() .py_3() + .font_family(cx.theme().mono_font_family.clone()) .border_color(cx.theme().border) .bg(cx.theme().secondary) .text_color(cx.theme().secondary_foreground) diff --git a/crates/ui/src/input/element.rs b/crates/ui/src/input/element.rs index 05c3b18f..9f57f020 100644 --- a/crates/ui/src/input/element.rs +++ b/crates/ui/src/input/element.rs @@ -818,6 +818,15 @@ impl Element for TextElement { window: &mut Window, cx: &mut App, ) -> Self::PrepaintState { + let style = window.text_style(); + let font = style.font(); + let text_size = style.font_size.to_pixels(window.rem_size()); + + self.state.update(cx, |state, cx| { + state.text_wrapper.set_font(font, text_size, cx); + state.text_wrapper.prepare_if_need(&state.text, cx); + }); + let state = self.state.read(cx); let line_height = window.line_height(); @@ -840,8 +849,7 @@ impl Element for TextElement { let text = state.text.clone(); let is_empty = text.len() == 0; let placeholder = self.placeholder.clone(); - let style = window.text_style(); - let font_size = style.font_size.to_pixels(window.rem_size()); + let mut bounds = bounds; let (display_text, text_color) = if is_empty { @@ -862,7 +870,7 @@ impl Element for TextElement { // Calculate the width of the line numbers let (line_number_width, line_number_len) = - Self::layout_line_numbers(&state, &text, font_size, &text_style, window); + Self::layout_line_numbers(&state, &text, text_size, &text_style, window); let wrap_width = if multi_line && state.soft_wrap { Some(bounds.size.width - line_number_width - RIGHT_MARGIN) @@ -956,7 +964,7 @@ impl Element for TextElement { &state, &display_text, &last_layout, - font_size, + text_size, &runs, &document_colors, window, @@ -972,7 +980,7 @@ impl Element for TextElement { .text_system() .shape_line( longest_line.clone(), - font_size, + text_size, &[TextRun { len: longest_line.len(), font: style.font(), @@ -1084,7 +1092,7 @@ impl Element for TextElement { sub_lines.push( window .text_system() - .shape_line(line_no, font_size, &runs, None), + .shape_line(line_no, text_size, &runs, None), ); for _ in 0..line.wrapped_lines.len().saturating_sub(1) { sub_lines.push(ShapedLine::default()); diff --git a/crates/ui/src/input/input.rs b/crates/ui/src/input/input.rs index 28d1ae99..bad7a2be 100644 --- a/crates/ui/src/input/input.rs +++ b/crates/ui/src/input/input.rs @@ -2,7 +2,7 @@ use gpui::prelude::FluentBuilder as _; use gpui::{ AnyElement, App, DefiniteLength, Edges, EdgesRefinement, Entity, InteractiveElement as _, IntoElement, IsZero, MouseButton, ParentElement as _, Rems, RenderOnce, StyleRefinement, - Styled, Window, div, px, relative, rems, + Styled, Window, div, px, relative, }; use crate::button::{Button, ButtonVariants as _}; @@ -241,16 +241,8 @@ impl Styled for Input { impl RenderOnce for Input { fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement { const LINE_HEIGHT: Rems = Rems(1.25); - let font = window.text_style().font(); - let font_size = match self.size { - Size::Large => rems(1.), - _ => rems(0.875), - } - .to_pixels(window.rem_size()); - self.state.update(cx, |state, cx| { - state.text_wrapper.set_font(font, font_size, cx); - state.text_wrapper.prepare_if_need(&state.text, cx); + self.state.update(cx, |state, _| { state.disabled = self.disabled; state.size = self.size; }); @@ -365,8 +357,8 @@ impl RenderOnce for Input { .input_px(self.size) .input_py(self.size) .input_h(self.size) + .input_text_size(self.size) .cursor_text() - .text_size(font_size) .items_center() .when(state.mode.is_multi_line(), |this| { this.h_auto() diff --git a/crates/ui/src/input/state.rs b/crates/ui/src/input/state.rs index 239b28a7..f777eb2f 100644 --- a/crates/ui/src/input/state.rs +++ b/crates/ui/src/input/state.rs @@ -368,11 +368,7 @@ impl InputState { Self { focus_handle: focus_handle.clone(), text: "".into(), - text_wrapper: TextWrapper::new( - text_style.font(), - text_style.font_size.to_pixels(window.rem_size()), - None, - ), + text_wrapper: TextWrapper::new(text_style.font(), window.rem_size(), None), blink_cursor, history, selected_range: Selection::default(), diff --git a/crates/ui/src/input/text_wrapper.rs b/crates/ui/src/input/text_wrapper.rs index ae7d9ccb..e081b0b0 100644 --- a/crates/ui/src/input/text_wrapper.rs +++ b/crates/ui/src/input/text_wrapper.rs @@ -1,6 +1,6 @@ use std::ops::Range; -use gpui::{point, px, size, App, Font, LineFragment, Pixels, Point, ShapedLine, Size, Window}; +use gpui::{App, Font, LineFragment, Pixels, Point, ShapedLine, Size, Window, point, px, size}; use ropey::Rope; use smallvec::SmallVec; @@ -500,7 +500,7 @@ impl LineLayout { #[cfg(test)] mod tests { use super::*; - use gpui::{px, Boundary, FontFeatures, FontStyle, FontWeight}; + use gpui::{Boundary, FontFeatures, FontStyle, FontWeight, px}; #[test] fn test_update() { diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs index 3de2f733..93a4b0da 100644 --- a/crates/ui/src/styled.rs +++ b/crates/ui/src/styled.rs @@ -437,9 +437,9 @@ impl StyleSized for T { match size { Size::XSmall => self.text_xs(), Size::Small => self.text_sm(), - Size::Medium => self.text_base(), - Size::Large => self.text_lg(), - Size::Size(size) => self.text_size(size), + Size::Medium => self.text_sm(), + Size::Large => self.text_base(), + Size::Size(size) => self.text_size(size * 0.875), } } @@ -477,7 +477,6 @@ impl StyleSized for T { Size::XSmall => self.h_5(), _ => self.h_6(), } - .input_text_size(size) } #[inline]