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:
Pavel Baksy 2025-12-20 02:39:52 +01:00
parent e758793423
commit fed5a828f1
2 changed files with 99 additions and 145 deletions

View File

@ -8,10 +8,93 @@
<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="GtkBox">
<property name="orientation">vertical</property>
<property name="width-request">200</property>
<!-- Sidebar Header Bar -->
<child>
<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>
</child>
</object>
</property>
<!-- RIGHT: Main Content Panel with its own header -->
<property name="end-child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<!-- Main Header Bar -->
<child>
<object class="AdwHeaderBar"> <object class="AdwHeaderBar">
<child type="end"> <child type="end">
<object class="GtkMenuButton"> <object class="GtkMenuButton">
@ -25,7 +108,7 @@
</child> </child>
<!-- Main Content --> <!-- Main Content -->
<property name="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>