Skip to content

Adjust for safe inset areas, plus other fixes #785

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

Merged
kevinaboos merged 3 commits into from
Mar 31, 2026
Merged

Adjust for safe inset areas, plus other fixes #785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a95f8f0
Adjust shadows in stack view header and rooms list header
kevinaboos Mar 26, 2026
96e7d80
More correctly set shadows for top header views
kevinaboos Mar 26, 2026
6c6abbc
Modify view padding to handle
kevinaboos Mar 31, 2026
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
164 changes: 82 additions & 82 deletions Cargo.lock
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ version = "0.0.1-pre-alpha-4"
metadata.makepad-auto-version = "zqpv-Yj-K7WNVK2I8h5Okhho46Q="

[dependencies]
makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev", features = ["serde"] }
makepad-code-editor = { git = "https://github.com/makepad/makepad", branch = "dev" }
makepad-widgets = { git = "https://github.com/kevinaboos/makepad", branch = "device_bounds_safe_area_insets", features = ["serde"] }
makepad-code-editor = { git = "https://github.com/kevinaboos/makepad", branch = "device_bounds_safe_area_insets" }


## Including this crate automatically configures all `robius-*` crates to work with Makepad.
Expand Down
37 changes: 29 additions & 8 deletions src/app.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,12 @@ script_mod! {


body +: {
padding: 0,
padding: Inset{
top: (mod.widgets.SAFE_INSET_PAD_TOP),
bottom: (mod.widgets.SAFE_INSET_PAD_BOTTOM),
left: (mod.widgets.SAFE_INSET_PAD_LEFT),
right: (mod.widgets.SAFE_INSET_PAD_RIGHT),
}

View {
width: Fill, height: Fill,
Expand Down Expand Up @@ -216,13 +221,28 @@ impl MatchEvent for App {
error!("Failed to load window state: {}", e);
}

// Hide the caption bar on macOS and Linux, which use native window chrome.
// On Linux, hide the caption bar because it uses native window chrome.
// On Windows (with custom chrome), the caption bar is needed.
if matches!(cx.os_type(), OsType::Macos | OsType::LinuxWindow(_) | OsType::LinuxDirect) {
let mut window = self.ui.window(cx, ids!(main_window));
script_apply_eval!(cx, window, {
show_caption_bar: false
});
// On macOS, we currently show the caption bar to make spacing easy, but it's not technically needed.
// If we remove it on macOS, we'd need to add a bit of padding in its place.
match cx.os_type() {
OsType::LinuxWindow(_) | OsType::LinuxDirect => {
let mut window = self.ui.window(cx, ids!(main_window));
script_apply_eval!(cx, window, {
show_caption_bar: false
});
}
OsType::Macos => {
// Newer macOS versions have a larger traffic light button layout,
// so we make the title bar larger to make the buttons vertically centered.
// TODO: upstream this into Makepad by querying the actual size of
// the traffic light buttons on macOS and setting the caption bar height accordingly.
let mut caption_bar = self.ui.view(cx, ids!(main_window.caption_bar));
script_apply_eval!(cx, caption_bar, {
height: 34.0
});
}
_ => {}
}

self.update_login_visibility(cx);
Expand Down Expand Up @@ -305,7 +325,8 @@ impl MatchEvent for App {
self.update_login_visibility(cx);
self.ui.redraw(cx);
}
continue;
// Do NOT continue here — let the action propagate to the LoginScreen widget,
// which will open the login_status_modal to show the failure message.
}

// Handle an action requesting to open the new message context menu.
Expand Down
6 changes: 0 additions & 6 deletions src/home/add_room.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ script_mod! {
use mod.widgets.*



// The main view that allows the user to add (join) or explore new rooms/spaces.
mod.widgets.AddRoomScreen = #(AddRoomScreen::register_widget(vm)) {
..mod.widgets.ScrollYView
Expand All @@ -22,11 +21,6 @@ script_mod! {
padding: Inset{top: 5, left: 15, right: 15, bottom: 0},

title := TitleLabel {
flow: Flow.Right{wrap: true},
draw_text +: {
text_style: TITLE_TEXT {font_size: 13},
color: #000
}
text: "Add/Explore Rooms and Spaces"
draw_text +: {
text_style: theme.font_regular {font_size: 18},
Expand Down
161 changes: 83 additions & 78 deletions src/home/home_screen.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ script_mod! {
// Defines the total height of the StackNavigationView's header.
// This has to be set in multiple places because of how StackNavigation
// uses an Overlay view internally.
mod.widgets.STACK_VIEW_HEADER_HEIGHT = 75
mod.widgets.STACK_VIEW_HEADER_HEIGHT = 45

// A reusable base for StackNavigationView children in the mobile layout.
// Each specific content view (room, invite, space lobby) extends this
Expand All @@ -29,6 +29,11 @@ script_mod! {
width: Fill, height: Fill
draw_bg.color: (COLOR_PRIMARY)
header +: {
height: (mod.widgets.STACK_VIEW_HEADER_HEIGHT),
padding: 0
align: Align{y: 0.5}

// Below is a shader to draw a shadow under the bottom half of the header
clip_x: false,
clip_y: false,
show_bg: true,
Expand All @@ -45,8 +50,8 @@ script_mod! {
border_color_2: instance(vec4(-1))

shadow_color: instance(#0005)
shadow_radius: uniform(9.0)
shadow_offset: uniform(vec2(1.0, 0.0))
shadow_radius: uniform(12.0)
shadow_offset: uniform(vec2(0.0, 0.0))

rect_size2: varying(vec2(0))
rect_size3: varying(vec2(0))
Expand Down Expand Up @@ -95,7 +100,11 @@ script_mod! {
let m = self.shadow_radius
let o = self.shadow_offset + self.rect_shift
let v = GaussShadow.rounded_box_shadow(vec2(m) + o self.rect_size2+o self.pos * (self.rect_size3+vec2(m)) self.shadow_radius*0.5 self.border_radius*2.0)
sdf.clear(self.shadow_color*v)
// Only draw shadow on the bottom half of the view
let pixel_y = self.pos.y * self.rect_size3.y
let mid_y = self.sdf_rect_pos.y + self.sdf_rect_size.y * 0.5
let bottom_mask = smoothstep(mid_y - m * 0.3 mid_y + m * 0.3 pixel_y)
sdf.clear(self.shadow_color * v * bottom_mask)
}

sdf.fill_keep(fill_color)
Expand All @@ -107,11 +116,9 @@ script_mod! {
}
}

padding: Inset{top: 30, bottom: 0}
height: (mod.widgets.STACK_VIEW_HEADER_HEIGHT),

content +: {
height: (mod.widgets.STACK_VIEW_HEADER_HEIGHT)
align: Align{y: 0.5}
button_container +: {
padding: 0,
margin: 0
Expand All @@ -126,7 +133,7 @@ script_mod! {
}
}
title_container +: {
padding: Inset{top: 8}
// padding: Inset{top: 8}
title +: {
draw_text +: {
color: (ROOM_NAME_TEXT_COLOR)
Expand Down Expand Up @@ -269,99 +276,97 @@ script_mod! {
draw_bg.color: (COLOR_PRIMARY)

view_stack := StackNavigation {
root_view +: {
flow: Down
width: Fill, height: Fill
root_view +: {
flow: Down
width: Fill, height: Fill

// At the top of the root view, we use the PageFlip widget to show either
// the main list of rooms or the settings screen.
home_screen_page_flip := PageFlip {
width: Fill, height: Fill
// At the top of the root view, we use the PageFlip widget to show either
// the main list of rooms or the settings screen.
home_screen_page_flip := PageFlip {
width: Fill, height: Fill

lazy_init: true,
active_page: @home_page
lazy_init: true,
active_page: @home_page

home_page := View {
width: Fill, height: Fill
// Note: while the other page views have top padding, we do NOT add that here
// because it is added in the `RoomsSideBar`'s `RoundedShadowView` itself.
flow: Down
home_page := View {
width: Fill, height: Fill
// Note: while the other page views have top padding, we do NOT add that here
// because it is added in the `RoomsSideBar`'s `RoundedShadowView` itself.
flow: Down

mod.widgets.RoomsSideBar {}
}
mod.widgets.RoomsSideBar {}
}

settings_page := View {
width: Fill, height: Fill
padding: Inset{top: 20}
settings_page := View {
width: Fill, height: Fill

CachedWidget {
settings_screen := mod.widgets.SettingsScreen {}
}
CachedWidget {
settings_screen := mod.widgets.SettingsScreen {}
}
}

add_room_page := View {
width: Fill, height: Fill
padding: Inset{top: 20}
add_room_page := View {
width: Fill, height: Fill

CachedWidget {
add_room_screen := mod.widgets.AddRoomScreen {}
}
CachedWidget {
add_room_screen := mod.widgets.AddRoomScreen {}
}
}
}

// Show the SpacesBar right above the navigation tab bar.
// We wrap it in the SpacesBarWrapper in order to animate it in or out,
// and wrap *that* in a CachedWidget in order to maintain its shown/hidden state
// across AdaptiveView transitions between Mobile view mode and Desktop view mode.
//
// ... Then we wrap *that* in a ... <https://www.youtube.com/watch?v=evUWersr7pc>
CachedWidget {
spaces_bar_wrapper := mod.widgets.SpacesBarWrapper {}
}
// Show the SpacesBar right above the navigation tab bar.
// We wrap it in the SpacesBarWrapper in order to animate it in or out,
// and wrap *that* in a CachedWidget in order to maintain its shown/hidden state
// across AdaptiveView transitions between Mobile view mode and Desktop view mode.
//
// ... Then we wrap *that* in a ... <https://www.youtube.com/watch?v=evUWersr7pc>
CachedWidget {
spaces_bar_wrapper := mod.widgets.SpacesBarWrapper {}
}

// At the bottom of the root view, show the navigation tab bar horizontally.
CachedWidget {
navigation_tab_bar := mod.widgets.NavigationTabBar {}
}
// At the bottom of the root view, show the navigation tab bar horizontally.
CachedWidget {
navigation_tab_bar := mod.widgets.NavigationTabBar {}
}
}

// Room views: multiple instances to support deep stacking
// (e.g., room -> thread -> room -> thread -> ...).
// Each stack depth gets its own dedicated view widget,
// avoiding complex state save/restore when views are reused.
room_view_0 := mod.widgets.RobrixContentView { body +: { room_screen_0 := mod.widgets.RoomScreen {} } }
room_view_1 := mod.widgets.RobrixContentView { body +: { room_screen_1 := mod.widgets.RoomScreen {} } }
room_view_2 := mod.widgets.RobrixContentView { body +: { room_screen_2 := mod.widgets.RoomScreen {} } }
room_view_3 := mod.widgets.RobrixContentView { body +: { room_screen_3 := mod.widgets.RoomScreen {} } }
room_view_4 := mod.widgets.RobrixContentView { body +: { room_screen_4 := mod.widgets.RoomScreen {} } }
room_view_5 := mod.widgets.RobrixContentView { body +: { room_screen_5 := mod.widgets.RoomScreen {} } }
room_view_6 := mod.widgets.RobrixContentView { body +: { room_screen_6 := mod.widgets.RoomScreen {} } }
room_view_7 := mod.widgets.RobrixContentView { body +: { room_screen_7 := mod.widgets.RoomScreen {} } }
room_view_8 := mod.widgets.RobrixContentView { body +: { room_screen_8 := mod.widgets.RoomScreen {} } }
room_view_9 := mod.widgets.RobrixContentView { body +: { room_screen_9 := mod.widgets.RoomScreen {} } }
room_view_10 := mod.widgets.RobrixContentView { body +: { room_screen_10 := mod.widgets.RoomScreen {} } }
room_view_11 := mod.widgets.RobrixContentView { body +: { room_screen_11 := mod.widgets.RoomScreen {} } }
room_view_12 := mod.widgets.RobrixContentView { body +: { room_screen_12 := mod.widgets.RoomScreen {} } }
room_view_13 := mod.widgets.RobrixContentView { body +: { room_screen_13 := mod.widgets.RoomScreen {} } }
room_view_14 := mod.widgets.RobrixContentView { body +: { room_screen_14 := mod.widgets.RoomScreen {} } }
room_view_15 := mod.widgets.RobrixContentView { body +: { room_screen_15 := mod.widgets.RoomScreen {} } }

invite_view := mod.widgets.RobrixContentView {
body +: {
invite_screen := mod.widgets.InviteScreen {}
}
// Room views: multiple instances to support deep stacking
// (e.g., room -> thread -> room -> thread -> ...).
// Each stack depth gets its own dedicated view widget,
// avoiding complex state save/restore when views are reused.
room_view_0 := mod.widgets.RobrixContentView { body +: { room_screen_0 := mod.widgets.RoomScreen {} } }
room_view_1 := mod.widgets.RobrixContentView { body +: { room_screen_1 := mod.widgets.RoomScreen {} } }
room_view_2 := mod.widgets.RobrixContentView { body +: { room_screen_2 := mod.widgets.RoomScreen {} } }
room_view_3 := mod.widgets.RobrixContentView { body +: { room_screen_3 := mod.widgets.RoomScreen {} } }
room_view_4 := mod.widgets.RobrixContentView { body +: { room_screen_4 := mod.widgets.RoomScreen {} } }
room_view_5 := mod.widgets.RobrixContentView { body +: { room_screen_5 := mod.widgets.RoomScreen {} } }
room_view_6 := mod.widgets.RobrixContentView { body +: { room_screen_6 := mod.widgets.RoomScreen {} } }
room_view_7 := mod.widgets.RobrixContentView { body +: { room_screen_7 := mod.widgets.RoomScreen {} } }
room_view_8 := mod.widgets.RobrixContentView { body +: { room_screen_8 := mod.widgets.RoomScreen {} } }
room_view_9 := mod.widgets.RobrixContentView { body +: { room_screen_9 := mod.widgets.RoomScreen {} } }
room_view_10 := mod.widgets.RobrixContentView { body +: { room_screen_10 := mod.widgets.RoomScreen {} } }
room_view_11 := mod.widgets.RobrixContentView { body +: { room_screen_11 := mod.widgets.RoomScreen {} } }
room_view_12 := mod.widgets.RobrixContentView { body +: { room_screen_12 := mod.widgets.RoomScreen {} } }
room_view_13 := mod.widgets.RobrixContentView { body +: { room_screen_13 := mod.widgets.RoomScreen {} } }
room_view_14 := mod.widgets.RobrixContentView { body +: { room_screen_14 := mod.widgets.RoomScreen {} } }
room_view_15 := mod.widgets.RobrixContentView { body +: { room_screen_15 := mod.widgets.RoomScreen {} } }

invite_view := mod.widgets.RobrixContentView {
body +: {
invite_screen := mod.widgets.InviteScreen {}
}
}

space_lobby_view := mod.widgets.RobrixContentView {
body +: {
space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
}
space_lobby_view := mod.widgets.RobrixContentView {
body +: {
space_lobby_screen := mod.widgets.SpaceLobbyScreen {}
}
}
}
}
}
}
}


/// A simple wrapper around the SpacesBar that allows us to animate showing or hiding it.
Expand Down
2 changes: 1 addition & 1 deletion src/home/navigation_tab_bar.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ script_mod! {
Desktop := RoundedView {
flow: Down,
align: Align{x: 0.5}
padding: Inset{top: 40., bottom: 8}
padding: Inset{top: 8., bottom: 8}
width: (NAVIGATION_TAB_BAR_SIZE),
height: Fill

Expand Down
Loading
Loading