Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ca06058

Browse files
mattamatta
committed
ui: centralize page container layout into PageContainer layout component
1 parent 002e6d7 commit ca06058

15 files changed

Lines changed: 67 additions & 68 deletions

File tree

‎crates/tasklens-ui/src/app_components/app_panel.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
padding-top: var(--app_safe_top);
1010
padding-right: var(--app_safe_right);
1111
padding-bottom: var(--app_safe_bottom);
12+
padding-left: var(--app_safe_left);
1213
}
1314

1415
.panel_root {

‎crates/tasklens-ui/src/app_components/layout/mod.rs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
mod page;
2+
3+
pub(crate) use page::PageContainer;

‎crates/tasklens-ui/src/app_components/layout/page.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Base padding is combined with safe area insets using calc().
3+
* This ensures content maintains aesthetic spacing (e.g., 1rem) from the
4+
* edge of the safe area (notches, home bars) rather than sitting flush against it.
5+
*/
6+
.page_container {
7+
padding-left: calc(1rem + var(--app_safe_left));
8+
padding-right: calc(1rem + var(--app_safe_right));
9+
padding-top: calc(1rem + var(--app_safe_top));
10+
padding-bottom: calc(5rem + var(--app_safe_bottom));
11+
margin-left: auto;
12+
margin-right: auto;
13+
max-width: 42rem;
14+
}

‎crates/tasklens-ui/src/app_components/layout/page.rs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
use dioxus::prelude::*;
2+
use dioxus_primitives::dioxus_attributes::attributes;
3+
use dioxus_primitives::merge_attributes;
4+
5+
#[css_module("/src/app_components/layout/page.css")]
6+
struct Styles;
7+
8+
/// A primitive layout component that handles safe area paddings and maximum width.
9+
///
10+
/// It encapsulates the `.page_container` styles previously duplicated across all views.
11+
#[component]
12+
pub fn PageContainer(
13+
#[props(extends=GlobalAttributes)]
14+
#[props(extends=div)]
15+
attributes: Vec<Attribute>,
16+
children: Element,
17+
) -> Element {
18+
let base = attributes!(div {
19+
class: Styles::page_container,
20+
});
21+
let merged = merge_attributes(vec![base, attributes]);
22+
23+
rsx! {
24+
div {
25+
..merged,
26+
{children}
27+
}
28+
}
29+
}

‎crates/tasklens-ui/src/app_components/mod.rs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
//! Shared and vendored component primitives remain under `components` and
55
//! `dioxus_components` during migration.
66
7+
mod layout;
8+
79
mod alert;
810
mod app_navbar;
911
mod app_panel;
@@ -33,6 +35,7 @@ pub(crate) use date_time_inputs::DateInput;
3335
pub(crate) use doc_id_manager::DocIdManager;
3436
pub(crate) use empty_state::EmptyState;
3537
pub(crate) use form_controls::{AppInput, AppInputStyle, AppTextarea};
38+
pub(crate) use layout::PageContainer;
3639
pub(crate) use load_error_view::LoadErrorView;
3740
pub(crate) use loading::Loading;
3841
pub(crate) use move_picker::MovePicker;

‎crates/tasklens-ui/src/views/balance_page.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
.page_container {
2-
padding-left: 1rem;
3-
padding-right: 1rem;
4-
padding-top: 1rem;
5-
padding-bottom: 5rem;
6-
margin-left: auto;
7-
margin-right: auto;
8-
max-width: 42rem;
9-
}
10-
111
.item_list {
122
display: flex;
133
flex-direction: column;

‎crates/tasklens-ui/src/views/balance_page.rs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
//! Displays the Balance View showing effort distribution across root goals.
44
//! Users can adjust target percentages via sliders to rebalance their focus.
55
6-
use crate::app_components::{BalanceSlider, EmptyState, LoadErrorView, PageHeader};
6+
use crate::app_components::{BalanceSlider, EmptyState, LoadErrorView, PageContainer, PageHeader};
77
use crate::controllers::task_controller;
88
use crate::dioxus_components::badge::{Badge, BadgeVariant};
99
use crate::dioxus_components::card::{Card, CardContent};
@@ -30,9 +30,7 @@ pub fn BalancePage() -> Element {
3030
}));
3131

3232
rsx! {
33-
div {
34-
class: Styles::page_container,
35-
style: "padding-top: var(--app_safe_top); padding-left: var(--app_safe_left); padding-right: var(--app_safe_right);",
33+
PageContainer {
3634

3735
PageHeader { title: "Balance" }
3836

‎crates/tasklens-ui/src/views/do_page.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
.page_container {
2-
padding-left: 1rem;
3-
padding-right: 1rem;
4-
padding-top: 1rem;
5-
padding-bottom: 5rem;
6-
margin-left: auto;
7-
margin-right: auto;
8-
max-width: 42rem;
9-
}
10-
111
.refresh_button {
122
color: var(--app_text);
133
opacity: 0.7;

‎crates/tasklens-ui/src/views/do_page.rs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
use crate::app_components::PriorityTaskRow;
2-
use crate::app_components::{EmptyState, LoadErrorView, PageHeader, TaskEditor, TaskInput};
2+
use crate::app_components::{
3+
EmptyState, LoadErrorView, PageContainer, PageHeader, TaskEditor, TaskInput,
4+
};
35
use crate::controllers::task_controller;
46
use crate::dioxus_components::button::{Button, ButtonVariant};
57
use crate::hooks::use_prioritized_tasks::use_do_list_tasks;
@@ -47,9 +49,7 @@ pub fn DoPage() -> Element {
4749
struct Styles;
4850

4951
rsx! {
50-
div {
51-
class: Styles::page_container,
52-
style: "padding-top: var(--app_safe_top); padding-left: var(--app_safe_left); padding-right: var(--app_safe_right);",
52+
PageContainer {
5353

5454
PageHeader { title: "Do",
5555
Button {

‎crates/tasklens-ui/src/views/score_trace_page.css‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
.page_container {
2-
padding-left: 1rem;
3-
padding-right: 1rem;
4-
padding-top: 1rem;
5-
padding-bottom: 5rem;
6-
margin-left: auto;
7-
margin-right: auto;
8-
max-width: 42rem;
1+
.trace_layout {
92
display: flex;
103
flex-direction: column;
114
gap: 1rem;

0 commit comments

Comments
 (0)