ZacharyZhang-NY/ELY-Browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine topbar and nav styling to match design reference

Browse Source 
Add back/forward navigation icon buttons, topbar bottom border
(divider), correct omnibar background (55% white), and proper
active nav item styling (85% white).
This commit is contained in:
ZacharyZhang-NY
2026-05-09 16:23:54 -04:00
parent 4c6d9c757a
commit 107619a3fe
1 changed files with 35 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/ely_app/src/shell/render.rs
+35 -9
View File
@@ -117,21 +117,25 @@ impl ElyShell {
div() div()
.h(px(spacing::TOPBAR_HEIGHT)) .h(px(spacing::TOPBAR_HEIGHT))
.px(px(14.0)) .px(px(14.0))
.gap_2() .gap(px(8.0))
.flex() .flex()
.items_center() .items_center()
.flex_shrink_0() .flex_shrink_0()
.border_b_1()
.border_color(rgba(colors::DIVIDER))
.children(if sidebar_collapsed { .children(if sidebar_collapsed {
Some(render_command_bar_identity(snapshot, 56.0, true)) Some(render_command_bar_identity(snapshot, 56.0, true))
} else { } else {
None None
}) })
.child(render_icon_button("nav-back", IconName::ChevronLeft, false))
.child(render_icon_button("nav-forward", IconName::ChevronRight, false))
.child( .child(
div() div()
.flex_1() .flex_1()
.h(px(spacing::OMNIBAR_HEIGHT)) .h(px(spacing::OMNIBAR_HEIGHT))
.rounded(px(spacing::RADIUS_PILL)) .rounded(px(spacing::RADIUS_PILL))
.bg(rgba(colors::GLASS_2)) .bg(rgba(OMNIBAR_BG))
.px(px(14.0)) .px(px(14.0))
.flex() .flex()
.items_center() .items_center()
@@ -333,7 +337,7 @@ impl ElyShell {
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let space_id = space.id().clone(); let space_id = space.id().clone();
let bg_color = if active { colors::GLASS_3 } else { 0x00000000 }; let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 }; let text_color = if active { colors::INK } else { colors::INK_2 };
div() div()
@@ -345,7 +349,7 @@ impl ElyShell {
.flex() .flex()
.items_center() .items_center()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgba(colors::GLASS_3))) .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.bg(rgba(bg_color)) .bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
@@ -392,7 +396,7 @@ impl ElyShell {
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let tab_id = tab.id().clone(); let tab_id = tab.id().clone();
let bg_color = if active { colors::GLASS_3 } else { 0x00000000 }; let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 }; let text_color = if active { colors::INK } else { colors::INK_2 };
div() div()
@@ -404,7 +408,7 @@ impl ElyShell {
.flex() .flex()
.items_center() .items_center()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgba(colors::GLASS_3))) .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.bg(rgba(bg_color)) .bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
@@ -430,7 +434,7 @@ impl ElyShell {
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let tab_id = tab.id().clone(); let tab_id = tab.id().clone();
let bg_color = if active { colors::GLASS_3 } else { 0x00000000 }; let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 }; let text_color = if active { colors::INK } else { colors::INK_2 };
div() div()
@@ -442,7 +446,7 @@ impl ElyShell {
.flex() .flex()
.flex_col() .flex_col()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgba(colors::GLASS_3))) .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.bg(rgba(bg_color)) .bg(rgba(bg_color))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
@@ -485,7 +489,7 @@ impl ElyShell {
.flex() .flex()
.items_center() .items_center()
.cursor_pointer() .cursor_pointer()
.hover(|style| style.bg(rgba(colors::GLASS_3))) .hover(|style| style.bg(rgba(ACTIVE_NAV_BG)))
.active(|style| style.opacity(0.82)) .active(|style| style.opacity(0.82))
.on_click(cx.listener(move |shell, _, window, cx| { .on_click(cx.listener(move |shell, _, window, cx| {
shell.restore_archived_tab(&tab_id, window, cx); shell.restore_archived_tab(&tab_id, window, cx);
@@ -517,6 +521,28 @@ impl ElyShell {
} }
} }
const OMNIBAR_BG: u32 = 0xffffff8c; // rgba(255,255,255,0.55)
const ACTIVE_NAV_BG: u32 = 0xffffffd9; // rgba(255,255,255,0.85)
fn render_icon_button(
id: &'static str,
icon: IconName,
_active: bool,
) -> impl IntoElement {
div()
.id(id)
.size(px(30.0))
.rounded(px(8.0))
.flex()
.items_center()
.justify_center()
.cursor_pointer()
.text_color(rgb(colors::INK_3))
.hover(|style| style.bg(rgba(OMNIBAR_BG)).text_color(rgb(colors::INK)))
.active(|style| style.opacity(0.82))
.child(icon)
}
fn render_error(message: String) -> AnyElement { fn render_error(message: String) -> AnyElement {
div() div()
.size_full() .size_full()