Implement theme styling for TextInput

This commit is contained in:
Héctor Ramón Jiménez 2022-06-07 01:11:35 +02:00
parent 835877fc63
commit ce53d3933c
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
12 changed files with 145 additions and 183 deletions

View file

@ -95,7 +95,7 @@ mod numeric_input {
for NumericInput<'a, Message>
where
Renderer: 'a + text::Renderer,
Renderer::Theme: button::StyleSheet,
Renderer::Theme: button::StyleSheet + text_input::StyleSheet,
{
type Event = Event;
@ -173,7 +173,7 @@ mod numeric_input {
where
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: button::StyleSheet,
Renderer::Theme: button::StyleSheet + text_input::StyleSheet,
{
fn from(numeric_input: NumericInput<'a, Message>) -> Self {
component::view(numeric_input)

View file

@ -89,7 +89,8 @@ mod numeric_input {
impl<Message, Renderer> Component<Message, Renderer> for NumericInput<Message>
where
Renderer: text::Renderer + 'static,
Renderer::Theme: widget::button::StyleSheet,
Renderer::Theme:
widget::button::StyleSheet + widget::text_input::StyleSheet,
{
type State = ();
type Event = Event;
@ -160,7 +161,8 @@ mod numeric_input {
where
Message: 'a,
Renderer: 'static + text::Renderer,
Renderer::Theme: widget::button::StyleSheet,
Renderer::Theme:
widget::button::StyleSheet + widget::text_input::StyleSheet,
{
fn from(numeric_input: NumericInput<Message>) -> Self {
pure::component(numeric_input)

View file

@ -43,12 +43,6 @@ mod dark {
0x3F as f32 / 255.0,
);
const SURFACE: Color = Color::from_rgb(
0x40 as f32 / 255.0,
0x44 as f32 / 255.0,
0x4B as f32 / 255.0,
);
const ACCENT: Color = Color::from_rgb(
0x6F as f32 / 255.0,
0xFF as f32 / 255.0,

View file

@ -77,8 +77,7 @@ impl Sandbox for Styling {
Message::InputChanged,
)
.padding(10)
.size(20)
.style(self.theme);
.size(20);
let button = Button::new(&mut self.button, Text::new("Submit"))
.padding(10)
@ -157,7 +156,7 @@ impl Sandbox for Styling {
}
mod style {
use iced::{scrollable, text_input};
use iced::scrollable;
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Theme {
@ -175,15 +174,6 @@ mod style {
}
}
impl<'a> From<Theme> for Box<dyn text_input::StyleSheet + 'a> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::TextInput.into(),
}
}
}
impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
fn from(theme: Theme) -> Self {
match theme {
@ -194,7 +184,7 @@ mod style {
}
mod dark {
use iced::{scrollable, text_input, Color};
use iced::{scrollable, Color};
const SURFACE: Color = Color::from_rgb(
0x40 as f32 / 255.0,
@ -202,12 +192,6 @@ mod style {
0x4B as f32 / 255.0,
);
const ACCENT: Color = Color::from_rgb(
0x6F as f32 / 255.0,
0xFF as f32 / 255.0,
0xE9 as f32 / 255.0,
);
const ACTIVE: Color = Color::from_rgb(
0x72 as f32 / 255.0,
0x89 as f32 / 255.0,
@ -220,47 +204,6 @@ mod style {
0xC4 as f32 / 255.0,
);
pub struct TextInput;
impl text_input::StyleSheet for TextInput {
fn active(&self) -> text_input::Style {
text_input::Style {
background: SURFACE.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
}
fn focused(&self) -> text_input::Style {
text_input::Style {
border_width: 1.0,
border_color: ACCENT,
..self.active()
}
}
fn hovered(&self) -> text_input::Style {
text_input::Style {
border_width: 1.0,
border_color: Color { a: 0.3, ..ACCENT },
..self.focused()
}
}
fn placeholder_color(&self) -> Color {
Color::from_rgb(0.4, 0.4, 0.4)
}
fn value_color(&self) -> Color {
Color::WHITE
}
fn selection_color(&self) -> Color {
ACTIVE
}
}
pub struct Scrollable;
impl scrollable::StyleSheet for Scrollable {