sidebar: config: add anims

.config/ags/modules/sideright/centermodules/configure.js

@@ -6,15 +6,16 @@ const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
-import { ConfigSpinButton, ConfigToggle } from '../../.commonwidgets/configwidgets.js';
+import { ConfigGap, ConfigSpinButton, ConfigToggle } from '../../.commonwidgets/configwidgets.js';
 
-const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disableValue = 0 }) => ConfigToggle({
+const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disableValue = 0, extraOnChange = () => { } }) => ConfigToggle({
     icon: icon,
     name: name,
     desc: desc,
     initValue: JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0,
     onChange: (self, newValue) => {
         execAsync(['hyprctl', 'keyword', option, `${newValue ? enableValue : disableValue}`]).catch(print);
+        extraOnChange(self, newValue);
     }
 });
 
@@ -30,7 +31,7 @@ const HyprlandSpinButton = ({ icon, name, desc = null, option, ...rest }) => Con
 });
 
 const Subcategory = (children) => Box({
-    className: 'margin-left-15',
+    className: 'margin-left-20',
     vertical: true,
     children: children,
 })
@@ -41,7 +42,7 @@ export default (props) => {
         className: 'spacing-v-5',
         children: [
             Label({
-                hpack: 'start',
+                hpack: 'center',
                 className: 'txt txt-large margin-left-10',
                 label: name,
             }),
@@ -63,7 +64,7 @@ export default (props) => {
                         ConfigToggle({
                             icon: 'border_clear',
                             name: 'Transparency',
-                            desc: 'Make shell elements transparent',
+                            desc: 'Make shell elements transparent\nBlur is also recommended if you enable this',
                             initValue: exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"') == "transparent",
                             onChange: (self, newValue) => {
                                 const transparency = newValue == 0 ? "opaque" : "transparent";
@@ -78,6 +79,23 @@ export default (props) => {
                             HyprlandSpinButton({ icon: 'target', name: 'Size', desc: 'Adjust the blur radius. Generally doesn\'t affect performance\nHigher = more color spread', option: 'decoration:blur:size', minValue: 1, maxValue: 1000 }),
                             HyprlandSpinButton({ icon: 'repeat', name: 'Passes', desc: 'Adjust the number of runs of the blur algorithm\nMore passes = more spread and power consumption\n4 is recommended\n2- would look weird and 6+ would look lame.', option: 'decoration:blur:passes', minValue: 1, maxValue: 10 }),
                         ]),
+                        ConfigGap({}),
+                        HyprlandToggle({
+                            icon: 'animation', name: 'Animations', desc: 'Enable Hyprland and GTK animations', option: 'animations:enabled',
+                            extraOnChange: (self, newValue) => execAsync(['gsettings', 'set', 'org.gnome.desktop.interface', 'enable-animations', `${newValue}`])
+                        }),
+                        Subcategory([
+                            ConfigSpinButton({
+                                icon: 'clear_all',
+                                name: 'Choreography delay',
+                                desc: 'In milliseconds, the delay between animations of a series',
+                                initValue: userOptions.animations.choreographyDelay,
+                                step: 10, minValue: 0, maxValue: 1000,
+                                onChange: (self, newValue) => {
+                                    userOptions.animations.choreographyDelay = newValue
+                                },
+                            })
+                        ]),
                     ]
                 }),
                 ConfigSection({

.config/ags/scss/_lib_classes.scss

@@ -386,7 +386,7 @@
     @include button-minsize;
 }
 
-@each $spacing in (5, 8, 10, 15) {
+@each $spacing in (5, 8, 10, 15, 20) {
     @each $dir in ("top", "bottom", "left", "right") {
         .margin-#{$dir}-#{$spacing} {
             margin-#{$dir}: 0.068rem * $spacing;