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
3a212b03
Unverified
Commit
3a212b03
authored
3 years ago
by
Ygg01
Browse files
Options
Downloads
Patches
Plain Diff
WIP On spinbox
parent
79c82258
No related branches found
No related tags found
No related merge requests found
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
examples/text_box.rs
+10
-4
10 additions, 4 deletions
examples/text_box.rs
src/widgets/on_change.rs
+1
-1
1 addition, 1 deletion
src/widgets/on_change.rs
src/widgets/spin_box.rs
+67
-18
67 additions, 18 deletions
src/widgets/spin_box.rs
src/widgets/text_box.rs
+10
-7
10 additions, 7 deletions
src/widgets/text_box.rs
with
88 additions
and
30 deletions
examples/text_box.rs
+
10
−
4
View file @
3a212b03
...
@@ -5,19 +5,20 @@ use bevy::{
...
@@ -5,19 +5,20 @@ use bevy::{
};
};
use
kayak_core
::
Color
;
use
kayak_core
::
Color
;
use
kayak_render_macros
::
use_state
;
use
kayak_render_macros
::
use_state
;
use
kayak_ui
::
{
bevy
::{
BevyContext
,
BevyKayakUIPlugin
,
FontMapping
,
UICameraBundle
}
}
;
use
kayak_ui
::
bevy
::{
BevyContext
,
BevyKayakUIPlugin
,
FontMapping
,
UICameraBundle
};
use
kayak_ui
::
core
::{
use
kayak_ui
::
core
::{
render
,
rsx
,
render
,
rsx
,
styles
::{
Style
,
StyleProp
,
Units
},
styles
::{
Style
,
StyleProp
,
Units
},
widget
,
Index
,
widget
,
Index
,
};
};
use
kayak_ui
::
widgets
::{
App
,
OnChange
,
Window
,
TextBox
,
SpinBox
};
use
kayak_ui
::
widgets
::{
App
,
Inspector
,
OnChange
,
SpinBox
,
TextBox
,
Window
};
#[widget]
#[widget]
fn
TextBoxExample
()
{
fn
TextBoxExample
()
{
let
(
value
,
set_value
,
_
)
=
use_state!
(
"I started with a value!"
.to_string
());
let
(
value
,
set_value
,
_
)
=
use_state!
(
"I started with a value!"
.to_string
());
let
(
empty_value
,
set_empty_value
,
_
)
=
use_state!
(
""
.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
(
red_value
,
set_red_value
,
_
)
=
use_state!
(
"This text is red"
.to_string
());
let
(
spin_value
,
set_spin_value
,
_
)
=
use_state!
(
"3"
.to_string
());
let
input_styles
=
Style
{
let
input_styles
=
Style
{
top
:
StyleProp
::
Value
(
Units
::
Pixels
(
10.0
)),
top
:
StyleProp
::
Value
(
Units
::
Pixels
(
10.0
)),
...
@@ -41,8 +42,12 @@ fn TextBoxExample() {
...
@@ -41,8 +42,12 @@ fn TextBoxExample() {
set_red_value
(
event
.value
);
set_red_value
(
event
.value
);
});
});
let
on_change_spin
=
OnChange
::
new
(
move
|
event
|
{
set_spin_value
(
event
.value
);
});
rsx!
{
rsx!
{
<
Window
position
=
{(
50.0
,
50.0
)}
size
=
{(
3
00.0
,
300.0
)}
title
=
{
"TextBox Example"
.to_string
()}
>
<
Window
position
=
{(
50.0
,
50.0
)}
size
=
{(
5
00.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
=
{
value
}
on_change
=
{
Some
(
on_change
)}
/>
<
TextBox
<
TextBox
styles
=
{
Some
(
input_styles
)}
styles
=
{
Some
(
input_styles
)}
...
@@ -51,7 +56,7 @@ fn TextBoxExample() {
...
@@ -51,7 +56,7 @@ fn TextBoxExample() {
placeholder
=
{
Some
(
"This is a placeholder"
.to_string
())}
placeholder
=
{
Some
(
"This is a placeholder"
.to_string
())}
/>
/>
<
TextBox
styles
=
{
Some
(
red_text_styles
)}
value
=
{
red_value
}
on_change
=
{
Some
(
on_change_red
)}
/>
<
TextBox
styles
=
{
Some
(
red_text_styles
)}
value
=
{
red_value
}
on_change
=
{
Some
(
on_change_red
)}
/>
<
SpinBox
styles
=
{
Some
(
input_styles
)}
/>
<
SpinBox
styles
=
{
Some
(
input_styles
)}
value
=
{
spin_value
}
on_change
=
{
Some
(
on_change_spin
)}
/>
</
Window
>
</
Window
>
}
}
}
}
...
@@ -69,6 +74,7 @@ fn startup(
...
@@ -69,6 +74,7 @@ fn startup(
render!
{
render!
{
<
App
>
<
App
>
<
TextBoxExample
/>
<
TextBoxExample
/>
<
Inspector
/>
</
App
>
</
App
>
}
}
});
});
...
...
This diff is collapsed.
Click to expand it.
src/widgets/on_change.rs
+
1
−
1
View file @
3a212b03
...
@@ -24,4 +24,4 @@ impl std::fmt::Debug for OnChange {
...
@@ -24,4 +24,4 @@ impl std::fmt::Debug for OnChange {
fn
fmt
(
&
self
,
f
:
&
mut
std
::
fmt
::
Formatter
<
'_
>
)
->
std
::
fmt
::
Result
{
fn
fmt
(
&
self
,
f
:
&
mut
std
::
fmt
::
Formatter
<
'_
>
)
->
std
::
fmt
::
Result
{
f
.debug_tuple
(
"OnChange"
)
.finish
()
f
.debug_tuple
(
"OnChange"
)
.finish
()
}
}
}
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/widgets/spin_box.rs
+
67
−
18
View file @
3a212b03
use
crate
::{
core
::{
use
crate
::{
render_command
::
RenderCommand
,
core
::{
rsx
,
render_command
::
RenderCommand
,
styles
::{
Corner
,
Style
,
Units
},
rsx
,
widget
,
Bound
,
Children
,
Color
,
EventType
,
MutableBound
,
OnEvent
,
WidgetProps
,
styles
::{
Corner
,
Style
,
Units
},
},
widgets
::
ChangeEvent
};
widget
,
Bound
,
Children
,
Color
,
EventType
,
MutableBound
,
OnEvent
,
WidgetProps
,
use
kayak_core
::{
OnLayout
,
CursorIcon
};
},
widgets
::{
Button
,
ChangeEvent
},
use
crate
::
widgets
::{
Background
,
Clip
,
Text
,
OnChange
};
};
use
kayak_core
::{
#[derive(Default,
Debug,
PartialEq,
Clone)]
styles
::{
LayoutType
,
StyleProp
},
CursorIcon
,
OnLayout
,
};
use
crate
::
widgets
::{
Background
,
Clip
,
OnChange
,
Text
};
#[derive(Debug,
PartialEq,
Clone)]
pub
struct
SpinBoxProps
{
pub
struct
SpinBoxProps
{
/// If true, prevents the widget from being focused (and consequently edited)
/// If true, prevents the widget from being focused (and consequently edited)
pub
disabled
:
bool
,
pub
disabled
:
bool
,
...
@@ -22,12 +28,35 @@ pub struct SpinBoxProps {
...
@@ -22,12 +28,35 @@ pub struct SpinBoxProps {
/// You can use the [`on_change`] callback to update this prop as the user types.
/// You can use the [`on_change`] callback to update this prop as the user types.
pub
value
:
String
,
pub
value
:
String
,
pub
styles
:
Option
<
Style
>
,
pub
styles
:
Option
<
Style
>
,
/// Text on increment button defaults to `>`
pub
incr_str
:
String
,
/// Text on decrement button defaults to `<`
pub
decr_str
:
String
,
pub
children
:
Option
<
Children
>
,
pub
children
:
Option
<
Children
>
,
pub
on_event
:
Option
<
OnEvent
>
,
pub
on_event
:
Option
<
OnEvent
>
,
pub
on_layout
:
Option
<
OnLayout
>
,
pub
on_layout
:
Option
<
OnLayout
>
,
pub
focusable
:
Option
<
bool
>
,
pub
focusable
:
Option
<
bool
>
,
}
}
impl
Default
for
SpinBoxProps
{
fn
default
()
->
SpinBoxProps
{
SpinBoxProps
{
incr_str
:
">"
.into
(),
decr_str
:
"<"
.into
(),
disabled
:
Default
::
default
(),
on_change
:
Default
::
default
(),
placeholder
:
Default
::
default
(),
value
:
Default
::
default
(),
styles
:
Default
::
default
(),
children
:
Default
::
default
(),
on_event
:
Default
::
default
(),
on_layout
:
Default
::
default
(),
focusable
:
Default
::
default
(),
}
}
}
impl
WidgetProps
for
SpinBoxProps
{
impl
WidgetProps
for
SpinBoxProps
{
fn
get_children
(
&
self
)
->
Option
<
Children
>
{
fn
get_children
(
&
self
)
->
Option
<
Children
>
{
self
.children
.clone
()
self
.children
.clone
()
...
@@ -58,11 +87,11 @@ impl WidgetProps for SpinBoxProps {
...
@@ -58,11 +87,11 @@ impl WidgetProps for SpinBoxProps {
pub
struct
FocusSpinbox
(
pub
bool
);
pub
struct
FocusSpinbox
(
pub
bool
);
#[widget]
#[widget]
/// A widget that displays a
text inpu
t field
/// A widget that displays a
spinnable tex
t field
///
///
/// # Props
/// # Props
///
///
/// __Type:__ [`
Text
BoxProps`]
/// __Type:__ [`
Spin
BoxProps`]
///
///
/// | Common Prop | Accepted |
/// | Common Prop | Accepted |
/// | :---------: | :------: |
/// | :---------: | :------: |
...
@@ -145,34 +174,54 @@ pub fn SpinBox(props: SpinBoxProps) {
...
@@ -145,34 +174,54 @@ pub fn SpinBox(props: SpinBoxProps) {
..
Style
::
default
()
..
Style
::
default
()
}
}
}
else
{
}
else
{
Style
::
default
()
Style
{
width
:
Units
::
Stretch
(
100.0
)
.into
(),
..
Style
::
default
()
}
};
};
let
button_style
=
Some
(
Style
{
height
:
Units
::
Pixels
(
24.0
)
.into
(),
width
:
Units
::
Pixels
(
24.0
)
.into
(),
..
Default
::
default
()
});
let
value
=
if
value
.is_empty
()
{
let
value
=
if
value
.is_empty
()
{
placeholder
.unwrap_or_else
(||
value
.clone
())
placeholder
.unwrap_or_else
(||
value
.clone
())
}
else
{
}
else
{
value
value
};
};
let
inline_style
=
Style
{
layout_type
:
StyleProp
::
Value
(
LayoutType
::
Row
),
..
Style
::
default
()
};
let
incr_str
=
props
.clone
()
.incr_str
;
let
decr_str
=
props
.clone
()
.decr_str
;
rsx!
{
rsx!
{
<
Background
styles
=
{
Some
(
background_styles
)}
>
<
Background
styles
=
{
Some
(
background_styles
)}
>
<
Clip
>
<
Clip
styles
=
{
Some
(
inline_style
)}
>
<
Button
styles
=
{
button_style
}
>
<
Text
content
=
{
decr_str
}
/>
</
Button
>
<
Text
<
Text
content
=
{
value
}
content
=
{
value
}
size
=
{
14.0
}
size
=
{
14.0
}
line_height
=
{
Some
(
22.0
)}
styles
=
{
Some
(
text_styles
)}
styles
=
{
Some
(
text_styles
)}
/>
/>
<
Button
styles
=
{
button_style
}
>
<
Text
content
=
{
incr_str
}
/>
</
Button
>
</
Clip
>
</
Clip
>
</
Background
>
</
Background
>
}
}
}
}
/// Checks if the given character contains the "Backspace" sequence
/// Checks if the given character contains the "Backspace" sequence
///
///
/// Context: [Wikipedia](https://en.wikipedia.org/wiki/Backspace#Common_use)
/// Context: [Wikipedia](https://en.wikipedia.org/wiki/Backspace#Common_use)
fn
is_backspace
(
c
:
char
)
->
bool
{
fn
is_backspace
(
c
:
char
)
->
bool
{
c
==
'\u{8}'
||
c
==
'\u{7f}'
c
==
'\u{8}'
||
c
==
'\u{7f}'
}
}
This diff is collapsed.
Click to expand it.
src/widgets/text_box.rs
+
10
−
7
View file @
3a212b03
use
crate
::{
core
::{
use
crate
::{
render_command
::
RenderCommand
,
core
::{
rsx
,
render_command
::
RenderCommand
,
styles
::{
Corner
,
Style
,
Units
},
rsx
,
widget
,
Bound
,
Children
,
Color
,
EventType
,
MutableBound
,
OnEvent
,
WidgetProps
,
styles
::{
Corner
,
Style
,
Units
},
},
widgets
::
ChangeEvent
};
widget
,
Bound
,
Children
,
Color
,
EventType
,
MutableBound
,
OnEvent
,
WidgetProps
,
},
widgets
::
ChangeEvent
,
};
use
kayak_core
::{
CursorIcon
,
OnLayout
};
use
kayak_core
::{
CursorIcon
,
OnLayout
};
use
crate
::
widgets
::{
Background
,
Clip
,
Text
,
OnChange
};
use
crate
::
widgets
::{
Background
,
Clip
,
OnChange
,
Text
};
/// Props used by the [`TextBox`] widget
/// Props used by the [`TextBox`] widget
#[derive(Default,
Debug,
PartialEq,
Clone)]
#[derive(Default,
Debug,
PartialEq,
Clone)]
...
...
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