Refactor panel styling to fix issues when border, background (transparency) and/or background gradient are enabled and disabled

src/transparency.js

@@ -48,7 +48,7 @@ export const DynamicTransparency = class {
   }
 
   updateExternalStyle() {
-    this._setBackground()
+    this._setStyle()
   }
 
   _bindSignals() {
@@ -144,29 +144,31 @@ 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._setBackground()
+    this._setStyle()
   }
 
   _updateGradientAndSet() {
     this._updateGradient()
-    this._setGradient()
+    this._setStyle()
   }
 
   _updateColor(themeBackground) {
@@ -204,7 +206,7 @@ export const DynamicTransparency = class {
     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;`
+    const style = `border: 0 solid ${rgba}; border-${borderPosition}-width:${borderWidth}px; `
     this._borderStyle = showBorder ? style : ''
   }
 
@@ -212,6 +214,7 @@ export const DynamicTransparency = class {
     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;') +
@@ -225,31 +228,27 @@ 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 + this._borderStyle,
-    )
   }
 
-  _setGradient() {
+  _setStyle() {
+    const transition = 'transition-duration:' + this.animationDuration
+
     this._dtpPanel.panel.set_style(
-      'background: none; ' +
+      transition + this._backgroundStyle + this._gradientStyle + this._borderStyle
-      'border-image: none; ' +
-      'background-image: none; ' +
-      this._gradientStyle +
-      'transition-duration:' +
-      this.animationDuration,
     )
+    console.log('Set DTP Panel style to', this._dtpPanel.panel.get_style())
   }
 
   _getThemeBackground(reload) {