Use AdwBreakpoint and AdwToolbarView from Libadwaita 1.4

Also set `can-shrink` on the library button (requires GTK 4.12)
johnfactotum · Sep 21, 2023 · 5f58a69 · 5f58a69
1 parent 1c923ea
commit 5f58a69
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -15,8 +15,8 @@ Read books in style.
 ### Run Time Dependencies
 
 - `gjs` (>= 1.72)
-- `gtk4` (>= 4.10)
-- `libadwaita` (`gir1.2-adw-1` in Debian-based distros)
+- `gtk4` (>= 4.12)
+- `libadwaita` (>= 1.4; `gir1.2-adw-1` in Debian-based distros)
 - `webkitgtk-6.0` (`webkitgtk6.0` in Fedora; `gir1.2-webkit-6.0` in Debian-based distros)
 
 #### Optional Dependencies

diff --git a/src/book-viewer.js b/src/book-viewer.js
@@ -645,17 +645,15 @@ export const BookViewer = GObject.registerClass({
             this._zoom_button.label = format.percent(webView.zoom_level))
 
         // sidebar
-        const setFoldSidebar = () =>
-            this._flap.fold_policy = this.fold_sidebar
-                ? Adw.FlapFoldPolicy.ALWAYS : Adw.FlapFoldPolicy.AUTO
+        const setFoldSidebar = () => this._flap.collapsed = this.fold_sidebar
         this.connect('notify::fold-sidebar', setFoldSidebar)
         setFoldSidebar()
         this._resize_handle.cursor = Gdk.Cursor.new_from_name('col-resize', null)
         this._resize_handle.add_controller(utils.connect(new Gtk.GestureDrag(), {
             'drag-update': (_, x) => this._sidebar.width_request += x,
         }))
-        this._flap.connect('notify::reveal-flap', flap =>
-            (flap.reveal_flap ? this._library_button : this._view).grab_focus())
+        this._flap.connect('notify::show-sidebar', flap =>
+            (flap.show_sidebar ? this._library_button : this._view).grab_focus())
 
         // revealers
         const autohideHeaderbar = autohide(this._headerbar_revealer,
@@ -681,7 +679,7 @@ export const BookViewer = GObject.registerClass({
             'clear-results': () => this._view.clearSearch(),
             'show-cfi': (_, cfi) => {
                 this._view.select(cfi)
-                if (this._flap.folded) this._flap.reveal_flap = false
+                if (this._flap.collapsed) this._flap.show_sidebar = false
             },
         })
         this.insert_action_group('search', this._search_view.actionGroup)
@@ -703,7 +701,7 @@ export const BookViewer = GObject.registerClass({
         // navigation
         this._toc_view.connect('go-to-href', (_, href) => {
             this._view.goTo(href)
-            if (this._flap.folded) this._flap.reveal_flap = false
+            if (this._flap.collapsed) this._flap.show_sidebar = false
             this._view.grab_focus()
         })
         this._navbar.connect('go-to-cfi', (_, x) => this._view.goTo(x))
@@ -729,13 +727,13 @@ export const BookViewer = GObject.registerClass({
             },
             'go-to-bookmark': (_, target) => {
                 this._view.goTo(target)
-                if (this._flap.folded) this._flap.reveal_flap = false
+                if (this._flap.collapsed) this._flap.show_sidebar = false
             },
         })
         utils.connect(this._annotation_view, {
             'go-to-annotation': (_, annotation) => {
                 this._view.showAnnotation(annotation)
-                if (this._flap.folded) this._flap.reveal_flap = false
+                if (this._flap.collapsed) this._flap.show_sidebar = false
             },
         })
         this._annotation_search_entry.connect('search-changed', entry =>
@@ -920,7 +918,7 @@ export const BookViewer = GObject.registerClass({
                 'search': () => {
                     this._search_entry.text = text
                     this._search_bar.search_mode_enabled = true
-                    this._flap.reveal_flap = true
+                    this._flap.show_sidebar = true
                     this._search_view.doSearch()
                 },
                 'print': () => resolve('print'),
@@ -992,20 +990,20 @@ export const BookViewer = GObject.registerClass({
         this._view.open(file)
     }
     showPrimaryMenu() {
-        this._flap.reveal_flap = true
+        this._flap.show_sidebar = true
         this._book_menu_button.popup()
     }
     toggleSidebar() {
-        this._flap.reveal_flap = !this._flap.reveal_flap
+        this._flap.show_sidebar = !this._flap.show_sidebar
     }
     #toggleSidebarContent(name) {
         this._search_bar.search_mode_enabled = false
-        if (this._flap.reveal_flap
+        if (this._flap.show_sidebar
         && this._contents_stack.visible_child_name === name)
-            this._flap.reveal_flap = false
+            this._flap.show_sidebar = false
         else {
             this._contents_stack.visible_child_name = name
-            this._flap.reveal_flap = true
+            this._flap.show_sidebar = true
         }
     }
     toggleToc() { this.#toggleSidebarContent('toc') }
@@ -1017,7 +1015,7 @@ export const BookViewer = GObject.registerClass({
             bar.search_mode_enabled = false
         else {
             bar.search_mode_enabled = true
-            this._flap.reveal_flap = true
+            this._flap.show_sidebar = true
             this._search_entry.grab_focus()
         }
     }

diff --git a/src/library.js b/src/library.js
@@ -301,6 +301,7 @@ GObject.registerClass({
             }),
         }), { 'activate': (_, pos) =>
             this.emit('activate', this.#filterModel.get_item(pos)) })
+        this._scrolled.child.remove_css_class('view')
     }
     showList() {
         this._scrolled.child?.unparent()

diff --git a/src/ui/book-viewer.ui b/src/ui/book-viewer.ui
@@ -204,11 +204,20 @@
     </object>
   </child>
   <child>
-    <object class="AdwFlap" id="flap">
-      <property name="fold-policy">auto</property>
-      <property name="swipe-to-open">False</property>
-      <property name="swipe-to-close">False</property>
-      <child type="flap">
+    <object class="AdwBreakpointBin">
+      <property name="height-request">300</property>
+      <property name="width-request">360</property>
+      <child>
+        <object class="AdwBreakpoint">
+          <condition>max-width: 720px</condition>
+          <setter object="flap" property="collapsed">True</setter>
+        </object>
+      </child>
+      <property name="child">
+
+    <object class="AdwOverlaySplitView" id="flap">
+      <property name="enable-show-gesture">False</property>
+      <child type="sidebar">
         <object class="GtkOverlay" id="sidebar">
           <property name="width-request">300</property>
           <child type="overlay">
@@ -218,10 +227,8 @@
             </object>
           </child>
           <child>
-            <object class="GtkBox">
-              <property name="orientation">vertical</property>
-              <style><class name="background"/></style>
-              <child>
+            <object class="AdwToolbarView">
+              <child type="top">
                 <object class="AdwHeaderBar">
                   <property name="show-end-title-buttons">false</property>
                   <property name="title-widget">
@@ -231,6 +238,7 @@
                     <object class="GtkButton" id="library-button">
                       <property name="action-name">win.show-library</property>
                       <property name="label" translatable="yes">Library</property>
+                      <property name="can-shrink">True</property>
                     </object>
                   </child>
                   <child type="end">
@@ -249,7 +257,7 @@
                   </child>
                 </object>
               </child>
-              <child>
+              <child type="top">
                 <object class="GtkSearchBar" id="search-bar">
                   <child>
                     <object class="GtkBox">
@@ -516,12 +524,7 @@
           </child>
         </object>
       </child>
-      <child type="separator">
-        <object class="GtkSeparator">
-          <property name="orientation">vertical</property>
-        </object>
-      </child>
-      <child>
+      <child type="content">
         <object class="FoliateBookView" id="view">
           <property name="width-request">360</property>
           <property name="hexpand">True</property>
@@ -534,12 +537,11 @@
                   <child>
                     <object class="AdwHeaderBar">
                       <property name="valign">start</property>
-                      <property name="show-start-title-buttons" bind-source="flap" bind-property="reveal-flap" bind-flags="sync-create|invert-boolean"/>
                       <child type="start">
                         <object class="GtkToggleButton">
                           <property name="icon-name">sidebar-show-symbolic</property>
                           <property name="tooltip-text" translatable="yes">Sidebar</property>
-                          <property name="active" bind-source="flap" bind-property="reveal-flap" bind-flags="sync-create|bidirectional"/>
+                          <property name="active" bind-source="flap" bind-property="show-sidebar" bind-flags="sync-create|bidirectional"/>
                         </object>
                       </child>
                       <child type="start">
@@ -664,6 +666,9 @@
         </object>
       </child>
     </object>
+  </property>
+
+    </object>
   </child>
 </template>
 </interface>
diff --git a/src/ui/library.ui b/src/ui/library.ui
@@ -43,43 +43,47 @@
 <template class="FoliateLibrary" parent="GtkBox">
       <property name="orientation">vertical</property>
       <child>
-        <object class="AdwHeaderBar">
-          <property name="title-widget">
-            <object class="GtkLabel">
-              <property name="label" translatable="yes">Library</property>
-              <property name="single-line-mode">True</property>
-              <property name="ellipsize">end</property>
-              <style><class name="title"/></style>
-            </object>
-          </property>
-          <child type="end">
-            <object class="GtkMenuButton" id="primary-menu-button">
-              <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 class="AdwToolbarView">
+          <child type="top">
+            <object class="AdwHeaderBar">
+              <property name="title-widget">
+                <object class="GtkLabel">
+                  <property name="label" translatable="yes">Library</property>
+                  <property name="single-line-mode">True</property>
+                  <property name="ellipsize">end</property>
+                  <style><class name="title"/></style>
+                </object>
+              </property>
+              <child type="end">
+                <object class="GtkMenuButton" id="primary-menu-button">
+                  <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>
+              <child type="end">
+                <object class="GtkToggleButton">
+                  <property name="icon-name">edit-find-symbolic</property>
+                  <property name="tooltip-text" translatable="yes">Search</property>
+                  <property name="active" bind-source="search-bar" bind-property="search-mode-enabled" bind-flags="sync-create|bidirectional"/>
+                </object>
+              </child>
             </object>
           </child>
-          <child type="end">
-            <object class="GtkToggleButton">
-              <property name="icon-name">edit-find-symbolic</property>
-              <property name="tooltip-text" translatable="yes">Search</property>
-              <property name="active" bind-source="search-bar" bind-property="search-mode-enabled" bind-flags="sync-create|bidirectional"/>
+          <child type="top">
+            <object class="GtkSearchBar" id="search-bar">
+              <child>
+                <object class="GtkSearchEntry" id="search-entry">
+                  <property name="placeholder-text" translatable="yes">Search library…</property>
+                </object>
+              </child>
             </object>
           </child>
-        </object>
-      </child>
-      <child>
-        <object class="GtkSearchBar" id="search-bar">
           <child>
-            <object class="GtkSearchEntry" id="search-entry">
-              <property name="placeholder-text" translatable="yes">Search library…</property>
+            <object class="FoliateLibraryView" id="books-view">
             </object>
           </child>
         </object>
       </child>
-      <child>
-        <object class="FoliateLibraryView" id="books-view">
-        </object>
-      </child>
 </template>
 </interface>
diff --git a/src/ui/navbar.ui b/src/ui/navbar.ui
@@ -69,32 +69,43 @@
     </object>
   </child>
   <child>
-    <object class="AdwLeaflet" id="progress-leaflet">
-      <property name="fold-threshold-policy">natural</property>
+    <object class="AdwBreakpointBin" id="progress-leaflet">
+      <property name="height-request">1</property>
+      <property name="width-request">1</property>
       <child>
-        <object class="GtkMenuButton" id="location-button">
-          <property name="direction">up</property>
-          <property name="tooltip-text" translatable="yes">Location</property>
-          <property name="popover">location-popover</property>
-          <style><class name="numeric"/></style>
+        <object class="AdwBreakpoint">
+          <condition>max-width: 300px</condition>
+          <setter object="location-button" property="hexpand">True</setter>
+          <setter object="progress-scale" property="visible">False</setter>
         </object>
       </child>
-      <child>
-        <object class="FoliateProgressScale" id="progress-scale">
-            <property name="draw-value">False</property>
-            <property name="width-request">100</property>
-            <property name="hexpand">True</property>
-            <property name="adjustment">
-              <object class="GtkAdjustment">
-                <property name="lower">0</property>
-                <property name="upper">1</property>
-                <property name="step-increment">0.01</property>
-                <property name="page-increment">0.05</property>
-                <property name="value">0</property>
-              </object>
-            </property>
+      <property name="child">
+        <object class="GtkBox">
+          <child>
+            <object class="GtkMenuButton" id="location-button">
+              <property name="direction">up</property>
+              <property name="tooltip-text" translatable="yes">Location</property>
+              <property name="popover">location-popover</property>
+              <style><class name="numeric"/></style>
+            </object>
+          </child>
+          <child>
+            <object class="FoliateProgressScale" id="progress-scale">
+                <property name="draw-value">False</property>
+                <property name="hexpand">True</property>
+                <property name="adjustment">
+                  <object class="GtkAdjustment">
+                    <property name="lower">0</property>
+                    <property name="upper">1</property>
+                    <property name="step-increment">0.01</property>
+                    <property name="page-increment">0.05</property>
+                    <property name="value">0</property>
+                  </object>
+                </property>
+            </object>
+          </child>
         </object>
-      </child>
+      </property>
     </object>
   </child>
   <child>