gtkplacesview: rotate server list icon on toggled

Disclosure triangles are usually used pointing down, however
in this case the popover spawns in the upper direction, which
makes it odd looking.
Instead of pointing always down or up, point down when not toggled and
animate a rotation when toggled.

gtk/theme/Adwaita/_common.scss

@@ -2913,6 +2913,22 @@ GtkPlacesSidebar.sidebar {
   }
 }
 
+/****************
+ * File chooser *
+ ****************/
+
+GtkPlacesView {
+  .server-list-button > GtkImage {
+    transition: 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  .server-list-button:checked > GtkImage {
+    transition: 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(-0.5turn);
+  }
+}
+
 /*********
  * Paned *
  *********/

gtk/theme/Adwaita/gtk-contained-dark.css

@@ -3966,6 +3966,16 @@ GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
   .sidebar-item.needs-attention > .label {
     background-size: 6px 6px, 0 0; }
 
+/****************
+ * File chooser *
+ ****************/
+GtkPlacesView .server-list-button > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(0turn); }
+GtkPlacesView .server-list-button:checked > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(-0.5turn); }
+
 /*********
  * Paned *
  *********/

gtk/theme/Adwaita/gtk-contained.css

@@ -4138,6 +4138,16 @@ GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
   .sidebar-item.needs-attention > .label {
     background-size: 6px 6px, 0 0; }
 
+/****************
+ * File chooser *
+ ****************/
+GtkPlacesView .server-list-button > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(0turn); }
+GtkPlacesView .server-list-button:checked > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(-0.5turn); }
+
 /*********
  * Paned *
  *********/

gtk/ui/gtkplacesview.ui

@@ -256,10 +256,13 @@
                 <property name="receives_default">1</property>
                 <property name="direction">up</property>
                 <property name="popover">recent_servers_popover</property>
+                <style>
+                  <class name="server-list-button"/>
+                </style>
                 <child>
                   <object class="GtkImage">
                     <property name="visible">1</property>
-                    <property name="icon_name">pan-up-symbolic</property>
+                    <property name="icon_name">pan-down-symbolic</property>
                   </object>
                 </child>
               </object>