Skip to content
Snippets Groups Projects
Unverified Commit 625bae6c authored by John's avatar John Committed by GitHub
Browse files

Merge pull request #52 from IceSentry/text-box-color

TextBox text style improvements
parents 1a857227 b74bf3c3
No related branches found
No related tags found
No related merge requests found
......@@ -3,45 +3,55 @@ use bevy::{
window::WindowDescriptor,
DefaultPlugins,
};
use kayak_core::Color;
use kayak_render_macros::use_state;
use kayak_ui::bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle};
use kayak_ui::core::{
render, rsx,
styles::{Style, StyleProp, Units},
widget, Bound, Index, MutableBound,
widget, Index,
};
use kayak_ui::widgets::{App, OnChange, TextBox, Window};
#[widget]
fn TextBoxExample(context: &mut KayakContext) {
let value = context
.create_state("I started with a value!".to_string())
.unwrap();
let value2 = context.create_state("".to_string()).unwrap();
let (value, set_value, _) = use_state!("I started with a value!".to_string());
let (empty_value, set_empty_value, _) = use_state!("".to_string());
let (red_value, set_red_value, _) = use_state!("This text is red".to_string());
let input_styles = Style {
top: StyleProp::Value(Units::Pixels(10.0)),
..Default::default()
};
let cloned_value = value.clone();
let red_text_styles = Style {
color: StyleProp::Value(Color::new(1., 0., 0., 1.)),
..input_styles.clone()
};
let on_change = OnChange::new(move |event| {
cloned_value.set(event.value);
set_value(event.value);
});
let on_change_empty = OnChange::new(move |event| {
set_empty_value(event.value);
});
let cloned_value2 = value2.clone();
let on_change2 = OnChange::new(move |event| {
cloned_value2.set(event.value);
let on_change_red = OnChange::new(move |event| {
set_red_value(event.value);
});
let current_value = value.get();
let current_value2 = value2.get();
rsx! {
<>
<Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"TextBox Example".to_string()}>
<TextBox styles={Some(input_styles)} value={current_value} on_change={Some(on_change)} />
<TextBox styles={Some(input_styles)} value={current_value2} on_change={Some(on_change2)} />
</Window>
</>
<Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"TextBox Example".to_string()}>
<TextBox styles={Some(input_styles)} value={value} on_change={Some(on_change)} />
<TextBox
styles={Some(input_styles)}
value={empty_value}
on_change={Some(on_change_empty)}
placeholder={Some("This is a placeholder".to_string())}
/>
<TextBox styles={Some(red_text_styles)} value={red_value} on_change={Some(on_change_red)} />
</Window>
}
}
......
......@@ -70,13 +70,14 @@ pub fn TextBox(value: String, on_change: Option<OnChange>, placeholder: Option<S
let mut current_value = value.clone();
let cloned_on_change = on_change.clone();
let cloned_has_focus = has_focus.clone();
self.on_event = Some(OnEvent::new(move |_, event| match event.event_type {
EventType::CharInput { c } => {
if !cloned_has_focus.get().0 {
return;
}
if is_backspace(c) {
if current_value.len() > 0 {
if !current_value.is_empty() {
current_value.truncate(current_value.len() - 1);
}
} else if !c.is_control() {
......@@ -95,15 +96,32 @@ pub fn TextBox(value: String, on_change: Option<OnChange>, placeholder: Option<S
_ => {}
}));
let text_styles = if value.is_empty() || (has_focus.get().0 && value.is_empty()) {
Style {
color: StyleProp::Value(Color::new(0.5, 0.5, 0.5, 1.0)),
..Style::default()
}
} else {
Style {
color: styles.clone().unwrap_or_default().color,
..Style::default()
}
};
let value = if value.is_empty() {
placeholder.clone().unwrap_or(value.clone())
placeholder.unwrap_or_else(|| value.clone())
} else {
value.clone()
value
};
rsx! {
<Background styles={Some(background_styles)}>
<Clip>
<Text content={value} size={14.0} />
<Text
content={value}
size={14.0}
styles={Some(text_styles)}
/>
</Clip>
</Background>
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment