Add panel margins and padding

gh-1700

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

@@ -245,6 +245,14 @@
       <summary>Lock the taskbar</summary>
       <description>Specifies if the user can modify the taskbar</description>
     </key>
+    <key type="i" name="panel-top-bottom-margins">
+        <default>0</default>
+        <summary>Panel top and bottom margins</summary>
+    </key>
+    <key type="i" name="panel-side-margins">
+        <default>0</default>
+        <summary>Panel side margins</summary>
+    </key>
     <key type="b" name="trans-use-custom-bg">
       <default>false</default>
       <summary>Override theme background color</summary>
@@ -736,16 +744,6 @@
         <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>

src/appIcons.js

@@ -844,23 +844,11 @@ export const TaskbarAppIcon = GObject.registerClass(
     _setAppIconPadding() {
       const padding = getIconPadding(this.dtpPanel.monitor.index)
       const margin = SETTINGS.get_int('appicon-margin')
-      const margin_todesktop = SETTINGS.get_int('appicon-margin-todesktop')
+      let vertical = this.dtpPanel.checkIfVertical()
-      const margin_toscreenborder = SETTINGS.get_int(
-        'appicon-margin-toscreenborder',
-      )
 
-      let margin_style = ''
+      this.set_style(
-      const panelPosition = this.dtpPanel.getPosition()
+        `padding: ${vertical ? margin : 0}px ${vertical ? 0 : margin}px;`,
-      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;')
     }
 

src/panel.js

@@ -219,6 +219,7 @@ export const Panel = GObject.registerClass(
 
       this.geom = this.getGeometry()
 
+      this._setPanelBoxStyle()
       this._setPanelPosition()
 
       if (!this.isStandalone) {
@@ -575,9 +576,9 @@ export const Panel = GObject.registerClass(
         [
           SETTINGS,
           [
+            'changed::panel-side-margins',
+            'changed::panel-top-bottom-margins',
             'changed::panel-sizes',
-            'changed::appicon-margin-todesktop',
-            'changed::appicon-margin-toscreenborder',
             'changed::group-apps',
           ],
           (settings, settingChanged) => {
@@ -678,6 +679,7 @@ export const Panel = GObject.registerClass(
     }
 
     _resetGeometry() {
+      this._setPanelBoxStyle()
       this.geom = this.getGeometry()
       this._setPanelPosition()
       this.taskbar.resetAppIcons(true)
@@ -698,9 +700,8 @@ export const Panel = GObject.registerClass(
     getGeometry() {
       let scaleFactor = Utils.getScaleFactor()
       let panelBoxTheme = this.panelBox.get_theme_node()
-      let lrPadding =
+      let leftPadding = panelBoxTheme.get_padding(St.Side.LEFT)
-        panelBoxTheme.get_padding(St.Side.RIGHT) +
+      let lrPadding = leftPadding + panelBoxTheme.get_padding(St.Side.RIGHT)
-        panelBoxTheme.get_padding(St.Side.LEFT)
       let topPadding = panelBoxTheme.get_padding(St.Side.TOP)
       let tbPadding = topPadding + panelBoxTheme.get_padding(St.Side.BOTTOM)
       let position = this.getPosition()
@@ -718,10 +719,7 @@ export const Panel = GObject.registerClass(
       let w = 0,
         h = 0
 
-      const panelSize =
+      const panelSize = PanelSettings.getPanelSize(SETTINGS, this.monitor.index)
-        PanelSettings.getPanelSize(SETTINGS, this.monitor.index) +
-        SETTINGS.get_int('appicon-margin-todesktop') +
-        SETTINGS.get_int('appicon-margin-toscreenborder')
       this.dtpSize = panelSize * scaleFactor
 
       if (
@@ -762,7 +760,7 @@ export const Panel = GObject.registerClass(
         y = this.monitor.y + gsTopPanelOffset
       } else {
         //BOTTOM
-        x = this.monitor.x
+        x = this.monitor.x - leftPadding
         y = this.monitor.y + this.monitor.height - this.dtpSize - tbPadding
       }
 
@@ -984,10 +982,7 @@ export const Panel = GObject.registerClass(
         box[this.varCoord.c1] = tl
         box[this.varCoord.c2] = br
 
-        panelAlloc[this.varCoord.c2] = Math.min(
+        panelAlloc[this.varCoord.c2] = Math.min(dynamicGroup.size, br - tl)
-          dynamicGroup.size,
-          panelAlloc[this.varCoord.c2],
-        )
       }
 
       this.set_allocation(box)
@@ -1040,6 +1035,15 @@ export const Panel = GObject.registerClass(
       }
     }
 
+    _setPanelBoxStyle() {
+      let topBottomMargins = SETTINGS.get_int('panel-top-bottom-margins')
+      let sideMargins = SETTINGS.get_int('panel-side-margins')
+
+      this.panelBox.set_style(
+        `padding: ${topBottomMargins}px ${sideMargins}px;`,
+      )
+    }
+
     _setPanelPosition() {
       let clipContainer = this.panelBox.get_parent()
 

src/prefs.js

@@ -237,8 +237,8 @@ const Preferences = class {
     this._leftbox_size_timeout = 0
     this._globalBorderRadius_margin_timeout = 0
     this._appicon_margin_timeout = 0
-    this._appicon_margin_todesktop_timeout = 0
+    this._panel_top_bottom_margins_timeout = 0
-    this._appicon_margin_toscreenborder_timeout = 0
+    this._panel_side_margins_timeout = 0
     this._appicon_padding_timeout = 0
     this._opacity_timeout = 0
     this._tray_padding_timeout = 0
@@ -835,12 +835,12 @@ const Preferences = class {
         return value + ' px'
       })
     this._builder
-      .get_object('appicon_margin_todesktop_scale')
+      .get_object('panel_top_bottom_margins_scale')
       .set_format_value_func((scale, value) => {
         return value + ' px'
       })
     this._builder
-      .get_object('appicon_margin_toscreenborder_scale')
+      .get_object('panel_side_margins_scale')
       .set_format_value_func((scale, value) => {
         return value + ' px'
       })
@@ -3114,13 +3114,13 @@ const Preferences = class {
         range: DEFAULT_MARGIN_SIZES,
       },
       {
-        objectName: 'appicon_margin_todesktop_scale',
+        objectName: 'panel_top_bottom_margins_scale',
-        valueName: 'appicon-margin-todesktop',
+        valueName: 'panel-top-bottom-margins',
         range: DEFAULT_MARGIN_SIZES,
       },
       {
-        objectName: 'appicon_margin_toscreenborder_scale',
+        objectName: 'panel_side_margins_scale',
-        valueName: 'appicon-margin-toscreenborder',
+        valueName: 'panel-side-margins',
         range: DEFAULT_MARGIN_SIZES,
       },
       {
@@ -3847,41 +3847,42 @@ const BuilderScope = GObject.registerClass(
       )
     }
 
-    appicon_margin_todesktop_scale_value_changed_cb(scale) {
+    panel_top_bottom_margins_scale_value_changed_cb(scale) {
       // Avoid settings the size consinuosly
-      if (this._preferences._appicon_margin_todesktop_timeout > 0)
+      if (this._preferences._panel_top_bottom_margins_timeout > 0)
-        GLib.Source.remove(this._preferences._appicon_margin_todesktop_timeout)
+        GLib.Source.remove(this._preferences._panel_top_bottom_margins_timeout)
 
-      this._preferences._appicon_margin_todesktop_timeout = GLib.timeout_add(
+      this._preferences._panel_top_bottom_margins_timeout = GLib.timeout_add(
         GLib.PRIORITY_DEFAULT,
         SCALE_UPDATE_TIMEOUT,
         () => {
           this._preferences._settings.set_int(
-            'appicon-margin-todesktop',
+            'panel-top-bottom-margins',
             scale.get_value(),
           )
-          this._preferences._appicon_margin_todesktop_timeout = 0
+          this._preferences._panel_top_bottom_margins_timeout = 0
           return GLib.SOURCE_REMOVE
         },
       )
     }
 
-    appicon_margin_toscreenborder_scale_value_changed_cb(scale) {
+    panel_side_margins_scale_value_changed_cb(scale) {
       // Avoid settings the size consinuosly
-      if (this._preferences._appicon_margin_toscreenborder_timeout > 0)
+      if (this._preferences._panel_side_margins_timeout > 0)
-        GLib.Source.remove(
+        GLib.Source.remove(this._preferences._panel_side_margins_timeout)
-          this._preferences._appicon_margin_toscreenborder_timeout,
-        )
 
-      this._preferences._appicon_margin_toscreenborder_timeout =
+      this._preferences._panel_side_margins_timeout = GLib.timeout_add(
-        GLib.timeout_add(GLib.PRIORITY_DEFAULT, SCALE_UPDATE_TIMEOUT, () => {
+        GLib.PRIORITY_DEFAULT,
+        SCALE_UPDATE_TIMEOUT,
+        () => {
           this._preferences._settings.set_int(
-            'appicon-margin-toscreenborder',
+            'panel-side-margins',
             scale.get_value(),
           )
-          this._preferences._appicon_margin_toscreenborder_timeout = 0
+          this._preferences._panel_side_margins_timeout = 0
           return GLib.SOURCE_REMOVE
-        })
+        },
+      )
     }
 
     appicon_padding_scale_value_changed_cb(scale) {

ui/SettingsStyle.ui

@@ -86,40 +86,6 @@
             </child>
           </object>
         </child>
-        <child>
-          <object class="AdwActionRow">
-            <property name="subtitle" translatable="yes">(default is 0)</property>
-            <property name="title" translatable="yes">App Icon Margin Towards Desktop</property>
-            <child>
-              <object class="GtkScale" id="appicon_margin_todesktop_scale">
-                <property name="adjustment">appicon_margin_todesktop_adjustment</property>
-                <property name="digits">0</property>
-                <property name="draw-value">True</property>
-                <property name="round-digits">0</property>
-                <property name="value-pos">right</property>
-                <property name="width-request">300</property>
-                <signal name="value-changed" handler="appicon_margin_todesktop_scale_value_changed_cb"/>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="AdwActionRow">
-            <property name="subtitle" translatable="yes">(default is 0)</property>
-            <property name="title" translatable="yes">App Icon Margin Towards Screen Border</property>
-            <child>
-              <object class="GtkScale" id="appicon_margin_toscreenborder_scale">
-                <property name="adjustment">appicon_margin_toscreenborder_adjustment</property>
-                <property name="digits">0</property>
-                <property name="draw-value">True</property>
-                <property name="round-digits">0</property>
-                <property name="value-pos">right</property>
-                <property name="width-request">300</property>
-                <signal name="value-changed" handler="appicon_margin_toscreenborder_scale_value_changed_cb"/>
-              </object>
-            </child>
-          </object>
-        </child>
         <child>
           <object class="AdwActionRow">
             <property name="subtitle" translatable="yes">(default is 4)</property>
@@ -297,6 +263,44 @@
     <child>
       <object class="AdwPreferencesGroup" id="style_group_dynamic_trans">
         <property name="title" translatable="yes">Panel style</property>
+        <child>
+          <object class="AdwActionRow">
+            <property name="subtitle" translatable="yes">(default is 0)</property>
+            <property name="title" translatable="yes">Side margins</property>
+            <child>
+              <object class="GtkScale" id="panel_side_margins_scale">
+                <property name="adjustment">appicon_margin_todesktop_adjustment</property>
+                <property name="digits">0</property>
+                <property name="draw-value">True</property>
+                <property name="round-digits">0</property>
+                <property name="value-pos">right</property>
+                <property name="width-request">300</property>
+                <signal name="value-changed" handler="panel_side_margins_scale_value_changed_cb"/>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow">
+            <property name="subtitle" translatable="yes">(default is 0)</property>
+            <property name="title" translatable="yes">Top and bottom margins</property>
+            <child>
+              <object class="GtkScale" id="panel_top_bottom_margins_scale">
+                <property name="adjustment">appicon_margin_toscreenborder_adjustment</property>
+                <property name="digits">0</property>
+                <property name="draw-value">True</property>
+                <property name="round-digits">0</property>
+                <property name="value-pos">right</property>
+                <property name="width-request">300</property>
+                <signal name="value-changed" handler="panel_top_bottom_margins_scale_value_changed_cb"/>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup" id="style_group_dynamic_trans2">
         <child>
           <object class="AdwActionRow">
             <property name="title" translatable="yes">Override panel theme background color</property>
@@ -312,10 +316,6 @@
             </child>
           </object>
         </child>
-      </object>
-    </child>
-    <child>
-      <object class="AdwPreferencesGroup" id="style_group_dynamic_trans2">
         <child>
           <object class="AdwActionRow">
             <property name="title" translatable="yes">Override panel theme background opacity</property>