feat(ui): refine Graphite visuals and center navigation content
This commit is contained in:
aria committed
1 parent
cc3b6f903f
commit
1e34ec47ad
14 files changed
+646
-121
No files matched your search
@@ -8,17 +8,17 @@ pub(super) const SIDEBAR_BREAKPOINT: f32 = 960.;
|
||||
impl App {
|
||||
pub(super) fn page_view(&self) -> Element<'_, Message> {
|
||||
cosmic::iced::widget::responsive(move |size| {
|
||||
self.page_layout(size.width < SIDEBAR_BREAKPOINT, size.height)
|
||||
self.page_layout(size.width < SIDEBAR_BREAKPOINT, size.height, size.width)
|
||||
})
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.into()
|
||||
}
|
||||
|
||||
fn page_layout(&self, compact: bool, height: f32) -> Element<'_, Message> {
|
||||
fn page_layout(&self, compact: bool, height: f32, width: f32) -> Element<'_, Message> {
|
||||
let palette = visuals::Palette::from_resolved(&self.resolved.presented);
|
||||
let mut sidebar = column([])
|
||||
.spacing(3)
|
||||
.spacing(4)
|
||||
.push(
|
||||
widget::mouse_area(
|
||||
row([])
|
||||
@@ -26,7 +26,7 @@ impl App {
|
||||
.align_y(Alignment::Center)
|
||||
.push(visuals::brand_icon())
|
||||
.push(
|
||||
self.label(ferese_config::tr!("Ferese"), 16.)
|
||||
self.label(ferese_config::tr!("Ferese"), 14.)
|
||||
.class(cosmic::theme::Text::Color(palette.text)),
|
||||
)
|
||||
.width(Length::Fill),
|
||||
@@ -52,37 +52,83 @@ impl App {
|
||||
false,
|
||||
));
|
||||
}
|
||||
let mut navigation = column([]).spacing(16);
|
||||
let mut navigation = column([]).spacing(24);
|
||||
for (title, pages) in Page::NAVIGATION {
|
||||
let mut section = column([]).spacing(3).push(
|
||||
container(
|
||||
self.label(ferese_config::locale::text(title), 11.)
|
||||
.class(cosmic::theme::Text::Color(palette.muted)),
|
||||
self.label(
|
||||
ferese_config::locale::text(if title == "Appearance" {
|
||||
"Settings"
|
||||
} else {
|
||||
title
|
||||
}),
|
||||
11.,
|
||||
)
|
||||
.class(cosmic::theme::Text::Color(palette.muted)),
|
||||
)
|
||||
.padding([0, 8]),
|
||||
);
|
||||
for &page in pages {
|
||||
let selected = self.page.navigation_page() == page;
|
||||
let indicator = container(widget::Space::new().width(2).height(14))
|
||||
.id(widget::Id::new(format!(
|
||||
"settings-nav-marker-{}",
|
||||
page as usize
|
||||
)))
|
||||
.class(visuals::surface(
|
||||
if selected {
|
||||
palette.accent
|
||||
} else {
|
||||
cosmic::iced::Color::TRANSPARENT
|
||||
},
|
||||
1.,
|
||||
));
|
||||
let icon = container(visuals::icon(
|
||||
page,
|
||||
if selected {
|
||||
palette.accent
|
||||
} else {
|
||||
palette.muted
|
||||
},
|
||||
))
|
||||
.id(widget::Id::new(format!(
|
||||
"settings-nav-icon-{}",
|
||||
page as usize
|
||||
)));
|
||||
let label = container(self.label(page.title(), 13.)).id(widget::Id::new(format!(
|
||||
"settings-nav-label-{}",
|
||||
page as usize
|
||||
)));
|
||||
let content = container(
|
||||
row([])
|
||||
.spacing(8)
|
||||
.align_y(Alignment::Center)
|
||||
.push(indicator)
|
||||
.push(icon)
|
||||
.push(label),
|
||||
)
|
||||
.id(widget::Id::new(format!(
|
||||
"settings-nav-content-{}",
|
||||
page as usize
|
||||
)));
|
||||
// The button lays its child out at its top padding. Center the
|
||||
// entire row inside its 36 px hit area, as well as row children.
|
||||
section =
|
||||
section.push(
|
||||
button::custom(
|
||||
row([])
|
||||
.spacing(8)
|
||||
.align_y(Alignment::Center)
|
||||
.push(visuals::icon(
|
||||
page,
|
||||
if selected {
|
||||
palette.accent
|
||||
} else {
|
||||
palette.muted
|
||||
},
|
||||
))
|
||||
.push(self.label(page.title(), 13.)),
|
||||
container(content)
|
||||
.center_y(Length::Fill)
|
||||
.width(Length::Fill),
|
||||
)
|
||||
.width(Length::Fill)
|
||||
.padding([8, 8])
|
||||
.class(visuals::navigation_style(palette, selected))
|
||||
.id(widget::Id::new(format!(
|
||||
"settings-nav-button-{}",
|
||||
page as usize
|
||||
)))
|
||||
.name(page.title())
|
||||
.width(Length::Fill)
|
||||
.height(36)
|
||||
.padding([0, 8])
|
||||
.class(visuals::navigation_style(palette, selected))
|
||||
.on_press(Message::Page(if selected { self.page } else { page })),
|
||||
);
|
||||
}
|
||||
@@ -90,21 +136,27 @@ impl App {
|
||||
}
|
||||
let sidebar = container(sidebar.push(scrollable(navigation).height(Length::Fill)))
|
||||
.id("settings-sidebar")
|
||||
.width(if compact { 244 } else { 204 })
|
||||
.width(if compact { 244 } else { 208 })
|
||||
.height(Length::Fill)
|
||||
.padding([20, 10])
|
||||
.class(visuals::surface(palette.sidebar, 0.));
|
||||
.padding([24, 12])
|
||||
.class(visuals::sidebar(palette));
|
||||
let mut heading = row([]).align_y(Alignment::Center).spacing(12).push(
|
||||
column([])
|
||||
.spacing(3)
|
||||
.push(self.label(
|
||||
if self.search.is_empty() {
|
||||
self.page.navigation_page().title()
|
||||
} else {
|
||||
"Search"
|
||||
},
|
||||
20.,
|
||||
))
|
||||
.push(
|
||||
self.label(
|
||||
if self.search.is_empty() {
|
||||
self.page.navigation_page().title()
|
||||
} else {
|
||||
"Search"
|
||||
},
|
||||
24.,
|
||||
)
|
||||
.font(cosmic::iced::Font {
|
||||
weight: cosmic::iced::font::Weight::Medium,
|
||||
..self.font
|
||||
}),
|
||||
)
|
||||
.push(
|
||||
self.label(
|
||||
if self.search.is_empty() {
|
||||
@@ -207,7 +259,9 @@ impl App {
|
||||
}
|
||||
} else {
|
||||
if self.page == Page::Appearance {
|
||||
body = body.push(self.settings_hub());
|
||||
body = body.push(
|
||||
self.settings_hub((width - if compact { 0. } else { 208. }).min(1040.) - 62.),
|
||||
);
|
||||
}
|
||||
if self.page == Page::Configuration {
|
||||
body = body.push(self.all_options_view());
|
||||
@@ -306,11 +360,7 @@ impl App {
|
||||
group = group.push(self.theme_file_picker());
|
||||
}
|
||||
}
|
||||
body = body.push(
|
||||
container(group)
|
||||
.padding(4)
|
||||
.class(visuals::surface(palette.card, 14.)),
|
||||
);
|
||||
body = body.push(container(group).padding(4).class(visuals::section(palette)));
|
||||
}
|
||||
|
||||
match self.page {
|
||||
@@ -364,11 +414,8 @@ impl App {
|
||||
)
|
||||
.padding([7, 10]),
|
||||
);
|
||||
body = body.push(
|
||||
container(group)
|
||||
.padding(4)
|
||||
.class(visuals::surface(palette.card, 14.)),
|
||||
);
|
||||
body =
|
||||
body.push(container(group).padding(4).class(visuals::section(palette)));
|
||||
}
|
||||
body = body.push(
|
||||
row([])
|
||||
@@ -453,7 +500,7 @@ impl App {
|
||||
container(group)
|
||||
.padding(4)
|
||||
.height(164)
|
||||
.class(visuals::surface(palette.card, 14.))
|
||||
.class(visuals::section(palette))
|
||||
.into()
|
||||
} else {
|
||||
widget::Space::new().height(164).width(Length::Fill).into()
|
||||
@@ -492,9 +539,7 @@ impl App {
|
||||
.on_press(Message::DragWindow)
|
||||
.interaction(cosmic::iced::mouse::Interaction::Grab),
|
||||
);
|
||||
let mut content = column([])
|
||||
.spacing(if self.page == Page::Bar { 16 } else { 8 })
|
||||
.push(page_heading);
|
||||
let mut content = column([]).spacing(16).push(page_heading);
|
||||
if self.search.is_empty() && !self.page.subpages().is_empty() {
|
||||
content = content.push(
|
||||
container(
|
||||
@@ -579,7 +624,18 @@ impl App {
|
||||
),
|
||||
widget::tooltip::Position::Top,
|
||||
))
|
||||
.push(widget::Space::new().width(Length::Fill))
|
||||
.push(
|
||||
self.label(
|
||||
if self.saving {
|
||||
ferese_config::tr!("Saving…").to_owned()
|
||||
} else {
|
||||
ferese_config::locale::translate(&self.status)
|
||||
},
|
||||
11.,
|
||||
)
|
||||
.class(cosmic::theme::Text::Color(palette.muted))
|
||||
.width(Length::Fill),
|
||||
)
|
||||
.push(widget::tooltip(
|
||||
button::custom(visuals::action_icon(
|
||||
"M3 10h8 M3 10V3 M3 10c3-7 17-6 17 3a7 7 0 0 1-7 7",
|
||||
@@ -653,12 +709,12 @@ impl App {
|
||||
.spacing(6),
|
||||
)
|
||||
.padding(cosmic::iced::Padding {
|
||||
top: 20.,
|
||||
right: 20.,
|
||||
top: 24.,
|
||||
right: 24.,
|
||||
bottom: 8.,
|
||||
left: 20.,
|
||||
left: 24.,
|
||||
})
|
||||
.max_width(if self.page == Page::Bar { 1120 } else { 840 })
|
||||
.max_width(if self.page == Page::Bar { 1120 } else { 1040 })
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill),
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user