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

Add an extra background to the button that maintains the state of the pressed button color opacity. This ensures the highlighted button color will be based on the button color instead of the color of the item the button is added to.

Browse Source 
svn path=/trunk/; revision=53
This commit is contained in:
Marina Zhurakhinskaya 2008-11-17 22:32:28 +00:00
parent 679365f1c1
commit bc2cb8fb62
2 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/ui/button.js
View File

@ -7,14 +7,16 @@ const DEFAULT_BUTTON_COLOR = new Clutter.Color();
DEFAULT_BUTTON_COLOR.from_pixel(0xeeddccff); DEFAULT_BUTTON_COLOR.from_pixel(0xeeddccff);
const DEFAULT_PRESSED_BUTTON_COLOR = new Clutter.Color(); const DEFAULT_PRESSED_BUTTON_COLOR = new Clutter.Color();
DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xddccbbff); DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xccbbaaff);
// Time for animation making the button darker // Time for animation making the button darker
const ANIMATION_TIME = 0.3; const ANIMATION_TIME = 0.3;
const FULL_OPACITY = 255; const NO_OPACITY = 0;
const PARTIAL_OPACITY = 0.5 * 255; const PARTIAL_OPACITY = 0.4 * 255;
const FULL_OPACITY = 255;
function Button(text, button_color, pressed_button_color, min_width, min_height) { function Button(text, button_color, pressed_button_color, min_width, min_height) {
this._init(text, button_color, pressed_button_color, min_width, min_height); this._init(text, button_color, pressed_button_color, min_width, min_height);
@ -46,18 +48,24 @@ Button.prototype = {
this.button = new Clutter.Group({reactive: true}); this.button = new Clutter.Group({reactive: true});
this._background = new Clutter.Rectangle({ color: this._button_color}); this._background = new Clutter.Rectangle({ color: this._button_color});
this._pressed_background = new Clutter.Rectangle({ color: this._pressed_button_color, opacity: NO_OPACITY});
this._label = new Clutter.Label({ font_name: "Sans Bold 16px", this._label = new Clutter.Label({ font_name: "Sans Bold 16px",
text: text}); text: text});
this._label.set_position(5, 5); this._label.set_position(5, 5);
this._background.set_width(Math.max(this._label.get_width()+10, min_width)) let background_width = Math.max(this._label.get_width()+10, min_width);
this._background.set_height(Math.max(this._label.get_height()+10, min_height)) let background_height = Math.max(this._label.get_height()+10, min_height);
this._background.set_width(background_width)
this._background.set_height(background_height)
this._pressed_background.set_width(background_width)
this._pressed_background.set_height(background_height)
this.button.add_actor(this._background); this.button.add_actor(this._background);
this.button.add_actor(this._pressed_background);
this.button.add_actor(this._label); this.button.add_actor(this._label);
let me = this; let me = this;
this.button.connect('button-press-event', this.button.connect('button-press-event',
function(o, event) { function(o, event) {
me._is_between_press_and_release = true; me._is_between_press_and_release = true;
Tweener.addTween(me._background, Tweener.addTween(me._pressed_background,
{ time: ANIMATION_TIME, { time: ANIMATION_TIME,
opacity: FULL_OPACITY, opacity: FULL_OPACITY,
transition: "linear" transition: "linear"
@ -78,9 +86,8 @@ Button.prototype = {
function(o, event) { function(o, event) {
me._mouse_is_over_button = true; me._mouse_is_over_button = true;
if (!me._active) { if (!me._active) {
Tweener.removeTweens(me._background); Tweener.removeTweens(me._pressed_background);
me._background.set_opacity(PARTIAL_OPACITY); me._pressed_background.set_opacity(PARTIAL_OPACITY);
me._background.set_color(me._pressed_button_color);
} }
return false; return false;
}); });
@ -89,9 +96,8 @@ Button.prototype = {
me._is_between_press_and_release = false; me._is_between_press_and_release = false;
me._mouse_is_over_button = false; me._mouse_is_over_button = false;
if (!me._active) { if (!me._active) {
Tweener.removeTweens(me._background); Tweener.removeTweens(me._pressed_background);
me._background.set_opacity(FULL_OPACITY); me._pressed_background.set_opacity(NO_OPACITY);
me._background.set_color(me._button_color);
} }
return false; return false;
}); });
@ -100,13 +106,11 @@ Button.prototype = {
release : function() { release : function() {
if (!this._is_between_press_and_release) { if (!this._is_between_press_and_release) {
this._active = false; this._active = false;
Tweener.removeTweens(this._background); Tweener.removeTweens(this._pressed_background);
if (this._mouse_is_over_button) { if (this._mouse_is_over_button) {
this._background.set_opacity(PARTIAL_OPACITY); this._pressed_background.set_opacity(PARTIAL_OPACITY);
this._background.set_color(this._pressed_button_color);
} else { } else {
this._background.set_opacity(FULL_OPACITY); this._pressed_background.set_opacity(NO_OPACITY);
this._background.set_color(this._button_color);
} }
} }
} }

2
js/ui/panel.js
View File

@ -14,7 +14,7 @@ const TRAY_HEIGHT = 24;
const PANEL_BACKGROUND_COLOR = new Clutter.Color(); const PANEL_BACKGROUND_COLOR = new Clutter.Color();
PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff); PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color(); const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0xddccbbff); PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0xccbbaaff);
function Panel() { function Panel() {
this._init(); this._init();