matous-volf/todo-baggins
1
1
Fork 0
Code Issues 27 Pull Requests Actions Projects 1 Activity

feat: update Font Awesome to 7.1.0 (#122)

Browse Source
This commit was merged in pull request #122.
This commit is contained in:
Matouš Volf
2026-01-24 20:08:26 +00:00
committed by Gitea
parent d0a124ee75 d4235ef2ab
commit 803fe36ed1
19 changed files with 315 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Cargo.lock generated
View File

@@ -1299,6 +1299,14 @@ dependencies = [
"tracing",
]
[[package]]
name = "dioxus-free-icons"
version = "0.10.0"
source = "git+https://github.com/matous-volf/dioxus-free-icons?rev=6488400003a3d6829e771a84a565c5c5f08a9aa0#6488400003a3d6829e771a84a565c5c5f08a9aa0"
dependencies = [
"dioxus",
]
[[package]]
name = "dioxus-fullstack"
version = "0.7.3"
@@ -5440,6 +5448,7 @@ dependencies = [
"diesel",
"diesel_migrations",
"dioxus",
"dioxus-free-icons",
"dioxus-html",
"dioxus-i18n",
"feruca",

5
Cargo.toml
View File

@@ -38,6 +38,11 @@ async-std = { version = "1.13.2", optional = true }
dioxus-i18n = "0.5.1"
voca_rs = "1.15.2"
load-dotenv = "0.1.2"
# TODO: Switch to upstream once it merges the changes.
dioxus-free-icons = { git = "https://github.com/matous-volf/dioxus-free-icons", rev = "6488400003a3d6829e771a84a565c5c5f08a9aa0", features = [
"font-awesome-regular",
"font-awesome-solid",
] }
[features]
default = ["web"]

1
src/components/app.rs
View File

@@ -37,7 +37,6 @@ pub(crate) fn App() -> Element {
document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS }
document::Stylesheet { href: INPUT_RANGE_CSS }
document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }
document::Script { src: "https://kit.fontawesome.com/3c1b409f8f.js" }
div {
class: "min-h-screen pt-4 pb-36 flex flex-col text-zinc-200 bg-zinc-800",

2
src/components/bottom_panel.rs
View File

@@ -40,7 +40,7 @@ pub(crate) fn BottomPanel(display_form: Signal<bool>) -> Element {
class: format!(
"flex flex-col pointer-events-auto bg-zinc-700/50 rounded-t-xl border-t-zinc-600 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
match (display_form(), current_route, navigation_expanded()) {
(false, _, false) => "h-[66px]",
(false, _, false) => "h-[64px]",
(false, _, true) => "h-[130px]",
(true, Route::ProjectsPage, _) => "h-[130px]",
(true, _, _) => "h-[506px]",

2
src/components/category_calendar_task_list.rs
View File

@@ -28,7 +28,7 @@ pub(crate) fn CategoryCalendarTaskList() -> Element {
div {
class: "flex flex-col gap-4",
div {
class: "px-8 flex flex-row items-center gap-2 font-bold",
class: "px-7 flex flex-row items-center gap-2 font-bold",
div {
class: "pt-1",
{

52
src/components/category_input.rs
View File

@@ -2,6 +2,10 @@ use crate::models::category::Category;
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaCalendarDays, FaForward, FaHourglassHalf, FaInbox, FaQuestion, FaWater,
};
#[component]
pub(crate) fn CategoryInput(
@@ -14,63 +18,71 @@ pub(crate) fn CategoryInput(
button {
r#type: "button",
class: format!(
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::SomedayMaybe { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
selected_category.set(Category::SomedayMaybe);
},
i {
class: "fa-solid fa-question"
Icon {
icon: FaQuestion,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::LongTerm { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
selected_category.set(Category::LongTerm);
},
i {
class: "fa-solid fa-water"
Icon {
icon: FaWater,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if let Category::WaitingFor(_) = selected_category() { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
selected_category.set(Category::WaitingFor(String::new()));
},
i {
class: "fa-solid fa-hourglass-half"
Icon {
icon: FaHourglassHalf,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::NextSteps { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
selected_category.set(Category::NextSteps);
},
i {
class: "fa-solid fa-forward"
Icon {
icon: FaForward,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if let Category::Calendar { .. } = selected_category() { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
@@ -81,22 +93,26 @@ pub(crate) fn CategoryInput(
time: None,
});
},
i {
class: "fa-solid fa-calendar-days"
Icon {
icon: FaCalendarDays,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::Inbox { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
selected_category.set(Category::Inbox);
},
i {
class: "fa-solid fa-inbox"
Icon {
icon: FaInbox,
height: 16,
width: 16
}
}
}

32
src/components/category_today_task_list.rs
View File

@@ -6,6 +6,8 @@ use crate::models::category::Category;
use crate::models::task::TaskWithSubtasks;
use chrono::Local;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{FaCalendarCheck, FaCalendarXmark, FaWater};
use dioxus_i18n::t;
use dioxus_i18n::use_i18n::i18n;
use voca_rs::Voca;
@@ -48,12 +50,12 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
div {
class: "flex flex-col gap-4",
div {
class: "px-8 flex flex-row items-center gap-2 font-bold",
i {
class: "fa-solid fa-water text-xl w-6 text-center"
class: "px-7 flex flex-row items-center gap-2 font-bold",
Icon {
class: "mx-1",
icon: FaWater
}
div {
class: "mt-1",
{t!("long-term")._upper_first()}
}
}
@@ -62,7 +64,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
div {
key: "{task.task.id}",
class: format!(
"px-8 pt-5 {} flex flex-row gap-4",
"px-7 pt-5 {} flex flex-row gap-4",
if task.task.deadline.is_some() {
"pb-0.5"
} else {
@@ -80,12 +82,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
div {
class: "flex flex-col gap-4",
div {
class: "px-8 flex flex-row items-center gap-2 font-bold",
i {
class: "fa-solid fa-calendar-xmark text-xl w-6 text-center"
class: "px-7 flex flex-row items-center gap-2 font-bold",
Icon {
class: "mx-1",
height: 22,
width: 22,
icon: FaCalendarXmark
}
div {
class: "mt-1",
{t!("overdue")._upper_first()}
}
}
@@ -98,12 +102,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
div {
class: "flex flex-col gap-4",
div {
class: "px-8 flex flex-row items-center gap-2 font-bold",
i {
class: "fa-solid fa-calendar-check text-xl w-6 text-center"
class: "px-7 flex flex-row items-center gap-2 font-bold",
Icon {
class: "mx-1",
height: 22,
width: 22,
icon: FaCalendarCheck
}
div {
class: "mt-1",
{
let format = t!("date-weekday-format");
let today_date = today_date.format_localized(

8
src/components/error_boundary_message.rs
View File

@@ -1,6 +1,8 @@
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::FaTriangleExclamation;
#[component]
pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option<String>) -> Element {
@@ -11,8 +13,10 @@ pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option<String>) ->
div {
class: "grow flex flex-col justify-center items-center",
div {
i {
class: "text-3xl fa-solid fa-triangle-exclamation"
Icon {
icon: FaTriangleExclamation,
height: 32,
width: 32
}
}
}

20
src/components/form_open_button.rs
View File

@@ -1,6 +1,10 @@
use crate::models::project::Project;
use crate::models::task::Task;
use dioxus::prelude::*;
use dioxus_free_icons::{
Icon,
icons::fa_solid_icons::{FaPlus, FaXmark},
};
#[component]
pub(crate) fn FormOpenButton(opened: Signal<bool>) -> Element {
@@ -9,7 +13,7 @@ pub(crate) fn FormOpenButton(opened: Signal<bool>) -> Element {
rsx! {
button {
class: "pointer-events-auto m-4 py-3 px-5 self-end text-center bg-zinc-300/50 rounded-xl border-t-zinc-200 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] text-2xl text-zinc-200 cursor-pointer",
class: "pointer-events-auto m-4 py-4 px-5 self-end text-center bg-zinc-300/50 rounded-xl border-t-zinc-200 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] text-2xl text-zinc-200 cursor-pointer",
onclick: move |_| {
if opened() {
project_being_edited.set(None);
@@ -17,8 +21,18 @@ pub(crate) fn FormOpenButton(opened: Signal<bool>) -> Element {
}
opened.set(!opened());
},
i {
class: format!("min-w-6 fa-solid {}", if opened() { "fa-xmark" } else { "fa-plus" }),
if opened() {
Icon {
icon: FaXmark,
height: 24,
width: 24
}
} else {
Icon {
icon: FaPlus,
height: 24,
width: 24
}
}
}
}

49
src/components/navigation.rs
View File

@@ -1,6 +1,11 @@
use crate::components::navigation_item::NavigationItem;
use crate::route::Route;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaBars, FaCalendarDay, FaCalendarDays, FaCheck, FaForward, FaHourglassHalf, FaInbox, FaList,
FaTrashCan, FaWater,
};
#[component]
pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
@@ -9,70 +14,54 @@ pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
class: "grid grid-cols-5 justify-stretch",
button {
class: format!(
"py-4 text-center text-2xl {} cursor-pointer",
"py-5 flex flex-row justify-center items-center {} cursor-pointer",
if expanded() { "text-zinc-200" }
else { "text-zinc-500" }
),
onclick: move |_| expanded.set(!expanded()),
i {
class: "fa-solid fa-bars"
Icon {
icon: FaBars,
height: 24,
width: 24
}
},
NavigationItem {
route: Route::CategoryNextStepsPage,
i {
class: "fa-solid fa-forward"
}
icon: FaForward
},
NavigationItem {
route: Route::CategoryCalendarPage,
i {
class: "fa-solid fa-calendar-days"
}
icon: FaCalendarDays
},
NavigationItem {
route: Route::CategoryTodayPage,
i {
class: "fa-solid fa-calendar-day"
}
icon: FaCalendarDay
},
NavigationItem {
route: Route::CategoryInboxPage,
i {
class: "fa-solid fa-inbox"
}
icon: FaInbox
},
{if expanded() {
rsx! {
NavigationItem {
route: Route::ProjectsPage,
i {
class: "fa-solid fa-list"
}
icon: FaList
},
NavigationItem {
route: Route::CategoryTrashPage,
i {
class: "fa-solid fa-trash-can"
}
icon: FaTrashCan
},
NavigationItem {
route: Route::CategoryDonePage,
i {
class: "fa-solid fa-check"
}
icon: FaCheck
},
NavigationItem {
route: Route::CategoryLongTermPage,
i {
class: "fa-solid fa-water"
}
icon: FaWater
},
NavigationItem {
route: Route::CategoryWaitingForPage,
i {
class: "fa-solid fa-hourglass-half"
}
icon: FaHourglassHalf
}
}
} else { VNode::empty() }}

14
src/components/navigation_item.rs
View File

@@ -1,19 +1,27 @@
use crate::route::Route;
use dioxus::prelude::*;
use dioxus_free_icons::{Icon, IconShape};
#[component]
pub(crate) fn NavigationItem(route: Route, children: Element) -> Element {
pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
route: Route,
icon: I,
) -> Element {
let current_route = use_route::<Route>();
rsx! {
Link {
to: route.clone(),
class: format!(
"py-4 text-center text-2xl {}",
"py-5 flex flex-row justify-center items-center {}",
if current_route == route { "text-zinc-200" }
else { "text-zinc-500" }
),
children
Icon {
icon,
height: 24,
width: 24
}
}
}
}

27
src/components/project_form.rs
View File

@@ -3,6 +3,8 @@ use crate::server::projects::{create_project, delete_project, edit_project};
use dioxus::core_macro::{component, rsx};
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{FaFloppyDisk, FaPenClip, FaTrashCan};
#[component]
pub(crate) fn ProjectForm(
@@ -30,9 +32,12 @@ pub(crate) fn ProjectForm(
class: "flex flex-row items-center gap-3",
label {
r#for: "input_title",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-pen-clip text-zinc-400/50"
class: "flex flex-row justify-center items-center min-w-6",
Icon {
class: "text-zinc-400/50",
icon: FaPenClip,
height: 16,
width: 16
}
}
input {
@@ -48,7 +53,7 @@ pub(crate) fn ProjectForm(
class: "flex flex-row justify-between mt-auto",
button {
r#type: "button",
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
onclick: move |_| {
let project = project.clone();
async move {
@@ -58,15 +63,19 @@ pub(crate) fn ProjectForm(
on_successful_submit.call(());
}
},
i {
class: "fa-solid fa-trash-can"
Icon {
icon: FaTrashCan,
height: 16,
width: 16
}
}
button {
r#type: "submit",
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
i {
class: "fa-solid fa-floppy-disk"
class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
Icon {
icon: FaFloppyDisk,
height: 16,
width: 16
}
}
}

2
src/components/project_list.rs
View File

@@ -13,7 +13,7 @@ pub(crate) fn ProjectList() -> Element {
div {
key: "{project.id}",
class: format!(
"px-8 py-4 select-none {}",
"px-7 py-4 select-none {}",
if project_being_edited().is_some_and(|p| p.id == project.id) {
"bg-zinc-700"
} else { "" }

34
src/components/reoccurrence_input.rs
View File

@@ -2,6 +2,8 @@ use crate::models::category::ReoccurrenceInterval;
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{FaBan, FaEarthEurope, FaMoon, FaSun};
#[component]
pub(crate) fn ReoccurrenceIntervalInput(
@@ -12,7 +14,7 @@ pub(crate) fn ReoccurrenceIntervalInput(
button {
r#type: "button",
class: format!(
"py-2 rounded-lg {} {} cursor-pointer",
"py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
class_buttons.unwrap_or(""),
if reoccurrence_interval().is_none() { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
@@ -20,14 +22,16 @@ pub(crate) fn ReoccurrenceIntervalInput(
onclick: move |_| {
reoccurrence_interval.set(None);
},
i {
class: "fa-solid fa-ban"
Icon {
icon: FaBan,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg {} {} cursor-pointer",
"py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
class_buttons.unwrap_or(""),
if let Some(ReoccurrenceInterval::Day) = reoccurrence_interval()
{ "bg-zinc-500/50" }
@@ -36,14 +40,16 @@ pub(crate) fn ReoccurrenceIntervalInput(
onclick: move |_| {
reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
},
i {
class: "fa-solid fa-sun"
Icon {
icon: FaSun,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg {} {} cursor-pointer",
"py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
class_buttons.unwrap_or(""),
if let Some(ReoccurrenceInterval::Month) = reoccurrence_interval()
{ "bg-zinc-500/50" }
@@ -52,14 +58,16 @@ pub(crate) fn ReoccurrenceIntervalInput(
onclick: move |_| {
reoccurrence_interval.set(Some(ReoccurrenceInterval::Month))
},
i {
class: "fa-solid fa-moon"
Icon {
icon: FaMoon,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-2 rounded-lg {} {} cursor-pointer",
"py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
class_buttons.unwrap_or(""),
if let Some(ReoccurrenceInterval::Year) = reoccurrence_interval()
{ "bg-zinc-500/50" }
@@ -68,8 +76,10 @@ pub(crate) fn ReoccurrenceIntervalInput(
onclick: move |_| {
reoccurrence_interval.set(Some(ReoccurrenceInterval::Year))
},
i {
class: "fa-solid fa-earth-europe"
Icon {
icon: FaEarthEurope,
height: 16,
width: 16
}
}
}

52
src/components/subtasks_form.rs
View File

@@ -5,6 +5,9 @@ use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask};
use dioxus::core_macro::{component, rsx};
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_regular_icons::FaSquare;
use dioxus_free_icons::icons::fa_solid_icons::{FaListCheck, FaPlus, FaSquareCheck, FaTrashCan};
#[component]
pub(crate) fn SubtasksForm(task: Task) -> Element {
@@ -31,9 +34,12 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
},
label {
r#for: "input_new_title",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-list-check text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaListCheck,
height: 16,
width: 16
}
}
div {
@@ -49,9 +55,11 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
}
button {
r#type: "submit",
class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
i {
class: "fa-solid fa-plus"
class: "py-2 col-span-1 flex flex-row justify-center items-center bg-zinc-800/50 rounded-lg",
Icon {
icon: FaPlus,
height: 16,
width: 16
}
}
}
@@ -60,15 +68,8 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
div {
key: "{subtask.id}",
class: "flex flex-row items-center gap-3",
i {
class: format!(
"{} min-w-6 text-center text-2xl text-zinc-400/50",
if subtask.is_completed {
"fa solid fa-square-check"
} else {
"fa-regular fa-square"
}
),
button {
class: "min-w-6 flex flex-row justify-center items-center text-zinc-400/50",
onclick: {
let subtask = subtask.clone();
move |_| {
@@ -85,6 +86,19 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
).await;
}
}
},
if subtask.is_completed {
Icon {
icon: FaSquareCheck,
height: 24,
width: 24
}
} else {
Icon {
icon: FaSquare,
height: 24,
width: 24
}
}
}
div {
@@ -118,7 +132,7 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
}
button {
r#type: "button",
class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
class: "py-2 flex flex-row justify-center items-center col-span-1 bg-zinc-800/50 rounded-lg",
onclick: {
let subtask = subtask.clone();
move |_| {
@@ -128,8 +142,10 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
}
}
},
i {
class: "fa-solid fa-trash-can"
Icon {
icon: FaTrashCan,
height: 16,
width: 16
}
}
}

97
src/components/task_form.rs
View File

@@ -11,6 +11,11 @@ use chrono::Duration;
use dioxus::core_macro::{component, rsx};
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaBell, FaBomb, FaClock, FaFloppyDisk, FaHourglassEnd, FaLayerGroup, FaList, FaPenClip,
FaRepeat, FaTrashCan,
};
use dioxus_i18n::t;
use serde::{Deserialize, Serialize};
@@ -160,10 +165,13 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row items-center gap-3",
label {
r#for: "input_title",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-pen-clip text-zinc-400/50"
},
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaPenClip,
height: 16,
width: 16
}
},
input {
name: "title",
@@ -178,9 +186,12 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row items-center gap-3",
label {
r#for: "input_project",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-list text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaList,
height: 16,
width: 16
}
},
SuspenseBoundary {
@@ -204,9 +215,12 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row items-center gap-3",
label {
r#for: "input_deadline",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-bomb text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaBomb,
height: 16,
width: 16
}
},
input {
@@ -221,9 +235,12 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
div {
class: "flex flex-row items-center gap-3",
label {
class: "min-w-6 text-center",
i {
class: "fa-solid fa-layer-group text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaLayerGroup,
height: 16,
width: 16
}
},
CategoryInput {
@@ -236,10 +253,13 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
div {
class: "flex flex-row items-center gap-3",
label {
r#for: "input_deadline",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-hourglass-end text-zinc-400/50"
r#for: "input_waiting_for",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaHourglassEnd,
height: 16,
width: 16
}
},
input {
@@ -257,9 +277,12 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row items-center gap-3",
label {
r#for: "input_category_calendar_date",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-clock text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaClock,
height: 16,
width: 16
}
},
div {
@@ -291,9 +314,12 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row items-center gap-3",
label {
r#for: "category_calendar_reoccurrence_length",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-repeat text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaRepeat,
height: 16,
width: 16
}
},
div {
@@ -323,9 +349,12 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row items-center gap-3",
label {
r#for: "category_calendar_reminder_offset_index",
class: "min-w-6 text-center",
i {
class: "fa-solid fa-bell text-zinc-400/50"
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaBell,
height: 16,
width: 16
}
},
input {
@@ -375,7 +404,7 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
class: "flex flex-row justify-between mt-auto",
button {
r#type: "button",
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
onclick: move |_| {
let task = task.clone();
async move {
@@ -395,16 +424,20 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
on_successful_submit.call(());
}
},
i {
class: "fa-solid fa-trash-can"
Icon {
icon: FaTrashCan,
height: 16,
width: 16
}
}
button {
form: "form_task",
r#type: "submit",
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
i {
class: "fa-solid fa-floppy-disk"
class: "py-3 px-4 flex flex-row justify-center items-center bg-zinc-300/50 rounded-lg cursor-pointer",
Icon {
icon: FaFloppyDisk,
height: 16,
width: 16
}
}
}

38
src/components/task_list.rs
View File

@@ -5,6 +5,9 @@ use crate::server::tasks::complete_task;
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_regular_icons::FaSquare;
use dioxus_free_icons::icons::fa_solid_icons::FaSquareCheck;
#[component]
pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>) -> Element {
@@ -16,17 +19,17 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
div {
key: "{task.task.id}",
class: format!(
"px-8 pt-4 {} flex flex-row gap-4 select-none {}",
"px-7 pt-4.25 {} flex flex-row items-start gap-4 select-none {}",
if task.task.deadline.is_some() || !task.subtasks.is_empty() {
"pb-0.5"
"pb-0.25"
} else if let Category::Calendar { time, .. } = &task.task.category {
if time.is_some() {
"pb-0.5"
"pb-0.25"
} else {
"pb-4"
"pb-4.25"
}
} else {
"pb-4"
"pb-4.25"
},
if task_being_edited().is_some_and(|t| t.id == task.task.id) {
"bg-zinc-700"
@@ -36,15 +39,8 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
let task = task.clone();
move |_| task_being_edited.set(Some(task.task.clone()))
},
i {
class: format!(
"{} text-3xl align-middle h-9 text-zinc-500",
if let Category::Done = task.task.category {
"fa solid fa-square-check"
} else {
"fa-regular fa-square cursor-pointer"
}
),
button {
class: "text-zinc-500",
onclick: {
move |event: Event<MouseData>| {
// To prevent editing the task.
@@ -53,6 +49,20 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
let _ = complete_task(task.task.id).await;
}
}
},
if let Category::Done = task.task.category {
Icon {
icon: FaSquareCheck,
height: 30,
width: 30
}
} else {
Icon {
class: "cursor-pointer",
icon: FaSquare,
height: 30,
width: 30
}
}
},
TaskListItem {

36
src/components/task_list_item.rs
View File

@@ -5,6 +5,8 @@ use chrono::{Datelike, Local};
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{FaBomb, FaClock, FaListCheck};
use dioxus_i18n::prelude::i18n;
use dioxus_i18n::t;
use voca_rs::Voca;
@@ -14,19 +16,21 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
let today_date = Local::now().date_naive();
rsx! {
div {
class: "flex flex-col",
class: "pt-0.75 flex flex-col",
div {
class: "mt-1 grow font-medium",
class: "grow font-medium",
{task.task.title}
},
div {
class: "flex flex-row gap-4",
if let Some(deadline) = task.task.deadline {
div {
class: "text-sm text-zinc-400",
i {
class: "fa-solid fa-bomb"
},
class: "flex flex-row items-center gap-1 text-sm text-zinc-400",
Icon {
icon: FaBomb,
height: 14,
width: 14
}
{
format!(
" {}",
@@ -72,10 +76,12 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
if let Category::Calendar { time, .. } = task.task.category {
if let Some(calendar_time) = time {
div {
class: "text-sm text-zinc-400",
i {
class: "fa-solid fa-clock"
},
class: "flex flex-row items-center gap-1 text-sm text-zinc-400",
Icon {
icon: FaClock,
height: 14,
width: 14
}
{
let format = t!("time-format");
format!(" {}", calendar_time.time.format(format.as_str()))
@@ -85,10 +91,12 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
}
if !task.subtasks.is_empty() {
div {
class: "text-sm text-zinc-400",
i {
class: "fa-solid fa-list-check"
},
class: "flex flex-row items-center gap-1 text-sm text-zinc-400",
Icon {
icon: FaListCheck,
height: 14,
width: 14
}
{format!(
" {}/{}",
task.subtasks.iter()

11
src/layouts/main.rs
View File

@@ -7,6 +7,8 @@ use crate::route::Route;
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::FaCog;
#[component]
pub(crate) fn Main() -> Element {
@@ -25,10 +27,11 @@ pub(crate) fn Main() -> Element {
rsx! {
div {
class: "grow flex flex-col justify-center items-center",
div {
i {
class: "text-3xl fa-solid fa-cog fa-spin"
}
Icon {
class: "animate-[spin_2000ms_linear_infinite]",
icon: FaCog,
height: 32,
width: 32
}
}
}