osui-rs/osui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

ghost elements

Browse Source
This commit is contained in:
selimaj-dev
2024-12-24 13:15:19 +01:00
parent e98285a360
commit ea7e9c1e1c
6 changed files with 112 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css.rs
+32 -2
View File
@@ -38,25 +38,55 @@ macro_rules! __css {
macro_rules! _css {
($_style:expr,) => {};
(
$hm:expr, $name:literal { $($inner:tt)* } $($rest:tt)*
$hm:expr, $($($name:ident)-+),* { $($inner:tt)* } $($rest:tt)*
) => {{
let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*);
$(
$hm.insert(
$crate::ui::StyleName::Class(String::from(stringify!($($name)-+).replace(' ', ""))),
_style.clone(),
);
)*
$crate::_css!($hm, $($rest)*);
}};
(
$hm:expr, $($($name:ident)-+),*: $state:literal { $($inner:tt)* } $($rest:tt)*
) => {{
let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*);
$(
$hm.insert(
$crate::ui::StyleName::ClassState(String::from(stringify!($($name)-+).replace(' ', "")), String::from($state)),
_style.clone(),
);
)*
$crate::_css!($hm, $($rest)*);
}};
(
$hm:expr, $($name:literal),+ { $($inner:tt)* } $($rest:tt)*
) => {{
let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*);
$(
$hm.insert(
$crate::ui::StyleName::Class(String::from($name)),
_style,
);
)+
$crate::_css!($hm, $($rest)*);
}};
(
$hm:expr, $name:literal: $state:literal { $($inner:tt)* } $($rest:tt)*
$hm:expr, $($name:literal),+: $state:literal { $($inner:tt)* } $($rest:tt)*
) => {{
let mut _style = $crate::ui::StyleElement::default();
$crate::__css!(_style, $($inner)*);
$(
$hm.insert(
$crate::ui::StyleName::ClassState(String::from($name), String::from($state)),
_style,
);
)+
$crate::_css!($hm, $($rest)*);
}};
}
src/examples.rs
+10 -9
View File
@@ -22,7 +22,7 @@ pub mod counter_example {
pub fn styling() -> Css {
css! {
"btn" {
btn {
outline: true,
outline_color: Red
}
@@ -39,6 +39,7 @@ pub mod todo_example {
rsx! {
@SetStyle(styling())
@SetChild(2)
text { class: "title", static "Todo list app made with OSUI" }
text { class: "title", "{}", "-".repeat(crossterm::terminal::size().unwrap().0 as usize) }
@@ -56,27 +57,27 @@ pub mod todo_example {
pub fn styling() -> Css {
css! {
"todo" {
todo {
x: 0 px,
y: Auto,
color: Red,
}
"todo": "hover" {
todo: "hover" {
color: Blue,
}
"complete" {
complete {
x: 0 px,
y: Auto,
color: Green,
}
"complete": "hover" {
complete: "hover" {
color: Cyan
}
"title" {
title {
x: 0 px,
y: Auto,
}
"title": "hover" {
title: "hover" {
color: Blue
}
}
@@ -115,14 +116,14 @@ pub mod login_example {
pub fn styling() -> Css {
css! {
"input" {
input {
width: 50 px,
outline: true,
y: Auto,
x: 0 px,
caret: String::new(),
}
"input": "hover" {
input: "hover" {
outline_color: Red,
caret: String::from("█"),
}
src/main.rs
+13 -16
View File
@@ -6,9 +6,20 @@ fn main() {
#[component]
pub fn App() {
rsx! {
@SetStyle(app_style())
@SetChild(1)
@SetStyle(css! {
example {
outline: true,
y: Auto,
x: 0 px,
}
example: "hover" {
color: Blue,
outline_color: Red,
}
})
text { static "Select an example" }
%text { class: "red-bg", static "Select an example" }
button { class: "example", on_click: fn(_, _, document) {
document.clear_css();
@@ -26,17 +37,3 @@ pub fn App() {
}, static "Login" }
}
}
pub fn app_style() -> Css {
css! {
"example" {
outline: true,
y: Auto,
x: 0 px,
}
"example": "hover" {
color: Blue,
outline_color: Red,
}
}
}
src/rsx.rs
+10
View File
@@ -12,6 +12,16 @@ macro_rules! check_expr {
}
#[macro_export]
macro_rules! parse_rsx_param {
($elem:expr, %$elem_path:path { $($inner:tt)* } $($rest:tt)*) => {
$elem.ghosts.push($elem.ghosts.len());
if let $crate::Children::Children(children, _) = &mut $elem.children {
children.push($crate::ersx!($elem_path { $($inner)* }));
} else {
$elem.children = $crate::Children::Children(vec![$crate::ersx!($elem_path { $($inner)* })], 0)
}
osui::parse_rsx_param!($elem, $($rest)*)
};
($elem:expr, @ $($i:ident)::+($($inner:tt)*) $($rest:tt)*) => {
$elem.instructions.push($($i)::+($($inner)*));
osui::parse_rsx_param!($elem, $($rest)*);
src/ui/mod.rs
+25
View File
@@ -32,12 +32,15 @@ pub fn text<'a>(class: &'a str, id: &'a str, children: Children, style: Style) -
#[derive(Debug)]
pub enum Instruction {
SetStyle(Css),
SetChild(usize),
Ghost(usize),
}
#[element]
#[derive(Default, Debug)]
pub struct Div {
pub instructions: Vec<Instruction>,
pub ghosts: Vec<usize>,
}
impl ElementWidget for Div<'_> {
@@ -63,6 +66,13 @@ impl ElementWidget for Div<'_> {
} else {
*i = 0;
}
while self.ghosts.get(*i).is_some() {
if *i < l - 1 {
*i += 1;
} else {
*i = 0;
}
}
child.event(Event::FocusGained, document);
}
KeyCode::BackTab => {
@@ -72,6 +82,13 @@ impl ElementWidget for Div<'_> {
} else {
*i = l - 1;
}
while self.ghosts.get(*i).is_some() {
if *i > 0 {
*i -= 1;
} else {
*i = l - 1;
}
}
child.event(Event::FocusGained, document);
}
_ => child.event(event, document),
@@ -87,6 +104,12 @@ impl ElementWidget for Div<'_> {
Instruction::SetStyle(s) => {
document.css.extend(s.clone().into_iter());
}
Instruction::SetChild(c) => {
self.children.set_index(*c);
}
Instruction::Ghost(idx) => {
self.ghosts.push(*idx);
}
}
}
}
@@ -99,6 +122,7 @@ pub fn div<'a>(
children: Children,
style: Style,
instructions: Vec<Instruction>,
ghosts: Vec<usize>,
) -> Box<Div<'a>> {
Box::new(Div {
children: self.children,
@@ -106,6 +130,7 @@ pub fn div<'a>(
id: self.id,
style: self.style,
instructions: self.instructions,
ghosts: self.ghosts,
})
}
src/utils.rs
+4 -2
View File
@@ -26,12 +26,13 @@ impl<'a> Frame<'a> {
let style = element.get_style();
let mut style_element = style.clone().get(focused);
if let Some(upper) = self.css.get(&ui::StyleName::Class(element.get_class())) {
for class in element.get_class().split(" ") {
if let Some(upper) = self.css.get(&ui::StyleName::Class(class.to_string())) {
style_element.merge(upper);
}
if let Some(upper) = self.css.get(&ui::StyleName::ClassState(
element.get_class(),
class.to_string(),
if style.2 == "" && focused {
"hover".to_string()
} else {
@@ -40,6 +41,7 @@ impl<'a> Frame<'a> {
)) {
style_element.merge(upper);
}
}
if style_element.visible.1 {
let y = style_element.y.1.as_position(