edit/crop: Orient aspect ratio icons

Orient the icons for aspect ratio selection based on the selected
orientation.

data/resources/edit_crop.css

@@ -1,3 +1,12 @@
+/* Icon orientation for GtkToggleButtons for aspect ratios */
+.has-orientation image {
+  transition: transform 300ms;
+}
+
+.button-icons-portrait .has-orientation image {
+  transform: rotate(90deg);
+}
+
 lpcrop {
   --discarded-background: rgba(50, 50, 50, 0.7);
   --selection-border-color: rgb(240, 240, 240);

src/widgets/edit/crop.rs

@@ -24,6 +24,7 @@ use adw::subclass::prelude::*;
 use adw::{glib, gtk};
 use glycin::Operation;
 
+use crate::deps::*;
 use crate::editing::preview::EditingError;
 use crate::util::gettext::*;
 use crate::util::root::ParentWindow;
@@ -59,9 +60,6 @@ pub enum LpOrientation {
 }
 
 mod imp {
-
-    use gtk::gdk;
-
     use super::*;
 
     #[derive(Debug, Default, gtk::CompositeTemplate, glib::Properties)]
@@ -72,6 +70,8 @@ mod imp {
         pub(super) image: TemplateChild<LpImage>,
         #[template_child]
         pub(super) selection: TemplateChild<LpEditCropSelection>,
+        #[template_child]
+        aspect_ratio_buttons: TemplateChild<gtk::Widget>,
 
         #[property(get, construct_only)]
         original_image: OnceCell<LpImage>,
@@ -198,6 +198,16 @@ mod imp {
                     obj.action_set_enabled("edit-crop.reset", obj.imp().is_reset_enabled());
                 }
             ));
+
+            self.selection.connect_orientation_notify(glib::clone!(
+                #[weak]
+                obj,
+                move |_| {
+                    obj.imp().asepect_ratio_orientation_changed();
+                }
+            ));
+
+            self.asepect_ratio_orientation_changed();
         }
 
         fn dispose(&self) {
@@ -303,6 +313,19 @@ mod imp {
         fn is_reset_enabled(&self) -> bool {
             self.obj().edit_window().operations().is_some() || self.selection.cropped()
         }
+
+        fn asepect_ratio_orientation_changed(&self) {
+            match self.selection.orientation() {
+                LpOrientation::Landscape => {
+                    self.aspect_ratio_buttons
+                        .remove_css_class("button-icons-portrait");
+                }
+                LpOrientation::Portrait => {
+                    self.aspect_ratio_buttons
+                        .add_css_class("button-icons-portrait");
+                }
+            }
+        }
     }
 }
 

src/widgets/edit/crop.ui

@@ -76,7 +76,7 @@
                   <object class="AdwPreferencesGroup">
                     <property name="title">Aspect Ratio</property>
                     <child>
-                      <object class="GtkGrid">
+                      <object class="GtkGrid" id="aspect_ratio_buttons">
                         <property name="column-homogeneous">true</property>
                         <property name="row-spacing">6</property>
                         <property name="column-spacing">6</property>
@@ -144,6 +144,9 @@
                                 <property name="icon-name">aspect-ratio-5to4-symbolic</property>
                                 <property name="label" translatable="yes">_5:4</property>
                                 <property name="use-underline">true</property>
+                                <style>
+                                  <class name="has-orientation" />
+                                </style>
                               </object>
                             </child>
                             <layout>
@@ -162,6 +165,9 @@
                                 <property name="icon-name">aspect-ratio-4to3-symbolic</property>
                                 <property name="label" translatable="yes">_4:3</property>
                                 <property name="use-underline">true</property>
+                                <style>
+                                  <class name="has-orientation" />
+                                </style>
                               </object>
                             </child>
                             <layout>
@@ -180,6 +186,9 @@
                                 <property name="icon-name">aspect-ratio-3to2-symbolic</property>
                                 <property name="label" translatable="yes">_3:2</property>
                                 <property name="use-underline">true</property>
+                                <style>
+                                  <class name="has-orientation" />
+                                </style>
                               </object>
                             </child>
                             <layout>
@@ -198,6 +207,9 @@
                                 <property name="icon-name">aspect-ratio-16to9-symbolic</property>
                                 <property name="label" translatable="yes">_16:9</property>
                                 <property name="use-underline">true</property>
+                                <style>
+                                  <class name="has-orientation" />
+                                </style>
                               </object>
                             </child>
                             <layout>