diff --git a/data/Indicator.css b/data/Indicator.css index b333f7b..7570cda 100644 --- a/data/Indicator.css +++ b/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; + } +} diff --git a/data/icons/rotation-allowed.svg b/data/icons/rotation-allowed.svg index 00b17eb..70e4ecf 100644 --- a/data/icons/rotation-allowed.svg +++ b/data/icons/rotation-allowed.svg @@ -4,38 +4,12 @@ width="16" version="1.1" id="svg1" - sodipodi:docname="rotation-allowed.svg" - inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - - diff --git a/data/icons/rotation-arrow.svg b/data/icons/rotation-arrow.svg new file mode 100644 index 0000000..0c9a91b --- /dev/null +++ b/data/icons/rotation-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/data/icons/rotation-locked.svg b/data/icons/rotation-locked.svg index d097ad7..4cc0b8d 100644 --- a/data/icons/rotation-locked.svg +++ b/data/icons/rotation-locked.svg @@ -1,19 +1,4 @@ - - - - - + + + diff --git a/data/quick-settings.gresource.xml b/data/quick-settings.gresource.xml index e58d821..9d24759 100644 --- a/data/quick-settings.gresource.xml +++ b/data/quick-settings.gresource.xml @@ -10,6 +10,7 @@ icons/system-suspend.svg icons/system-suspend-disabled.svg icons/quick-settings.svg + icons/rotation-arrow.svg icons/rotation-allowed.svg icons/rotation-locked.svg diff --git a/src/Widgets/RotationToggle.vala b/src/Widgets/RotationToggle.vala index 8aa3133..c2fab22 100644 --- a/src/Widgets/RotationToggle.vala +++ b/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 { diff --git a/src/Widgets/SettingsToggle.vala b/src/Widgets/SettingsToggle.vala index 4a38e47..ecd84a0 100644 --- a/src/Widgets/SettingsToggle.vala +++ b/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 };