TextBox text style improvements

* Use colour style for the text
* Use gray colour for the placeholder text
* Add more color constant

examples/text_box.rs

@@ -3,6 +3,7 @@ use bevy::{
     window::WindowDescriptor,
     DefaultPlugins,
 };
+use kayak_core::Color;
 use kayak_ui::bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle};
 use kayak_ui::core::{
     render, rsx,
@@ -16,32 +17,50 @@ 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 red_value = context
+        .create_state("This text is red".to_string())
+        .unwrap();
+    let empty_value = context.create_state("".to_string()).unwrap();
 
     let input_styles = Style {
         top: StyleProp::Value(Units::Pixels(10.0)),
         ..Default::default()
     };
 
+    let red_text_styles = Style {
+        color: StyleProp::Value(Color::RED),
+        ..input_styles.clone()
+    };
+
     let cloned_value = value.clone();
     let on_change = OnChange::new(move |event| {
         cloned_value.set(event.value);
     });
 
-    let cloned_value2 = value2.clone();
+    let cloned_value2 = empty_value.clone();
     let on_change2 = OnChange::new(move |event| {
         cloned_value2.set(event.value);
     });
 
+    let cloned_red_value = red_value.clone();
+    let on_change_red = OnChange::new(move |event| {
+        cloned_red_value.set(event.value);
+    });
+
     let current_value = value.get();
-    let current_value2 = value2.get();
+    let current_value2 = empty_value.get();
+    let current_red_value = red_value.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={current_value} on_change={Some(on_change)} />
+            <TextBox
+                styles={Some(input_styles)}
+                value={current_value2}
+                on_change={Some(on_change2)}
+                placeholder={Some("This is a placeholder".to_string())}
+            />
+            <TextBox styles={Some(red_text_styles)} value={current_red_value} on_change={Some(on_change_red)} />
+        </Window>
     }
 }
 

kayak_core/src/color.rs

@@ -34,6 +34,38 @@ impl Color {
         a: 1.0,
     };
 
+    /// The white color.
+    pub const GRAY: Color = Color {
+        r: 0.5,
+        g: 0.5,
+        b: 0.5,
+        a: 1.0,
+    };
+
+    /// The red color.
+    pub const RED: Color = Color {
+        r: 1.0,
+        g: 0.0,
+        b: 0.0,
+        a: 1.0,
+    };
+
+    /// The green color.
+    pub const GREEN: Color = Color {
+        r: 0.0,
+        g: 1.0,
+        b: 0.0,
+        a: 1.0,
+    };
+
+    /// The blue color.
+    pub const BLUE: Color = Color {
+        r: 0.0,
+        g: 0.0,
+        b: 1.0,
+        a: 1.0,
+    };
+
     /// A color with no opacity.
     pub const TRANSPARENT: Color = Color {
         r: 0.0,

src/widgets/text_box.rs

@@ -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::GRAY),
+            ..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>
     }