ITsolved/rezervovator
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI improvements - optimized for small screens, drawer now works properly, disabled scrolling when modal dialog is appeared.

Browse Source
This commit is contained in:
Josef Rokos
2023-11-21 18:15:25 +01:00
parent aa2c71af77
commit d7e33e4342
8 changed files with 140 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+83 -4
View File
@@ -623,7 +623,7 @@ version = "0.18.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7da8245dd5f576a41c3b76247b54c15b0e43139ceeb4f732033e15be7c005176"
dependencies = [
"darling",
"darling 0.14.4",
"proc-macro2",
"quote",
"syn 1.0.109",
@@ -906,8 +906,18 @@ version = "0.14.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7b750cb3417fd1b327431a470f388520309479ab0bf5e323505daf0290cd3850"
dependencies = [
"darling_core",
"darling_macro",
"darling_core 0.14.4",
"darling_macro 0.14.4",
]
[[package]]
name = "darling"
version = "0.20.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0209d94da627ab5605dcccf08bb18afa5009cfbef48d8a8b7d7bdbc79be25c5e"
dependencies = [
"darling_core 0.20.3",
"darling_macro 0.20.3",
]
[[package]]
@@ -924,17 +934,54 @@ dependencies = [
"syn 1.0.109",
]
[[package]]
name = "darling_core"
version = "0.20.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "177e3443818124b357d8e76f53be906d60937f0d3a90773a664fa63fa253e621"
dependencies = [
"fnv",
"ident_case",
"proc-macro2",
"quote",
"strsim",
"syn 2.0.28",
]
[[package]]
name = "darling_macro"
version = "0.14.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a4aab4dbc9f7611d8b55048a3a16d2d010c2c8334e46304b40ac1cc14bf3b48e"
dependencies = [
"darling_core",
"darling_core 0.14.4",
"quote",
"syn 1.0.109",
]
[[package]]
name = "darling_macro"
version = "0.20.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "836a9bbc7ad63342d6d6e7b815ccab164bc77a2d95d84bc3117a8c0d5c98e2d5"
dependencies = [
"darling_core 0.20.3",
"quote",
"syn 2.0.28",
]
[[package]]
name = "default-struct-builder"
version = "0.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f8fa90da96b8fd491f5754d1f7a731f73921e3b7aa0ce333c821a0e43666ac14"
dependencies = [
"darling 0.20.3",
"proc-macro2",
"quote",
"syn 2.0.28",
]
[[package]]
name = "der"
version = "0.7.8"
@@ -1289,6 +1336,18 @@ dependencies = [
"web-sys",
]
[[package]]
name = "gloo-timers"
version = "0.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
dependencies = [
"futures-channel",
"futures-core",
"js-sys",
"wasm-bindgen",
]
[[package]]
name = "gloo-utils"
version = "0.1.7"
@@ -1699,6 +1758,25 @@ dependencies = [
"web-sys",
]
[[package]]
name = "leptos-use"
version = "0.8.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e1932eb047df16a30da3af0019b209f80026f5581ed75f76b356ef2b8efcb835"
dependencies = [
"cfg-if",
"default-struct-builder",
"futures-util",
"gloo-timers",
"js-sys",
"lazy_static",
"leptos",
"paste",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]]
name = "leptos_actix"
version = "0.5.2"
@@ -2568,6 +2646,7 @@ dependencies = [
"getopts",
"lazy_static",
"leptos",
"leptos-use",
"leptos_actix",
"leptos_meta",
"leptos_router",
Cargo.toml
+1
View File
@@ -32,6 +32,7 @@ toml = "0.8.8"
log = "0.4.20"
env_logger = "0.10.1"
getopts = "0.2.21"
leptos-use = "0.8.2"
[features]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
assets/vendor/css/core.css
Vendored
+1
View File
@@ -4609,6 +4609,7 @@ textarea.form-control-lg {
overflow-x: hidden;
overflow-y: auto;
outline: 0;
background-color: #43597180;
}
.modal-dialog {
src/app.rs
+24
View File
@@ -36,12 +36,36 @@ impl MenuHelper {
}
}
#[derive(Clone, Copy)]
pub struct DialogHelper {
opened: RwSignal<bool>
}
impl DialogHelper {
pub fn new() -> Self {
let opened = create_rw_signal(false);
Self {
opened
}
}
pub fn set_opened(&self, opened: bool) {
self.opened.set(opened);
}
pub fn is_open(&self) -> bool {
self.opened.get()
}
}
#[component]
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context();
init_locales();
provide_context(MenuHelper::new());
provide_context(MenuOpener::new());
provide_context(DialogHelper::new());
view! {
<Header/>
src/components/admin_portal.rs
+8 -3
View File
@@ -12,6 +12,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
let (user, set_user) = create_signal(User::default());
let editor = DialogOpener::new();
let pw_changer = DialogOpener::new();
let drawer = use_context::<MenuOpener>().expect("No drawer opener");
view! {
<div class="layout-wrapper layout-content-navbar">
@@ -20,7 +21,8 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
<div class="app-brand demo">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none"
on:click = move |_| drawer.toggle()>
<i class="bx bx-chevron-left bx-sm align-middle"></i>
</a>
<img src="/rezervovator_l.svg" width="180"/>
@@ -30,7 +32,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<ul class="menu-inner py-1">
//<!-- Dashboard -->
<li class="menu-item">
<a href="/admin" class="menu-link">
<a href="/admin" class="menu-link" on:click=move |_| drawer.close()>
<i class="menu-icon tf-icons bx bx-home-circle"></i>
<div data-i18n="Analytics">{trl("Dashboard")}</div>
</a>
@@ -63,7 +65,9 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)" on:click={
move |_| {drawer.toggle();}
}>
<i class="bx bx-menu bx-sm"></i>
</a>
</div>
@@ -109,6 +113,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
</div>
</div>
</div>
<div class="layout-overlay layout-menu-toggle"></div>
</div>
}
}
src/components/header.rs
+10 -1
View File
@@ -1,15 +1,21 @@
use leptos::*;
use leptos_meta::*;
use crate::app::DialogHelper;
use crate::components::user_menu::MenuOpener;
#[component]
pub fn Header() -> impl IntoView {
let drawer = use_context::<MenuOpener>().expect("No drawer opener");
let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");
view! {
<Html
lang="cz"
dir="ltr"
class = {move || if drawer.visible() {"light-style layout-menu-fixed layout-menu-expanded"}
else {"light-style layout-menu-fixed"} }
attributes=vec![
("data-theme", "theme-default".into_attribute()),
("class", "light-style layout-menu-fixed".into_attribute()),
("data-template", "vertical-menu-template-free".into_attribute()),
("data-assets-path", "/".into_attribute())]
/>
@@ -35,5 +41,8 @@ pub fn Header() -> impl IntoView {
//<!-- Vendors CSS -->
<Link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<Body attributes=vec![
("style", {move || if dlg_helper.is_open() {"overflow: hidden;"} else {""}}.into_attribute())
]/>
}
}
src/components/modal_box.rs
+5
View File
@@ -1,5 +1,6 @@
use crate::locales::trl;
use leptos::*;
use crate::app::DialogHelper;
use crate::validator::Validator;
#[derive(Copy, Clone)]
@@ -35,10 +36,14 @@ impl DialogOpener {
}
pub fn show(&self) {
let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");
dlg_helper.set_opened(true);
self.set_visible.update(|state| *state = true);
}
pub fn hide(&self) {
let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");
dlg_helper.set_opened(false);
self.set_visible.update(|state| *state = false);
self.set_empty.set("".to_string());
self.set_not_checked.set(None);
src/pages/users.rs
+8 -3
View File
@@ -8,6 +8,7 @@ use crate::pages::change_pwd::ChangePassword;
use crate::pages::profile_edit::ProfileEdit;
use crate::pages::user_delete::UserDelete;
use crate::pages::user_edit::UserEdit;
use leptos_use::use_media_query;
#[component]
pub fn users() -> impl IntoView {
@@ -19,6 +20,7 @@ pub fn users() -> impl IntoView {
move || editor.visible() || profile_editor.visible() || delete_dialog.visible(), move |_| {get_users()});
let (usr, set_usr) = create_signal::<Vec<User>>(vec![]);
let (profile, set_profile) = create_signal(User::default());
let is_wide = use_media_query("(min-width: 500px)");
view! {
<UserEdit opener=editor/>
@@ -33,7 +35,8 @@ pub fn users() -> impl IntoView {
<thead>
<tr>
<th>{trl("Username")}</th>
<th>{trl("Full name")}</th>
{move || if is_wide.get() {view! {<th>{trl("Full name")}</th>}}
else {view! {<th></th>}} }
<th>{trl("Admin")}</th>
<th>{trl("Actions")}</th>
</tr>
@@ -60,10 +63,12 @@ pub fn users() -> impl IntoView {
let user_profile = user.clone();
let user_passwd = user.clone();
let user_delete = user.clone();
let full_name = user.full_name.clone().unwrap_or("".to_string());
view! {
<tr>
<td>{&user.login}</td>
<td>{&user.full_name.unwrap_or("".to_string())}</td>
{move || if is_wide.get() {view! {<td>{full_name.clone()}</td>}}
else {view! {<td></td>}} }
<td>{if user.admin {view! {<i class="bx bx-check"></i>}}
else {view! {<i></i>}}}</td>
<td>
@@ -85,7 +90,7 @@ pub fn users() -> impl IntoView {
pwd_dialog.show();
}>
<i class="bx bx-lock me-1"></i> {trl("Change password")}</a>
<a class="dropdown-item" href="javascript:void(0);" on:click=move |_| {
<a class="dropdown-item text-danger" href="javascript:void(0);" on:click=move |_| {
set_profile.set(user_delete.clone());
delete_dialog.show();
}>