Merge pull request #2153 from Hirnmoder/panel-border

Add option to add and customize a panel border

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

@@ -331,6 +331,26 @@
       <summary>Custom gradient bottom opacity</summary>
       <description>Custom gradient bottom opacity for the panel</description>
     </key>
+    <key type="b" name="trans-use-border">
+      <default>false</default>
+      <summary>Display border</summary>
+      <description>Display a border between panel and the rest of the desktop</description>
+    </key>
+    <key type="i" name="trans-border-width">
+      <default>1</default>
+      <summary>Width of panel border</summary>
+      <description>Customize the width of the panel border</description>
+    </key>
+    <key type="b" name="trans-border-use-custom-color">
+      <default>false</default>
+      <summary>Override panel border color</summary>
+      <description>Replace current panel border color</description>
+    </key>
+    <key type="s" name="trans-border-custom-color">
+      <default>"rgba(200,200,200,0.2)"</default>
+      <summary>Custom panel border color</summary>
+      <description>Custom panel border color</description>
+    </key>
     <key type="b" name="intellihide">
       <default>false</default>
       <summary>Intellihide</summary>

src/panel.js

@@ -1441,10 +1441,16 @@ export const Panel = GObject.registerClass(
       }
     }
 
-    _setShowDesktopButtonStyle() {
+    _getDefaultLineColor(isBrightOverride) {
-      let rgb = this._getBackgroundBrightness()
+      return (typeof isBrightOverride === 'undefined' &&
+        this._getBackgroundBrightness()) ||
+        isBrightOverride
         ? 'rgba(55, 55, 55, .2)'
         : 'rgba(200, 200, 200, .2)'
+    }
+
+    _setShowDesktopButtonStyle() {
+      let rgb = this._getDefaultLineColor()
 
       let isLineCustom = SETTINGS.get_boolean('desktop-line-use-custom-color')
       rgb = isLineCustom

src/prefs.js

@@ -1481,6 +1481,61 @@ const Preferences = class {
         dialog.set_default_size(1, 1)
       })
 
+    // Panel border
+    this._settings.bind(
+      'trans-use-border',
+      this._builder.get_object('trans_border_switch'),
+      'active',
+      Gio.SettingsBindFlags.DEFAULT,
+    )
+
+    this._settings.bind(
+      'trans-use-border',
+      this._builder.get_object('trans_border_color_box'),
+      'sensitive',
+      Gio.SettingsBindFlags.DEFAULT,
+    )
+
+    this._settings.bind(
+      'trans-use-border',
+      this._builder.get_object('trans_border_width_box'),
+      'sensitive',
+      Gio.SettingsBindFlags.DEFAULT,
+    )
+
+    this._settings.bind(
+      'trans-border-use-custom-color',
+      this._builder.get_object('trans_border_color_switch'),
+      'active',
+      Gio.SettingsBindFlags.DEFAULT,
+    )
+
+    this._settings.bind(
+      'trans-border-use-custom-color',
+      this._builder.get_object('trans_border_color_colorbutton'),
+      'sensitive',
+      Gio.SettingsBindFlags.DEFAULT,
+    )
+
+    rgba.parse(this._settings.get_string('trans-border-custom-color'))
+    this._builder.get_object('trans_border_color_colorbutton').set_rgba(rgba)
+    this._builder
+      .get_object('trans_border_color_colorbutton')
+      .connect('color-set', (button) => {
+        let rgba = button.get_rgba()
+        let css = rgba.to_string()
+        this._settings.set_string('trans-border-custom-color', css)
+      })
+
+    this._builder
+      .get_object('trans_border_width_spinbutton')
+      .set_value(this._settings.get_int('trans-border-width'))
+    this._builder
+      .get_object('trans_border_width_spinbutton')
+      .connect('value-changed', (widget) => {
+        this._settings.set_int('trans-border-width', widget.get_value())
+      })
+
     this._settings.bind(
       'desktop-line-use-custom-color',
       this._builder.get_object('override_show_desktop_line_color_switch'),

src/transparency.js

@@ -48,7 +48,7 @@ export const DynamicTransparency = class {
   }
 
   updateExternalStyle() {
-    this._setBackground()
+    this._setStyle()
   }
 
   _bindSignals() {
@@ -82,6 +82,16 @@ export const DynamicTransparency = class {
         ],
         () => this._updateGradientAndSet(),
       ],
+      [
+        SETTINGS,
+        [
+          'changed::trans-use-border',
+          'changed::trans-border-use-custom-color',
+          'changed::trans-border-custom-color',
+          'changed::trans-border-width',
+        ],
+        () => this._updateBorderAndSet(),
+      ],
       [
         SETTINGS,
         [
@@ -133,24 +143,32 @@ export const DynamicTransparency = class {
 
     this._updateColor(themeBackground)
     this._updateAlpha(themeBackground)
+    this._updateBorder()
+    this._updateBackground()
     this._updateGradient()
-    this._setBackground()
+    this._setStyle()
-    this._setGradient()
   }
 
   _updateColorAndSet() {
     this._updateColor()
-    this._setBackground()
+    this._updateBackground()
+    this._setStyle()
   }
 
   _updateAlphaAndSet() {
     this._updateAlpha()
-    this._setBackground()
+    this._updateBackground()
+    this._setStyle()
+  }
+
+  _updateBorderAndSet() {
+    this._updateBorder()
+    this._setStyle()
   }
 
   _updateGradientAndSet() {
     this._updateGradient()
-    this._setGradient()
+    this._setStyle()
   }
 
   _updateColor(themeBackground) {
@@ -173,10 +191,43 @@ export const DynamicTransparency = class {
     }
   }
 
+  _updateBorder() {
+    let rgba = this._dtpPanel._getDefaultLineColor(
+      Utils.checkIfColorIsBright(this.backgroundColorRgb),
+    ) // supply parameter manually or else an exception (something is undefined) will arise
+    const isLineCustom = SETTINGS.get_boolean('trans-border-use-custom-color')
+    rgba = isLineCustom
+      ? SETTINGS.get_string('trans-border-custom-color')
+      : rgba
+
+    const showBorder = SETTINGS.get_boolean('trans-use-border')
+    const borderWidth = SETTINGS.get_int('trans-border-width')
+
+    const position = this._dtpPanel.getPosition()
+    let borderPosition = ''
+    if (position == St.Side.LEFT) {
+      borderPosition = 'right'
+    }
+    if (position == St.Side.RIGHT) {
+      borderPosition = 'left'
+    }
+    if (position == St.Side.TOP) {
+      borderPosition = 'bottom'
+    }
+    if (position == St.Side.BOTTOM) {
+      borderPosition = 'top'
+    }
+
+    const style = `border: 0 solid ${rgba}; border-${borderPosition}-width:${borderWidth}px; `
+    this._borderStyle = showBorder ? style : ''
+  }
+
   _updateGradient() {
     this._gradientStyle = ''
 
     if (SETTINGS.get_boolean('trans-use-custom-gradient')) {
+      this._backgroundStyle =
+        'background: none; border-image: none; background-image: none;'
       this._gradientStyle +=
         'background-gradient-direction: ' +
         (this._dtpPanel.geom.vertical ? 'horizontal;' : 'vertical;') +
@@ -190,31 +241,30 @@ export const DynamicTransparency = class {
           SETTINGS.get_string('trans-gradient-bottom-color'),
           SETTINGS.get_double('trans-gradient-bottom-opacity'),
         )
+    } else {
+      this._updateBackground()
     }
   }
 
-  _setBackground() {
+  _updateBackground() {
     this.currentBackgroundColor = Utils.getrgbaColor(
       this.backgroundColorRgb,
       this.alpha,
     )
 
-    let transition = 'transition-duration:' + this.animationDuration
+    this._backgroundStyle = `background-color: ${this.currentBackgroundColor}`
-
-    this._dtpPanel.set_style(
-      'background-color: ' + this.currentBackgroundColor + transition,
-    )
   }
 
-  _setGradient() {
+  _setStyle() {
+    const transition = 'transition-duration:' + this.animationDuration
+
     this._dtpPanel.panel.set_style(
-      'background: none; ' +
+      transition +
-        'border-image: none; ' +
+        this._backgroundStyle +
-        'background-image: none; ' +
         this._gradientStyle +
-        'transition-duration:' +
+        this._borderStyle,
-        this.animationDuration,
     )
+    console.log('Set DTP Panel style to', this._dtpPanel.panel.get_style())
   }
 
   _getThemeBackground(reload) {

ui/SettingsStyle.ui

@@ -54,6 +54,20 @@
     <property name="step-increment">5</property>
     <property name="upper">100</property>
   </object>
+
+  <object class="GtkAdjustment" id="trans_border_opacity_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">5</property>
+    <property name="page_increment">10</property>
+  </object>
+
+  <object class="GtkAdjustment" id="trans_border_width_adjustment">
+    <property name="lower">1</property>
+    <property name="upper">10</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">2</property>
+  </object>
+
   <object class="AdwPreferencesPage" id="style">
     <property name="icon-name">applications-graphics-symbolic</property>
     <property name="title" translatable="yes">Style</property>
@@ -454,6 +468,52 @@
         </child>
       </object>
     </child>
+
+    <!-- group dynamic trans4 -->
+    <child>
+      <object class="AdwPreferencesGroup" id="style_group_dynamic_trans4">
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Panel border</property>
+            <child>
+              <object class="GtkSwitch" id="trans_border_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow" id="trans_border_color_box">
+            <property name="title" translatable="yes">Override border color</property>
+            <child>
+              <object class="GtkColorButton" id="trans_border_color_colorbutton">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <property name="use_alpha">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="trans_border_color_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow" id="trans_border_width_box">
+            <property name="title" translatable="yes">Border thickness</property>
+            <child>
+              <object class="GtkSpinButton" id="trans_border_width_spinbutton">
+                <property name="valign">center</property>
+                <property name="text" translatable="yes">1</property>
+                <property name="adjustment">trans_border_width_adjustment</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+
   </object>
   <object class="GtkAdjustment" id="global_border_radius_adjustment">
     <property name="lower">0.33</property>