morgan/dash-to-panel
1
0
Fork 0
mirror of https://github.com/morgan9e/dash-to-panel synced 2026-04-14 00:04:17 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add preview hover effect

Browse Source
This commit is contained in:
Charles Gagnon
2019-05-19 17:51:07 -04:00
parent b4ad831474
commit 91c2a0a071
3 changed files with 71 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
transparency.js
View File

@@ -136,7 +136,7 @@ var DynamicTransparency = Utils.defineClass({
},
_updateAnimationDuration: function() {
this._animationDuration = (this._dtpSettings.get_int('trans-dynamic-anim-time') * 0.001) + 's;';
this.animationDuration = (this._dtpSettings.get_int('trans-dynamic-anim-time') * 0.001) + 's;';
},
_updateAllAndSet: function() {
@@ -165,18 +165,18 @@ var DynamicTransparency = Utils.defineClass({
},
_updateColor: function(themeBackground) {
this._backgroundColor = this._dtpSettings.get_boolean('trans-use-custom-bg') ?
this._dtpSettings.get_string('trans-bg-color') :
(themeBackground || this._getThemeBackground());
this.backgroundColorRgb = this._dtpSettings.get_boolean('trans-use-custom-bg') ?
this._dtpSettings.get_string('trans-bg-color') :
(themeBackground || this._getThemeBackground());
},
_updateAlpha: function(themeBackground) {
if (this._windowOverlap && !Main.overview.visibleTarget && this._dtpSettings.get_boolean('trans-use-dynamic-opacity')) {
this._alpha = this._dtpSettings.get_double('trans-dynamic-anim-target');
this.alpha = this._dtpSettings.get_double('trans-dynamic-anim-target');
} else {
this._alpha = this._dtpSettings.get_boolean('trans-use-custom-opacity') ?
this._dtpSettings.get_double('trans-panel-opacity') :
(themeBackground || this._getThemeBackground()).alpha * 0.003921569; // 1 / 255 = 0.003921569
this.alpha = this._dtpSettings.get_boolean('trans-use-custom-opacity') ?
this._dtpSettings.get_double('trans-panel-opacity') :
(themeBackground || this._getThemeBackground()).alpha * 0.003921569; // 1 / 255 = 0.003921569
}
},
@@ -185,17 +185,17 @@ var DynamicTransparency = Utils.defineClass({
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'),
'background-gradient-start: ' + Utils.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'),
'background-gradient-end: ' + Utils.getrgbaColor(this._dtpSettings.get_string('trans-gradient-bottom-color'),
this._dtpSettings.get_double('trans-gradient-bottom-opacity'));
}
},
_setBackground: function() {
this.currentBackgroundColor = this._getrgbaColor(this._backgroundColor, this._alpha);
this.currentBackgroundColor = Utils.getrgbaColor(this.backgroundColorRgb, this.alpha);
let transition = 'transition-duration:' + this._animationDuration;
let transition = 'transition-duration:' + this.animationDuration;
let cornerStyle = '-panel-corner-background-color: ' + this.currentBackgroundColor + transition;
this._dtpPanel.panelBg.set_style('background-color: ' + this.currentBackgroundColor + transition + this._dtpPanel.panelBg.styles);
@@ -209,22 +209,10 @@ var DynamicTransparency = Utils.defineClass({
'border-image: none; ' +
'background-image: none; ' +
this._gradientStyle +
'transition-duration:' + this._animationDuration
'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' });

23
utils.js
View File

@@ -21,6 +21,7 @@
* Some code was also adapted from the upstream Gnome Shell source code.
*/
const Clutter = imports.gi.Clutter;
const GdkPixbuf = imports.gi.GdkPixbuf
const Gi = imports._gi;
const Gio = imports.gi.Gio;
@@ -320,6 +321,28 @@ var removeKeybinding = function(key) {
Main.wm.removeKeybinding(key);
}
};
var getrgbaColor = function(color, alpha, offset) {
if (alpha <= 0) {
return 'transparent; ';
}
color = typeof color === 'string' ? Clutter.color_from_string(color)[1] : color;
let rgb = { red: color.red, green: color.green, blue: color.blue };
if (offset) {
['red', 'green', 'blue'].forEach(k => {
rgb[k] = Math.min(255, Math.max(0, rgb[k] + offset));
if (rgb[k] == color[k]) {
rgb[k] = Math.min(255, Math.max(0, rgb[k] - offset));
}
});
}
return 'rgba(' + rgb.red + ',' + rgb.green + ',' + rgb.blue + ',' + (Math.floor(alpha * 100) * 0.01) + '); ' ;
};
/**
* ColorUtils is adapted from https://github.com/micheleg/dash-to-dock

41
windowPreview.js
View File

@@ -39,6 +39,7 @@ const T2 = 'closeMenuTimeout';
const MAX_TRANSLATION = 40;
const HEADER_HEIGHT = 40;
const DEFAULT_RATIO = { w: 160, h: 90 };
const HOVER_COLOR_OFFSET = 16;
var headerHeight = 0;
var isLeftButtons = false;
@@ -90,7 +91,7 @@ var PreviewMenu = Utils.defineClass({
// this._titleWindowChangeId = this.window.connect('notify::title',
// Lang.bind(this, this._updateWindowTitle));
// hook settings
// hook settings (animation time, size)
},
enable: function() {
@@ -171,6 +172,7 @@ var PreviewMenu = Utils.defineClass({
close: function(immediate) {
this._currentAppIcon = null;
this._endOpenCloseTimeouts();
if (immediate) {
this._resetHiddenState();
@@ -244,7 +246,7 @@ var PreviewMenu = Utils.defineClass({
_onHoverChanged: function() {
this._endOpenCloseTimeouts();
if (!this.menu.hover) {
if (this._currentAppIcon && !this.menu.hover) {
this._addCloseTimeout();
}
},
@@ -424,8 +426,7 @@ var Preview = Utils.defineClass({
x_expand: true, y_expand: true,
x_align: Clutter.ActorAlign[isLeftButtons ? 'START' : 'END'],
y_align: Clutter.ActorAlign.START,
style: 'padding: 4px; border-radius: 0 0 4px 4px;' +
'background-color:' + panelWrapper.dynamicTransparency.currentBackgroundColor
style: 'padding: 4px; border-radius: ' + (isLeftButtons ? '0 0 4px 0;' : '0 0 0 4px;') + this._getBackgroundColor(true)
})
this._closeButtonBin.add_child(closeButton);
@@ -449,6 +450,9 @@ var Preview = Utils.defineClass({
this.connect('notify::hover', () => this._onHoverChanged());
this.connect('button-release-event', (actor, e) => this._onButtonReleaseEvent(e));
this.connect('key-focus-in', () => this._onKeyFocusChanged());
this.connect('key-focus-out', () => this._onKeyFocusChanged());
this.add_actor(this._previewBin);
this.add_child(this._closeButtonBin);
},
@@ -480,17 +484,23 @@ var Preview = Utils.defineClass({
},
_onHoverChanged: function() {
Tweener.addTween(this._closeButtonBin, getTweenOpts({ opacity: this.hover ? 255 : 0 }));
this._setFocus(this.hover);
},
_onKeyFocusChanged: function() {
this._setFocus(this.has_key_focus());
},
_onCloseBtnClick: function() {
this.window.delete(global.get_current_time());
this._hideOrShowCloseButton(true);
},
_onButtonReleaseEvent: function(e) {
switch (e.get_button()) {
case 1: // Left click
Main.activateWindow(this.window);
this._hideOrShowCloseButton(true);
this._previewMenu.close();
break;
case 2: // Middle click
@@ -503,6 +513,25 @@ var Preview = Utils.defineClass({
return Clutter.EVENT_STOP;
},
_setFocus: function(focused) {
this._hideOrShowCloseButton(!focused);
this.set_style(this._getBackgroundColor(focused));
},
_hideOrShowCloseButton: function(hide) {
Tweener.addTween(this._closeButtonBin, getTweenOpts({ opacity: hide ? 0 : 255 }));
},
_getBackgroundColor: function(focused) {
return 'background-color: ' +
Utils.getrgbaColor(
this._panelWrapper.dynamicTransparency.backgroundColorRgb,
focused ? this._panelWrapper.dynamicTransparency.alpha : 0,
HOVER_COLOR_OFFSET
) +
'transition-duration:' + this._panelWrapper.dynamicTransparency.animationDuration;
},
_addClone: function(newClone, animateSize) {
let currentClones = this._previewBin.get_children();
let newCloneOpts = getTweenOpts({ opacity: 255 });
@@ -598,7 +627,7 @@ var Preview = Utils.defineClass({
function getTweenOpts(opts) {
let defaults = {
time: Taskbar.DASH_ANIMATION_TIME * 2,
time: Taskbar.DASH_ANIMATION_TIME * 1.5,
transition: 'easeInOutQuad'
};