Refactor to use AdwToolbarView like Epiphany

- Replace manual GtkBox layout with AdwToolbarView
- Add AdwHeaderBar and AdwTabBar as separate top bars
- Remove all custom CSS for header bar height matching
- AdwToolbarView automatically ensures consistent bar styling

This follows the proper libadwaita pattern used by GNOME Web.
This commit is contained in:
vesp 2025-12-24 03:55:13 +01:00
parent 9f05701df8
commit deb48e4c85
2 changed files with 23 additions and 74 deletions

View File

@ -16,21 +16,17 @@
<property name="resize-end-child">True</property>
<property name="wide-handle">False</property>
<!-- LEFT: Sidebar Panel with its own header -->
<!-- LEFT: Sidebar Panel with AdwToolbarView -->
<property name="start-child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<object class="AdwToolbarView">
<property name="width-request">200</property>
<!-- Sidebar Header Bar -->
<child>
<child type="top">
<object class="AdwHeaderBar">
<property name="show-title">False</property>
<property name="show-end-title-buttons">False</property>
<property name="show-start-title-buttons">False</property>
<style>
<class name="sidebar-header"/>
</style>
<child type="start">
<object class="GtkLabel">
<property name="label">Projects</property>
@ -53,10 +49,9 @@
</child>
<!-- Sidebar Content -->
<child>
<property name="content">
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="vexpand">True</property>
<!-- Projects List -->
<child>
@ -86,32 +81,20 @@
</object>
</child>
</object>
</child>
</property>
</object>
</property>
<!-- RIGHT: Main Content Panel with its own header -->
<!-- RIGHT: Main Content Panel with AdwToolbarView -->
<property name="end-child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<object class="AdwToolbarView">
<!-- Main Header Bar -->
<child>
<child type="top">
<object class="AdwHeaderBar">
<property name="show-title">False</property>
<property name="show-start-title-buttons">False</property>
<property name="show-end-title-buttons">False</property>
<style>
<class name="main-header"/>
</style>
<!-- Tab bar as title widget -->
<property name="title-widget">
<object class="AdwTabBar" id="tab_bar">
<property name="view">tab_view</property>
<property name="autohide">False</property>
<property name="expand-tabs">False</property>
</object>
</property>
<!-- Right side buttons -->
<child type="end">
@ -150,11 +133,19 @@
</object>
</child>
<!-- Vertical Paned: Tab View | History Panel -->
<child>
<!-- Tab Bar as separate top bar -->
<child type="top">
<object class="AdwTabBar" id="tab_bar">
<property name="view">tab_view</property>
<property name="autohide">False</property>
<property name="expand-tabs">False</property>
</object>
</child>
<!-- Main Content: Vertical Paned with Tab View and History Panel -->
<property name="content">
<object class="GtkPaned">
<property name="orientation">vertical</property>
<property name="vexpand">True</property>
<property name="position">600</property>
<property name="shrink-start-child">False</property>
<property name="shrink-end-child">True</property>
@ -213,7 +204,7 @@
</object>
</property>
</object>
</child>
</property>
</object>
</property>
</object>

View File

@ -133,50 +133,8 @@ class RosterWindow(Adw.ApplicationWindow):
"""Setup custom CSS for UI styling."""
css_provider = Gtk.CssProvider()
css_provider.load_from_data(b"""
/* Match both header bars to same height */
headerbar.sidebar-header,
headerbar.main-header {
min-height: 46px;
padding-top: 0;
padding-bottom: 0;
}
headerbar.sidebar-header {
padding-left: 0px;
padding-right: 6px;
}
headerbar.main-header {
padding-left: 0px;
padding-right: 6px;
}
/* Ultra-compact tab bar to fit exactly in header */
tabbar {
min-height: 0;
padding: 0;
margin: 0;
border: none;
}
tabbar > scrolledwindow {
min-height: 0;
padding: 0;
margin: 0;
border: none;
}
tabbar > scrolledwindow > box {
min-height: 0;
padding: 0;
margin: 0;
}
tabbar tab {
min-height: 24px;
padding: 2px 10px;
margin: 0 1px;
}
/* AdwToolbarView handles header bar heights automatically */
/* Just add minimal custom styling for other elements */
/* Stack switchers styling (Headers/Body tabs) */
stackswitcher button {