1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
const Lang = imports.lang;
const Gdk = imports.gi.Gdk;
const GdkPixbuf = imports.gi.GdkPixbuf;
const Gtk = imports.gi.Gtk;
const Pango = imports.gi.Pango;
// This is an approximate number of characters that will keep the label from
// going over its specified width
const ARTICLE_LABEL_MAX_WIDTH_CHARS = 22;
const ListTextButton = new Lang.Class({
Name: 'EndlessListTextButton',
Extends: Gtk.Button,
// This is a button for the article list widget. It has a label and an icon image.
// The icon image will only appear on hover or press of button
_init: function(hover_icon_path, label_text, params) {
params.hexpand = true;
this.parent(params);
this._hover_icon_pixbuf = GdkPixbuf.Pixbuf.new_from_resource(hover_icon_path);
this._image = new Gtk.Image({
no_show_all: true
});
this._image.set_from_pixbuf(this._hover_icon_pixbuf);
this._box = new Gtk.Box({
orientation: Gtk.Orientation.HORIZONTAL
});
this._label = new Gtk.Label({
label: label_text.toUpperCase(),
max_width_chars: ARTICLE_LABEL_MAX_WIDTH_CHARS,
ellipsize: Pango.EllipsizeMode.END
});
this._box.pack_start(this._label, false, false, 0);
this._box.pack_end(this._image, false, false, 0);
this.add(this._box);
this.connect('state-changed', Lang.bind(this, this._update_appearance));
this.show_all();
},
_update_appearance: function(widget, state) {
// If button is hovered over and/or pressed, then show the arrow icon
if (widget.get_state_flags() & Gtk.StateFlags.ACTIVE ||
widget.get_state_flags() & Gtk.StateFlags.PRELIGHT) {
this._image.show();
return false;
}
// If no hover or press, then hide the arrow icon
this._image.hide();
return false;
}
});
|