From 59082b73143341a4aa57e2bf178e3007dcc31c89 Mon Sep 17 00:00:00 2001
From: Sophie Herold <sophie@hemio.de>
Date: Sat, 14 Dec 2024 00:38:04 +0100
Subject: [PATCH] edit/crop: Implement updated designs

These designs are different for mobile and desktop sizes.
---
 .../actions/aspect-ratio-16to9-symbolic.svg   |   4 +
 .../actions/aspect-ratio-3to2-symbolic.svg    |   4 +
 .../actions/aspect-ratio-4to3-symbolic.svg    |   4 +
 .../actions/aspect-ratio-5to4-symbolic.svg    |   4 +
 .../actions/aspect-ratio-free-symbolic.svg    |   2 +
 .../aspect-ratio-original-symbolic.svg        |   2 +
 .../actions/aspect-ratio-square-symbolic.svg  |   2 +
 .../actions/aspect-ratio-symbolic.svg         |   2 +-
 .../scalable/actions/edit-mirror-symbolic.svg |   7 +-
 .../edit-mirror-vertically-symbolic.svg       |   2 +
 src/widgets/edit/crop.ui                      | 320 +++++++++++++++---
 src/widgets/edit_window.ui                    |   2 +-
 src/widgets/window.rs                         |  11 +-
 src/widgets/window.ui                         |  18 +-
 14 files changed, 318 insertions(+), 66 deletions(-)
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-16to9-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-3to2-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-4to3-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-5to4-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-free-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-original-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/aspect-ratio-square-symbolic.svg
 create mode 100644 data/resources/icons/scalable/actions/edit-mirror-vertically-symbolic.svg

diff --git a/data/resources/icons/scalable/actions/aspect-ratio-16to9-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-16to9-symbolic.svg
new file mode 100644
index 0000000..361a04b
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-16to9-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <rect x="2" y="4.625" width="12" height="6.75" rx="2" ry="2" fill="none" stroke="#373737" stroke-linejoin="round" stroke-miterlimit="12.8" stroke-width="2"/>
+</svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-3to2-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-3to2-symbolic.svg
new file mode 100644
index 0000000..2f1f7a2
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-3to2-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <rect x="2" y="4" width="12" height="8" rx="2" ry="2" fill="none" stroke="#373737" stroke-linejoin="round" stroke-miterlimit="12.8" stroke-width="2"/>
+</svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-4to3-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-4to3-symbolic.svg
new file mode 100644
index 0000000..5d750ed
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-4to3-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <rect x="2" y="3.5" width="12" height="9" rx="2" ry="2" fill="none" stroke="#373737" stroke-linejoin="round" stroke-miterlimit="12.8" stroke-width="2"/>
+</svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-5to4-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-5to4-symbolic.svg
new file mode 100644
index 0000000..49aeaf3
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-5to4-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <rect x="2" y="3.2" width="12" height="9.6" rx="2" ry="2" fill="none" stroke="#373737" stroke-linejoin="round" stroke-miterlimit="12.8" stroke-width="2"/>
+</svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-free-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-free-symbolic.svg
new file mode 100644
index 0000000..04a9314
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-free-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3 0 c -1.644531 0 -3 1.355469 -3 3 v 1 h 2 v -1 c 0 -0.570312 0.429688 -1 1 -1 h 1 v -2 z m 3 0 v 2 h 4 v -2 z m 6 0 v 2 h 1 c 0.570312 0 1 0.429688 1 1 v 1 h 2 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -12 6 v 4 h 2 v -4 z m 14 0 v 4 h 2 v -4 z m -14 6 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -2 h -1 c -0.570312 0 -1 -0.429688 -1 -1 v -1 z m 14 0 v 1 c 0 0.570312 -0.429688 1 -1 1 h -1 v 2 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 2 v 2 h 4 v -2 z m 0 0" fill="#222222"/></svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-original-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-original-symbolic.svg
new file mode 100644
index 0000000..630ba18
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-original-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 4.019531 1 c -1.644531 0 -3 1.355469 -3 3 v 8 c 0 1.644531 1.355469 3 3 3 h 8 c 1.644531 0 3 -1.355469 3 -3 v -8 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 8 c 0.570313 0 1 0.429688 1 1 v 8 c 0 0.570312 -0.429687 1 -1 1 h -8 c -0.570312 0 -1 -0.429688 -1 -1 v -8 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0" fill="#222222"/></svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-square-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-square-symbolic.svg
new file mode 100644
index 0000000..630ba18
--- /dev/null
+++ b/data/resources/icons/scalable/actions/aspect-ratio-square-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 4.019531 1 c -1.644531 0 -3 1.355469 -3 3 v 8 c 0 1.644531 1.355469 3 3 3 h 8 c 1.644531 0 3 -1.355469 3 -3 v -8 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 8 c 0.570313 0 1 0.429688 1 1 v 8 c 0 0.570312 -0.429687 1 -1 1 h -8 c -0.570312 0 -1 -0.429688 -1 -1 v -8 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0" fill="#222222"/></svg>
diff --git a/data/resources/icons/scalable/actions/aspect-ratio-symbolic.svg b/data/resources/icons/scalable/actions/aspect-ratio-symbolic.svg
index 87ba780..04a9314 100644
--- a/data/resources/icons/scalable/actions/aspect-ratio-symbolic.svg
+++ b/data/resources/icons/scalable/actions/aspect-ratio-symbolic.svg
@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 0 3 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m -14 2 v 1 h 1 v -1 z m 14 0 v 1 h 1 v -1 z m -11 1 v 5 h 9 v -5 z m -3 1 v 1 h 1 v -1 z m 14 0 v 1 h 1 v -1 z m -14 2 v 1 h 1 v -1 z m 14 0 v 1 h 1 v -1 z m -14 2 v 1 h 1 v -1 z m 14 0 v 1 h 1 v -1 z m -14 2 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 2 0 v 1 h 1 v -1 z m 0 0" fill="#222222"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3 0 c -1.644531 0 -3 1.355469 -3 3 v 1 h 2 v -1 c 0 -0.570312 0.429688 -1 1 -1 h 1 v -2 z m 3 0 v 2 h 4 v -2 z m 6 0 v 2 h 1 c 0.570312 0 1 0.429688 1 1 v 1 h 2 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -12 6 v 4 h 2 v -4 z m 14 0 v 4 h 2 v -4 z m -14 6 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -2 h -1 c -0.570312 0 -1 -0.429688 -1 -1 v -1 z m 14 0 v 1 c 0 0.570312 -0.429688 1 -1 1 h -1 v 2 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 2 v 2 h 4 v -2 z m 0 0" fill="#222222"/></svg>
diff --git a/data/resources/icons/scalable/actions/edit-mirror-symbolic.svg b/data/resources/icons/scalable/actions/edit-mirror-symbolic.svg
index 0813af9..d2e77f2 100644
--- a/data/resources/icons/scalable/actions/edit-mirror-symbolic.svg
+++ b/data/resources/icons/scalable/actions/edit-mirror-symbolic.svg
@@ -1,7 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#2e3436">
-        <path d="m 2 0 c -0.859375 0 -1.429688 0.320312 -1.710938 0.699219 c -0.28515575 0.378906 -0.289062 0.800781 -0.289062 0.800781 v 13 s 0.00390625 0.421875 0.289062 0.800781 c 0.28125 0.378907 0.851563 0.699219 1.710938 0.699219 c 0.109375 0 0.21875 -0.035156 0.304688 -0.105469 l 5.5 -4.25 c 0.125 -0.09375 0.195312 -0.238281 0.195312 -0.394531 v -6.75 c 0 -0.160156 -0.074219 -0.308594 -0.207031 -0.40625 l -5.5 -4 c -0.082031 -0.0585938 -0.1875 -0.09375 -0.292969 -0.09375 z m 0 1.117188 l 5 3.640624 v 6.246094 l -5 3.863282 z m 0 0"/>
-        <path d="m 14 0 c -0.105469 0 -0.210938 0.0351562 -0.296875 0.09375 l -5.5 4 c -0.128906 0.097656 -0.203125 0.246094 -0.203125 0.40625 v 6.75 c 0 0.15625 0.070312 0.300781 0.191406 0.394531 l 5.5 4.25 c 0.089844 0.070313 0.199219 0.105469 0.308594 0.105469 c 0.859375 0 1.429688 -0.320312 1.714844 -0.699219 c 0.28125 -0.378906 0.285156 -0.800781 0.285156 -0.800781 v -13 s -0.003906 -0.421875 -0.285156 -0.800781 c -0.285156 -0.378907 -0.855469 -0.699219 -1.714844 -0.699219 z m 0 1.117188 v 13.75 l -5 -3.863282 v -6.246094 z m 0 0" fill-opacity="0.34902"/>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3.988281 4 c -0.265625 0.003906 -0.519531 0.113281 -0.703125 0.300781 l -2.917968 3 c -0.3789068 0.390625 -0.3789068 1.007813 0 1.398438 l 2.917968 3 c 0.382813 0.394531 1.015625 0.402343 1.414063 0.015625 c 0.394531 -0.382813 0.402343 -1.015625 0.019531 -1.414063 l -1.269531 -1.300781 h 9.183593 l -1.265624 1.300781 c -0.386719 0.398438 -0.378907 1.03125 0.019531 1.417969 c 0.394531 0.382812 1.027343 0.375 1.414062 -0.019531 l 2.917969 -3 c 0.375 -0.390625 0.375 -1.007813 0 -1.394531 l -2.917969 -3 c -0.1875 -0.191407 -0.441406 -0.300782 -0.703125 -0.300782 c -0.265625 -0.007812 -0.523437 0.09375 -0.710937 0.28125 c -0.398438 0.382813 -0.40625 1.015625 -0.019531 1.414063 l 1.265624 1.300781 h -9.183593 l 1.269531 -1.300781 c 0.382812 -0.398438 0.375 -1.03125 -0.019531 -1.417969 c -0.191407 -0.183594 -0.449219 -0.285156 -0.710938 -0.28125 z m 0 0" fill="#222222" fill-rule="evenodd"/></svg>
diff --git a/data/resources/icons/scalable/actions/edit-mirror-vertically-symbolic.svg b/data/resources/icons/scalable/actions/edit-mirror-vertically-symbolic.svg
new file mode 100644
index 0000000..c6a52a5
--- /dev/null
+++ b/data/resources/icons/scalable/actions/edit-mirror-vertically-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 12 3.984375 c -0.003906 -0.261719 -0.113281 -0.515625 -0.300781 -0.703125 l -3 -2.917969 c -0.390625 -0.3749998 -1.007813 -0.3749998 -1.394531 0 l -3 2.917969 c -0.398438 0.386719 -0.40625 1.019531 -0.019532 1.414062 c 0.382813 0.398438 1.015625 0.40625 1.414063 0.019532 l 1.300781 -1.265625 v 9.183593 l -1.300781 -1.269531 c -0.398438 -0.382812 -1.03125 -0.375 -1.414063 0.019531 c -0.386718 0.398438 -0.378906 1.03125 0.019532 1.414063 l 3 2.917969 c 0.386718 0.378906 1.003906 0.378906 1.394531 0 l 3 -2.917969 c 0.1875 -0.183594 0.296875 -0.4375 0.300781 -0.703125 c 0.003906 -0.261719 -0.097656 -0.519531 -0.28125 -0.710938 c -0.386719 -0.394531 -1.019531 -0.402343 -1.414062 -0.019531 l -1.304688 1.269531 v -9.183593 l 1.304688 1.265625 c 0.394531 0.386718 1.027343 0.378906 1.414062 -0.019532 c 0.183594 -0.1875 0.285156 -0.445312 0.28125 -0.710937 z m 0 0" fill="#222222" fill-rule="evenodd"/></svg>
diff --git a/src/widgets/edit/crop.ui b/src/widgets/edit/crop.ui
index dd4d2b2..5d1e6ba 100644
--- a/src/widgets/edit/crop.ui
+++ b/src/widgets/edit/crop.ui
@@ -50,54 +50,290 @@
 
     </section>
   </menu>
+  <object class="GtkSizeGroup">
+    <property name="mode">horizontal</property>
+    <widgets>
+      <widget name="box-start" />
+      <widget name="box-end" />
+    </widgets>
+  </object>
   <template class="LpEditCrop" parent="GtkWidget">
     <property name="child">
       <object class="AdwToolbarView">
         <property name="bottom-bar-style">raised</property>
+        <binding name="reveal-bottom-bars">
+          <lookup name="narrow-layout" type="LpWindow">
+            <lookup name="root">LpEditCrop</lookup>
+          </lookup>
+        </binding>
         <property name="content">
-          <object class="GtkOverlay">
-            <property name="margin-top">18</property>
-            <property name="margin-end">18</property>
-            <property name="margin-bottom">18</property>
-            <property name="margin-start">18</property>
-            <child>
-              <object class="LpImage" id="image">
-                <property name="sensitive">false</property>
+          <object class="AdwOverlaySplitView">
+            <property name="sidebar-position">end</property>
+            <property name="min-sidebar-width">280</property>
+            <binding name="show-sidebar">
+              <lookup name="wide-layout" type="LpWindow">
+                <lookup name="root">LpEditCrop</lookup>
+              </lookup>
+            </binding>
+            <property name="sidebar">
+              <object class="AdwPreferencesPage">
+                <child>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title">Aspect Ratio</property>
+                    <child>
+                      <object class="GtkGrid">
+                        <property name="column-homogeneous">true</property>
+                        <property name="row-spacing">6</property>
+                        <property name="column-spacing">6</property>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'free'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-free-symbolic</property>
+                                <property name="label" translatable="yes">_Free</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="column">0</property>
+                              <property name="row">0</property>
+                            </layout>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'original'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-original-symbolic</property>
+                                <property name="label" translatable="yes">_Original</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="row">0</property>
+                              <property name="column">1</property>
+                            </layout>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'square'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-square-symbolic</property>
+                                <property name="label" translatable="yes">_Square</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="row">1</property>
+                              <property name="column">0</property>
+                            </layout>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'r5to4'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-5to4-symbolic</property>
+                                <property name="label" translatable="yes">_5:4</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="row">1</property>
+                              <property name="column">1</property>
+                            </layout>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'r4to3'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-4to3-symbolic</property>
+                                <property name="label" translatable="yes">_4:3</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="row">2</property>
+                              <property name="column">0</property>
+                            </layout>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'r3to2'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-3to2-symbolic</property>
+                                <property name="label" translatable="yes">_3:2</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="row">2</property>
+                              <property name="column">1</property>
+                            </layout>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton">
+                            <property name="action-name">edit-crop.aspect-ratio</property>
+                            <property name="action-target">'r16to9'</property>
+                            <child>
+                              <object class="AdwButtonContent">
+                                <property name="halign">start</property>
+                                <property name="icon-name">aspect-ratio-16to9-symbolic</property>
+                                <property name="label" translatable="yes">_16:9</property>
+                                <property name="use-underline">true</property>
+                              </object>
+                            </child>
+                            <layout>
+                              <property name="row">3</property>
+                              <property name="column">0</property>
+                            </layout>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title">Rotate</property>
+                    <child>
+                      <object class="GtkGrid">
+                        <property name="column-homogeneous">true</property>
+                        <property name="row-spacing">6</property>
+                        <property name="column-spacing">6</property>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="icon-name">object-rotate-left-symbolic</property>
+                            <property name="action-name">edit-crop.rotate-ccw</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="icon-name">object-rotate-right-symbolic</property>
+                            <property name="action-name">edit-crop.rotate-cw</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title">Flip</property>
+                    <child>
+                      <object class="GtkGrid">
+                        <property name="column-homogeneous">true</property>
+                        <property name="row-spacing">6</property>
+                        <property name="column-spacing">6</property>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="icon-name">edit-mirror-symbolic</property>
+                            <property name="action-name">edit-crop.mirror</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="icon-name">edit-mirror-vertically-symbolic</property>
+                            <property name="action-name">edit-crop.mirror</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="AdwPreferencesGroup">
+                    <child>
+                      <object class="GtkButton">
+                        <property name="label">_Reset</property>
+                        <property name="use-underline">true</property>
+                        <property name="action-name">edit-crop.reset</property>
+                        <property name="vexpand">true</property>
+                        <property name="valign">end</property>
+                        <property name="halign">end</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
               </object>
-            </child>
-            <child type="overlay">
-              <object class="LpEditCropSelection" id="selection">
-                <property name="crop">LpEditCrop</property>
+            </property>
+            <property name="content">
+              <object class="GtkOverlay">
+                <property name="margin-top">18</property>
+                <property name="margin-end">18</property>
+                <property name="margin-bottom">18</property>
+                <property name="margin-start">18</property>
+                <child>
+                  <object class="LpImage" id="image">
+                    <property name="sensitive">false</property>
+                  </object>
+                </child>
+                <child type="overlay">
+                  <object class="LpEditCropSelection" id="selection">
+                    <property name="crop">LpEditCrop</property>
+                  </object>
+                </child>
+                <child type="overlay">
+                  <object class="GtkButton" id="apply_crop">
+                    <property name="label">Apply</property>
+                    <property name="action-name">edit.apply-crop</property>
+                    <property name="halign">end</property>
+                    <property name="valign">start</property>
+                    <style>
+                      <class name="osd" />
+                      <class name="pill" />
+                    </style>
+                  </object>
+                </child>
               </object>
-            </child>
-            <child type="overlay">
-              <object class="GtkButton" id="apply_crop">
-                <property name="label">Apply</property>
-                <property name="action-name">edit.apply-crop</property>
-                <property name="halign">end</property>
-                <property name="valign">start</property>
-                <style>
-                  <class name="osd" />
-                  <class name="pill" />
-                </style>
-              </object>
-            </child>
+            </property>
           </object>
         </property>
         <child type="bottom">
           <object class="AdwClamp">
-            <property name="maximum-size">360</property>
+            <property name="maximum-size">350</property>
             <property name="child">
               <object class="GtkBox">
                 <property name="orientation">horizontal</property>
-                <property name="homogeneous">true</property>
                 <property name="spacing">6</property>
                 <style>
                   <class name="toolbar" />
                 </style>
+                <child>
+                  <object class="GtkBox" id="box-start">
+                    <property name="hexpand">true</property>
+                  </object>
+                </child>
                 <child>
                   <object class="GtkBox">
                     <property name="orientation">horizontal</property>
+                    <property name="halign">center</property>
+                    <property name="spacing">6</property>
                     <child>
                       <object class="GtkMenuButton">
                         <property name="icon-name">aspect-ratio-symbolic</property>
@@ -141,6 +377,13 @@
                         </property>
                       </object>
                     </child>
+                    <child>
+                      <object class="GtkButton">
+                        <property name="icon-name">object-rotate-left-symbolic</property>
+                        <property name="action-name">edit-crop.rotate-ccw</property>
+                        <property name="valign">start</property>
+                      </object>
+                    </child>
                     <child>
                       <object class="GtkButton">
                         <property name="icon-name">edit-mirror-symbolic</property>
@@ -151,29 +394,10 @@
                   </object>
                 </child>
                 <child>
-                  <object class="GtkBox">
-                    <property name="orientation">horizontal</property>
-                    <property name="halign">center</property>
-                    <child>
-                      <object class="GtkButton">
-                        <property name="icon-name">object-rotate-left-symbolic</property>
-                        <property name="action-name">edit-crop.rotate-ccw</property>
-                        <property name="valign">start</property>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton">
-                        <property name="icon-name">object-rotate-right-symbolic</property>
-                        <property name="action-name">edit-crop.rotate-cw</property>
-                        <property name="valign">start</property>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkBox">
+                  <object class="GtkBox" id="box-end">
                     <property name="orientation">horizontal</property>
                     <property name="halign">end</property>
+                    <property name="hexpand">true</property>
                     <child>
                       <object class="GtkButton">
                         <property name="label">Reset</property>
diff --git a/src/widgets/edit_window.ui b/src/widgets/edit_window.ui
index bb482f8..1ecfc59 100644
--- a/src/widgets/edit_window.ui
+++ b/src/widgets/edit_window.ui
@@ -8,7 +8,7 @@
           <object class="AdwHeaderBar">
             <property name="show-title">false</property>
             <property name="show-start-title-buttons">false</property>
-            <property name="show-start-title-buttons">false</property>
+            <property name="show-end-title-buttons">false</property>
             <child type="start">
               <object class="GtkButton" id="cancel">
                 <property name="label" translatable="true">Cancel</property>
diff --git a/src/widgets/window.rs b/src/widgets/window.rs
index a1ea7be..a65f2cd 100644
--- a/src/widgets/window.rs
+++ b/src/widgets/window.rs
@@ -28,6 +28,8 @@ use crate::widgets::{LpEditWindow, LpImageView, LpImageWindow};
 const SHOW_WINDOW_AFTER: u64 = 2000;
 
 mod imp {
+    use std::cell::Cell;
+
     use super::*;
 
     // To use composite templates, you need
@@ -44,8 +46,9 @@ mod imp {
     // If some member fields did not implement default,
     // we'd need to have a `new()` function in the
     // `impl ObjectSubclass for $TYPE` section.
-    #[derive(Default, Debug, CompositeTemplate)]
+    #[derive(Default, Debug, CompositeTemplate, glib::Properties)]
     #[template(file = "window.ui")]
+    #[properties(wrapper_type=super::LpWindow)]
     pub struct LpWindow {
         #[template_child]
         pub(super) toast_overlay: TemplateChild<adw::ToastOverlay>,
@@ -56,6 +59,11 @@ mod imp {
         pub(super) image_window: TemplateChild<LpImageWindow>,
         #[template_child]
         pub(super) edit_window_child: TemplateChild<adw::Bin>,
+
+        #[property(get, set)]
+        narrow_layout: Cell<bool>,
+        #[property(get, set)]
+        wide_layout: Cell<bool>,
     }
 
     #[glib::object_subclass]
@@ -89,6 +97,7 @@ mod imp {
         }
     }
 
+    #[glib::derived_properties]
     impl ObjectImpl for LpWindow {
         fn constructed(&self) {
             self.parent_constructed();
diff --git a/src/widgets/window.ui b/src/widgets/window.ui
index 4446d5f..af3eba0 100644
--- a/src/widgets/window.ui
+++ b/src/widgets/window.ui
@@ -5,20 +5,20 @@
     <property name="default-height">498</property>
     <property name="width-request">360</property>
     <property name="height-request">294</property>
-    <!--
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>min-width: 590sp</condition>
+        <setter object="LpWindow" property="narrow-layout">false</setter>
+        <setter object="LpWindow" property="wide-layout">true</setter>
+      </object>
+    </child>
     <child>
       <object class="AdwBreakpoint">
         <condition>max-width: 590sp</condition>
-        <setter object="multi_layout_view" property="layout-name">bottom-properties</setter>
+        <setter object="LpWindow" property="narrow-layout">true</setter>
+        <setter object="LpWindow" property="wide-layout">false</setter>
       </object>
     </child>
-    <child>
-      <object class="AdwBreakpoint">
-        <condition>max-width: 590sp and max-height: 550sp</condition>
-        <setter object="multi_layout_view" property="layout-name">overlay-properties</setter>
-      </object>
-    </child>
-    -->
     <property name="content">
       <object class="AdwToastOverlay" id="toast_overlay">
         <property name="child">