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
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();
}>