Add dynamic length (dock mode) option

gh-1579

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

@@ -92,7 +92,7 @@
     </key>
     <key type="s" name="panel-lengths">
       <default>'{}'</default>
-      <summary>Percentages of screen edge for panel to span</summary>
+      <summary>Percentages of screen edge for panel to span, -1 for dynamic length (dock mode)</summary>
       <description>Length of the panels, in percent (JSON).</description>
     </key>
     <key type="s" name="panel-anchors">

src/panel.js

@@ -518,7 +518,9 @@ export const Panel = GObject.registerClass(
             return
           }
 
-          let currentPosition = pos.position
+          // if the panel length is dynamic, get all visible
+          // elements as a single group
+          let currentPosition = this.geom.dynamic || pos.position
           let isCentered = Pos.checkIfCentered(currentPosition)
 
           if (
@@ -702,9 +704,13 @@ export const Panel = GObject.registerClass(
       let topPadding = panelBoxTheme.get_padding(St.Side.TOP)
       let tbPadding = topPadding + panelBoxTheme.get_padding(St.Side.BOTTOM)
       let position = this.getPosition()
-      let length =
-        PanelSettings.getPanelLength(SETTINGS, this.monitor.index) / 100
+      let panelLength = PanelSettings.getPanelLength(
+        SETTINGS,
+        this.monitor.index,
+      )
       let anchor = PanelSettings.getPanelAnchor(SETTINGS, this.monitor.index)
+      let dynamic = panelLength == -1 ? Pos.anchorToPosition[anchor] : 0
+      let length = (dynamic ? 100 : panelLength) / 100
       let anchorPlaceOnMonitor = 0
       let gsTopPanelOffset = 0
       let x = 0,
@@ -792,6 +798,7 @@ export const Panel = GObject.registerClass(
         lrPadding,
         tbPadding,
         position,
+        dynamic,
       }
     }
 
@@ -825,14 +832,12 @@ export const Panel = GObject.registerClass(
     }
 
     vfunc_allocate(box) {
-      this.set_allocation(box)
-
       let fixed = 0
       let centeredMonitorGroup
       let panelAlloc = new Clutter.ActorBox({
         x1: 0,
-        y1: 0,
         x2: this.geom.w,
+        y1: 0,
         y2: this.geom.h,
       })
       let assignGroupSize = (group, update) => {
@@ -945,8 +950,6 @@ export const Panel = GObject.registerClass(
         ++fixed
       }
 
-      this.panel.allocate(panelAlloc)
-
       this._elementGroups.forEach((group) => {
         group.fixed = 0
 
@@ -957,6 +960,39 @@ export const Panel = GObject.registerClass(
         }
       })
 
+      if (this.geom.dynamic && this._elementGroups.length == 1) {
+        let dynamicGroup = this._elementGroups[0] // only one group if dynamic
+        let tl = 0
+        let br = 0
+
+        if (this.geom.dynamic == Pos.STACKED_TL) {
+          br = Math.min(box[this.varCoord.c2], dynamicGroup.size)
+        } else if (this.geom.dynamic == Pos.STACKED_BR) {
+          tl = Math.max(box[this.varCoord.c2] - dynamicGroup.size, 0)
+          br = box[this.varCoord.c2]
+        } else {
+          // CENTERED_MONITOR
+          let half = Math.max(
+            0,
+            (box[this.varCoord.c2] - dynamicGroup.size) * 0.5,
+          )
+
+          tl = box[this.varCoord.c1] + half
+          br = box[this.varCoord.c2] - half
+        }
+
+        box[this.varCoord.c1] = tl
+        box[this.varCoord.c2] = br
+
+        panelAlloc[this.varCoord.c2] = Math.min(
+          dynamicGroup.size,
+          panelAlloc[this.varCoord.c2],
+        )
+      }
+
+      this.set_allocation(box)
+      this.panel.allocate(panelAlloc)
+
       if (centeredMonitorGroup) {
         allocateGroup(
           centeredMonitorGroup,

src/panelPositions.js

@@ -51,6 +51,12 @@ export const defaults = [
   { element: DESKTOP_BTN, visible: true, position: STACKED_BR },
 ]
 
+export const anchorToPosition = {
+  [START]: STACKED_TL,
+  [MIDDLE]: CENTERED_MONITOR,
+  [END]: STACKED_BR,
+}
+
 export const optionDialogFunctions = {}
 
 optionDialogFunctions[SHOW_APPS_BTN] = '_showShowAppsButtonOptions'

src/panelSettings.js

@@ -142,15 +142,17 @@ export function setPanelSize(settings, monitorIndex, value) {
 
 /**
  * Returns length of panel on a specific monitor, as a whole number percent,
- * from settings. e.g. 100
+ * from settings. e.g. 100, or -1 for a dynamic panel length
  */
 export function getPanelLength(settings, monitorIndex) {
   return getMonitorSetting(settings, 'panel-lengths', monitorIndex, 100)
 }
 
 export function setPanelLength(settings, monitorIndex, value) {
-  if (!(Number.isInteger(value) && value <= 100 && value >= 0)) {
-    console.log('Not setting invalid panel length: ' + value)
+  if (
+    !(Number.isInteger(value) && ((value <= 100 && value >= 20) || value == -1))
+  ) {
+    console.log('Not setting invalid panel length: ' + value, new Error().stack)
     return
   }
 

src/prefs.js

@@ -43,7 +43,7 @@ const DEFAULT_FONT_SIZES = [96, 64, 48, 32, 24, 16, 0]
 const DEFAULT_MARGIN_SIZES = [32, 24, 16, 12, 8, 4, 0]
 const DEFAULT_PADDING_SIZES = [32, 24, 16, 12, 8, 4, 0, -1]
 // Minimum length could be 0, but a higher value may help prevent confusion about where the panel went.
-const LENGTH_MARKS = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
+const LENGTH_MARKS = [100, 90, 80, 70, 60, 50, 40, 30, 20]
 const MAX_WINDOW_INDICATOR = 4
 
 const SCHEMA_PATH = '/org/gnome/shell/extensions/dash-to-panel/'
@@ -427,28 +427,50 @@ const Preferences = class {
     panel_size_scale.set_value(size)
 
     const panel_length_scale = this._builder.get_object('panel_length_scale')
+    const dynamicLengthButton = this._builder.get_object(
+      'panel_length_dynamic_button',
+    )
     const length = PanelSettings.getPanelLength(this._settings, monitorIndex)
-    panel_length_scale.set_value(length)
-    this._setAnchorWidgetSensitivity(length)
+    const isDynamicLength = length == -1
+
+    dynamicLengthButton.set_active(isDynamicLength)
+    panel_length_scale.set_value(isDynamicLength ? 100 : length)
 
     this._setAnchorLabels(monitorIndex)
 
     // Update display of panel content settings
     this._displayPanelPositionsForMonitor(monitorIndex)
+
+    this._setPanelLenghtWidgetSensitivity(length)
   }
 
   /**
    * Anchor is only relevant if panel length is less than 100%. Enable or disable
    * anchor widget sensitivity accordingly.
    */
-  _setAnchorWidgetSensitivity(panelLength) {
+  _setPanelLenghtWidgetSensitivity(panelLength) {
+    const taskbarListBox = this._builder.get_object('taskbar_display_listbox')
+    let i = 0
+    let row
+    const isDynamicLength = panelLength == -1
     const isPartialLength = panelLength < 100
+
+    this._builder
+      .get_object('panel_length_scale')
+      .set_sensitive(!isDynamicLength)
     this._builder
       .get_object('panel_anchor_label')
       .set_sensitive(isPartialLength)
     this._builder
       .get_object('panel_anchor_combo')
       .set_sensitive(isPartialLength)
+
+    while ((row = taskbarListBox.get_row_at_index(i++)) != null) {
+      let grid = row.get_child()
+      let positionCombo = grid.get_child_at(4, 0)
+
+      positionCombo.set_sensitive(!isDynamicLength)
+    }
   }
 
   _displayPanelPositionsForMonitor(monitorIndex) {
@@ -1349,9 +1371,7 @@ const Preferences = class {
       this._builder.get_object('multimon_multi_switch').set_sensitive(false)
     }
 
-    const panel_length_scale = this._builder.get_object('panel_length_scale')
-    panel_length_scale.connect('value-changed', (widget) => {
-      const value = widget.get_value()
+    let setPanelLength = (value) => {
       const monitorSync = this._settings.get_boolean(
         'panel-element-positions-monitors-sync',
       )
@@ -1362,7 +1382,31 @@ const Preferences = class {
         PanelSettings.setPanelLength(this._settings, monitorIndex, value)
       })
 
-      this._setAnchorWidgetSensitivity(value)
+      maybeSetPanelLengthScaleValueChange(value)
+      this._setPanelLenghtWidgetSensitivity(value)
+    }
+    let panelLengthScaleValueChangeId = 0
+    let maybeSetPanelLengthScaleValueChange = (value) => {
+      const panel_length_scale = this._builder.get_object('panel_length_scale')
+
+      if (panelLengthScaleValueChangeId) {
+        panel_length_scale.disconnect(panelLengthScaleValueChangeId)
+        panelLengthScaleValueChangeId = 0
+      }
+
+      if (value != -1) {
+        panelLengthScaleValueChangeId = panel_length_scale.connect(
+          'value-changed',
+          () => setPanelLength(panel_length_scale.get_value()),
+        )
+      } else panel_length_scale.set_value(100)
+    }
+
+    const dynamicLengthButton = this._builder.get_object(
+      'panel_length_dynamic_button',
+    )
+    dynamicLengthButton.connect('notify::active', () => {
+      setPanelLength(dynamicLengthButton.get_active() ? -1 : 100)
     })
 
     this._builder
@@ -3114,10 +3158,12 @@ const Preferences = class {
       size_scale.set_range(range[range.length - 1], range[0])
       let value
       if (sizeScales[idx].objectName === 'panel_length_scale') {
-        value = PanelSettings.getPanelLength(
+        let length = PanelSettings.getPanelLength(
           this._settings,
           this._currentMonitorIndex,
         )
+
+        value = length == -1 ? 100 : length
       } else {
         value = this._settings.get_int(sizeScales[idx].valueName)
       }
@@ -3143,6 +3189,10 @@ const Preferences = class {
       }
     }
 
+    maybeSetPanelLengthScaleValueChange(
+      PanelSettings.getPanelLength(this._settings, this._currentMonitorIndex),
+    )
+
     this._settings.bind(
       'animate-app-switch',
       this._builder.get_object('animate_app_switch_switch'),

ui/SettingsPosition.ui

@@ -1,243 +1,226 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version='1.0' encoding='UTF-8'?>
 <interface>
+  <!-- interface-name SettingsPosition.ui -->
   <requires lib="gtk" version="4.0"/>
-
+  <requires lib="libadwaita" version="1.6"/>
   <object class="GtkAdjustment" id="panel_size_adjustment">
     <property name="lower">0.33</property>
+    <property name="page-increment">0.1</property>
+    <property name="step-increment">0.01</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="panel_length_adjustment">
-    <property name="upper">100</property>
-    <property name="step_increment">0.01</property>
-    <property name="page_increment">0.1</property>
+    <property name="page-increment">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="upper">1</property>
   </object>
-
   <object class="AdwPreferencesPage" id="position">
+    <property name="icon-name">find-location-symbolic</property>
     <property name="title" translatable="yes">Position</property>
-    <property name="icon_name">find-location-symbolic</property>
-
-      <!-- group panel -->
-      <child>
-        <object class="AdwPreferencesGroup" id="position_group_panel">
-          <property name="title" translatable="yes">Panel</property>
-
-          <child>
-            <object class="AdwActionRow">
-              <property name="title" translatable="yes">Display the main panel on</property>
-              <child>
-                <object class="GtkComboBoxText" id="multimon_primary_combo">
-                  <property name="valign">center</property>
-                </object>
-              </child>
-            </object>
-          </child>
-
-          <child>
-            <object class="AdwActionRow">
-              <property name="title" translatable="yes">Display panels on all monitors</property>
-              <child>
-                <object class="GtkSwitch" id="multimon_multi_switch">
-                  <property name="valign">center</property>
-                </object>
-              </child>
-            </object>
-          </child>
-
-        </object>
-      </child>
-      <child>
-        <object class="AdwPreferencesGroup" id="position_group_panel2">
-
-          <child>
-            <object class="AdwActionRow">
-              <property name="title" translatable="yes">Panel Intellihide</property>
-              <property name="subtitle" translatable="yes">Hide and reveal the panel according to preferences</property>
-              <child>
-                <object class="GtkButton" id="intellihide_options_button">
-                  <property name="receives_default">True</property>
-                  <property name="valign">center</property>
-                  <child>
-                    <object class="GtkImage" id="image_intellihide_options">
-                      <property name="icon_name">emblem-system-symbolic</property>
-                    </object>
-                  </child>
-                  <style>
-                    <class name="circular"/>
-                  </style>
-                </object>
-              </child>
-              <child>
-                <object class="GtkSwitch" id="intellihide_switch">
-                  <property name="valign">center</property>
-                </object>
-              </child>
-            </object>
-          </child>
-
-        </object>
-      </child>
-
-      <!-- group order and positions -->
-      <child>
-        <object class="AdwPreferencesGroup" id="position_group_on_monitor">
-          <property name="title" translatable="yes">Order and Position on monitors</property>
-          
-
-          <child>
-            <object class="AdwPreferencesRow">
-              <property name="title" translatable="yes">Monitor</property>
-              <child>
-                <object class="GtkBox">
-                  <property name="margin-start">6</property>
-                  <property name="margin-end">6</property>
-                  <property name="margin-top">6</property>
-                  <property name="margin-bottom">6</property>
-                  <child>
-                    <object class="GtkCheckButton" id="taskbar_position_sync_button">
-                      <property name="label" translatable="yes">Apply changes to all monitors</property>
-                      <property name="receives_default">False</property>
-                      <property name="halign">start</property>
-                      <property name="hexpand">True</property>
-                    </object>
-                  </child>
-                  <child>
-                    <object class="GtkComboBoxText" id="taskbar_position_monitor_combo">
-                      <property name="halign">end</property>
-                      <property name="valign">center</property>
-                      <property name="hexpand">True</property>
-                    </object>
-                  </child>
-                </object>
-              </child>
-            </object>
-          </child>
-
-        </object>
-      </child>
-
-      <!-- group order and positions 2 -->
-      <child>
-        <object class="AdwPreferencesGroup" id="position_group_on_monitor2">
-
-          <child>
-            <object class="AdwActionRow">
-              <property name="title" translatable="yes">Panel screen position</property>
-              <child>
-                <object class="GtkToggleButton" id="position_bottom_button">
-                  <property name="label" translatable="yes">Bottom</property>
-                  <property name="receives_default">False</property>
-                  <property name="valign">center</property>
-                  <property name="active">True</property>
-                  <signal name="clicked" handler="position_bottom_button_clicked_cb"/>
-                </object>
-              </child>
-              <child>
-                <object class="GtkToggleButton" id="position_top_button">
-                  <property name="label" translatable="yes">Top</property>
-                  <property name="receives_default">False</property>
-                  <property name="valign">center</property>
-                  <property name="group">position_bottom_button</property>
-                  <signal name="clicked" handler="position_top_button_clicked_cb"/>
-                </object>
-              </child>
-              <child>
-                <object class="GtkToggleButton" id="position_left_button">
-                  <property name="label" translatable="yes">Left</property>
-                  <property name="receives_default">False</property>
-                  <property name="valign">center</property>
-                  <property name="group">position_bottom_button</property>
-                  <signal name="clicked" handler="position_left_button_clicked_cb"/>
-                </object>
-              </child>
-              <child>
-                <object class="GtkToggleButton" id="position_right_button">
-                  <property name="label" translatable="yes">Right</property>
-                  <property name="receives_default">False</property>
-                  <property name="valign">center</property>
-                  <property name="group">position_bottom_button</property>
-                  <signal name="clicked" handler="position_right_button_clicked_cb"/>
-                </object>
-              </child>
-            </object>
-          </child>
-
-          <child>
-            <object class="AdwActionRow">
-              <property name="title" translatable="yes">Panel thickness</property>
-              <property name="subtitle" translatable="yes">(default is 48)</property>
-              <child>
-                <object class="GtkScale" id="panel_size_scale">
-                  <property name="width-request">300</property>
-                  <property name="adjustment">panel_size_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="panel_size_scale_value_changed_cb"/>
-                </object>
-              </child>
-            </object>
-          </child>
-
-          <child>
-            <object class="AdwActionRow">
-              <property name="title" translatable="yes">Panel length (%)</property>
-              <property name="subtitle" translatable="yes">(default is 100)</property>
-              <child>
-                <object class="GtkScale" id="panel_length_scale">
-                  <property name="width-request">300</property>
-                  <property name="adjustment">panel_length_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>
-
-          <child>
-            <object class="AdwActionRow" id="panel_anchor_label">
-              <property name="title" translatable="yes">Anchor</property>
-              <child>
-                <object class="GtkComboBoxText" id="panel_anchor_combo">
-                  <property name="valign">center</property>
-                  <items>
-                    <item id="START" translatable="yes">Start</item>
-                    <item id="MIDDLE" translatable="yes">Middle</item>
-                    <item id="END" translatable="yes">End</item>
-                  </items>
-                </object>
-              </child>
-            </object>
-          </child>
-
-        </object>
-      </child>
-
-      <!-- group order and positions 3 -->
-      <child>
-        <object class="AdwPreferencesGroup" id="position_group_on_monitor3">
-
-          <child>
-            <object class="AdwPreferencesRow">
-              <property name="title" translatable="yes">Taskbar Display</property>
-              <child>
-                <object class="GtkListBox" id="taskbar_display_listbox">
-                  <property name="margin-top">6</property>
-                  <property name="margin-bottom">6</property>
-                  <property name="visible">True</property>
-                  <property name="selection_mode">none</property>
-                </object>
-              </child>
-            </object>
-          </child>
-
-        </object>
-      </child>
-
+    <child>
+      <object class="AdwPreferencesGroup" id="position_group_panel">
+        <property name="title" translatable="yes">Panel</property>
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Display the main panel on</property>
+            <child>
+              <object class="GtkComboBoxText" id="multimon_primary_combo">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Display panels on all monitors</property>
+            <child>
+              <object class="GtkSwitch" id="multimon_multi_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup" id="position_group_panel2">
+        <child>
+          <object class="AdwActionRow">
+            <property name="subtitle" translatable="yes">Hide and reveal the panel according to preferences</property>
+            <property name="title" translatable="yes">Panel Intellihide</property>
+            <child>
+              <object class="GtkButton" id="intellihide_options_button">
+                <property name="receives-default">True</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage" id="image_intellihide_options">
+                    <property name="icon-name">emblem-system-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="intellihide_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup" id="position_group_on_monitor">
+        <property name="title" translatable="yes">Order and Position on monitors</property>
+        <child>
+          <object class="AdwPreferencesRow">
+            <property name="title" translatable="yes">Monitor</property>
+            <child>
+              <object class="GtkBox">
+                <property name="margin-bottom">6</property>
+                <property name="margin-end">6</property>
+                <property name="margin-start">6</property>
+                <property name="margin-top">6</property>
+                <child>
+                  <object class="GtkCheckButton" id="taskbar_position_sync_button">
+                    <property name="halign">start</property>
+                    <property name="hexpand">True</property>
+                    <property name="label" translatable="yes">Apply changes to all monitors</property>
+                    <property name="receives-default">False</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkComboBoxText" id="taskbar_position_monitor_combo">
+                    <property name="halign">end</property>
+                    <property name="hexpand">True</property>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup" id="position_group_on_monitor2">
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Panel screen position</property>
+            <child>
+              <object class="GtkToggleButton" id="position_bottom_button">
+                <property name="active">True</property>
+                <property name="label" translatable="yes">Bottom</property>
+                <property name="receives-default">False</property>
+                <property name="valign">center</property>
+                <signal name="clicked" handler="position_bottom_button_clicked_cb"/>
+              </object>
+            </child>
+            <child>
+              <object class="GtkToggleButton" id="position_top_button">
+                <property name="group">position_bottom_button</property>
+                <property name="label" translatable="yes">Top</property>
+                <property name="receives-default">False</property>
+                <property name="valign">center</property>
+                <signal name="clicked" handler="position_top_button_clicked_cb"/>
+              </object>
+            </child>
+            <child>
+              <object class="GtkToggleButton" id="position_left_button">
+                <property name="group">position_bottom_button</property>
+                <property name="label" translatable="yes">Left</property>
+                <property name="receives-default">False</property>
+                <property name="valign">center</property>
+                <signal name="clicked" handler="position_left_button_clicked_cb"/>
+              </object>
+            </child>
+            <child>
+              <object class="GtkToggleButton" id="position_right_button">
+                <property name="group">position_bottom_button</property>
+                <property name="label" translatable="yes">Right</property>
+                <property name="receives-default">False</property>
+                <property name="valign">center</property>
+                <signal name="clicked" handler="position_right_button_clicked_cb"/>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow">
+            <property name="subtitle" translatable="yes">(default is 48)</property>
+            <property name="title" translatable="yes">Panel thickness</property>
+            <child>
+              <object class="GtkScale" id="panel_size_scale">
+                <property name="adjustment">panel_size_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_size_scale_value_changed_cb"/>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow">
+            <property name="subtitle" translatable="yes">(default is 100)</property>
+            <property name="title" translatable="yes">Panel length</property>
+            <child>
+              <object class="GtkCheckButton" id="panel_length_dynamic_button">
+                <property name="halign">start</property>
+                <property name="hexpand">True</property>
+                <property name="label" translatable="yes">Dynamic</property>
+                <property name="receives-default">False</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkScale" id="panel_length_scale">
+                <property name="adjustment">panel_length_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>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow" id="panel_anchor_label">
+            <property name="title" translatable="yes">Anchor</property>
+            <child>
+              <object class="GtkComboBoxText" id="panel_anchor_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="START" translatable="yes">Start</item>
+                  <item id="MIDDLE" translatable="yes">Middle</item>
+                  <item id="END" translatable="yes">End</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="AdwPreferencesGroup" id="position_group_on_monitor3">
+        <child>
+          <object class="AdwPreferencesRow">
+            <property name="title" translatable="yes">Taskbar Display</property>
+            <child>
+              <object class="GtkListBox" id="taskbar_display_listbox">
+                <property name="margin-bottom">6</property>
+                <property name="margin-top">6</property>
+                <property name="selection-mode">none</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
   </object>
-</interface>
+</interface>