mirror of
https://github.com/nitnelave/lldap.git
synced 2023-04-12 14:25:13 +00:00
app: Implement dark theme and toggle
This commit is contained in:
parent
bf64c091cc
commit
80dfeb1293
@ -6,15 +6,19 @@
|
|||||||
<title>LLDAP Administration</title>
|
<title>LLDAP Administration</title>
|
||||||
<script src="/static/main.js" type="module" defer></script>
|
<script src="/static/main.js" type="module" defer></script>
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css"
|
||||||
rel="preload stylesheet"
|
rel="preload stylesheet"
|
||||||
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
|
integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
as="style" />
|
as="style" />
|
||||||
<script
|
<script
|
||||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
|
||||||
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
|
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js"
|
||||||
|
integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
|
||||||
@ -30,6 +34,11 @@
|
|||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/static/style.css" />
|
href="/static/style.css" />
|
||||||
|
<script>
|
||||||
|
function inDarkMode(){
|
||||||
|
return darkmode.inDarkMode;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -6,13 +6,16 @@
|
|||||||
<title>LLDAP Administration</title>
|
<title>LLDAP Administration</title>
|
||||||
<script src="/static/main.js" type="module" defer></script>
|
<script src="/static/main.js" type="module" defer></script>
|
||||||
<link
|
<link
|
||||||
href="/static/bootstrap.min.css"
|
href="/static/bootstrap-nightshade.min.css"
|
||||||
rel="preload stylesheet"
|
rel="preload stylesheet"
|
||||||
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
|
integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
|
||||||
as="style" />
|
as="style" />
|
||||||
<script
|
<script
|
||||||
src="/static/bootstrap.bundle.min.js"
|
src="/static/bootstrap.bundle.min.js"
|
||||||
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"></script>
|
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"></script>
|
||||||
|
<script
|
||||||
|
src="/static/darkmode.min.js"
|
||||||
|
integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"></script>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/static/bootstrap-icons.css"
|
href="/static/bootstrap-icons.css"
|
||||||
@ -28,6 +31,11 @@
|
|||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/static/style.css" />
|
href="/static/style.css" />
|
||||||
|
<script>
|
||||||
|
function inDarkMode(){
|
||||||
|
return darkmode.inDarkMode;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -17,6 +17,7 @@ use crate::{
|
|||||||
};
|
};
|
||||||
|
|
||||||
use gloo_console::error;
|
use gloo_console::error;
|
||||||
|
use wasm_bindgen::prelude::*;
|
||||||
use yew::{
|
use yew::{
|
||||||
function_component,
|
function_component,
|
||||||
html::Scope,
|
html::Scope,
|
||||||
@ -29,6 +30,25 @@ use yew_router::{
|
|||||||
BrowserRouter, Switch,
|
BrowserRouter, Switch,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
extern "C" {
|
||||||
|
#[wasm_bindgen(js_namespace = darkmode)]
|
||||||
|
fn toggleDarkMode(doSave: bool);
|
||||||
|
|
||||||
|
#[wasm_bindgen]
|
||||||
|
fn inDarkMode() -> bool;
|
||||||
|
}
|
||||||
|
|
||||||
|
#[function_component(DarkModeToggle)]
|
||||||
|
pub fn dark_mode_toggle() -> Html {
|
||||||
|
html! {
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input" onclick={|_| toggleDarkMode(true)} type="checkbox" id="darkModeToggle" checked={inDarkMode()}/>
|
||||||
|
<label class="form-check-label" for="darkModeToggle">{"Dark mode"}</label>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#[function_component(AppContainer)]
|
#[function_component(AppContainer)]
|
||||||
pub fn app_container() -> Html {
|
pub fn app_container() -> Html {
|
||||||
html! {
|
html! {
|
||||||
@ -242,7 +262,7 @@ impl App {
|
|||||||
<header class="p-2 mb-3 border-bottom">
|
<header class="p-2 mb-3 border-bottom">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
||||||
<a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-dark text-decoration-none">
|
<a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-decoration-none">
|
||||||
<h2>{"LLDAP"}</h2>
|
<h2>{"LLDAP"}</h2>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@ -251,7 +271,7 @@ impl App {
|
|||||||
<>
|
<>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
classes="nav-link px-2 link-dark h6"
|
classes="nav-link px-2 h6"
|
||||||
to={AppRoute::ListUsers}>
|
to={AppRoute::ListUsers}>
|
||||||
<i class="bi-people me-2"></i>
|
<i class="bi-people me-2"></i>
|
||||||
{"Users"}
|
{"Users"}
|
||||||
@ -259,7 +279,7 @@ impl App {
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
classes="nav-link px-2 link-dark h6"
|
classes="nav-link px-2 h6"
|
||||||
to={AppRoute::ListGroups}>
|
to={AppRoute::ListGroups}>
|
||||||
<i class="bi-collection me-2"></i>
|
<i class="bi-collection me-2"></i>
|
||||||
{"Groups"}
|
{"Groups"}
|
||||||
@ -269,6 +289,7 @@ impl App {
|
|||||||
} } else { html!{} } }
|
} } else { html!{} } }
|
||||||
</ul>
|
</ul>
|
||||||
{ self.view_user_menu(ctx) }
|
{ self.view_user_menu(ctx) }
|
||||||
|
<DarkModeToggle />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -281,7 +302,7 @@ impl App {
|
|||||||
html! {
|
html! {
|
||||||
<div class="dropdown text-end">
|
<div class="dropdown text-end">
|
||||||
<a href="#"
|
<a href="#"
|
||||||
class="d-block link-dark text-decoration-none dropdown-toggle"
|
class="d-block nav-link text-decoration-none dropdown-toggle"
|
||||||
id="dropdownUser"
|
id="dropdownUser"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false">
|
aria-expanded="false">
|
||||||
@ -323,7 +344,7 @@ impl App {
|
|||||||
|
|
||||||
fn view_footer(&self) -> Html {
|
fn view_footer(&self) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<footer class="text-center text-muted fixed-bottom bg-light py-2">
|
<footer class="text-center fixed-bottom text-muted bg-light py-2">
|
||||||
<div>
|
<div>
|
||||||
<span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
|
<span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css
|
https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css
|
||||||
|
https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js
|
||||||
https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
|
https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
|
||||||
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
|
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
|
||||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
|
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
|
@ -10,3 +10,23 @@ header h2 {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.dark .bg-light {
|
||||||
|
background-color: rgba(59,59,59,1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark a {
|
||||||
|
color: #e1e1e1
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #212529
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .nav-link {
|
||||||
|
color: #e1e1e1
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: #212529
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user