gnome-shell/js/ui/dateMenu.js

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

const GLib = imports.gi.GLib;
const Gio = imports.gi.Gio;
const Lang = imports.lang;
const Mainloop = imports.mainloop;
const Cairo = imports.cairo;
const Clutter = imports.gi.Clutter;
const Shell = imports.gi.Shell;
const St = imports.gi.St;
const Gettext = imports.gettext.domain('gnome-shell');
const _ = Gettext.gettext;

const Main = imports.ui.main;
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;
const Calendar = imports.ui.calendar;

const CLOCK_FORMAT_KEY        = 'format';
const CLOCK_CUSTOM_FORMAT_KEY = 'custom-format';
const CLOCK_SHOW_DATE_KEY     = 'show-date';
const CLOCK_SHOW_SECONDS_KEY  = 'show-seconds';

function DateMenuButton() {
    this._init();
}

function on_vert_sep_repaint (area)
{
    let cr = area.get_context();
    let themeNode = area.get_theme_node();
    let [width, height] = area.get_surface_size();
    let found, margin, gradientHeight;
    [found, margin] = themeNode.lookup_length('-margin-vertical', false);
    [found, gradientWidth] = themeNode.lookup_length('-gradient-width', false);
    let startColor = new Clutter.Color();
    themeNode.lookup_color('-gradient-start', false, startColor);
    let endColor = new Clutter.Color();
    themeNode.lookup_color('-gradient-end', false, endColor);

    let gradientHeight = (height - margin * 2);
    let gradientOffset = (width - gradientWidth) / 2;
    let pattern = new Cairo.LinearGradient(gradientOffset, margin, gradientOffset + gradientWidth, height - margin);
    pattern.addColorStopRGBA(0, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
    pattern.addColorStopRGBA(0.5, endColor.red / 255, endColor.green / 255, endColor.blue / 255, endColor.alpha / 255);
    pattern.addColorStopRGBA(1, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
    cr.setSource(pattern);
    cr.rectangle(gradientOffset, margin, gradientWidth, gradientHeight);
    cr.fill();
};

DateMenuButton.prototype = {
    __proto__: PanelMenu.Button.prototype,

    _init: function() {
        let item;
        let hbox;
        let vbox;

        PanelMenu.Button.prototype._init.call(this, St.Align.START);

        this._clock = new St.Label();
        this.actor.set_child(this._clock);

        hbox = new St.BoxLayout({name: 'calendarHBox'});
        this.menu.addActor(hbox);

        // Fill up the first column
        //
        vbox = new St.BoxLayout({vertical: true});
        hbox.add(vbox);

        // Date
        this._date = new St.Label();
        this._date.style_class = 'datemenu-date-label';
        vbox.add(this._date);

        // Calendar
        this._calendar = new Calendar.Calendar();
        vbox.add(this._calendar.actor);

        // Add vertical separator
        //
        item = new St.DrawingArea({ style_class: 'calendar-vertical-separator',
                                    pseudo_class: 'highlighted' });
        item.set_width(25); // TODO: don't hard-code the width
        item.connect('repaint', Lang.bind(this, on_vert_sep_repaint));
        hbox.add(item);

        // Fill up the second column
        //
        vbox = new St.BoxLayout({vertical: true});
        hbox.add(vbox);

        // Event list
        this._taskList = new Calendar.EventsList();
        this._taskList.actor.set_width(300); // TODO: Don't hardcode the width of the list
        vbox.add(this._taskList.actor, { x_fill: true,
                                         y_fill: true });
        // Update event list when opening the menu ..
        this.menu.connect('open-state-changed', Lang.bind(this, function(menu, is_open) {
            if (is_open) {
                this._calendar.clearButtonsState();
                this._taskList.update();
            }
        }));
        // .. and also update when selecting a new day
        this._calendar.connect('activate', Lang.bind(this, function(obj, day) {
            let now = new Date();
            if (now.getDate() == day.getDate() &&
                now.getMonth() == day.getMonth() &&
                now.getFullYear() == day.getFullYear()) {
                // Today - show: Today, Tomorrow and This Week
                this._taskList.update();
            } else {
                // Not Today - show only events from that day
                this._taskList.showDay(day);
            }
        }));
        // .. TODO: and also update when changing the month

        // Done with hbox for calendar and event list
        //

        // Add separator
        item = new PopupMenu.PopupSeparatorMenuItem();
        this.menu.addMenuItem(item);

        // Add button to get to the Date and Time settings
        item = new PopupMenu.PopupImageMenuItem(_("Date and Time Settings"), 'gnome-shell-clock-preferences');
        item.connect('activate', Lang.bind(this, this._onPreferencesActivate));
        this.menu.addMenuItem(item);

        // Track changes to clock settings
        this._clockSettings = new Gio.Settings({ schema: 'org.gnome.shell.clock' });
        this._clockSettings.connect('changed', Lang.bind(this, this._clockSettingsChanged));

        // Start the clock
        this._updateClockAndDate();
    },

    _clockSettingsChanged: function() {
        this._updateClockAndDate();
    },

    _updateClockAndDate: function() {
        let format = this._clockSettings.get_string(CLOCK_FORMAT_KEY);
        let showDate = this._clockSettings.get_boolean(CLOCK_SHOW_DATE_KEY);
        let showSeconds = this._clockSettings.get_boolean(CLOCK_SHOW_SECONDS_KEY);

        let clockFormat;
        let dateFormat;

        switch (format) {
            case 'unix':
                // force updates every second
                showSeconds = true;
                clockFormat = '%s';
                break;
            case 'custom':
                // force updates every second
                showSeconds = true;
                clockFormat = this._clockSettings.get_string(CLOCK_CUSTOM_FORMAT_KEY);
                break;
            case '24-hour':
                if (showDate)
	            /* Translators: This is the time format with date used
                       in 24-hour mode. */
                    clockFormat = showSeconds ? _("%a %b %e, %R:%S")
                                              : _("%a %b %e, %R");
                else
	            /* Translators: This is the time format without date used
                       in 24-hour mode. */
                    clockFormat = showSeconds ? _("%a %R:%S")
                                              : _("%a %R");
                break;
            case '12-hour':
            default:
                if (showDate)
	            /* Translators: This is a time format with date used
                       for AM/PM. */
                    clockFormat = showSeconds ? _("%a %b %e, %l:%M:%S %p")
                                              : _("%a %b %e, %l:%M %p");
                else
	            /* Translators: This is a time format without date used
                       for AM/PM. */
                    clockFormat = showSeconds ? _("%a %l:%M:%S %p")
                                              : _("%a %l:%M %p");
                break;
        }

        let displayDate = new Date();
        let msecRemaining;
        if (showSeconds) {
            msecRemaining = 1000 - displayDate.getMilliseconds();
            if (msecRemaining < 50) {
                displayDate.setSeconds(displayDate.getSeconds() + 1);
                msecRemaining += 1000;
            }
        } else {
            msecRemaining = 60000 - (1000 * displayDate.getSeconds() +
                                     displayDate.getMilliseconds());
            if (msecRemaining < 500) {
                displayDate.setMinutes(displayDate.getMinutes() + 1);
                msecRemaining += 60000;
            }
        }

        this._clock.set_text(displayDate.toLocaleFormat(clockFormat));

        /* Translators: This is the date format to use */
        dateFormat = _("%B %e, %Y");
        this._date.set_text(displayDate.toLocaleFormat(dateFormat));

        Mainloop.timeout_add(msecRemaining, Lang.bind(this, this._updateClockAndDate));
        return false;
    },

    _onPreferencesActivate: function() {
        Main.overview.hide();
        this._spawn(['gnome-shell-clock-preferences']);
    },

    _spawn: function(args) {
        // FIXME: once Shell.Process gets support for signalling
        // errors we should pop up an error dialog or something here
        // on failure
        let p = new Shell.Process({'args' : args});
        p.run();
    }
};