diff --git a/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml b/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
index ffa73dc..81c51e1 100644
--- a/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
+++ b/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
@@ -331,6 +331,26 @@
Custom gradient bottom opacity
Custom gradient bottom opacity for the panel
+
+ false
+ Display border
+ Display a border between panel and the rest of the desktop
+
+
+ 1
+ Width of panel border
+ Customize the width of the panel border
+
+
+ false
+ Override panel border color
+ Replace current panel border color
+
+
+ "rgba(200,200,200,0.2)"
+ Custom panel border color
+ Custom panel border color
+
false
Intellihide
diff --git a/src/panel.js b/src/panel.js
index 4b1b946..2474144 100644
--- a/src/panel.js
+++ b/src/panel.js
@@ -1441,10 +1441,16 @@ export const Panel = GObject.registerClass(
}
}
- _setShowDesktopButtonStyle() {
- let rgb = this._getBackgroundBrightness()
+ _getDefaultLineColor(isBrightOverride) {
+ 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
diff --git a/src/prefs.js b/src/prefs.js
index 1efbbc3..e2c8b1f 100644
--- a/src/prefs.js
+++ b/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'),
diff --git a/src/transparency.js b/src/transparency.js
index 6879a40..f08733f 100644
--- a/src/transparency.js
+++ b/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._setGradient()
+ this._setStyle()
}
_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._dtpPanel.set_style(
- 'background-color: ' + this.currentBackgroundColor + transition,
- )
+ this._backgroundStyle = `background-color: ${this.currentBackgroundColor}`
}
- _setGradient() {
+ _setStyle() {
+ const transition = 'transition-duration:' + this.animationDuration
+
this._dtpPanel.panel.set_style(
- 'background: none; ' +
- 'border-image: none; ' +
- 'background-image: none; ' +
+ transition +
+ this._backgroundStyle +
this._gradientStyle +
- 'transition-duration:' +
- this.animationDuration,
+ this._borderStyle,
)
+ console.log('Set DTP Panel style to', this._dtpPanel.panel.get_style())
}
_getThemeBackground(reload) {
diff --git a/ui/SettingsStyle.ui b/ui/SettingsStyle.ui
index 6028866..1899058 100644
--- a/ui/SettingsStyle.ui
+++ b/ui/SettingsStyle.ui
@@ -54,6 +54,20 @@
5
100
+
+
+
+
+
+
+
+
+
+
+