Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
K
Kayak UI
Manage
Activity
Members
Labels
Plan
Issues
0
Issue boards
Milestones
Code
Merge requests
0
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Microhacks
Bevy Forks
Kayak UI
Commits
625bae6c
Unverified
Commit
625bae6c
authored
3 years ago
by
John
Committed by
GitHub
3 years ago
Browse files
Options
Downloads
Plain Diff
Merge pull request #52 from IceSentry/text-box-color
TextBox text style improvements
parents
1a857227
b74bf3c3
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
examples/text_box.rs
+28
-18
28 additions, 18 deletions
examples/text_box.rs
src/widgets/text_box.rs
+22
-4
22 additions, 4 deletions
src/widgets/text_box.rs
with
50 additions
and
22 deletions
examples/text_box.rs
+
28
−
18
View file @
625bae6c
...
...
@@ -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
>
}
}
...
...
This diff is collapsed.
Click to expand it.
src/widgets/text_box.rs
+
22
−
4
View file @
625bae6c
...
...
@@ -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
>
}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment