From c2c2749826fe0f9bbab8b1df3380bec98b08b2c8 Mon Sep 17 00:00:00 2001
From: marcantoinem <marc-antoine.m@outlook.com>
Date: Sat, 27 Jul 2024 23:55:26 -0400
Subject: [PATCH] Improve checkbox
---
.../frontend/components/common/checkbox.rs | 25 -------------
.../src/frontend/components/common/mod.rs | 1 -
.../components/options/courses_selector.rs | 36 ++++++++++---------
.../components/options/optimizations.rs | 14 ++++----
aep-schedule-website/style/options.scss | 36 +------------------
5 files changed, 28 insertions(+), 84 deletions(-)
delete mode 100644 aep-schedule-website/src/frontend/components/common/checkbox.rs
diff --git a/aep-schedule-website/src/frontend/components/common/checkbox.rs b/aep-schedule-website/src/frontend/components/common/checkbox.rs
deleted file mode 100644
index 7e689b3..0000000
--- a/aep-schedule-website/src/frontend/components/common/checkbox.rs
+++ /dev/null
@@ -1,25 +0,0 @@
-use leptos::*;
-
-#[component]
-pub fn CheckboxChip<F>(
- #[prop(optional, into)] value: RwSignal<bool>,
- #[prop(optional, into)] class: &'static str,
- submit: F,
- children: Children,
-) -> impl IntoView
-where
- F: Fn() + Copy + 'static,
-{
- view! {
- <div on:click=move |_| {
- value.update(|b| *b = !*b);
- submit();
- } class="chips ".to_owned() + class>
- <input
- type="checkbox"
- prop:checked=value
- />
- {children()}
- </div>
- }
-}
diff --git a/aep-schedule-website/src/frontend/components/common/mod.rs b/aep-schedule-website/src/frontend/components/common/mod.rs
index 6480e01..31ba3d9 100644
--- a/aep-schedule-website/src/frontend/components/common/mod.rs
+++ b/aep-schedule-website/src/frontend/components/common/mod.rs
@@ -1,5 +1,4 @@
pub mod autocomplete;
-pub mod checkbox;
pub mod number_input;
pub mod schedule;
pub mod tab;
diff --git a/aep-schedule-website/src/frontend/components/options/courses_selector.rs b/aep-schedule-website/src/frontend/components/options/courses_selector.rs
index ca0c25e..1186d8e 100644
--- a/aep-schedule-website/src/frontend/components/options/courses_selector.rs
+++ b/aep-schedule-website/src/frontend/components/options/courses_selector.rs
@@ -1,7 +1,6 @@
use super::state::OptionState;
use super::state::ReactiveCourse;
use crate::backend::routes::get_courses;
-use crate::frontend::components::common::checkbox::CheckboxChip;
use crate::frontend::components::common::tab::Tab;
use crate::frontend::components::icons::bell_ringing::BellRinging;
use crate::frontend::components::icons::calendar_x::CalendarX;
@@ -21,7 +20,6 @@ use leptos::*;
#[component]
fn GroupsChips<F>(
open: RwSignal<bool>,
- open_style: &'static str,
group: Group,
course_sigle: CompactString,
group_type: GroupType,
@@ -33,12 +31,19 @@ where
let set_modal = use_context::<SetModal>().unwrap().0;
view! {
- <CheckboxChip value=open class=open_style submit>
- <span>{group.number.to_string()}</span>
- <div class="col-container group-text-col">
+ <div on:click=move |_| {
+ open.update(|b| *b = !*b);
+ submit();
+ }
+ class="chips gap-2"
+ class=("bg-green-500", move || {open.get()})
+ class=("bg-red-500", move || {!open.get()})
+ >
+ <span class="text-lg text-bold text-sans">{group.number.to_string()}</span>
+ <div class="flex flex-col group-text-col">
{group.periods.iter().map(|p| {
view!{
- <div class="row-container group-text">
+ <div class="flex group-text">
<span>{p.day.to_string()}</span>
<span class="period-group">{p.hours.to_string()}</span>
</div>
@@ -57,7 +62,7 @@ where
}),
true => None,
}}
- </CheckboxChip>
+ </div>
}
}
@@ -74,10 +79,9 @@ where
{
view! {
{groups.into_iter().enumerate().map(|(i, group)| {
- let open_style = if group.open {"group-chip"} else {"group-chip closed-group"};
let open = open[i];
view! {
- <GroupsChips open open_style group course_sigle=course_sigle.clone() group_type submit/>
+ <GroupsChips open group course_sigle=course_sigle.clone() group_type submit/>
}
}).collect_view()
}
@@ -93,13 +97,13 @@ where
view! {
<Tab active_tab tab_id=course.sigle.to_string()>
<p>{course.name}</p>
- <div class="row-container row-evenly">
+ <div class="flex justify-around">
{
match course.course_type {
ReactiveCourseType::TheoOnly { theo_open, theo_groups } => {
let groups = theo_groups;
view!{
- <div>
+ <div class="flex gap-2 flex-col pb-2">
<h3>"Théorie"</h3>
<GroupsSettings groups open=theo_open course_sigle group_type=GroupType::TheoGroup submit/>
</div>
@@ -108,7 +112,7 @@ where
ReactiveCourseType::LabOnly { lab_open, lab_groups } => {
let groups = lab_groups;
view!{
- <div>
+ <div class="flex gap-2 flex-col pb-2">
<h3>"Laboratoire"</h3>
<GroupsSettings groups open=lab_open course_sigle=course_sigle.clone() group_type=GroupType::LabGroup submit/>
</div>
@@ -118,12 +122,12 @@ where
let theo_groups = theo_groups;
let lab_groups = lab_groups;
view!{
- <div>
+ <div class="flex gap-2 flex-col pb-2">
<h3>"Théorie"</h3>
<GroupsSettings groups=theo_groups open=theo_open course_sigle=course_sigle.clone() group_type=GroupType::TheoGroup submit/>
</div>
<div class="vertical-bar"></div>
- <div>
+ <div class="flex gap-2 flex-col pb-2">
<h3>"Laboratoire"</h3>
<GroupsSettings groups=lab_groups open=lab_open course_sigle=course_sigle.clone() group_type=GroupType::LabGroup submit/>
</div>
@@ -132,7 +136,7 @@ where
ReactiveCourseType::Linked { both_open, theo_groups, lab_groups } => {
let groups = theo_groups.merge(lab_groups);
view!{
- <div>
+ <div class="flex gap-2 flex-col pb-2">
<h3>"Théorie et laboratoire lié"</h3>
<GroupsSettings groups open=both_open course_sigle=course_sigle group_type=GroupType::LabGroup submit/>
</div>
@@ -161,7 +165,7 @@ where
>
<SearchCourse courses=courses.clone() action_courses set_active_tab/>
</Await>
- <div class="row-container tab-width">
+ <div class="flex tab-width">
<button class="tab-button chips" class=("tab-selected", move || active_tab.get() == "") id="personal" on:click={
move |_| set_active_tab.set("".to_string())
}>
diff --git a/aep-schedule-website/src/frontend/components/options/optimizations.rs b/aep-schedule-website/src/frontend/components/options/optimizations.rs
index 3c27cd8..ffffefa 100644
--- a/aep-schedule-website/src/frontend/components/options/optimizations.rs
+++ b/aep-schedule-website/src/frontend/components/options/optimizations.rs
@@ -27,29 +27,29 @@ where
view! {
<div class="three-col">
- <div class="col-container">
+ <div class="flex flex-col items-center">
<House weight=weight_house size="10vh"/>
<p class="font-sans font-medium tracking-tight">"Plus de congés"</p>
- <input type="range" min="0" max="4" class="opti-slider accent-amber-500" prop:value=state.day_off on:input=move |ev| {
+ <input type="range" min="0" max="4" class="w-24 accent-amber-500" prop:value=state.day_off on:input=move |ev| {
state.day_off.set(event_target_value(&ev).parse::<u8>().unwrap());
submit();
}/>
</div>
- <div class="col-container">
- <div class="row-container">
+ <div class="flex flex-col items-center">
+ <div class="flex">
<SunHorizon weight=weight_early size="10vh"/>
<Sun weight=weight_morning size="10vh"/>
</div>
<p class="font-sans font-medium tracking-tight">"Cours plus tôt ou plus tard"</p>
- <input type="range" min="-4" max="4" class="opti-slider accent-amber-500" prop:value=state.morning on:input=move |ev| {
+ <input type="range" min="-4" max="4" class="w-48 accent-amber-500" prop:value=state.morning on:input=move |ev| {
state.morning.set(event_target_value(&ev).parse::<i8>().unwrap());
submit();
}/>
</div>
- <div class="col-container">
+ <div class="flex flex-col items-center">
<CalendarCheck weight=weight_finish size="10vh"/>
<p class="font-sans font-medium tracking-tight">"Finir plus tôt"</p>
- <input type="range" min="0" max="4" class="opti-slider accent-amber-500" prop:value=state.finish_early on:input=move |ev| {
+ <input type="range" min="0" max="4" class="w-24 accent-amber-500" prop:value=state.finish_early on:input=move |ev| {
state.finish_early.set(event_target_value(&ev).parse::<u8>().unwrap());
submit();
}/>
diff --git a/aep-schedule-website/style/options.scss b/aep-schedule-website/style/options.scss
index 5fea310..4028cd2 100644
--- a/aep-schedule-website/style/options.scss
+++ b/aep-schedule-website/style/options.scss
@@ -21,31 +21,10 @@
right: 2px;
}
-.row-container {
- display: flex;
- flex-direction: row;
-}
-
-.col-container {
- display: flex;
- flex-direction: column;
- width: 100%;
- align-items: center;
-}
-
-.row-center {
- justify-content: center;
- flex-wrap: wrap;
-}
-
-.row-evenly {
- justify-content: space-evenly;
-}
-
.three-col {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
- width: 98%;
+ width: 100%;
}
.bottom {
@@ -61,23 +40,10 @@
padding: 0px;
}
-.opti-slider {
- width: 70%;
-}
-
.auto-bottom {
margin-top: auto;
}
-.group-chip {
- background-color: $highlight-color;
- color: $background-color;
- margin: 4px;
- gap: 7px;
- font-weight: normal;
- overflow: hidden;
-}
-
.group-text-col {
justify-content: space-between;
}
--
GitLab