logicaffeine_web/ui/components/
chevron.rs

1//! The Studio's one drawn chevron: the file tree's folders and the collapsible blocks turn it to
2//! say whether they are open.
3
4use dioxus::prelude::*;
5
6/// VS Code's chevron shape, 12px along its long side on a 2px stroke — two thirds larger than the
7/// codicon at 10px, and a pixel heavier — in a 12px square, so it centres on its row in any font
8/// and turns about its middle to point down.
9pub const CHEVRON_SVG: &str = r#"<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 1 8.5 6 3.5 11"/></svg>"#;
10
11/// The chevron's look wherever it is drawn: muted, filling its box, and a quarter turn to point
12/// down while what it marks is open. A component that draws chevrons carries this once.
13pub const CHEVRON_STYLE: &str = r#"
14.chevron {
15    display: flex;
16    flex: none;
17    color: rgba(255, 255, 255, 0.6);
18    transition: transform 0.15s ease;
19}
20
21.chevron.open {
22    transform: rotate(90deg);
23}
24"#;
25
26/// The drawn chevron: pointing right while `open` is false, down while it is true.
27#[component]
28pub fn Chevron(open: bool) -> Element {
29    rsx! {
30        span { class: if open { "chevron open" } else { "chevron" }, dangerous_inner_html: CHEVRON_SVG }
31    }
32}
33
34#[cfg(test)]
35#[path = "../../../../../crates/logicaffeine_tests/unit/logicaffeine_web/ui/components/chevron/tests.rs"]
36mod tests;
logicaffeine_web/ui/components/chevron.rs

logicaffeine_web/ui/components/
chevron.rs
