brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify Button class by using ShellButtonBox

Browse Source 
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
This commit is contained in:
Owen W. Taylor 2009-08-29 07:23:28 -04:00
parent 0fd6bc5172
commit 5803aa7e65
3 changed files with 66 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
js/ui/button.js
View File

@ -22,12 +22,12 @@ const DEFAULT_FONT = 'Sans Bold 16px';
// Padding on the left and right side of the button. // Padding on the left and right side of the button.
const SIDE_PADDING = 14; const SIDE_PADDING = 14;
function Button(widget, buttonColor, pressedButtonColor, textColor, staysPressed, font) { function Button(widget, buttonColor, pressedButtonColor, textColor, font) {
this._init(widget, buttonColor, pressedButtonColor, textColor, staysPressed, font); this._init(widget, buttonColor, pressedButtonColor, textColor, font);
} }
Button.prototype = { Button.prototype = {
_init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, staysPressed, font) { _init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, font) {
let me = this; let me = this;
this._buttonColor = buttonColor this._buttonColor = buttonColor
@ -42,21 +42,14 @@ Button.prototype = {
if (textColor == null) if (textColor == null)
this._textColor = DEFAULT_TEXT_COLOR; this._textColor = DEFAULT_TEXT_COLOR;
this._staysPressed = staysPressed
if (staysPressed == null)
this._staysPressed = false;
this._font = font; this._font = font;
if (font == null) if (font == null)
this._font = DEFAULT_FONT; 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._isBetweenPressAndRelease = false;
this._mouseIsOverButton = false; this._mouseIsOverButton = false;
this.button = new Big.Box({ reactive: true, this.actor = new Shell.ButtonBox({ reactive: true,
corner_radius: 5, corner_radius: 5,
padding_left: SIDE_PADDING, padding_left: SIDE_PADDING,
padding_right: SIDE_PADDING, padding_right: SIDE_PADDING,
@ -71,61 +64,20 @@ Button.prototype = {
this._widget = widgetOrText; 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', this.actor.connect('notify::hover', Lang.bind(this, this._updateColors));
function(o, event) { this.actor.connect('notify::pressed', Lang.bind(this, this._updateColors));
me._isBetweenPressAndRelease = true; this.actor.connect('notify::active', Lang.bind(this, this._updateColors));
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;
});
}, },
pressIn : function() { _updateColors : function() {
if (!this._isBetweenPressAndRelease && this._staysPressed) { if (this.actor.active || this.actor.pressed)
this._active = true; this.actor.backgroundColor = this._pressedButtonColor;
this.button.backgroundColor = this._pressedButtonColor; else if (this.actor.hover)
} this.actor.backgroundColor = this._buttonColor;
}, else
this.actor.backgroundColor = null;
release : function() {
if (!this._isBetweenPressAndRelease && this._staysPressed) {
this._active = false;
if (this._mouseIsOverButton) {
this.button.backgroundColor = this._buttonColor;
} else {
this.button.backgroundColor = null;
}
}
} }
}; };

25
js/ui/dash.js
View File

@ -460,24 +460,23 @@ SearchSectionHeader.prototype = {
this._showTooltip = true; this._showTooltip = true;
let button = new Button.Button(box, PRELIGHT_COLOR, BACKGROUND_COLOR, let button = new Button.Button(box, PRELIGHT_COLOR, BACKGROUND_COLOR,
TEXT_COLOR, false, null); TEXT_COLOR);
button.button.height = box.height; button.actor.height = box.height;
button.button.padding_left = DEFAULT_PADDING; button.actor.padding_left = DEFAULT_PADDING;
button.button.padding_right = DEFAULT_PADDING; button.actor.padding_right = DEFAULT_PADDING;
button.button.connect('button-release-event', onClick); button.actor.connect('activate', onClick);
button.connect('enter-event', Lang.bind(this, this._onButtonEntered)); button.actor.connect('notify::hover', Lang.bind(this, this._updateTooltip));
button.connect('leave-event', Lang.bind(this, this._onButtonLeft)); this.actor = button.actor;
this.actor = button.button;
}, },
_onButtonEntered : function() { _updateTooltip : function(actor) {
if (actor.hover) {
if (this._showTooltip) if (this._showTooltip)
this.tooltip.show(); this.tooltip.show();
}, } else {
_onButtonLeft : function() {
this.tooltip.hide(); this.tooltip.hide();
}
}, },
setShowTooltip : function(showTooltip) { setShowTooltip : function(showTooltip) {
@ -683,7 +682,6 @@ Dash.prototype = {
Lang.bind(this, Lang.bind(this,
function () { function () {
this._toggleOnlyAppSearchShown(); this._toggleOnlyAppSearchShown();
return true;
})); }));
this._searchResultsSection.content.append(this._appSearchHeader.actor, Big.BoxPackFlags.NONE); this._searchResultsSection.content.append(this._appSearchHeader.actor, Big.BoxPackFlags.NONE);
this._appSearchResultArea = new ResultArea(AppDisplay.AppDisplay, false); this._appSearchResultArea = new ResultArea(AppDisplay.AppDisplay, false);
@ -695,7 +693,6 @@ Dash.prototype = {
Lang.bind(this, Lang.bind(this,
function () { function () {
this._toggleOnlyDocSearchShown(); this._toggleOnlyDocSearchShown();
return true;
})); }));
this._searchResultsSection.content.append(this._docSearchHeader.actor, Big.BoxPackFlags.NONE); this._searchResultsSection.content.append(this._docSearchHeader.actor, Big.BoxPackFlags.NONE);
this._docSearchResultArea = new ResultArea(DocDisplay.DocDisplay, false); this._docSearchResultArea = new ResultArea(DocDisplay.DocDisplay, false);

55
js/ui/panel.js
View File

@ -269,10 +269,10 @@ Panel.prototype = {
/* left side */ /* left side */
this.button = new Button.Button(_("Activities"), PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, this.button = new Button.Button(_("Activities"), PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR,
PANEL_FOREGROUND_COLOR, true, DEFAULT_FONT); PANEL_FOREGROUND_COLOR, DEFAULT_FONT);
this.button.button.height = PANEL_HEIGHT; 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 // 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 // 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, let statusbutton = new Button.Button(statusbox,
PANEL_BUTTON_COLOR, PANEL_BUTTON_COLOR,
PRESSED_BUTTON_BACKGROUND_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR,
PANEL_FOREGROUND_COLOR, PANEL_FOREGROUND_COLOR);
true); statusbutton.actor.height = PANEL_HEIGHT;
statusbutton.button.height = PANEL_HEIGHT; statusbutton.actor.connect('button-press-event', function (b, e) {
statusbutton.button.connect('button-press-event', function (b, e) { if (e.get_button() == 1 && e.get_click_count() == 1) {
statusmenu.toggle(e); 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; return false;
}
}); });
// If popping up the menu failed (because there was already a grab in this._rightBox.append(statusbutton.actor, Big.BoxPackFlags.NONE);
// 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);
// We get a deactivated event when the popup disappears // We get a deactivated event when the popup disappears
this._statusmenu.connect('deactivated', function (sm) { 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.) // 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 // 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 // have the Overview act like a menu that allows the user to release the mouse on the activity the user wants
// to switch to. // to switch to.
this.button.button.connect('button-press-event', this.button.actor.connect('button-press-event', function(b, e) {
Lang.bind(Main.overview, Main.overview.toggle)); 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 // 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 // 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. // 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('showing', Lang.bind(this, function() {
Main.overview.connect('hiding', Lang.bind(this.button, this.button.release)); 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.addActor(this.actor);
Main.chrome.setVisibleInOverview(this.actor, true); Main.chrome.setVisibleInOverview(this.actor, true);