From 5803aa7e65a586a4b5c90004acf1b7819f863cbd Mon Sep 17 00:00:00 2001 From: "Owen W. Taylor" Date: Sat, 29 Aug 2009 07:23:28 -0400 Subject: [PATCH] Simplify Button class by using ShellButtonBox Make Button class purely about adding visuals, and use ShellButtonBox for behavior. API equivalences: shell.button => shell.actor [for consistency] staysPressed parameter to constructor => replaced by manually setting the 'active' property of button.actor as appropriate pressIn/release => button.actor.active = true/false enter-event/leave-event signals => button.actor notify::hover Along the way, this fixes a bug with the user status menu where it was not getting set to active because the button was getting a leave (triggered by the menu popping up and grabbing the pointer) before for button release, which disabled the staysPressed behavior. Reported by Michael Meeks http://bugzilla.gnome.org/show_bug.cgi?id=593471 --- js/ui/button.js | 90 ++++++++++++------------------------------------- js/ui/dash.js | 31 ++++++++--------- js/ui/panel.js | 59 +++++++++++++++++--------------- 3 files changed, 66 insertions(+), 114 deletions(-) diff --git a/js/ui/button.js b/js/ui/button.js index 24f897a51..3cc557050 100644 --- a/js/ui/button.js +++ b/js/ui/button.js @@ -22,12 +22,12 @@ const DEFAULT_FONT = 'Sans Bold 16px'; // Padding on the left and right side of the button. const SIDE_PADDING = 14; -function Button(widget, buttonColor, pressedButtonColor, textColor, staysPressed, font) { - this._init(widget, buttonColor, pressedButtonColor, textColor, staysPressed, font); +function Button(widget, buttonColor, pressedButtonColor, textColor, font) { + this._init(widget, buttonColor, pressedButtonColor, textColor, font); } Button.prototype = { - _init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, staysPressed, font) { + _init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, font) { let me = this; this._buttonColor = buttonColor @@ -42,27 +42,20 @@ Button.prototype = { if (textColor == null) this._textColor = DEFAULT_TEXT_COLOR; - this._staysPressed = staysPressed - if (staysPressed == null) - this._staysPressed = false; - this._font = font; if (font == null) this._font = DEFAULT_FONT; - // if this._staysPressed is true, this._active will be true past the first release of a button, until a subsequent one (the button - // is unpressed) or until release() is called explicitly - this._active = false; this._isBetweenPressAndRelease = false; this._mouseIsOverButton = false; - this.button = new Big.Box({ reactive: true, - corner_radius: 5, - padding_left: SIDE_PADDING, - padding_right: SIDE_PADDING, - orientation: Big.BoxOrientation.HORIZONTAL, - y_align: Big.BoxAlignment.CENTER - }); + this.actor = new Shell.ButtonBox({ reactive: true, + corner_radius: 5, + padding_left: SIDE_PADDING, + padding_right: SIDE_PADDING, + orientation: Big.BoxOrientation.HORIZONTAL, + y_align: Big.BoxAlignment.CENTER + }); if (typeof widgetOrText == 'string') { this._widget = new Clutter.Text({ font_name: this._font, color: this._textColor, @@ -71,61 +64,20 @@ Button.prototype = { this._widget = widgetOrText; } - this.button.append(this._widget, Big.BoxPackFlags.EXPAND); + this.actor.append(this._widget, Big.BoxPackFlags.EXPAND); - this.button.connect('button-press-event', - function(o, event) { - me._isBetweenPressAndRelease = true; - me.button.backgroundColor = me._pressedButtonColor; - return false; - }); - this.button.connect('button-release-event', - function(o, event) { - me._isBetweenPressAndRelease = false; - if (!me._staysPressed || me._active) { - me.release(); - } else { - me._active = true; - } - return false; - }); - this.button.connect('enter-event', - function(o, event) { - me._mouseIsOverButton = true; - if (!me._active) { - me.button.backgroundColor = me._buttonColor; - } - me.emit('enter-event'); - return false; - }); - this.button.connect('leave-event', - function(o, event) { - me._isBetweenPressAndRelease = false; - me._mouseIsOverButton = false; - if (!me._active) { - me.button.backgroundColor = null; - } - me.emit('leave-event'); - return false; - }); + this.actor.connect('notify::hover', Lang.bind(this, this._updateColors)); + this.actor.connect('notify::pressed', Lang.bind(this, this._updateColors)); + this.actor.connect('notify::active', Lang.bind(this, this._updateColors)); }, - pressIn : function() { - if (!this._isBetweenPressAndRelease && this._staysPressed) { - this._active = true; - this.button.backgroundColor = this._pressedButtonColor; - } - }, - - release : function() { - if (!this._isBetweenPressAndRelease && this._staysPressed) { - this._active = false; - if (this._mouseIsOverButton) { - this.button.backgroundColor = this._buttonColor; - } else { - this.button.backgroundColor = null; - } - } + _updateColors : function() { + if (this.actor.active || this.actor.pressed) + this.actor.backgroundColor = this._pressedButtonColor; + else if (this.actor.hover) + this.actor.backgroundColor = this._buttonColor; + else + this.actor.backgroundColor = null; } }; diff --git a/js/ui/dash.js b/js/ui/dash.js index b422d4291..8854e393b 100644 --- a/js/ui/dash.js +++ b/js/ui/dash.js @@ -460,24 +460,23 @@ SearchSectionHeader.prototype = { this._showTooltip = true; let button = new Button.Button(box, PRELIGHT_COLOR, BACKGROUND_COLOR, - TEXT_COLOR, false, null); - button.button.height = box.height; - button.button.padding_left = DEFAULT_PADDING; - button.button.padding_right = DEFAULT_PADDING; + TEXT_COLOR); + button.actor.height = box.height; + button.actor.padding_left = DEFAULT_PADDING; + button.actor.padding_right = DEFAULT_PADDING; - button.button.connect('button-release-event', onClick); - button.connect('enter-event', Lang.bind(this, this._onButtonEntered)); - button.connect('leave-event', Lang.bind(this, this._onButtonLeft)); - this.actor = button.button; + button.actor.connect('activate', onClick); + button.actor.connect('notify::hover', Lang.bind(this, this._updateTooltip)); + this.actor = button.actor; }, - _onButtonEntered : function() { - if (this._showTooltip) - this.tooltip.show(); - }, - - _onButtonLeft : function() { - this.tooltip.hide(); + _updateTooltip : function(actor) { + if (actor.hover) { + if (this._showTooltip) + this.tooltip.show(); + } else { + this.tooltip.hide(); + } }, setShowTooltip : function(showTooltip) { @@ -683,7 +682,6 @@ Dash.prototype = { Lang.bind(this, function () { this._toggleOnlyAppSearchShown(); - return true; })); this._searchResultsSection.content.append(this._appSearchHeader.actor, Big.BoxPackFlags.NONE); this._appSearchResultArea = new ResultArea(AppDisplay.AppDisplay, false); @@ -695,7 +693,6 @@ Dash.prototype = { Lang.bind(this, function () { this._toggleOnlyDocSearchShown(); - return true; })); this._searchResultsSection.content.append(this._docSearchHeader.actor, Big.BoxPackFlags.NONE); this._docSearchResultArea = new ResultArea(DocDisplay.DocDisplay, false); diff --git a/js/ui/panel.js b/js/ui/panel.js index 4a7505627..7e3b9dccc 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -269,10 +269,10 @@ Panel.prototype = { /* left side */ this.button = new Button.Button(_("Activities"), PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, - PANEL_FOREGROUND_COLOR, true, DEFAULT_FONT); - this.button.button.height = PANEL_HEIGHT; + PANEL_FOREGROUND_COLOR, DEFAULT_FONT); + this.button.actor.height = PANEL_HEIGHT; - this._leftBox.append(this.button.button, Big.BoxPackFlags.NONE); + this._leftBox.append(this.button.actor, Big.BoxPackFlags.NONE); // We use this flag to mark the case where the user has entered the // hot corner and has not left both the hot corner and a surrounding @@ -374,43 +374,46 @@ Panel.prototype = { let statusbutton = new Button.Button(statusbox, PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, - PANEL_FOREGROUND_COLOR, - true); - statusbutton.button.height = PANEL_HEIGHT; - statusbutton.button.connect('button-press-event', function (b, e) { - statusmenu.toggle(e); - return false; + PANEL_FOREGROUND_COLOR); + statusbutton.actor.height = PANEL_HEIGHT; + statusbutton.actor.connect('button-press-event', function (b, e) { + if (e.get_button() == 1 && e.get_click_count() == 1) { + statusmenu.toggle(e); + // The statusmenu might not pop up if it couldn't get a pointer grab + if (statusmenu.is_active()) + statusbutton.actor.active = true; + return true; + } else { + return false; + } }); - // If popping up the menu failed (because there was already a grab in - // effect from Mutter or another app), then we'll never get a ::deactivated - // signal because the menu was never activated, so we need to unhighlight - // separately when the user releases the mouse button. - // - // We depend on connection ordering; this needs to be called after Button's - // ::button-release-event handler; that will set the active flag for this - // stays-pressed button, then we unset the active flag by calling release(). - statusbutton.button.connect('button-release-event', function (b, e) { - if (!statusmenu.is_active()) - statusbutton.release(); - return false; - }); - this._rightBox.append(statusbutton.button, Big.BoxPackFlags.NONE); + this._rightBox.append(statusbutton.actor, Big.BoxPackFlags.NONE); // We get a deactivated event when the popup disappears this._statusmenu.connect('deactivated', function (sm) { - statusbutton.release(); + statusbutton.actor.active = false; }); // TODO: decide what to do with the rest of the panel in the Overview mode (make it fade-out, become non-reactive, etc.) // We get into the Overview mode on button-press-event as opposed to button-release-event because eventually we'll probably // have the Overview act like a menu that allows the user to release the mouse on the activity the user wants // to switch to. - this.button.button.connect('button-press-event', - Lang.bind(Main.overview, Main.overview.toggle)); + this.button.actor.connect('button-press-event', function(b, e) { + if (e.get_button() == 1 && e.get_click_count() == 1) { + Main.overview.toggle(); + return true; + } else { + return false; + } + }); // In addition to pressing the button, the Overview can be entered and exited by other means, such as // pressing the System key, Alt+F1 or Esc. We want the button to be pressed in when the Overview is entered // and to be released when it is exited regardless of how it was triggered. - Main.overview.connect('showing', Lang.bind(this.button, this.button.pressIn)); - Main.overview.connect('hiding', Lang.bind(this.button, this.button.release)); + Main.overview.connect('showing', Lang.bind(this, function() { + this.button.actor.active = true; + })); + Main.overview.connect('hiding', Lang.bind(this, function() { + this.button.actor.active = false; + })); Main.chrome.addActor(this.actor); Main.chrome.setVisibleInOverview(this.actor, true);