Add independent resizable sidebar panel with separate header bar

Restructure the UI to use GtkPaned instead of nested panes, giving the sidebar its own independent header bar aligned horizontally with the main content header. The sidebar is now clearly resizable with a draggable divider and has window control buttons disabled to avoid duplicate close buttons.
This commit is contained in:
vesp 2025-12-20 02:39:52 +01:00
parent 99fc7e0e3b
commit 8e8b1321f0
2 changed files with 99 additions and 145 deletions

View File

@ -8,24 +8,107 @@
<property name="default-width">1200</property> <property name="default-width">1200</property>
<property name="default-height">800</property> <property name="default-height">800</property>
<property name="content"> <property name="content">
<object class="AdwToolbarView"> <object class="GtkPaned" id="main_pane">
<property name="orientation">horizontal</property>
<property name="position">300</property>
<property name="shrink-start-child">False</property>
<property name="resize-start-child">True</property>
<property name="shrink-end-child">False</property>
<property name="resize-end-child">True</property>
<property name="wide-handle">False</property>
<!-- Header Bar --> <!-- LEFT: Sidebar Panel with its own header -->
<child type="top"> <property name="start-child">
<object class="AdwHeaderBar"> <object class="GtkBox">
<child type="end"> <property name="orientation">vertical</property>
<object class="GtkMenuButton"> <property name="width-request">200</property>
<property name="primary">True</property>
<property name="icon-name">open-menu-symbolic</property> <!-- Sidebar Header Bar -->
<property name="tooltip-text" translatable="yes">Main Menu</property> <child>
<property name="menu-model">primary_menu</property> <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>
<child type="start">
<object class="GtkLabel">
<property name="label">Projects</property>
<style>
<class name="heading"/>
</style>
</object>
</child>
<child type="end">
<object class="GtkButton" id="add_project_button">
<property name="icon-name">list-add-symbolic</property>
<property name="tooltip-text">Add Project</property>
<signal name="clicked" handler="on_add_project_clicked"/>
<style>
<class name="flat"/>
</style>
</object>
</child>
</object>
</child>
<!-- Sidebar Content -->
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="vexpand">True</property>
<!-- Projects List -->
<child>
<object class="GtkScrolledWindow">
<property name="vexpand">True</property>
<child>
<object class="GtkListBox" id="projects_listbox">
<style>
<class name="navigation-sidebar"/>
</style>
</object>
</child>
</object>
</child>
<!-- Save Current Request Button -->
<child>
<object class="GtkButton" id="save_request_button">
<property name="label">Save Current Request</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-bottom">12</property>
<signal name="clicked" handler="on_save_request_clicked"/>
<style>
<class name="suggested-action"/>
</style>
</object>
</child>
</object> </object>
</child> </child>
</object> </object>
</child> </property>
<!-- Main Content --> <!-- RIGHT: Main Content Panel with its own header -->
<property name="content"> <property name="end-child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<!-- Main Header Bar -->
<child>
<object class="AdwHeaderBar">
<child type="end">
<object class="GtkMenuButton">
<property name="primary">True</property>
<property name="icon-name">open-menu-symbolic</property>
<property name="tooltip-text" translatable="yes">Main Menu</property>
<property name="menu-model">primary_menu</property>
</object>
</child>
</object>
</child>
<!-- Main Content -->
<child>
<object class="GtkBox"> <object class="GtkBox">
<property name="orientation">vertical</property> <property name="orientation">vertical</property>
@ -83,87 +166,8 @@
<property name="resize-start-child">True</property> <property name="resize-start-child">True</property>
<property name="resize-end-child">True</property> <property name="resize-end-child">True</property>
<!-- START: Main Content Area --> <!-- START: Request/Response Split -->
<property name="start-child"> <property name="start-child">
<!-- 3-Column Layout: Sidebar | Request | Response -->
<object class="GtkPaned" id="main_pane">
<property name="orientation">horizontal</property>
<property name="position">250</property>
<property name="shrink-start-child">False</property>
<property name="resize-start-child">True</property>
<!-- START: Sidebar for Projects -->
<property name="start-child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="width-request">200</property>
<!-- Sidebar Header -->
<child>
<object class="GtkBox">
<property name="orientation">horizontal</property>
<property name="spacing">6</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
<child>
<object class="GtkLabel">
<property name="label">Projects</property>
<property name="xalign">0</property>
<property name="hexpand">True</property>
<style>
<class name="heading"/>
</style>
</object>
</child>
<child>
<object class="GtkButton" id="add_project_button">
<property name="icon-name">list-add-symbolic</property>
<property name="tooltip-text">Add Project</property>
<signal name="clicked" handler="on_add_project_clicked"/>
<style>
<class name="flat"/>
</style>
</object>
</child>
</object>
</child>
<!-- Projects List -->
<child>
<object class="GtkScrolledWindow">
<property name="vexpand">True</property>
<child>
<object class="GtkListBox" id="projects_listbox">
<style>
<class name="navigation-sidebar"/>
</style>
</object>
</child>
</object>
</child>
<!-- Save Current Request Button -->
<child>
<object class="GtkButton" id="save_request_button">
<property name="label">Save Current Request</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-bottom">12</property>
<signal name="clicked" handler="on_save_request_clicked"/>
<style>
<class name="suggested-action"/>
</style>
</object>
</child>
</object>
</property>
<!-- END: Request/Response Split -->
<property name="end-child">
<object class="GtkPaned" id="split_pane"> <object class="GtkPaned" id="split_pane">
<property name="orientation">horizontal</property> <property name="orientation">horizontal</property>
<property name="position">600</property> <property name="position">600</property>
@ -237,8 +241,6 @@
</property> </property>
</object> </object>
</property> </property>
</object>
</property>
<!-- END: History Panel --> <!-- END: History Panel -->
<property name="end-child"> <property name="end-child">
@ -287,6 +289,8 @@
</object> </object>
</child> </child>
</object> </object>
</child>
</object>
</property> </property>
</object> </object>
</property> </property>

View File

@ -1,50 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<requires lib="gtk" version="4.0"/>
<requires lib="Adw" version="1.0"/>
<template class="RosterWindow" parent="AdwApplicationWindow">
<property name="title" translatable="yes">Roster</property>
<property name="default-width">800</property>
<property name="default-height">600</property>
<property name="content">
<object class="AdwToolbarView">
<child type="top">
<object class="AdwHeaderBar">
<child type="end">
<object class="GtkMenuButton">
<property name="primary">True</property>
<property name="icon-name">open-menu-symbolic</property>
<property name="tooltip-text" translatable="yes">Main Menu</property>
<property name="menu-model">primary_menu</property>
</object>
</child>
</object>
</child>
<property name="content">
<object class="GtkLabel" id="label">
<property name="label" translatable="yes">Hello, World!</property>
<style>
<class name="title-1"/>
</style>
</object>
</property>
</object>
</property>
</template>
<menu id="primary_menu">
<section>
<item>
<attribute name="label" translatable="yes">_Preferences</attribute>
<attribute name="action">app.preferences</attribute>
</item>
<item>
<attribute name="label" translatable="yes">_Keyboard Shortcuts</attribute>
<attribute name="action">app.shortcuts</attribute>
</item>
<item>
<attribute name="label" translatable="yes">_About Roster</attribute>
<attribute name="action">app.about</attribute>
</item>
</section>
</menu>
</interface>