diff --git a/Settings.ui b/Settings.ui
index 0e7f3bf..efa5aa8 100644
--- a/Settings.ui
+++ b/Settings.ui
@@ -2994,15 +2994,25 @@
1
10
+
+
@@ -3092,7 +3102,7 @@
True
False
True
- Change panel opacity when a window gets closer than (px)
+ Change opacity when a window gets closer than (px)
True
0
@@ -3122,7 +3132,7 @@
True
False
12
- Change opacity to
+ Change opacity to (%)
True
0
@@ -3133,24 +3143,16 @@
-
@@ -4299,7 +4301,7 @@
True
False
True
- Override theme opacity
+ Override theme background opacity
True
0
@@ -4326,7 +4328,7 @@
True
False
True
- Define custom opacity options for the panel
+ Define custom opacity options for the panel background
True
40
0
@@ -4355,7 +4357,7 @@
True
False
12
- Panel opacity
+ Panel background opacity (%)
True
0
@@ -4366,24 +4368,15 @@
-
@@ -4399,7 +4392,7 @@
True
False
True
- Dynamic opacity
+ Dynamic background opacity
True
0
@@ -4494,6 +4487,179 @@
+
+
+
diff --git a/prefs.js b/prefs.js
index 073bbb5..08eba18 100644
--- a/prefs.js
+++ b/prefs.js
@@ -524,7 +524,10 @@ const Settings = new Lang.Class({
this._builder.get_object('trans_dyn_switch').set_active(false);
});
- this._builder.get_object('trans_opacity_scale').set_value(this._settings.get_double('trans-panel-opacity'));
+ this._builder.get_object('trans_opacity_spinbutton').set_value(this._settings.get_double('trans-panel-opacity') * 100);
+ this._builder.get_object('trans_opacity_spinbutton').connect('value-changed', Lang.bind(this, function (widget) {
+ this._settings.set_double('trans-panel-opacity', widget.get_value() * 0.01);
+ }));
this._settings.bind('trans-use-dynamic-opacity',
this._builder.get_object('trans_dyn_switch'),
@@ -541,12 +544,57 @@ const Settings = new Lang.Class({
'active-id',
Gio.SettingsBindFlags.DEFAULT);
+ this._settings.bind('trans-use-custom-gradient',
+ this._builder.get_object('trans_gradient_switch'),
+ 'active',
+ Gio.SettingsBindFlags.DEFAULT);
+
+ this._settings.bind('trans-use-custom-gradient',
+ this._builder.get_object('trans_gradient_box'),
+ 'sensitive',
+ Gio.SettingsBindFlags.DEFAULT);
+
+ rgba.parse(this._settings.get_string('trans-gradient-top-color'));
+ this._builder.get_object('trans_gradient_color1_colorbutton').set_rgba(rgba);
+
+ this._builder.get_object('trans_gradient_color1_colorbutton').connect('notify::color', Lang.bind(this, function (button) {
+ let rgba = button.get_rgba();
+ let css = rgba.to_string();
+ let hexString = cssHexString(css);
+ this._settings.set_string('trans-gradient-top-color', hexString);
+ }));
+
+ this._builder.get_object('trans_gradient_color1_spinbutton').set_value(this._settings.get_double('trans-gradient-top-opacity') * 100);
+ this._builder.get_object('trans_gradient_color1_spinbutton').connect('value-changed', Lang.bind(this, function (widget) {
+ this._settings.set_double('trans-gradient-top-opacity', widget.get_value() * 0.01);
+ }));
+
+ rgba.parse(this._settings.get_string('trans-gradient-bottom-color'));
+ this._builder.get_object('trans_gradient_color2_colorbutton').set_rgba(rgba);
+
+ this._builder.get_object('trans_gradient_color2_colorbutton').connect('notify::color', Lang.bind(this, function (button) {
+ let rgba = button.get_rgba();
+ let css = rgba.to_string();
+ let hexString = cssHexString(css);
+ this._settings.set_string('trans-gradient-bottom-color', hexString);
+ }));
+
+ this._builder.get_object('trans_gradient_color2_spinbutton').set_value(this._settings.get_double('trans-gradient-bottom-opacity') * 100);
+ this._builder.get_object('trans_gradient_color2_spinbutton').connect('value-changed', Lang.bind(this, function (widget) {
+ this._settings.set_double('trans-gradient-bottom-opacity', widget.get_value() * 0.01);
+ }));
+
this._builder.get_object('trans_options_distance_spinbutton').set_value(this._settings.get_int('trans-dynamic-distance'));
this._builder.get_object('trans_options_distance_spinbutton').connect('value-changed', Lang.bind(this, function (widget) {
this._settings.set_int('trans-dynamic-distance', widget.get_value());
}));
- this._builder.get_object('trans_options_min_opacity_scale').set_value(this._settings.get_double('trans-dynamic-anim-target'));
+ this._builder.get_object('trans_options_min_opacity_spinbutton').set_value(this._settings.get_double('trans-dynamic-anim-target') * 100);
+ this._builder.get_object('trans_options_min_opacity_spinbutton').connect('value-changed', Lang.bind(this, function (widget) {
+ this._settings.set_double('trans-dynamic-anim-target', widget.get_value() * 0.01);
+ }));
+
+ this._builder.get_object('trans_options_min_opacity_spinbutton').set_value(this._settings.get_double('trans-dynamic-anim-target'));
this._builder.get_object('trans_options_anim_time_spinbutton').set_value(this._settings.get_int('trans-dynamic-anim-time'));
this._builder.get_object('trans_options_anim_time_spinbutton').connect('value-changed', Lang.bind(this, function (widget) {
@@ -575,7 +623,7 @@ const Settings = new Lang.Class({
this._builder.get_object('trans_options_distance_spinbutton').set_value(this._settings.get_int('trans-dynamic-distance'));
this._settings.set_value('trans-dynamic-anim-target', this._settings.get_default_value('trans-dynamic-anim-target'));
- this._builder.get_object('trans_options_min_opacity_scale').set_value(this._settings.get_double('trans-dynamic-anim-target'));
+ this._builder.get_object('trans_options_min_opacity_spinbutton').set_value(this._settings.get_int('trans-dynamic-anim-target') * 100);
this._settings.set_value('trans-dynamic-anim-time', this._settings.get_default_value('trans-dynamic-anim-time'));
this._builder.get_object('trans_options_anim_time_spinbutton').set_value(this._settings.get_int('trans-dynamic-anim-time'));
@@ -1435,38 +1483,6 @@ const Settings = new Lang.Class({
}));
},
- trans_opacity_scale_format_value_cb: function(scale, value) {
- return Math.round(value * 100) + ' %';
- },
-
- trans_opacity_scale_value_changed_cb: function(scale) {
- // Avoid settings the opacity consinuosly
- if (this._opacity_timeout > 0)
- Mainloop.source_remove(this._opacity_timeout);
-
- this._opacity_timeout = Mainloop.timeout_add(SCALE_UPDATE_TIMEOUT, Lang.bind(this, function() {
- this._settings.set_double('trans-panel-opacity', scale.get_value());
- this._opacity_timeout = 0;
- return GLib.SOURCE_REMOVE;
- }));
- },
-
- trans_opacity_min_scale_format_value_cb: function(scale, value) {
- return Math.round(value * 100) + ' %';
- },
-
- trans_opacity_min_scale_value_changed_cb: function(scale) {
- // Avoid settings the opacity consinuosly
- if (this._opacity_timeout > 0)
- Mainloop.source_remove(this._opacity_timeout);
-
- this._opacity_timeout = Mainloop.timeout_add(SCALE_UPDATE_TIMEOUT, Lang.bind(this, function() {
- this._settings.set_double('trans-dynamic-anim-target', scale.get_value());
- this._opacity_timeout = 0;
- return GLib.SOURCE_REMOVE;
- }));
- },
-
tray_padding_scale_format_value_cb: function(scale, value) {
return value+ ' px';
},
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 21e628b..8ec8156 100644
--- a/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
+++ b/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
@@ -214,6 +214,31 @@
Opacity change duration
The duration of the animation when the opacity changes
+
+ false
+ Custom gradient
+ Replace current theme gradient for the panel
+
+
+ "#000"
+ Custom gradient top color
+ Custom gradient top color for the panel
+
+
+ 0
+ Custom gradient top opacity
+ Custom gradient top opacity for the panel
+
+
+ "#000"
+ Custom gradient bottom color
+ Custom gradient bottom color for the panel
+
+
+ 0.2
+ Custom gradient bottom opacity
+ Custom gradient bottom opacity for the panel
+
false
Intellihide
diff --git a/transparency.js b/transparency.js
index a0a55f8..faa5c58 100644
--- a/transparency.js
+++ b/transparency.js
@@ -81,10 +81,21 @@ var DynamicTransparency = new Lang.Class({
'changed::trans-panel-opacity',
'changed::trans-bg-color',
'changed::trans-dynamic-anim-target',
- 'changed::trans-use-dynamic-opacity',
+ 'changed::trans-use-dynamic-opacity'
],
() => this._updateAlphaAndSet()
],
+ [
+ this._dtpSettings,
+ [
+ 'changed::trans-use-custom-gradient',
+ 'changed::trans-gradient-top-color',
+ 'changed::trans-gradient-bottom-color',
+ 'changed::trans-gradient-top-opacity',
+ 'changed::trans-gradient-bottom-opacity'
+ ],
+ () => this._updateGradientAndSet()
+ ],
[
this._dtpSettings,
[
@@ -119,7 +130,7 @@ var DynamicTransparency = new Lang.Class({
},
_updateAnimationDuration: function() {
- this._animationDuration = this._dtpSettings.get_int('trans-dynamic-anim-time') * 0.001;
+ this._animationDuration = (this._dtpSettings.get_int('trans-dynamic-anim-time') * 0.001) + 's;';
},
_updateAllAndSet: function() {
@@ -127,7 +138,9 @@ var DynamicTransparency = new Lang.Class({
this._updateColor(themeBackground);
this._updateAlpha(themeBackground);
+ this._updateGradient();
this._setBackground();
+ this._setGradient();
},
_updateColorAndSet: function() {
@@ -140,9 +153,14 @@ var DynamicTransparency = new Lang.Class({
this._setBackground();
},
+ _updateGradientAndSet: function() {
+ this._updateGradient();
+ this._setGradient();
+ },
+
_updateColor: function(themeBackground) {
this._backgroundColor = this._dtpSettings.get_boolean('trans-use-custom-bg') ?
- Clutter.color_from_string(this._dtpSettings.get_string('trans-bg-color'))[1] :
+ this._dtpSettings.get_string('trans-bg-color') :
(themeBackground || this._getThemeBackground());
},
@@ -156,18 +174,47 @@ var DynamicTransparency = new Lang.Class({
}
},
+ _updateGradient: function() {
+ this._gradientStyle = '';
+
+ if (this._dtpSettings.get_boolean('trans-use-custom-gradient')) {
+ this._gradientStyle += 'background-gradient-direction: vertical; ' +
+ 'background-gradient-start: ' + this._getrgbaColor(this._dtpSettings.get_string('trans-gradient-top-color'),
+ this._dtpSettings.get_double('trans-gradient-top-opacity')) +
+ 'background-gradient-end: ' + this._getrgbaColor(this._dtpSettings.get_string('trans-gradient-bottom-color'),
+ this._dtpSettings.get_double('trans-gradient-bottom-opacity'));
+ }
+ },
+
_setBackground: function() {
- this._dtpPanel.panel.actor.set_style(
- 'background-color: rgba(' +
- this._backgroundColor.red + ',' +
- this._backgroundColor.green + ',' +
- this._backgroundColor.blue + ',' +
- this._alpha + '); ' +
- 'border-image: none; background-image: none; ' +
- 'transition-duration:' + this._animationDuration + 's'
+ this._dtpPanel.panelBox.set_style(
+ 'background-color: ' + this._getrgbaColor(this._backgroundColor, this._alpha) +
+ 'transition-duration:' + this._animationDuration
);
},
+ _setGradient: function() {
+ this._dtpPanel.panel.actor.set_style(
+ 'background-color: none; ' +
+ 'border-image: none; ' +
+ 'background-image: none; ' +
+ this._gradientStyle +
+ 'transition-duration:' + this._animationDuration
+ );
+ },
+
+ _getrgbaColor: function(color, alpha) {
+ if (alpha <= 0) {
+ return 'transparent; ';
+ }
+
+ if (typeof color === 'string') {
+ color = Clutter.color_from_string(color)[1];
+ }
+
+ return 'rgba(' + color.red + ',' + color.green + ',' + color.blue + ',' + (Math.floor(alpha * 100) * 0.01) + '); ' ;
+ },
+
_getThemeBackground: function(reload) {
if (reload || !this._themeBackground) {
let fakePanel = new St.Bin({ name: 'panel' });