diff --git a/crates/components/src/scroll_views/scroll_bar.rs b/crates/components/src/scroll_views/scroll_bar.rs index c45477a5f..a8003f173 100644 --- a/crates/components/src/scroll_views/scroll_bar.rs +++ b/crates/components/src/scroll_views/scroll_bar.rs @@ -1,6 +1,6 @@ use dioxus::prelude::*; use freya_elements::elements as dioxus_elements; -use freya_hooks::{use_get_theme, ScrollbarTheme}; +use freya_hooks::use_get_theme; #[derive(Props)] pub struct ScrollBarProps<'a> { @@ -17,12 +17,29 @@ pub struct ScrollBarProps<'a> { #[props(default = "0".to_string(), into)] offset_y: String, + + clicking_scrollbar: bool, +} + +enum ScrollBarStatus { + Idle, + Hovering, } #[allow(non_snake_case)] pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> { + let status = use_state(cx, || ScrollBarStatus::Idle); let theme = use_get_theme(cx); - let ScrollbarTheme { background, .. } = &theme.scrollbar; + + let onmouseenter = |_| status.set(ScrollBarStatus::Hovering); + + let onmouseleave = |_| status.set(ScrollBarStatus::Idle); + + let background = match status.get() { + _ if cx.props.clicking_scrollbar => theme.scrollbar.background, + ScrollBarStatus::Hovering => theme.scrollbar.background, + ScrollBarStatus::Idle => "transparent", + }; render!( rect { @@ -33,6 +50,8 @@ pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> { offset_x: "{cx.props.offset_x}", offset_y: "{cx.props.offset_y}", background: "{background}", + onmouseenter: onmouseenter, + onmouseleave: onmouseleave, &cx.props.children } ) diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs index e2a4042f8..49787b4a9 100644 --- a/crates/components/src/scroll_views/scroll_view.rs +++ b/crates/components/src/scroll_views/scroll_view.rs @@ -296,6 +296,7 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element { width: "100%", height: "{horizontal_scrollbar_size}", offset_x: "{scrollbar_x}", + clicking_scrollbar: is_scrolling_x, ScrollThumb { clicking_scrollbar: is_scrolling_x, onmousedown: onmousedown_x, @@ -308,6 +309,7 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element { width: "{vertical_scrollbar_size}", height: "100%", offset_y: "{scrollbar_y}", + clicking_scrollbar: is_scrolling_y, ScrollThumb { clicking_scrollbar: is_scrolling_y, onmousedown: onmousedown_y, diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index da208ba2f..886e31ba3 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -49,6 +49,9 @@ pub struct VirtualScrollViewProps<'a, T: 'a> { /// Enable scrolling with arrow keys. #[props(default = true, into)] pub scroll_with_arrows: bool, + /// Tracker for the vertical scroll. + #[props(optional)] + pub scrolled_y: Option>, } fn get_render_range( @@ -347,6 +350,7 @@ pub fn VirtualScrollView<'a, T>(cx: Scope<'a, VirtualScrollViewProps<'a, T>>) -> width: "100%", height: "{horizontal_scrollbar_size}", offset_x: "{scrollbar_x}", + clicking_scrollbar: is_scrolling_x, ScrollThumb { clicking_scrollbar: is_scrolling_x, onmousedown: onmousedown_x, @@ -359,6 +363,7 @@ pub fn VirtualScrollView<'a, T>(cx: Scope<'a, VirtualScrollViewProps<'a, T>>) -> width: "{vertical_scrollbar_size}", height: "100%", offset_y: "{scrollbar_y}", + clicking_scrollbar: is_scrolling_y, ScrollThumb { clicking_scrollbar: is_scrolling_y, onmousedown: onmousedown_y, diff --git a/crates/core/src/node.rs b/crates/core/src/node.rs index 6a1aaedc7..a91183b8e 100644 --- a/crates/core/src/node.rs +++ b/crates/core/src/node.rs @@ -3,7 +3,7 @@ use freya_dom::prelude::DioxusNode; use freya_engine::prelude::*; use freya_node_state::{ Border, CornerRadius, CursorSettings, Fill, FontStyleState, LayoutState, References, Shadow, - Style, Transform, + Style, TextOverflow, Transform, }; use torin::{alignment::Alignment, direction::DirectionMode, gaps::Gaps, size::Size}; @@ -114,12 +114,20 @@ impl<'a> Iterator for NodeStateIterator<'a> { "line_height", AttributeType::Measure(self.state.font_style.line_height), )), - 17 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))), - 18 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))), + 17 => Some(( + "text_align", + AttributeType::TextAlignment(&self.state.font_style.text_align), + )), + 18 => Some(( + "text_overflow", + AttributeType::TextOverflow(&self.state.font_style.text_overflow), + )), + 19 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))), + 20 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))), n => { let shadows = &self.state.style.shadows; let shadow = shadows - .get(n - 19) + .get(n - 21) .map(|shadow| ("shadow", AttributeType::Shadow(shadow))); if shadow.is_some() { @@ -127,7 +135,7 @@ impl<'a> Iterator for NodeStateIterator<'a> { } else { let text_shadows = &self.state.font_style.text_shadows; text_shadows - .get(n - 19 + shadows.len()) + .get(n - 21 + shadows.len()) .map(|text_shadow| ("text_shadow", AttributeType::TextShadow(text_shadow))) } } @@ -155,4 +163,23 @@ pub enum AttributeType<'a> { TextShadow(&'a TextShadow), Text(String), Border(&'a Border), + TextAlignment(&'a TextAlign), + TextOverflow(&'a TextOverflow), +} + +pub trait ExternalPretty { + fn pretty(&self) -> String; +} + +impl ExternalPretty for TextAlign { + fn pretty(&self) -> String { + match self { + TextAlign::Left => "left".to_string(), + TextAlign::Right => "right".to_string(), + TextAlign::Center => "center".to_string(), + TextAlign::Justify => "justify".to_string(), + TextAlign::Start => "start".to_string(), + TextAlign::End => "end".to_string(), + } + } } diff --git a/crates/devtools/src/tab.rs b/crates/devtools/src/tab.rs index 12f5c4c25..b2f5dbbac 100644 --- a/crates/devtools/src/tab.rs +++ b/crates/devtools/src/tab.rs @@ -54,24 +54,25 @@ pub fn TabButton<'a>(cx: Scope<'a, TabButtonProps<'a>>) -> Element<'a> { ButtonStatus::Idle => theme.button.background, }; let color = theme.button.font_theme.color; + let border_fill = theme.button.border_fill; let content = cx.props.label; render!( rect { + margin: "2", overflow: "clip", background: "{background}", onclick: onclick, onmouseover: onmouseover, onmouseleave: onmouseleave, - width: "125", corner_radius: "7", height: "100%", color: "{color}", - padding: "7.5", + padding: "6 14", + shadow: "0 4 5 0 rgb(0, 0, 0, 30)", + border: "1 solid {border_fill}", + main_align: "center", label { - text_align: "center", - height: "100%", - width: "100%", content } } diff --git a/crates/devtools/src/tabs/style.rs b/crates/devtools/src/tabs/style.rs index fe1758324..5a9b960c3 100644 --- a/crates/devtools/src/tabs/style.rs +++ b/crates/devtools/src/tabs/style.rs @@ -141,6 +141,24 @@ pub fn NodeInspectorStyle(cx: Scope, node_id: NodeId) -> Element { } } } + AttributeType::TextAlignment(text_align) => { + rsx!{ + Property { + key: "{i}", + name: "{name}", + value: text_align.pretty() + } + } + } + AttributeType::TextOverflow(text_overflow) => { + rsx!{ + Property { + key: "{i}", + name: "{name}", + value: text_overflow.pretty() + } + } + } } }) } diff --git a/crates/state/src/values/font.rs b/crates/state/src/values/font.rs index abf5bbcd8..61b7b86f9 100644 --- a/crates/state/src/values/font.rs +++ b/crates/state/src/values/font.rs @@ -114,6 +114,14 @@ impl TextOverflow { Self::Custom(custom) => Some(custom), } } + + pub fn pretty(&self) -> String { + match self { + TextOverflow::Clip => "clip".to_string(), + TextOverflow::Ellipsis => "ellipsis".to_string(), + TextOverflow::Custom(text_overflow) => text_overflow.to_string(), + } + } } #[derive(Debug, PartialEq, Eq)] diff --git a/crates/torin/src/values/alignment.rs b/crates/torin/src/values/alignment.rs index 083677313..04a044d02 100644 --- a/crates/torin/src/values/alignment.rs +++ b/crates/torin/src/values/alignment.rs @@ -12,6 +12,10 @@ impl Alignment { } pub fn pretty(&self) -> String { - format!("{self:?}") + match self { + Alignment::Start => "start".to_string(), + Alignment::Center => "center".to_string(), + Alignment::End => "end".to_string(), + } } } diff --git a/crates/torin/src/values/size.rs b/crates/torin/src/values/size.rs index 219e5471b..fe7224d95 100644 --- a/crates/torin/src/values/size.rs +++ b/crates/torin/src/values/size.rs @@ -21,7 +21,7 @@ impl Default for Size { impl Size { pub fn pretty(&self) -> String { match self { - Size::Inner => "inner".to_string(), + Size::Inner => "auto".to_string(), Size::Pixels(s) => format!("{}", s.get()), Size::DynamicCalculations(calcs) => format!( "calc({})",