From bb9b834a223e9179b3e2bc28d1e98ceb18b76504 Mon Sep 17 00:00:00 2001
From: Christopher Davis <christopherdavis@gnome.org>
Date: Tue, 11 Jun 2024 23:51:05 -0400
Subject: [PATCH] window: Rework properties adaptivity

Ports the sidebar to AdwOverlaySplitView, and uses AdwMultiLayoutView
to use a box at narrow sizes. A bottom sheet also
overlays the content when the window is both narrow and short.
---
 data/resources/style-hc.css    |   4 +
 data/resources/style.css       |   6 +-
 src/widgets/properties_view.ui |   3 +-
 src/window.ui                  | 348 +++++++++++++++++++++------------
 4 files changed, 236 insertions(+), 125 deletions(-)

diff --git a/data/resources/style-hc.css b/data/resources/style-hc.css
index 5376146..f8748e2 100644
--- a/data/resources/style-hc.css
+++ b/data/resources/style-hc.css
@@ -1,3 +1,7 @@
 row.property label.title {
   opacity: 0.9;
 }
+
+.properties-border {
+  color: var(--headerbar-border-color);
+}
diff --git a/data/resources/style.css b/data/resources/style.css
index cdb1ad0..83c4bd3 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -57,4 +57,8 @@ dropdown.flat button:not(:hover) {
 dialog.error-details textview {
   background: none;
   color: inherit;
-}
\ No newline at end of file
+}
+
+.mobile-properties {
+  box-shadow: 0 -1px var(--headerbar-darker-shade-color);
+}
diff --git a/src/widgets/properties_view.ui b/src/widgets/properties_view.ui
index 516f193..e593e0d 100644
--- a/src/widgets/properties_view.ui
+++ b/src/widgets/properties_view.ui
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <template class="LpPropertiesView" parent="AdwBin">
-    <property name="width-request">255</property>
     <property name="child">
       <object class="GtkScrolledWindow">
+        <property name="propagate-natural-height">True</property>
+        <property name="max-content-height">316</property>
         <property name="child">
           <object class="GtkBox">
             <property name="orientation">vertical</property>
diff --git a/src/window.ui b/src/window.ui
index e241578..4eda902 100644
--- a/src/window.ui
+++ b/src/window.ui
@@ -64,154 +64,256 @@
     <child>
       <object class="AdwBreakpoint">
         <condition>max-width: 590sp</condition>
-        <setter object="properties_flap" property="orientation">vertical</setter>
+        <setter object="multi_layout_view" property="layout-name">sheet</setter>
+      </object>
+    </child>
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 590sp and max-height: 550sp</condition>
+        <setter object="multi_layout_view" property="layout-name">short</setter>
       </object>
     </child>
     <property name="content">
-      <object class="LpFullscreenWidget" id="fullscreen_widget">
-        <property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
-        <property name="headerbar">
-          <object class="AdwHeaderBar" id="headerbar">
-            <property name="show-end-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
-            <property name="show-start-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
-            <style>
-              <class name="fullscreen-osd" />
-            </style>
-            <child type="start">
-              <object class="GtkButton">
-                <property name="icon-name">edit-copy-symbolic</property>
-                <property name="action-name">win.copy-image</property>
-                <property name="tooltip-text" translatable="yes">Copy to Clipboard</property>
-              </object>
-            </child>
-            <child type="start">
-              <object class="GtkButton">
-                <property name="icon-name">user-trash-symbolic</property>
-                <property name="action-name">win.trash</property>
-                <property name="tooltip-text" translatable="yes">Move to Trash</property>
-              </object>
-            </child>
-            <child type="end">
-              <object class="GtkMenuButton" id="primary_menu">
-                <property name="icon-name">open-menu-symbolic</property>
-                <property name="tooltip-text" translatable="yes">Main Menu</property>
-                <property name="primary">True</property>
-                <property name="popover">
-                  <object class="GtkPopoverMenu">
-                    <property name="menu-model">primary_menu</property>
-                    <child type="rotate-left">
-                      <object class="GtkButton">
-                        <property name="icon-name">object-rotate-left-symbolic</property>
-                        <property name="tooltip-text" translatable="yes">Rotate Left</property>
-                        <property name="action-name">win.rotate-ccw</property>
-                        <style>
-                          <class name="flat" />
-                        </style>
+      <object class="AdwToastOverlay" id="toast_overlay">
+        <property name="child">
+          <object class="AdwMultiLayoutView" id="multi_layout_view">
+            <child>
+              <object class="AdwLayout">
+                <property name="name">sidebar</property>
+                <property name="content">
+                  <object class="LpFullscreenWidget" id="fullscreen_widget">
+                    <property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
+                    <property name="headerbar">
+                      <object class="AdwLayoutSlot">
+                        <property name="id">headerbar</property>
                       </object>
-                    </child>
-                    <child type="rotate-right">
-                      <object class="GtkButton">
-                        <property name="icon-name">object-rotate-right-symbolic</property>
-                        <property name="tooltip-text" translatable="yes">Rotate Right</property>
-                        <property name="action-name">win.rotate-cw</property>
-                        <style>
-                          <class name="flat" />
-                        </style>
+                    </property>
+                    <property name="content">
+                      <object class="AdwOverlaySplitView" id="properties_split_view">
+                        <property name="sidebar-position">end</property>
+                        <property name="min-sidebar-width">255</property>
+                        <property name="show-sidebar" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
+                        <property name="content">
+                          <object class="AdwLayoutSlot">
+                            <property name="id">content</property>
+                          </object>
+                        </property>
+                        <property name="sidebar">
+                          <object class="AdwLayoutSlot">
+                            <property name="id">properties</property>
+                          </object>
+                        </property>
                       </object>
-                    </child>
+                    </property>
                   </object>
                 </property>
               </object>
             </child>
-            <child type="end">
-              <object class="GtkToggleButton" id="properties_button">
-                <property name="icon-name">info-outline-symbolic</property>
-                <property name="tooltip-text" translatable="yes">Image Properties</property>
-              </object>
-            </child>
             <child>
-              <object class="GtkEventControllerMotion" id="headerbar_events" />
-            </child>
-          </object>
-        </property>
-        <property name="content">
-          <object class="AdwToastOverlay" id="toast_overlay">
-            <property name="child">
-              <object class="AdwFlap" id="properties_flap">
-                <property name="flap-position">end</property>
-                <property name="fold-policy">never</property>
-                <property name="swipe-to-open">false</property>
-                <property name="locked">True</property>
-                <property name="reveal-flap" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
+              <object class="AdwLayout">
+                <property name="name">sheet</property>
                 <property name="content">
-                  <object class="LpDragOverlay" id="drag_overlay">
-                    <property name="drop_target">drop_target</property>
-                    <property name="overlayed">
-                      <object class="AdwBin">
-                        <property name="can-target">false</property>
-                        <style>
-                          <class name="lp-dragging-area-highlight" />
-                        </style>
+                  <object class="LpFullscreenWidget">
+                    <property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
+                    <property name="headerbar">
+                      <object class="AdwLayoutSlot">
+                        <property name="id">headerbar</property>
                       </object>
                     </property>
-                    <property name="child">
-                      <object class="GtkStack" id="stack">
-                        <property name="visible-child">status_page</property>
-                        <property name="vexpand">True</property>
-                        <style>
-                          <class name="drop-widget" />
-                        </style>
+                    <property name="content">
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
                         <child>
-                          <object class="GtkDropTarget" id="drop_target">
-                            <property name="actions">copy</property>
+                          <object class="AdwLayoutSlot">
+                            <property name="id">content</property>
+                            <property name="vexpand">True</property>
                           </object>
                         </child>
                         <child>
-                          <object class="AdwStatusPage" id="status_page">
-                            <property name="title" translatable="yes">View Images</property>
-                            <property name="description" translatable="yes">Drag and drop images here</property>
-                            <child>
-                              <object class="GtkButton">
-                                <property name="halign">center</property>
-                                <property name="label" translatable="yes">_Open Files…</property>
-                                <property name="use-underline">True</property>
-                                <property name="action-name">win.open</property>
-                                <style>
-                                  <class name="pill" />
-                                  <class name="suggested-action" />
-                                </style>
+                          <object class="GtkRevealer">
+                            <property name="transition-type">slide-up</property>
+                            <property name="reveal-child" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
+                            <property name="child">
+                              <object class="AdwLayoutSlot">
+                                <property name="id">properties</property>
                               </object>
-                            </child>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="LpImageView" id="image_view">
-                            <child>
-                              <object class="GtkGestureClick" id="forward_click_gesture">
-                                <property name="button">9</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkGestureClick" id="backward_click_gesture">
-                                <property name="button">8</property>
-                              </object>
-                            </child>
+                            </property>
+                            <style>
+                              <class name="mobile-properties"/>
+                            </style>
                           </object>
                         </child>
                       </object>
                     </property>
                   </object>
                 </property>
-                <property name="separator">
-                  <object class="GtkSeparator" />
-                </property>
-                <property name="flap">
-                  <object class="LpPropertiesView" id="properties_view">
-                    <property name="vexpand">true</property>
-                  </object>
-                </property>
               </object>
-            </property>
+            </child>
+            <child>
+              <object class="AdwLayout">
+                <property name="name">short</property>
+                <property name="content">
+                  <object class="AdwBottomSheet">
+                    <property name="modal">True</property>
+                    <property name="open" bind-source="properties_button" bind-property="active" bind-flags="bidirectional|sync-create" />
+                    <property name="content">
+                      <object class="LpFullscreenWidget">
+                        <property name="extend-content" bind-source="properties_button" bind-property="active" bind-flags="sync-create|invert-boolean"/>
+                        <property name="headerbar">
+                          <object class="AdwLayoutSlot">
+                            <property name="id">headerbar</property>
+                          </object>
+                        </property>
+                        <property name="content">
+                          <object class="AdwLayoutSlot">
+                            <property name="id">content</property>
+                          </object>
+                        </property>
+                      </object>
+                    </property>
+                    <property name="sheet">
+                      <object class="AdwToolbarView">
+                        <child type="top">
+                          <object class="AdwHeaderBar">
+                            <property name="show-title">False</property>
+                          </object>
+                        </child>
+                        <property name="content">
+                          <object class="AdwLayoutSlot">
+                            <property name="id">properties</property>
+                          </object>
+                        </property>
+                      </object>
+                    </property>
+                  </object>
+                </property>
+              </object>
+            </child>
+            <child type="headerbar">
+              <object class="AdwHeaderBar" id="headerbar">
+                <property name="show-end-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
+                <property name="show-start-title-buttons" bind-source="LpWindow" bind-property="fullscreened" bind-flags="sync-create|invert-boolean" />
+                <style>
+                  <class name="fullscreen-osd" />
+                </style>
+                <child type="start">
+                  <object class="GtkButton">
+                    <property name="icon-name">edit-copy-symbolic</property>
+                    <property name="action-name">win.copy-image</property>
+                    <property name="tooltip-text" translatable="yes">Copy to Clipboard</property>
+                  </object>
+                </child>
+                <child type="start">
+                  <object class="GtkButton">
+                    <property name="icon-name">user-trash-symbolic</property>
+                    <property name="action-name">win.trash</property>
+                    <property name="tooltip-text" translatable="yes">Move to Trash</property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkMenuButton" id="primary_menu">
+                    <property name="icon-name">open-menu-symbolic</property>
+                    <property name="tooltip-text" translatable="yes">Main Menu</property>
+                    <property name="primary">True</property>
+                    <property name="popover">
+                      <object class="GtkPopoverMenu">
+                        <property name="menu-model">primary_menu</property>
+                        <child type="rotate-left">
+                          <object class="GtkButton">
+                            <property name="icon-name">object-rotate-left-symbolic</property>
+                            <property name="tooltip-text" translatable="yes">Rotate Left</property>
+                            <property name="action-name">win.rotate-ccw</property>
+                            <style>
+                              <class name="flat" />
+                            </style>
+                          </object>
+                        </child>
+                        <child type="rotate-right">
+                          <object class="GtkButton">
+                            <property name="icon-name">object-rotate-right-symbolic</property>
+                            <property name="tooltip-text" translatable="yes">Rotate Right</property>
+                            <property name="action-name">win.rotate-cw</property>
+                            <style>
+                              <class name="flat" />
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkToggleButton" id="properties_button">
+                    <property name="icon-name">info-outline-symbolic</property>
+                    <property name="tooltip-text" translatable="yes">Image Properties</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkEventControllerMotion" id="headerbar_events" />
+                </child>
+              </object>
+            </child>
+            <child type="content">
+              <object class="LpDragOverlay" id="drag_overlay">
+                <property name="drop_target">drop_target</property>
+                <property name="overlayed">
+                  <object class="AdwBin">
+                    <property name="can-target">false</property>
+                    <style>
+                      <class name="lp-dragging-area-highlight" />
+                    </style>
+                  </object>
+                </property>
+                <property name="child">
+                  <object class="GtkStack" id="stack">
+                    <property name="visible-child">status_page</property>
+                    <style>
+                      <class name="drop-widget" />
+                    </style>
+                    <child>
+                      <object class="GtkDropTarget" id="drop_target">
+                        <property name="actions">copy</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="AdwStatusPage" id="status_page">
+                        <property name="title" translatable="yes">View Images</property>
+                        <property name="description" translatable="yes">Drag and drop images here</property>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="halign">center</property>
+                            <property name="label" translatable="yes">_Open Files…</property>
+                            <property name="use-underline">True</property>
+                            <property name="action-name">win.open</property>
+                            <style>
+                              <class name="pill" />
+                              <class name="suggested-action" />
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="LpImageView" id="image_view">
+                        <child>
+                          <object class="GtkGestureClick" id="forward_click_gesture">
+                            <property name="button">9</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkGestureClick" id="backward_click_gesture">
+                            <property name="button">8</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </property>
+              </object>
+            </child>
+            <child type="properties">
+              <object class="LpPropertiesView" id="properties_view"/>
+            </child>
           </object>
         </property>
       </object>