Add option to specify show apps icon padding

Settings.ui

@@ -2956,6 +2956,11 @@
       </packing>
     </child>
   </object>
+  <object class="GtkAdjustment" id="show_applications_side_padding_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">10</property>
+  </object>
   <object class="GtkBox" id="show_applications_options">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
@@ -3039,6 +3044,56 @@
         <property name="position">0</property>
       </packing>
     </child>
+    <child>
+      <object class="GtkListBoxRow" id="listboxrow_show_applications_side_padding">
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <child>
+          <object class="GtkGrid" id="grid_show_applications_side_padding">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="margin_left">12</property>
+            <property name="margin_right">12</property>
+            <property name="margin_top">12</property>
+            <property name="margin_bottom">12</property>
+            <property name="hexpand">True</property>
+            <property name="row_spacing">6</property>
+            <property name="column_spacing">32</property>
+            <child>
+              <object class="GtkSpinButton" id="show_applications_side_padding_spinbutton">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="halign">end</property>
+                <property name="text" translatable="yes">0</property>
+                <property name="adjustment">show_applications_side_padding_adjustment</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="show_applications_side_padding_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="hexpand">True</property>
+                <property name="label" translatable="yes">Show Applications icon side padding (px)</property>
+                <property name="xalign">0</property>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
   </object>
   <object class="GtkAdjustment" id="show_showdesktop_width_adjustment">
     <property name="lower">1</property>

appIcons.js

@@ -1503,10 +1503,22 @@ var ShowAppsIconWrapper = new Lang.Class({
             return this._iconActor;
         };
 
-        this._dtpSettings.connect('changed::show-apps-icon-file', () => {
+        this._changedShowAppsIconId = this._dtpSettings.connect('changed::show-apps-icon-file', () => {
             customIconPath = this._dtpSettings.get_string('show-apps-icon-file');
             this.realShowAppsIcon.icon._createIconTexture(this.realShowAppsIcon.icon.iconSize);
         });
+
+        this._changedAppIconPaddingId = this._dtpSettings.connect('changed::appicon-padding', () => this.setShowAppsPadding());
+        this._changedAppIconSidePaddingId = this._dtpSettings.connect('changed::show-apps-icon-side-padding', () => this.setShowAppsPadding());
+        
+        this.setShowAppsPadding();
+    },
+
+    setShowAppsPadding: function() {
+        let padding = this._dtpSettings.get_int('appicon-padding');
+        let sidePadding = this._dtpSettings.get_int('show-apps-icon-side-padding')
+
+        this.actor.set_style('padding:' + padding + 'px ' + (padding + sidePadding) + 'px;');
     },
 
     popupMenu: function() {
@@ -1540,6 +1552,12 @@ var ShowAppsIconWrapper = new Lang.Class({
 
     shouldShowTooltip: function() {
         return this.actor.hover && (!this._menu || !this._menu.isOpen);
+    },
+
+    destroy: function() {
+        this._dtpSettings.disconnect(this._changedShowAppsIconId);
+        this._dtpSettings.disconnect(this._changedAppIconSidePaddingId);
+        this._dtpSettings.disconnect(this._changedAppIconPaddingId);
     }
 });
 Signals.addSignalMethods(ShowAppsIconWrapper.prototype);

prefs.js

@@ -780,6 +780,11 @@ const Settings = new Lang.Class({
                             this._builder.get_object('show_application_options_button'),
                             'sensitive',
                             Gio.SettingsBindFlags.DEFAULT);
+        
+        this._builder.get_object('show_applications_side_padding_spinbutton').set_value(this._settings.get_int('show-apps-icon-side-padding'));
+        this._builder.get_object('show_applications_side_padding_spinbutton').connect('value-changed', Lang.bind (this, function(widget) {
+            this._settings.set_int('show-apps-icon-side-padding', widget.get_value());
+        }));
 
         this._builder.get_object('show_application_options_button').connect('clicked', Lang.bind(this, function() {
             let dialog = new Gtk.Dialog({ title: _('Show Applications options'),
@@ -823,6 +828,8 @@ const Settings = new Lang.Class({
             dialog.connect('response', Lang.bind(this, function(dialog, id) {
                 if (id == 1) {
                     // restore default settings
+                    this._settings.set_value('show-apps-icon-side-padding', this._settings.get_default_value('show-apps-icon-side-padding'));
+                    this._builder.get_object('show_applications_side_padding_spinbutton').set_value(this._settings.get_int('show-apps-icon-side-padding'));
                     handleIconChange.call(this, null);
                 } else {
                     // remove the settings box so it doesn't get destroyed;

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

@@ -315,6 +315,11 @@
       <summary>Custom Show Applications icon</summary>
       <description>Customize the Show Applications icon</description>
     </key>
+    <key type="i" name="show-apps-icon-side-padding">
+      <default>8</default>
+      <summary>Show Applications icon side padding</summary>
+      <description>Customize the Show Applications icon side padding</description>
+    </key>
     <key type="b" name="animate-show-apps">
       <default>true</default>
       <summary>Animate Show Applications from the desktop</summary>

stylesheet.css

@@ -32,10 +32,6 @@
 	padding: 0 4px;
 }
 
-#dashtopanelTaskbar .show-apps {
-	padding: 0 8px;
-}
-
 #dashtopanelScrollview .app-well-app .overview-label {
 	padding-right: 8px;
 }

taskbar.js

@@ -370,6 +370,7 @@ var taskbar = new Lang.Class({
     destroy: function() {
         this._signalsHandler.destroy();
         this._signalsHandler = 0;
+        this._showAppsIconWrapper.destroy();
 
         this._container.destroy();
         this._disconnectWorkspaceSignals();