Skip to content

Commit

Permalink
ui: flows component
Browse files Browse the repository at this point in the history
  • Loading branch information
jgraef committed Jul 5, 2024
1 parent fc69440 commit bd9fbc2
Showing 12 changed files with 201 additions and 12 deletions.
1 change: 1 addition & 0 deletions skunk-ui/src/app/app.module.scss
Original file line number Diff line number Diff line change
@@ -15,5 +15,6 @@ $skunk-highlight: #591c9f;
overflow-y: hidden;
background: black;
font-family: monospace;
font-size: smaller;
}

54 changes: 54 additions & 0 deletions skunk-ui/src/app/flows.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@

.flows {
overflow-y: scroll;

table {
width: 100%;
height: fit-content;

th {
padding-left: 1px;
padding-right: 1px;
padding-top: 2px;
padding-bottom: 2px;
}

td {
padding: 1px;
}

td, th {
background-color: black;
}

tr.entry:hover td {
background-color: $skunk-highlight;
}
}
}

.info {
height: fit-content;

td {
height: fit-content;
}

.expander {
display: block;
max-height: 0;
overflow-y: hidden;
transition: max-height ease-in-out 0.5s;

&[data-expanded="data-expanded"] {
max-height: 100vh;
}
}

.expander-content {
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 1em;
padding-right: 0.2em;
}
}
58 changes: 57 additions & 1 deletion skunk-ui/src/app/flows.rs
Original file line number Diff line number Diff line change
@@ -1,12 +1,68 @@
use leptos::{
component,
create_rw_signal,
view,
For,
IntoView,
Signal,
};

use crate::{
components::{
expand_button::ExpandButton,
icon::BootstrapIcon,
},
util::SignalToggle,
};

stylance::import_crate_style!(style, "src/app/flows.module.scss");

#[component]
pub fn Flows() -> impl IntoView {
view! {
<p> "TODO" </p>
<div class=style::flows>
<table>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">"Timestamp"</th>
<th scope="col">"Protocol"</th>
<th scope="col">"Source"</th>
<th scope="col">"Destination"</th>
<th scope="col">"Info"</th>
</tr>
</thead>
<tbody>
<For
each=move || (0..10).into_iter()
key=|x| *x
children=move |i| {
let expanded = create_rw_signal(false);
view! {
<tr class=style::entry>
<td><ExpandButton expanded /></td>
<td>"Fri Jul 5 06:47:49 AM CEST 2024"</td>
<td>"https"</td>
<td>"localhost:12345"</td>
<td>"maia.crimew.gay:443"</td>
<td>"GET https://maia.crimew.gay/posts/" {i}</td>
</tr>
<tr
class=style::info
>
<td colspan="6">
<div class=style::expander data-expanded=expanded>
<div class=style::expander_content>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</td>
</tr>
}
}
/>
</tbody>
</table>
</div>
}
}
2 changes: 1 addition & 1 deletion skunk-ui/src/app/home.rs
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ use leptos::{
IntoView,
};

use super::BootstrapIcon;
use crate::components::icon::BootstrapIcon;

stylance::import_crate_style!(style, "src/app/home.module.scss");

10 changes: 2 additions & 8 deletions skunk-ui/src/app/mod.rs
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ use leptos::{
view,
DynAttrs,
IntoView,
MaybeSignal,
Oco,
Signal,
SignalGet,
@@ -45,14 +46,6 @@ use crate::components::{

stylance::import_crate_style!(style, "src/app/app.module.scss");

#[component]
pub fn BootstrapIcon(
#[prop(into)] icon: Oco<'static, str>,
#[prop(into, optional)] alt: Option<Oco<'static, str>>,
) -> impl IntoView {
view! { <i class={format!("bi bi-{icon}")} aria-label=alt></i> }
}

#[derive(Clone, Copy, Debug)]
pub struct Theme {
bs_theme: Signal<&'static str>,
@@ -138,6 +131,7 @@ pub fn App() -> impl IntoView {
<Routes>
<Route path="/" view=Home />
<Route path="/flows" view=Flows />
<Route path="/filters" view=|| view!{ "TODO" } />
<Route path="/settings" view=|| view!{ "TODO" } />
<Route path="/*any" view=NotFound />
</Routes>
5 changes: 3 additions & 2 deletions skunk-ui/src/components/dock.rs
Original file line number Diff line number Diff line change
@@ -9,14 +9,14 @@ use leptos_router::{
A,
};

use crate::app::BootstrapIcon;
use super::icon::BootstrapIcon;

stylance::import_crate_style!(style, "src/components/dock.module.scss");

#[component]
pub fn Item<H: ToHref + 'static>(
href: H,
#[prop(into)] icon: Oco<'static, str>,
#[prop(into)] icon: String,
#[prop(into)] label: Oco<'static, str>,
) -> impl IntoView {
view! {
@@ -35,6 +35,7 @@ pub fn Dock() -> impl IntoView {
<ul class=style::group_top>
<Item href="/" icon="house" label="Home" />
<Item href="/flows" icon="ethernet" label="Flows" />
<Item href="/filters" icon="funnel" label="Filters" />
</ul>
<ul class=style::group_bottom>
<Item href="/settings" icon="gear" label="Settings" />
17 changes: 17 additions & 0 deletions skunk-ui/src/components/expand_button.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@


.expand-button {
border: none;
background: none;
}

.expand-icon {
i {
display: inline-block;
transition: all ease-in-out .3s;
}

&[data-expanded="data-expanded"] i {
transform: rotate(90deg);
}
}
36 changes: 36 additions & 0 deletions skunk-ui/src/components/expand_button.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
use leptos::{
component,
view,
IntoView,
RwSignal,
Signal,
};

use super::icon::BootstrapIcon;
use crate::util::SignalToggle;

stylance::import_crate_style!(style, "src/components/expand_button.module.scss");

#[component]
pub fn ExpandButton(expanded: RwSignal<bool>) -> impl IntoView {
view! {
<button
class=style::expand_button
type="button"
on:click=move |_| {
expanded.toggle();
}
>
<ExpandIcon expanded={Signal::from(expanded)}/>
</button>
}
}

#[component]
pub fn ExpandIcon(expanded: Signal<bool>) -> impl IntoView {
view! {
<span class=style::expand_icon data-expanded=expanded>
<BootstrapIcon icon="caret-right-fill" />
</span>
}
}
16 changes: 16 additions & 0 deletions skunk-ui/src/components/icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
use leptos::{
component,
view,
IntoView,
MaybeSignal,
Oco,
SignalGet,
};

#[component]
pub fn BootstrapIcon(
#[prop(into)] icon: MaybeSignal<String>,
#[prop(into, optional)] alt: Option<Oco<'static, str>>,
) -> impl IntoView {
view! { <i class={move || format!("bi bi-{}", icon.get())} aria-label=alt></i> }
}
2 changes: 2 additions & 0 deletions skunk-ui/src/components/mod.rs
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
pub mod command_menu;
pub mod dock;
pub mod expand_button;
pub mod icon;
1 change: 1 addition & 0 deletions skunk-ui/src/main.rs
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
mod app;
mod components;
mod error;
mod util;

use wasm_bindgen::JsCast;

11 changes: 11 additions & 0 deletions skunk-ui/src/util.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
use leptos::SignalUpdate;

pub trait SignalToggle {
fn toggle(&self);
}

impl<T: SignalUpdate<Value = bool>> SignalToggle for T {
fn toggle(&self) {
self.update(|value| *value = !*value);
}
}

0 comments on commit bd9fbc2

Please sign in to comment.