Beautify DTP

- Allow hover animation travel below 0%
- Allow hover animation zoom below 100%
- Hover highlighting independent of hover animation
- Custom color for hover highlighting
- Custom color for mouse down highlighting
- Icon background with rounded corners
- Customize margin for app icons towards screen border and desktop

appIcons.js

@@ -30,6 +30,7 @@ import GObject from 'gi://GObject';
 import Mtk from 'gi://Mtk';
 import Shell from 'gi://Shell';
 import St from 'gi://St';
+import Gtk from 'gi://Gtk';
 
 import * as AppDisplay from 'resource:///org/gnome/shell/ui/appDisplay.js';
 import * as AppMenu from 'resource:///org/gnome/shell/ui/appMenu.js';
@@ -117,6 +118,9 @@ export const TaskbarAppIcon = GObject.registerClass({
         this._previewMenu = previewMenu;
         this.iconAnimator = iconAnimator;
         this.lastClick = 0;
+        this._appicon_normalstyle = '';
+        this._appicon_hoverstyle = '';
+        this._appicon_pressedstyle = '';
 
         super._init(appInfo.app, iconParams);
 
@@ -148,7 +152,7 @@ export const TaskbarAppIcon = GObject.registerClass({
         this._isGroupApps = SETTINGS.get_boolean('group-apps');
 
         this._container = new St.Widget({ style_class: 'dtp-container', layout_manager: new Clutter.BinLayout() });
-        this._dotsContainer = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._dotsContainer = new St.Widget({ style_class: 'dtp-dots-container', layout_manager: new Clutter.BinLayout() });
         this._dtpIconContainer = new St.Widget({ layout_manager: new Clutter.BinLayout(), style: getIconContainerStyle(panel.checkIfVertical()) });
 
         this.remove_child(this._iconContainer);
@@ -192,6 +196,7 @@ export const TaskbarAppIcon = GObject.registerClass({
         }
 
         this._onAnimateAppiconHoverChanged();
+        this._onAppIconHoverHighlightChanged();
         this._setAppIconPadding();
         this._setAppIconStyle();
         this._showDots();
@@ -227,9 +232,18 @@ export const TaskbarAppIcon = GObject.registerClass({
                                                 this._onSwitchWorkspace.bind(this));
 
         this._hoverChangeId = this.connect('notify::hover', () => this._onAppIconHoverChanged());
+        if (!this._checkGtkVersion_cssVariables()) {
+            this._hoverChangeId2 = this.connect('notify::hover', () => this._onAppIconHoverChanged_GtkWorkaround());
+            this._pressedChangedId = this.connect('notify::pressed', () => this._onAppIconPressedChanged_GtkWorkaround());
+        }
 
         this._dtpSettingsSignalIds = [
             SETTINGS.connect('changed::animate-appicon-hover', this._onAnimateAppiconHoverChanged.bind(this)),
+            SETTINGS.connect('changed::animate-appicon-hover', this._onAppIconHoverHighlightChanged.bind(this)),
+            SETTINGS.connect('changed::highlight-appicon-hover', this._onAppIconHoverHighlightChanged.bind(this)),
+            SETTINGS.connect('changed::highlight-appicon-hover-background-color', this._onAppIconHoverHighlightChanged.bind(this)),
+            SETTINGS.connect('changed::highlight-appicon-pressed-background-color', this._onAppIconHoverHighlightChanged.bind(this)),
+            SETTINGS.connect('changed::highlight-appicon-hover-border-radius', this._onAppIconHoverHighlightChanged.bind(this)),
             SETTINGS.connect('changed::dot-position', this._settingsChangeRefresh.bind(this)),
             SETTINGS.connect('changed::dot-size', this._settingsChangeRefresh.bind(this)),
             SETTINGS.connect('changed::dot-style-focused', this._settingsChangeRefresh.bind(this)),
@@ -255,8 +269,14 @@ export const TaskbarAppIcon = GObject.registerClass({
             SETTINGS.connect('changed::group-apps-label-font-color-minimized', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-label-max-width', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-use-fixed-width', this._updateWindowTitleStyle.bind(this)),
-            SETTINGS.connect('changed::group-apps-underline-unfocused', this._settingsChangeRefresh.bind(this))
+            SETTINGS.connect('changed::group-apps-underline-unfocused', this._settingsChangeRefresh.bind(this)),
-        ]
+        ];
+
+        if (!this._checkGtkVersion_cssVariables()) {
+            this._dtpSettingsSignalIds += [
+                SETTINGS.connect('changed::highlight-appicon-hover-border-radius', () => this._setIconStyle(this._isFocusedWindow())),
+            ];
+        }
 
         this._progressIndicator = new Progress.ProgressIndicator(this, panel.progressManager);
 
@@ -269,10 +289,11 @@ export const TaskbarAppIcon = GObject.registerClass({
 
     // Used by TaskbarItemContainer to animate appIcons on hover
     getCloneButton() {
-        // The source of the clone is this._container,
+        // The source of the clone is this._dtpIconContainer,
+        // which contains the icon but no highlighting elements
         // using this.actor directly would break DnD style.
         let clone = new Clutter.Clone({
-            source: this.child,
+            source: this._dtpIconContainer,
             x: this.child.x, y: this.child.y,
             width: this.child.width, height: this.child.height,
             pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
@@ -356,6 +377,12 @@ export const TaskbarAppIcon = GObject.registerClass({
         if (this._hoverChangeId) {
             this.disconnect(this._hoverChangeId);
         }
+        if (this._hoverChangeId2) {
+            this.disconnect(this._hoverChangeId2);
+        }
+        if (this._pressedChangedId) {
+            this.disconnect(this._pressedChangedId);
+        }
 
         if (this._scrollEventId) {
             this.disconnect(this._scrollEventId);
@@ -438,6 +465,56 @@ export const TaskbarAppIcon = GObject.registerClass({
         }
     }
 
+    _onAppIconHoverHighlightChanged() {
+        const background_color = SETTINGS.get_string('highlight-appicon-hover-background-color');
+        const pressed_color = SETTINGS.get_string('highlight-appicon-pressed-background-color');
+        const border_radius = SETTINGS.get_int('highlight-appicon-hover-border-radius');
+        if (this._checkGtkVersion_cssVariables()) {
+            this._container.set_style(`--dtp-hover-background-color: ${background_color}; --dtp-hover-border-radius: ${border_radius}px; --dtp-pressed-background-color: ${pressed_color};`);
+        } else {
+            // Some trickery needed to get the same effect
+            const br = `border-radius: ${border_radius}px;`;
+            this._appicon_normalstyle = br;
+            this._container.set_style(this._appicon_normalstyle);
+            this._appicon_hoverstyle = `background-color: ${background_color}; ${br}`;
+            this._appicon_pressedstyle = `background-color: ${pressed_color}; ${br}`;
+        }
+        if (SETTINGS.get_boolean('highlight-appicon-hover')) {
+            this._container.remove_style_class_name('no-highlight');
+        } else {
+            this._container.add_style_class_name('no-highlight');
+            this._appicon_normalstyle = '';
+            this._appicon_hoverstyle = '';
+            this._appicon_pressedstyle = '';
+        }
+    }
+
+    _checkGtkVersion_cssVariables() {
+        // Support for CSS variables will be added in GTK 4.16
+        return Gtk.get_major_version() >= 5 ||
+               (Gtk.get_major_version() == 4 && Gtk.get_minor_version() >= 16);
+    }
+
+    _onAppIconHoverChanged_GtkWorkaround() {
+        if (this.hover && this._appicon_hoverstyle) {
+            this._container.set_style(this._appicon_hoverstyle);
+        } else if(this._appicon_normalstyle) {
+            this._container.set_style(this._appicon_normalstyle);
+        } else {
+            this._container.set_style('');
+        }
+    }
+
+    _onAppIconPressedChanged_GtkWorkaround() {
+        if (this.pressed && this._appicon_pressedstyle) {
+            this._container.set_style(this._appicon_pressedstyle);
+        } else if(this._appicon_normalstyle) {
+            this._container.set_style(this._appicon_normalstyle);
+        } else {
+            this._container.set_style('');
+        }
+    }
+
     _onMouseScroll(actor, event) {
         let scrollAction = SETTINGS.get_string('scroll-icon-action');
 
@@ -605,7 +682,10 @@ export const TaskbarAppIcon = GObject.registerClass({
             }
 
             let highlightColor = this._getFocusHighlightColor();
-            inlineStyle += "background-color: " + cssHexTocssRgba(highlightColor, SETTINGS.get_int('focus-highlight-opacity') * 0.01);
+            inlineStyle += "background-color: " + cssHexTocssRgba(highlightColor, SETTINGS.get_int('focus-highlight-opacity') * 0.01) + ";";
+            if (!this._checkGtkVersion_cssVariables()) {
+                inlineStyle += this._appicon_normalstyle;
+            }
         }
 
         if(this._dotsContainer.get_style() != inlineStyle) {
@@ -625,10 +705,23 @@ export const TaskbarAppIcon = GObject.registerClass({
     }
 
     _setAppIconPadding() {
-        let padding = getIconPadding(this.dtpPanel.monitor.index);
+        const padding = getIconPadding(this.dtpPanel.monitor.index);
-        let margin = SETTINGS.get_int('appicon-margin');
+        const margin = SETTINGS.get_int('appicon-margin');
+        const margin_todesktop = SETTINGS.get_int('appicon-margin-todesktop');
+        const margin_toscreenborder = SETTINGS.get_int('appicon-margin-toscreenborder');
 
-        this.set_style('padding:' + (this.dtpPanel.checkIfVertical() ? margin + 'px 0' : '0 ' + margin + 'px;'));
+        let margin_style = '';
+        const panelPosition = this.dtpPanel.getPosition();
+        if (panelPosition == St.Side.TOP) {
+            margin_style = `${margin_toscreenborder}px ${margin}px ${margin_todesktop}px ${margin}px`;
+        } else if (panelPosition == St.Side.RIGHT) {
+            margin_style = `${margin}px ${margin_toscreenborder}px ${margin}px ${margin_todesktop}px`;
+        } else if (panelPosition == St.Side.LEFT) {
+            margin_style = `${margin}px ${margin_todesktop}px ${margin}px ${margin_toscreenborder}px`;
+        } else {
+            margin_style = `${margin_todesktop}px ${margin}px ${margin_toscreenborder}px ${margin}px`;
+        }
+        this.set_style(`padding: ${margin_style};`);
         this._iconContainer.set_style('padding: ' + padding + 'px;');
     }
 

panel.js

@@ -486,6 +486,8 @@ export const Panel = GObject.registerClass({
                 SETTINGS,
                 [
                     'changed::panel-sizes',
+                    'changed::appicon-margin-todesktop',
+                    'changed::appicon-margin-toscreenborder',
                     'changed::group-apps'
                 ],
                 () => this._resetGeometry()
@@ -619,7 +621,7 @@ export const Panel = GObject.registerClass({
         let x = 0, y = 0;
         let w = 0, h = 0;
 
-        const panelSize = PanelSettings.getPanelSize(SETTINGS, this.monitor.index);
+        const panelSize = PanelSettings.getPanelSize(SETTINGS, this.monitor.index) + SETTINGS.get_int('appicon-margin-todesktop') + SETTINGS.get_int('appicon-margin-toscreenborder');
         this.dtpSize = panelSize * scaleFactor;
 
         if (SETTINGS.get_boolean('stockgs-keep-top-panel') && Main.layoutManager.primaryMonitor == this.monitor) {

prefs.js

@@ -168,6 +168,7 @@ const Preferences = class {
 
         // dialogs
         this._builder.add_from_file(this._path + '/ui/BoxAnimateAppIconHoverOptions.ui');
+        this._builder.add_from_file(this._path + '/ui/BoxHighlightAppIconHoverOptions.ui');
         this._builder.add_from_file(this._path + '/ui/BoxDotOptions.ui');
         this._builder.add_from_file(this._path + '/ui/BoxShowDesktopOptions.ui');
         this._builder.add_from_file(this._path + '/ui/BoxDynamicOpacityOptions.ui');
@@ -222,6 +223,8 @@ const Preferences = class {
         this._tray_size_timeout = 0;
         this._leftbox_size_timeout = 0;
         this._appicon_margin_timeout = 0;
+        this._appicon_margin_todesktop_timeout = 0;
+        this._appicon_margin_toscreenborder_timeout = 0;
         this._appicon_padding_timeout = 0;
         this._opacity_timeout = 0;
         this._tray_padding_timeout = 0;
@@ -621,6 +624,14 @@ const Preferences = class {
         .set_format_value_func((scale, value) => {
             return value + ' px';
         });
+        this._builder.get_object('appicon_margin_todesktop_scale')
+        .set_format_value_func((scale, value) => {
+            return value + ' px';
+        });
+        this._builder.get_object('appicon_margin_toscreenborder_scale')
+        .set_format_value_func((scale, value) => {
+            return value + ' px';
+        });
 
         this._builder.get_object('appicon_padding_scale')
         .set_format_value_func((scale, value) => {
@@ -684,6 +695,12 @@ const Preferences = class {
         .set_format_value_func((scale, value) => {
             return ngettext("%d icon", "%d icons", value).format(value);
         });
+
+        // highlight appicon on hover dialog
+        this._builder.get_object('highlight_appicon_borderradius')
+        .set_format_value_func((scale, value) => {
+            return value + ' px';
+        });
     }
 
     _bindSettings() {
@@ -1935,11 +1952,14 @@ const Preferences = class {
             {objectName: 'tray_size_scale', valueName: 'tray-size', range: DEFAULT_FONT_SIZES },
             {objectName: 'leftbox_size_scale', valueName: 'leftbox-size', range: DEFAULT_FONT_SIZES },
             {objectName: 'appicon_margin_scale', valueName: 'appicon-margin', range: DEFAULT_MARGIN_SIZES },
+            {objectName: 'appicon_margin_todesktop_scale', valueName: 'appicon-margin-todesktop', range: DEFAULT_MARGIN_SIZES },
+            {objectName: 'appicon_margin_toscreenborder_scale', valueName: 'appicon-margin-toscreenborder', range: DEFAULT_MARGIN_SIZES },
             {objectName: 'appicon_padding_scale', valueName: 'appicon-padding', range: DEFAULT_MARGIN_SIZES },
             {objectName: 'tray_padding_scale', valueName: 'tray-padding', range: DEFAULT_PADDING_SIZES },
             {objectName: 'leftbox_padding_scale', valueName: 'leftbox-padding', range: DEFAULT_PADDING_SIZES },
             {objectName: 'statusicon_padding_scale', valueName: 'status-icon-padding', range: DEFAULT_PADDING_SIZES },
-            {objectName: 'panel_length_scale', valueName: '', range: LENGTH_MARKS }
+            {objectName: 'panel_length_scale', valueName: '', range: LENGTH_MARKS },
+            {objectName: 'highlight_appicon_borderradius', valueName: 'highlight-appicon-hover-border-radius', range: [ 16, 12, 8, 4, 2, 0 ] },
         ];
 
         for(const idx in sizeScales) {
@@ -2054,6 +2074,71 @@ const Preferences = class {
 
         });
 
+        this._settings.bind('highlight-appicon-hover',
+                            this._builder.get_object('highlight_appicon_hover_switch'),
+                            'active',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        this._settings.bind('highlight-appicon-hover',
+                            this._builder.get_object('highlight_appicon_hover_button'),
+                            'sensitive',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        {
+            rgba.parse(this._settings.get_string('highlight-appicon-hover-background-color'));
+            this._builder.get_object('highlight_appicon_color').set_rgba(rgba);
+            this._builder.get_object('highlight_appicon_color').connect('color-set',  (button) => {
+                let rgba = button.get_rgba();
+                let css = rgba.to_string();
+                this._settings.set_string('highlight-appicon-hover-background-color', css);
+            });
+
+            rgba.parse(this._settings.get_string('highlight-appicon-pressed-background-color'));
+            this._builder.get_object('pressed_appicon_color').set_rgba(rgba);
+            this._builder.get_object('pressed_appicon_color').connect('color-set',  (button) => {
+                let rgba = button.get_rgba();
+                let css = rgba.to_string();
+                this._settings.set_string('highlight-appicon-pressed-background-color', css);
+            });
+
+            let scales = [
+                ['highlight_appicon_borderradius', 'highlight-appicon-hover-border-radius'],
+            ];
+
+            const updateScale = scale => {
+                let [id, key] = scale;
+                this._builder.get_object(id).set_value(this._settings.get_int(key));
+            };
+            scales.forEach(scale => {
+                updateScale(scale);
+                let [id, key] = scale;
+                this._builder.get_object(id).connect('value-changed', widget => {
+                    this._settings.set_int(key, widget.get_value());
+                });
+            });
+
+        }
+
+        this._builder.get_object('highlight_appicon_hover_button').connect('clicked', () => {
+            let box = this._builder.get_object('highlight_appicon_hover_options');
+
+            let dialog = this._createPreferencesDialog(_('App icon highlight options'), box, () =>
+            {
+                // restore default settings
+                this._settings.set_value('highlight-appicon-hover-background-color', this._settings.get_default_value('highlight-appicon-hover-background-color'));
+                rgba.parse(this._settings.get_string('highlight-appicon-hover-background-color'));
+                this._builder.get_object('highlight_appicon_color').set_rgba(rgba);
+                this._settings.set_value('highlight-appicon-pressed-background-color', this._settings.get_default_value('highlight-appicon-pressed-background-color'));
+                rgba.parse(this._settings.get_string('highlight-appicon-pressed-background-color'));
+                this._builder.get_object('pressed_appicon_color').set_rgba(rgba);
+                this._settings.set_value('highlight-appicon-hover-border-radius', this._settings.get_default_value('highlight-appicon-hover-border-radius'));
+                this._builder.get_object('highlight_appicon_borderradius').set_value(this._settings.get_int('highlight-appicon-hover-border-radius'));
+            });
+
+            dialog.show();
+
+        });
+
         this._settings.bind('stockgs-keep-dash',
                             this._builder.get_object('stockgs_dash_switch'),
                             'active',
@@ -2281,6 +2366,30 @@ const BuilderScope = GObject.registerClass({
         });
     }
 
+    appicon_margin_todesktop_scale_value_changed_cb(scale) {
+        // Avoid settings the size consinuosly
+        if (this._preferences._appicon_margin_todesktop_timeout > 0)
+            GLib.Source.remove(this._preferences._appicon_margin_todesktop_timeout);
+
+        this._preferences._appicon_margin_todesktop_timeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT, SCALE_UPDATE_TIMEOUT, () => {
+            this._preferences._settings.set_int('appicon-margin-todesktop', scale.get_value());
+            this._preferences._appicon_margin_todesktop_timeout = 0;
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
+    appicon_margin_toscreenborder_scale_value_changed_cb(scale) {
+        // Avoid settings the size consinuosly
+        if (this._preferences._appicon_margin_toscreenborder_timeout > 0)
+            GLib.Source.remove(this._preferences._appicon_margin_toscreenborder_timeout);
+
+        this._preferences._appicon_margin_toscreenborder_timeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT, SCALE_UPDATE_TIMEOUT, () => {
+            this._preferences._settings.set_int('appicon-margin-toscreenborder', scale.get_value());
+            this._preferences._appicon_margin_toscreenborder_timeout = 0;
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
     appicon_padding_scale_value_changed_cb(scale) {
         // Avoid settings the size consinuosly
         if (this._preferences._appicon_padding_timeout > 0)

schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

@@ -735,6 +735,16 @@
         <summary>App icon margin</summary>
         <description>Set the margin for application icons in the embedded dash.</description>
     </key>
+    <key type="i" name="appicon-margin-todesktop">
+        <default>0</default>
+        <summary>App icon margin to desktop</summary>
+        <description>Set the margin for application icons in the embedded dash towards the desktop (top margin if panel is on the bottom).</description>
+    </key>
+        <key type="i" name="appicon-margin-toscreenborder">
+        <default>0</default>
+        <summary>App icon margin to screen border</summary>
+        <description>Set the margin for application icons in the embedded dash towards the desktop (bottom margin if panel is on the bottom).</description>
+    </key>
     <key type="i" name="appicon-padding">
         <default>4</default>
         <summary>App icon padding</summary>
@@ -795,6 +805,22 @@
       <default>{'SIMPLE':1,'RIPPLE':1.25,'PLANK':2}</default>
       <summary>App icon hover animation zoom scale in relation to the app icon size</summary>
     </key>
+    <key type="b" name="highlight-appicon-hover">
+      <default>true</default>
+      <summary>Highlight app icon on hover</summary>
+    </key>
+    <key type="s" name="highlight-appicon-hover-background-color">
+      <default>"rgba(238, 238, 236, 0.1)"</default>
+      <summary>Highlight color</summary>
+    </key>
+    <key type="s" name="highlight-appicon-pressed-background-color">
+      <default>"rgba(238, 238, 236, 0.18)"</default>
+      <summary>Mouse down highlight color</summary>
+    </key>
+    <key type="i" name="highlight-appicon-hover-border-radius">
+      <default>0</default>
+      <summary>Highlight border radius</summary>
+    </key>
     <key type="b" name="secondarymenu-contains-appmenu">
       <default>true</default>
       <summary>Integrate items from the gnome appmenu into the right click menu</summary>

stylesheet.css

@@ -39,24 +39,40 @@
 }
 
 #dashtopanelScrollview .overview-tile:hover .dtp-container,
-#dashtopanelScrollview .overview-tile:focus .dtp-container,
+#dashtopanelScrollview .overview-tile:focus .dtp-container {
+	background-color: rgba(238, 238, 236, 0.1);
+	border-radius: 0px;
+	background-color: var(--dtp-hover-background-color);
+	border-radius: var(--dtp-hover-border-radius);
+}
+
+#dashtopanelScrollview .overview-tile:hover .dtp-container > .dtp-dots-container,
+#dashtopanelScrollview .overview-tile:focus .dtp-container > .dtp-dots-container {
+	border-radius: 0px;
+	border-radius: var(--dtp-hover-border-radius);
+}
+
 .dashtopanelMainPanel .dash-item-container .show-apps:hover {
 	background-color: rgba(238, 238, 238, 0.1);
 }
-
 .dashtopanelMainPanel .dash-item-container .show-apps .overview-icon {
 	color: #FFF;
 }
-
-#dashtopanelTaskbar .dash-item-container .overview-tile:hover,
-#dashtopanelTaskbar .dash-item-container .overview-tile .dtp-container .overview-icon,
-#dashtopanelScrollview .overview-tile:hover .dtp-container.animate-appicon-hover,
 .dashtopanelMainPanel .dash-item-container .show-apps:hover .overview-icon {
 	background: none;
 }
 
+#dashtopanelTaskbar .dash-item-container .overview-tile:hover,
+#dashtopanelTaskbar .dash-item-container .overview-tile .dtp-container .overview-icon,
+#dashtopanelScrollview .overview-tile:hover .dtp-container.no-highlight,
+#dashtopanelScrollview .overview-tile:focus .dtp-container.no-highlight {
+	background: none;
+}
+
+
 #dashtopanelScrollview .overview-tile:active .dtp-container {
 	background-color: rgba(238, 238, 236, 0.18);
+	background-color: var(--dtp-pressed-background-color);
 }
 
 #dashtopanelScrollview .overview-tile .favorite {

taskbar.js

@@ -98,11 +98,11 @@ const iconAnimationSettings = {
     },
 
     get travel() {
-        return Math.max(0, this._getDictValue('animate-appicon-hover-animation-travel'));
+        return Math.max(-1, this._getDictValue('animate-appicon-hover-animation-travel'));
     },
 
     get zoom() {
-        return Math.max(1, this._getDictValue('animate-appicon-hover-animation-zoom'));
+        return Math.max(0.5, this._getDictValue('animate-appicon-hover-animation-zoom'));
     },
 };
 
@@ -1374,7 +1374,7 @@ export const TaskbarItemContainer = GObject.registerClass({
 
         let travel = iconAnimationSettings.travel;
         let zoom = iconAnimationSettings.zoom;
-        return this._dtpPanel.dtpSize * (travel + (zoom - 1) / 2);
+        return this._dtpPanel.dtpSize * Math.max(0, travel + (zoom - 1) / 2);
     }
 
     _updateCloneContainerPosition(cloneContainer) {
@@ -1470,10 +1470,10 @@ export const TaskbarItemContainer = GObject.registerClass({
         let translationMax = (vertical ? width : height) * (travel + (zoom - 1) / 2);
         let translationEnd = translationMax * level;
         let translationDone = vertical ? this._raisedClone.translation_x : this._raisedClone.translation_y;
-        let translationTodo = Math.abs(translationEnd - translationDone);
+        let translationTodo = Math.sign(travel)*Math.abs(translationEnd - translationDone);
         let scale = 1 + (zoom - 1) * level;
         let rotationAngleZ = rotationDirection * rotation * level;
-        let time = duration * translationTodo / translationMax;
+        let time = Math.abs(duration * translationTodo / translationMax);
 
         let options = {
             scale_x: scale, scale_y: scale,

ui/BoxAnimateAppIconHoverOptions.ui

@@ -18,14 +18,14 @@
   </object>
 
   <object class="GtkAdjustment" id="animate_appicon_hover_options_travel_adjustment">
-    <property name="lower">0</property>
+    <property name="lower">-100</property>
     <property name="upper">100</property>
     <property name="step_increment">1</property>
     <property name="page_increment">5</property>
   </object>
 
   <object class="GtkAdjustment" id="animate_appicon_hover_options_zoom_adjustment">
-    <property name="lower">100</property>
+    <property name="lower">10</property>
     <property name="upper">250</property>
     <property name="step_increment">1</property>
     <property name="page_increment">5</property>

ui/BoxHighlightAppIconHoverOptions.ui

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+
+  <!-- adjustments -->
+  <object class="GtkAdjustment" id="highlight_appicon_borderradius_adjustment">
+    <property name="lower">0</property>
+    <property name="upper">10</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">2</property>
+  </object>
+
+  <object class="GtkBox" id="highlight_appicon_hover_options">
+      <property name="orientation">vertical</property>
+      <property name="width-request">600</property>
+      <property name="spacing">24</property>
+      <property name="margin-top">32</property>
+      <property name="margin-bottom">32</property>
+      <property name="margin-start">32</property>
+      <property name="margin-end">32</property>
+
+      <child>
+        <object class="AdwPreferencesGroup">
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Highlight AppIcon color</property>
+              <child>
+                <object class="GtkColorButton" id="highlight_appicon_color">
+                  <property name="receives_default">True</property>
+                  <property name="valign">center</property>
+                  <property name="use_alpha">True</property>
+                </object>
+              </child>
+            </object>
+          </child>
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Pressed AppIcon color</property>
+              <child>
+                <object class="GtkColorButton" id="pressed_appicon_color">
+                  <property name="receives_default">True</property>
+                  <property name="valign">center</property>
+                  <property name="use_alpha">True</property>
+                </object>
+              </child>
+            </object>
+          </child>
+          <child>
+            <object class="AdwActionRow">
+              <property name="title" translatable="yes">Highlight AppIcon border radius</property>
+              <property name="subtitle" translatable="yes">(default is 0)</property>
+              <child>
+                <object class="GtkScale" id="highlight_appicon_borderradius">
+                  <property name="width-request">300</property>
+                  <property name="adjustment">highlight_appicon_borderradius_adjustment</property>
+                  <property name="round_digits">0</property>
+                  <property name="digits">0</property>
+                  <property name="value_pos">right</property>
+                  <property name="draw_value">True</property>
+                </object>
+              </child>
+            </object>
+          </child>
+        </object>
+      </child>
+
+
+  </object>
+
+</interface>

ui/BoxShowDesktopOptions.ui

@@ -52,7 +52,7 @@
           <object class="AdwActionRow">
             <property name="title" translatable="yes">Override Show Desktop line color</property>
             <child>
-              <object class="GtkColorButton" id="override_show_desktop_line_color_colorbutton">>
+              <object class="GtkColorButton" id="override_show_desktop_line_color_colorbutton">
                 <property name="receives_default">True</property>
                 <property name="valign">center</property>
                 <property name="use_alpha">True</property>

ui/SettingsStyle.ui

@@ -9,6 +9,20 @@
     <property name="page_increment">0.1</property>
   </object>
 
+  <object class="GtkAdjustment" id="appicon_margin_todesktop_adjustment">
+    <property name="lower">0.33</property>
+    <property name="upper">1</property>
+    <property name="step_increment">0.01</property>
+    <property name="page_increment">0.1</property>
+  </object>
+
+  <object class="GtkAdjustment" id="appicon_margin_toscreenborder_adjustment">
+    <property name="lower">0.33</property>
+    <property name="upper">1</property>
+    <property name="step_increment">0.01</property>
+    <property name="page_increment">0.1</property>
+  </object>
+
   <object class="GtkAdjustment" id="appicon_padding_adjustment">
     <property name="lower">0.33</property>
     <property name="upper">1</property>
@@ -61,6 +75,42 @@
           </object>
         </child>
 
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">App Icon Margin Towards Desktop</property>
+            <property name="subtitle" translatable="yes">(default is 0)</property>
+            <child>
+              <object class="GtkScale" id="appicon_margin_todesktop_scale">
+                <property name="width-request">300</property>
+                <property name="adjustment">appicon_margin_todesktop_adjustment</property>
+                <property name="round_digits">0</property>
+                <property name="digits">0</property>
+                <property name="value_pos">right</property>
+                <property name="draw_value">True</property>
+                <signal name="value-changed" handler="appicon_margin_todesktop_scale_value_changed_cb" swapped="no"/>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">App Icon Margin Towards Screen Border</property>
+            <property name="subtitle" translatable="yes">(default is 0)</property>
+            <child>
+              <object class="GtkScale" id="appicon_margin_toscreenborder_scale">
+                <property name="width-request">300</property>
+                <property name="adjustment">appicon_margin_toscreenborder_adjustment</property>
+                <property name="round_digits">0</property>
+                <property name="digits">0</property>
+                <property name="value_pos">right</property>
+                <property name="draw_value">True</property>
+                <signal name="value-changed" handler="appicon_margin_toscreenborder_scale_value_changed_cb" swapped="no"/>
+              </object>
+            </child>
+          </object>
+        </child>
+
         <child>
           <object class="AdwActionRow">
             <property name="title" translatable="yes">App Icon Padding</property>
@@ -104,6 +154,31 @@
           </object>
         </child>
 
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Highlight hovering app icons</property>
+            <child>
+              <object class="GtkButton" id="highlight_appicon_hover_button">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="highlight_appicon_hover_options_image">
+                    <property name="icon_name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="highlight_appicon_hover_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
         <child>
           <object class="AdwActionRow">
             <property name="title" translatable="yes">Icon style</property>