From 91c2a0a071b886fd8cb7d0558e15988377098171 Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Sun, 19 May 2019 17:51:07 -0400 Subject: [PATCH] Add preview hover effect --- transparency.js | 38 +++++++++++++------------------------- utils.js | 23 +++++++++++++++++++++++ windowPreview.js | 41 +++++++++++++++++++++++++++++++++++------ 3 files changed, 71 insertions(+), 31 deletions(-) diff --git a/transparency.js b/transparency.js index 4c1a92f..8f72c67 100644 --- a/transparency.js +++ b/transparency.js @@ -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' }); diff --git a/utils.js b/utils.js index 1af139d..aabf69f 100644 --- a/utils.js +++ b/utils.js @@ -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 diff --git a/windowPreview.js b/windowPreview.js index 956d8c3..207e8ef 100644 --- a/windowPreview.js +++ b/windowPreview.js @@ -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' };