dandri/mycelium
1
0
Fork 0
mirror of https://github.com/threefoldtech/mycelium.git synced 2026-03-29 07:39:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed wrong IP in config_example.toml + more responsive UI with sidebar opening/closing

Browse Source
This commit is contained in:
Maxime Van Hees
2024-07-23 17:31:20 +02:00
committed by Lee Smet
parent 2345b73e19
commit 278daddb91
4 changed files with 40 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config_example.toml
View File

@@ -1,7 +1,7 @@
# REMOVE/ADD COMMENT TO ENABLE/DISABLE LINE # REMOVE/ADD COMMENT TO ENABLE/DISABLE LINE
peers = [ peers = [
"tcp://180.40.132.242:9651", "tcp://188.40.132.242:9651",
"quic://[2a01:4f8:212:fa6::2]:9651", "quic://[2a01:4f8:212:fa6::2]:9651",
"quic://185.69.166.7:9651", "quic://185.69.166.7:9651",
"tcp://[2a02:1802:5e:0:8c9e:7dff:fec9:f0d2]:9651", "tcp://[2a02:1802:5e:0:8c9e:7dff:fec9:f0d2]:9651",

1
mycelium-ui/Dioxus.toml
View File

@@ -35,7 +35,6 @@ index_on_404 = true
# CSS style file # CSS style file
style = [ style = [
"./assets/styles.css",
"https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap", "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap",
] ]

245
mycelium-ui/assets/styles.css
View File

@@ -1,187 +1,4 @@
/* V2 */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); */
/**/
/* :root { */
/* --primary-color: #3498db; */
/* --secondary-color: #2c3e50; */
/* --background-color: #ecf0f1; */
/* --text-color: #34495e; */
/* --border-color: #bdc3c7; */
/* } */
/**/
/* * { */
/* box-sizing: border-box; */
/* margin: 0; */
/* padding: 0; */
/* } */
/**/
/* body { */
/* font-family: 'Lato', sans-serif; */
/* background-color: var(--background-color); */
/* color: var(--text-color); */
/* } */
/**/
/* .app-container { */
/* display: flex; */
/* flex-direction: column; */
/* height: 100vh; */
/* } */
/**/
/* header { */
/* background-color: var(--primary-color); */
/* color: white; */
/* padding: 1rem; */
/* display: flex; */
/* justify-content: space-between; */
/* align-items: center; */
/* position: fixed; */
/* width: 100%; */
/* z-index: 1000; */
/* } */
/**/
/* header h1 { */
/* font-size: 1.5rem; */
/* font-weight: 700; */
/* } */
/**/
/* .node-info { */
/* font-size: 0.9rem; */
/* } */
/**/
/* .content-container { */
/* display: flex; */
/* padding-top: 60px; */
/* height: calc(100vh - 60px); */
/* } */
/**/
/* .sidebar { */
/* background-color: var(--secondary-color); */
/* color: white; */
/* width: 250px; */
/* padding: 1rem; */
/* transition: transform 0.3s ease-in-out; */
/* } */
/**/
/* .sidebar.collapsed { */
/* transform: translateX(-250px); */
/* } */
/**/
/* .sidebar ul { */
/* list-style-type: none; */
/* } */
/**/
/* .sidebar li { */
/* margin-bottom: 1rem; */
/* } */
/**/
/* .sidebar a { */
/* color: white; */
/* text-decoration: none; */
/* font-size: 1.1rem; */
/* transition: color 0.3s ease; */
/* } */
/**/
/* .sidebar a:hover { */
/* color: var(--primary-color); */
/* } */
/**/
/* .main-content { */
/* flex: 1; */
/* padding: 2rem; */
/* overflow-y: auto; */
/* } */
/**/
/* .toggle-sidebar { */
/* background-color: var(--secondary-color); */
/* color: white; */
/* border: none; */
/* padding: 0.5rem 1rem; */
/* cursor: pointer; */
/* font-size: 1rem; */
/* transition: background-color 0.3s ease; */
/* } */
/**/
/* .toggle-sidebar:hover { */
/* background-color: var(--primary-color); */
/* } */
/**/
/* table { */
/* width: 100%; */
/* border-collapse: collapse; */
/* margin-top: 1rem; */
/* background-color: white; */
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
/* } */
/**/
/* th, td { */
/* padding: 1rem; */
/* text-align: left; */
/* border-bottom: 1px solid var(--border-color); */
/* } */
/**/
/* th { */
/* background-color: var(--primary-color); */
/* color: white; */
/* font-weight: 700; */
/* cursor: pointer; */
/* transition: background-color 0.3s ease; */
/* } */
/**/
/* th:hover { */
/* background-color: #2980b9; */
/* } */
/**/
/* .pagination { */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* margin-top: 1rem; */
/* } */
/**/
/* .pagination button { */
/* background-color: var(--primary-color); */
/* color: white; */
/* border: none; */
/* padding: 0.5rem 1rem; */
/* margin: 0 0.5rem; */
/* cursor: pointer; */
/* transition: background-color 0.3s ease; */
/* } */
/**/
/* .pagination button:hover:not(:disabled) { */
/* background-color: #2980b9; */
/* } */
/**/
/* .pagination button:disabled { */
/* background-color: var(--border-color); */
/* cursor: not-allowed; */
/* } */
/**/
/* .pagination span { */
/* margin: 0 0.5rem; */
/* } */
/**/
/* .selected-routes, .fallback-routes { */
/* margin-top: 2rem; */
/* } */
/**/
/* h2 { */
/* color: var(--secondary-color); */
/* margin-bottom: 1rem; */
/* } */
/**/
/* .node-info h3 { */
/* margin-bottom: 0.5rem; */
/* font-size: 1.1rem; */
/* font-weight: 400; */
/* } */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); */
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'); */
:root { :root {
--primary-color: #3498db; --primary-color: #3498db;
@@ -219,6 +36,7 @@ header {
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
height: 60px;
} }
header h1 { header h1 {
@@ -243,23 +61,30 @@ header h1 {
.content-container { .content-container {
display: flex; display: flex;
padding-top: 60px; padding-top: 60px;
flex: 1; min-height: calc(100vh - 60px);
} }
.sidebar { .sidebar {
background-color: var(--secondary-color); background-color: var(--secondary-color);
color: white; color: white;
width: 250px; width: 250px;
padding: 1rem; height: 100%;
position: fixed;
top: 60px;
left: 0;
/* transition: margin-left 0.3s ease-in-out; */
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: 100;
} }
.sidebar.collapsed { .sidebar.collapsed {
/* margin-left: -250px; */
transform: translateX(-250px); transform: translateX(-250px);
} }
.sidebar ul { .sidebar ul {
list-style-type: none; list-style-type: none;
padding: 1rem;
} }
.sidebar li { .sidebar li {
@@ -280,44 +105,35 @@ header h1 {
.main-content { .main-content {
flex: 1; flex: 1;
padding: 2rem; padding: 2rem;
overflow-y: auto; margin-left: 250px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
} }
.main-content.expanded { .main-content.expanded {
margin-left: -250px; margin-left: 0;
}
.toggle-sidebar.collapsed {
left: 10px;
transform: translate(-10px) rotate(180deg);
transition: left 0.3s ease-in-out, transform: 0s;
} }
.toggle-sidebar { .toggle-sidebar {
background-color: var(--secondary-color); background-color: var(--secondary-color);
color: white; color: white;
border: none; border: none;
padding: 0.5rem 1rem; width: 40px;
height: 40px;
cursor: pointer; cursor: pointer;
font-size: 1rem;
/* transition: background-color 0.3s ease; */
transition: left 0.3s ease-in-out, transform 0.3 ease-in-out;
position: fixed;
left: 250px;
top: 70px;
z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} position: fixed;
top: 70px;
.toggle-sidebar.collapsed { left: 250px;
left: 0; transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateX(-250px) rotate(180deg); z-index: 200;
}
.main-content.expanded .toggle-sidebar {
left: 0;
}
.toggle-sidebar:hover {
background-color: var(--primary-color);
} }
.table-container { .table-container {
@@ -330,7 +146,6 @@ table {
margin-top: 1rem; margin-top: 1rem;
background-color: white; background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
table-layout: fixed;
} }
th, td { th, td {
@@ -354,13 +169,11 @@ th:hover {
background-color: #2980b9; background-color: #2980b9;
} }
/* Routes table column widths */
.subnet-column { width: 25%; } .subnet-column { width: 25%; }
.next-hop-column { width: 35%; } .next-hop-column { width: 35%; }
.metric-column { width: 20%; } .metric-column { width: 20%; }
.seqno-column { width: 20%; } .seqno-column { width: 20%; }
/* Peers table column widths */
.endpoint-column { width: 30%; } .endpoint-column { width: 30%; }
.type-column { width: 15%; } .type-column { width: 15%; }
.connection-state-column { width: 20%; } .connection-state-column { width: 20%; }
@@ -397,11 +210,7 @@ th:hover {
margin: 0 0.5rem; margin: 0 0.5rem;
} }
.peers-table { .peers-table, .selected-routes, .fallback-routes {
margin-top: 2rem;
}
.selected-routes, .fallback-routes {
margin-top: 2rem; margin-top: 2rem;
} }

39
mycelium-ui/src/main.rs
View File

@@ -3,14 +3,14 @@
mod api; mod api;
use dioxus::prelude::*; use dioxus::prelude::*;
use dioxus_free_icons::icons::fa_solid_icons::{FaChevronLeft, FaChevronRight}; use dioxus_free_icons::icons::fa_solid_icons::FaChevronLeft;
use dioxus_free_icons::Icon; use dioxus_free_icons::Icon;
use mycelium::peer_manager::PeerType; use mycelium::peer_manager::PeerType;
use std::cmp::Ordering; use std::cmp::Ordering;
use std::net::{IpAddr, Ipv4Addr, SocketAddr}; use std::net::{IpAddr, Ipv4Addr, SocketAddr};
use tracing::Level; use tracing::Level;
const _: &str = manganis::mg!(file("assets/styles.css")); const STYLES_CSS: &str = manganis::mg!(file("assets/styles.css"));
const SERVER_ADDR: std::net::SocketAddr = const SERVER_ADDR: std::net::SocketAddr =
SocketAddr::new(IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1)), 8989); SocketAddr::new(IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1)), 8989);
@@ -38,7 +38,7 @@ fn main() {
#[component] #[component]
fn Layout() -> Element { fn Layout() -> Element {
let mut sidebar_collapsed = use_signal(|| false); let sidebar_collapsed = use_signal(|| false);
rsx! { rsx! {
div { class: "app-container", div { class: "app-container",
@@ -46,30 +46,6 @@ fn Layout() -> Element {
div { class: "content-container", div { class: "content-container",
Sidebar { collapsed: sidebar_collapsed } Sidebar { collapsed: sidebar_collapsed }
main { class: if *sidebar_collapsed.read() { "main-content expanded" } else { "main-content" }, main { class: if *sidebar_collapsed.read() { "main-content expanded" } else { "main-content" },
button {
class: if *sidebar_collapsed.read() { "toggle-sidebar collapsed" } else { "toggle-sidebar" },
onclick: {
let sb_collapsed = *sidebar_collapsed.read();
move |_| sidebar_collapsed.set(!sb_collapsed)
},
// i {
// if *sidebar_collapsed.read() {
// Icon {
// fill: "white",
// icon: FaChevronRight,
// }
// } else {
// Icon {
// fill: "white",
// icon: FaChevronLeft,
// }
// }
// }
Icon {
fill: "white",
icon: FaChevronLeft,
}
}
Outlet::<Route> {} Outlet::<Route> {}
} }
} }
@@ -115,6 +91,15 @@ fn Sidebar(collapsed: Signal<bool>) -> Element {
li { Link { to: Route::Routes {}, "Routes" } } li { Link { to: Route::Routes {}, "Routes" } }
} }
} }
button { class: if *collapsed.read() { "toggle-sidebar collapsed" } else { "toggle-sidebar" },
onclick: {
let c = *collapsed.read();
move |_| collapsed.set(!c)
},
Icon {
icon: FaChevronLeft,
}
}
} }
} }