RotationToggle: animate

data/Indicator.css

@@ -56,3 +56,55 @@ quicksettings .color-scheme .toggle image {
 quicksettings .color-scheme .toggle:checked image {
     -gtk-icon-transform: rotate(180deg);
 }
+
+quicksettings .rotation .toggle image.arrow {
+    animation: rotation-allow 600ms cubic-bezier(0.4, 0, 0.2, 1) 1;
+    opacity: 1;
+}
+
+quicksettings .rotation .toggle:checked image.arrow {
+    animation: rotation-lock 600ms linear 1;
+    opacity: 0.5;
+}
+
+quicksettings .rotation .toggle image.lock {
+    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0.5;
+}
+
+quicksettings .rotation .toggle:checked image.lock {
+    opacity: 1;
+}
+
+@keyframes rotation-lock {
+    0% {
+        opacity: 1;
+        -gtk-icon-transform: rotate(0turn);
+    }
+    10% {
+        -gtk-icon-transform: rotate(0.05turn);
+        opacity: 0.5;
+    }
+    40% {
+        -gtk-icon-transform: rotate(-0.04turn);
+        opacity: 0.5;
+    }
+    70% {
+        -gtk-icon-transform: rotate(0.01turn);
+        opacity: 0.5;
+    }
+    100% {
+        -gtk-icon-transform: rotate(0turn);
+        opacity: 0.5;
+    }
+}
+
+@keyframes rotation-allow {
+    from {
+        opacity: 0.5;
+    }
+    to {
+        -gtk-icon-transform: rotate(1turn);
+        opacity: 1;
+    }
+}

data/quick-settings.gresource.xml

@@ -10,6 +10,7 @@
     <file alias="scalable/status/system-suspend-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/system-suspend.svg</file>
     <file alias="scalable/status/system-suspend-disabled-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/system-suspend-disabled.svg</file>
     <file alias="scalable/status/quick-settings-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/quick-settings.svg</file>
+    <file alias="scalable/status/quick-settings-rotation-arrow-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/rotation-arrow.svg</file>
     <file alias="scalable/status/quick-settings-rotation-allowed-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/rotation-allowed.svg</file>
     <file alias="scalable/status/quick-settings-rotation-locked-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/rotation-locked.svg</file>
   </gresource>

src/Widgets/RotationToggle.vala

@@ -11,13 +11,28 @@ public class QuickSettings.RotationToggle: SettingsToggle {
     }
 
     construct {
-        icon_name = "quick-settings-rotation-locked-symbolic";
+        var lock_image = new Gtk.Image ();
+        lock_image.get_style_context ().add_class ("lock");
+
+        var arrow_image = new Gtk.Image.from_icon_name ("quick-settings-rotation-arrow-symbolic", BUTTON);
+        arrow_image.get_style_context ().add_class ("arrow");
+
+        var overlay = new Gtk.Overlay () {
+            child = lock_image
+        };
+        overlay.add_overlay (arrow_image);
+        overlay.set_overlay_pass_through (arrow_image, true);
+        overlay.set_overlay_pass_through (lock_image, true);
+
+        button_child = overlay;
+
+        get_style_context ().add_class ("rotation");
         settings_uri = "settings://display";
 
         var touchscreen_settings = new Settings ("org.gnome.settings-daemon.peripherals.touchscreen");
         touchscreen_settings.bind ("orientation-lock", this, "active", DEFAULT);
 
-        bind_property ("active", this, "icon-name", SYNC_CREATE, (binding, srcval, ref targetval) => {
+        bind_property ("active", lock_image, "icon-name", SYNC_CREATE, (binding, srcval, ref targetval) => {
             if ((bool) srcval) {
                 targetval = "quick-settings-rotation-locked-symbolic";
             } else {

src/Widgets/SettingsToggle.vala

@@ -9,6 +9,14 @@ public class QuickSettings.SettingsToggle : Gtk.FlowBoxChild {
     public string label { get; construct; }
     public string settings_uri { get; set; default = "settings://"; }
 
+    public Gtk.Widget button_child {
+        set {
+            button.remove (button.get_child ());
+            button.child = value;
+        }
+    }
+
+    private Gtk.ToggleButton button;
     private Gtk.GestureMultiPress middle_click_gesture;
 
     public SettingsToggle (string label) {
@@ -20,7 +28,7 @@ public class QuickSettings.SettingsToggle : Gtk.FlowBoxChild {
     construct {
         var image = new Gtk.Image ();
 
-        var button = new Gtk.ToggleButton () {
+        button = new Gtk.ToggleButton () {
             halign = CENTER,
             image = image
         };