jinya_ui/layout/
split_view.rs

1use yew::prelude::*;
2use yew::{Component, ComponentLink, Html};
3
4pub fn get_css<'a>() -> &'a str {
5    // language=CSS
6    "
7.jinya-split-view {
8    display: grid;
9    width: 100%;
10    grid-template-columns: 1fr 2px 1fr;
11    grid-gap: 1rem;
12    gap: 1rem;
13    padding: 0.5rem;
14}
15
16.jinya-split-view__left {
17    grid-column: 1;
18    max-height: calc(100vh - 9rem + var(--line-height-23));
19    overflow-y: auto;
20}
21
22.jinya-split-view__middle-bar {
23    background: var(--primary-color);
24    height: calc(100vh - 9rem + var(--line-height-23));
25    display: block;
26    width: 2px;
27    grid-column: 2;
28}
29
30.jinya-split-view__right {
31    grid-column: 3;
32    max-height: calc(100vh - 9rem + var(--line-height-23));
33    overflow-y: auto;
34    padding: 0.5rem;
35}
36"
37}
38
39pub struct SplitView {
40    left: Html,
41    right: Html,
42}
43
44#[derive(Clone, PartialEq, Properties)]
45pub struct PageProps {
46    pub left: Html,
47    pub right: Html,
48}
49
50impl Component for SplitView {
51    type Message = ();
52    type Properties = PageProps;
53
54    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
55        SplitView {
56            left: props.left,
57            right: props.right,
58        }
59    }
60
61    fn update(&mut self, _msg: Self::Message) -> bool {
62        false
63    }
64
65    fn change(&mut self, props: Self::Properties) -> bool {
66        self.right = props.right;
67        self.left = props.left;
68
69        true
70    }
71
72    fn view(&self) -> Html {
73        html! {
74            <div class="jinya-split-view">
75                <div class="jinya-split-view__left">
76                    {self.get_left()}
77                </div>
78                <div class="jinya-split-view__middle-bar"/>
79                <div class="jinya-split-view__right">
80                    {self.get_right()}
81                </div>
82            </div>
83        }
84    }
85}
86
87impl SplitView {
88    fn get_left(&self) -> Children {
89        Children::new(vec![self.left.clone()])
90    }
91    fn get_right(&self) -> Children {
92        Children::new(vec![self.right.clone()])
93    }
94}
jinya_ui/layout/split_view.rs

jinya_ui/layout/
split_view.rs
