gnome-shell/js/ui/button.js

/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */

const Big = imports.gi.Big;
const Clutter = imports.gi.Clutter;
const Lang = imports.lang;
const Mainloop = imports.mainloop;
const Shell = imports.gi.Shell;
const Signals = imports.signals;
const Tweener = imports.ui.tweener;

const DEFAULT_BUTTON_COLOR = new Clutter.Color();
DEFAULT_BUTTON_COLOR.from_pixel(0xeeddcc66);

const DEFAULT_PRESSED_BUTTON_COLOR = new Clutter.Color();
DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xccbbaa66);

const DEFAULT_TEXT_COLOR = new Clutter.Color();
DEFAULT_TEXT_COLOR.from_pixel(0x000000ff);

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, font) {
    this._init(widget, buttonColor, pressedButtonColor, textColor, font);
}

Button.prototype = {
    _init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, font) {
        this._buttonColor = buttonColor
        if (buttonColor == null)
            this._buttonColor = DEFAULT_BUTTON_COLOR;

        this._pressedButtonColor = pressedButtonColor
        if (pressedButtonColor == null)
            this._pressedButtonColor = DEFAULT_PRESSED_BUTTON_COLOR;

        this._textColor = textColor;
        if (textColor == null)
            this._textColor = DEFAULT_TEXT_COLOR;

        this._font = font;
        if (font == null)
            this._font = DEFAULT_FONT;

        this._isBetweenPressAndRelease = false;
        this._mouseIsOverButton = false;

        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,
                                              text: widgetOrText });
        } else {
            this._widget = widgetOrText;
        }

        this.actor.append(this._widget, Big.BoxPackFlags.EXPAND);

        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));
    },

    _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;
    }
};

Signals.addSignalMethods(Button.prototype);

/* Delay before the icon should appear, in seconds after the pointer has entered the parent */
const ANIMATION_TIME = 0.25;

/* This is an icon button that fades in/out when mouse enters/leaves the parent.
 * A delay is used before the fading starts. You can force it to be shown if needed.
 *
 * parent -- used to show/hide the button depending on mouse entering/leaving it
 * size -- size in pixels of  both the button and the icon it contains
 * texture -- optional, must be used if the texture for the icon is already created (else, use setIconFromName)
 */
function IconButton(parent, size, texture) {
    this._init(parent, size, texture);
}

IconButton.prototype = {
    _init : function(parent, size, texture) {
        this._size = size;
        if (texture)
            this.actor = texture;
        else
            this.actor = new Clutter.Texture({ width: this._size, height: this._size });
        this.actor.set_reactive(true);
        this.actor.set_opacity(0);
        parent.connect("enter-event", Lang.bind(this, function(actor, event) {
            this._shouldHide = false;
            // Nothing to do if the cursor has come back from a child of the parent actor
            if (actor.get_children().indexOf(event.get_related()) != -1)
                return;

            this._fadeIn();
        }));
        parent.connect("leave-event", Lang.bind(this, function(actor, event) {
            // Nothing to do if the cursor has merely entered a child of the parent actor
            if (actor.get_children().indexOf(event.get_related()) != -1)
                return;

            // Remember that we should not be visible to hide the button if forceShow is unset
            if (this._forceShow) {
                this._shouldHide = true;
                return;
            }

            this._fadeOut();
        }));
    },

    /// Private methods ///

    setIconFromName : function(iconName) {
        let iconTheme = Gtk.IconTheme.get_default();
        let iconInfo = iconTheme.lookup_icon(iconName, this._size, 0);
        if (!iconInfo)
            return;

        let iconPath = iconInfo.get_filename();
        this.actor.set_from_file(iconPath);
    },

    // Useful if we want to show the button immediately,
    // e.g. in case the mouse is already in the parent when the button is created
    show : function() {
        this.actor.set_opacity(255);
    },

    // If show is true, prevents the button from fading out
    forceShow : function(show) {
        this._forceShow = show;
        // Hide the button if it should have been hidden under normal conditions
        if (!this._forceShow && this._shouldHide) {
           this._fadeOut();
        }
    },

    /// Private methods ///

    _fadeIn : function() {
        Tweener.removeTweens(this.actor);
        Tweener.addTween(this.actor, { opacity: 255,
                                       time: ANIMATION_TIME,
                                       transition :"easeInQuad" });
    },

    _fadeOut : function() {
        Tweener.removeTweens(this.actor);
        Tweener.addTween(this.actor, { opacity: 0,
                                       time: ANIMATION_TIME,
                                       transition :"easeOutQuad" });
    }
};