Skip to content

better align the bottom bar #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FreddyFunk wants to merge 1 commit into
base: main
Choose a base branch
from
Open

better align the bottom bar #110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 21 additions & 13 deletions src/app/bottom_bar/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,28 +25,36 @@ impl AppModel {
/// Build the complete bottom bar widget
///
/// Assembles gallery button, mode switcher, and camera switcher
/// into a centered horizontal layout.
/// into a layout where the mode switcher is horizontally centered,
/// aligning with the capture button above.
pub fn build_bottom_bar(&self) -> Element<'_, Message> {
let spacing = cosmic::theme::spacing();

// Build the centered group: gallery button + mode selector + camera switch button
let mut centered_group = widget::row();
// Use three-column layout to ensure mode switcher is truly centered:
// [left Fill + gallery] [mode_switcher] [camera_switcher + right Fill]
// This ensures center alignment regardless of asymmetric button widths

centered_group = centered_group.push(self.build_gallery_button());

centered_group = centered_group
.push(widget::horizontal_space().width(spacing.space_m))
.push(self.build_mode_switcher())
// Left section: Fill space + gallery button (right-aligned within the fill)
let left_section = widget::row()
.push(widget::Space::new(Length::Fill, Length::Shrink))
.push(self.build_gallery_button())
.push(widget::horizontal_space().width(spacing.space_m))
.align_y(Alignment::Center);

centered_group = centered_group.push(self.build_camera_switcher());
// Center section: mode switcher (truly centered in window)
let center_section = self.build_mode_switcher();

// Center the entire group in the bottom bar
let bottom_row = widget::row()
.push(widget::Space::new(Length::Fill, Length::Shrink))
.push(centered_group)
// Right section: camera switcher + Fill space (left-aligned within the fill)
let right_section = widget::row()
.push(widget::horizontal_space().width(spacing.space_m))
.push(self.build_camera_switcher())
.push(widget::Space::new(Length::Fill, Length::Shrink))
.align_y(Alignment::Center);

let bottom_row = widget::row()
.push(left_section)
.push(center_section)
.push(right_section)
.padding(spacing.space_xs)
.align_y(Alignment::Center);

Expand Down