summaryrefslogtreecommitdiff
path: root/wikipedia/src
diff options
context:
space:
mode:
Diffstat (limited to 'wikipedia/src')
-rw-r--r--wikipedia/src/endless_wikipedia/ArticleList.js16
-rw-r--r--wikipedia/src/endless_wikipedia/EndlessWikipedia.js5
-rw-r--r--wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js32
-rw-r--r--wikipedia/src/endless_wikipedia/textButton.js50
4 files changed, 84 insertions, 19 deletions
diff --git a/wikipedia/src/endless_wikipedia/ArticleList.js b/wikipedia/src/endless_wikipedia/ArticleList.js
index 9406181..59f1ef9 100644
--- a/wikipedia/src/endless_wikipedia/ArticleList.js
+++ b/wikipedia/src/endless_wikipedia/ArticleList.js
@@ -1,10 +1,11 @@
const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
-
+const HOVER_ARROW_URI = "/com/endlessm/brazil/assets/submenu_hover_arrow.png";
const ArticleList = new Lang.Class({
Name: 'ArticleList',
Extends: Gtk.ScrolledWindow,
+
Signals: {
'article-chosen': {
param_types: [GObject.TYPE_STRING, GObject.TYPE_INT]
@@ -16,11 +17,13 @@ const ArticleList = new Lang.Class({
props.hscrollbar_policy = Gtk.PolicyType.NEVER;
props.vscrollbar_policy = Gtk.PolicyType.AUTOMATIC,
this.parent(props);
-
this._grid = new Gtk.Grid({
orientation: Gtk.Orientation.VERTICAL,
vexpand: true
});
+
+ //width is set per designs, height is set arbitrarily for now but doesn't matter because it's just a min size
+ this.set_size_request(258, 500);
this.add(this._grid);
},
@@ -33,16 +36,11 @@ const ArticleList = new Lang.Class({
// Create new ones
articles.forEach(function(title, index, obj) {
- var button = Gtk.Button.new_with_label(title.toUpperCase());
- button.image = Gtk.Image.new_from_icon_name('go-next-symbolic',
- Gtk.IconSize.BUTTON);
- button.always_show_image = true; // Don't do this, see BackButton.js
- button.image_position = Gtk.PositionType.RIGHT;
- button.xalign = 0;
+ let button = new EndlessWikipedia.TextButton(HOVER_ARROW_URI, title, {hexpand:true});
button.connect('clicked', Lang.bind(this, function() {
this.emit('article-chosen', title, index);
}));
- button.show();
+
this._grid.add(button);
}, this);
}
diff --git a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
index 5cd3740..9028173 100644
--- a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
+++ b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
@@ -23,7 +23,10 @@ const _BackButton = imports.endless_wikipedia.BackButton;
this.BackButton = _BackButton.BackButton;
const _BoxWithBg = imports.endless_wikipedia.BoxWithBg;
-this.BoxWithBg = _BoxWithBg.BoxWithBg;
+this.BoxWithBg = _BoxWithBg.BoxWithBg;
+
+const _TextButton = imports.endless_wikipedia.textButton;
+this.TextButton = _TextButton.TextButton;
const STYLE_CLASS_TITLE = 'title';
const STYLE_CLASS_PREBUILT = 'prebuilt';
diff --git a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
index b0bce2d..f46ca2a 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltCategoryPage.js
@@ -49,11 +49,12 @@ const PrebuiltCategoryPage = new Lang.Class({
expand: true,
});
- this._grid = new Gtk.Grid({
- orientation: Gtk.Orientation.VERTICAL,
+ this._layout_grid = new Gtk.Grid({
+ orientation: Gtk.Orientation.HORIZONTAL,
expand: true,
halign: Gtk.Align.END
});
+
this._title_label = new Gtk.Label({
name:"category_title",
vexpand: false,
@@ -66,7 +67,16 @@ const PrebuiltCategoryPage = new Lang.Class({
vexpand: false
});
- this._separator = new Gtk.Image({
+ this._submenu_separator = new Gtk.Image({
+ halign:Gtk.Align.END,
+ resource: "/com/endlessm/brazil/assets/submenu_separator_shadow_a.png"
+ });
+
+ this._splash_separator = new Gtk.Image({
+ resource: "/com/endlessm/brazil/assets/category_splash_separator_shadow.png"
+ });
+
+ this._description_separator = new Gtk.Image({
resource: "/com/endlessm/brazil/assets/introduction_title_separator.png"
});
@@ -80,17 +90,21 @@ const PrebuiltCategoryPage = new Lang.Class({
this._description_label.set_line_wrap(true);
this._description_label.set_max_width_chars(40);
- this._grid.set_size_request(100, 100);
-
this.parent(props);
this._vbox.pack_start(this._title_label, false, false, 0);
- this._vbox.pack_start(this._separator, false, false, 0);
- this._vbox.pack_start(this._description_label, true, true, 0);
- this._grid.add(this._vbox);
+ this._vbox.pack_start(this._description_separator, false, false, 0);
+ this._vbox.pack_start(this._description_label, true, true, 0);
+
+ this._layout_grid.add(this._splash_separator);
+ this._layout_grid.add(this._vbox);
+
+ this._overlay = new Gtk.Overlay({halign:Gtk.Align.END});
+ this._overlay.add(this._layout_grid);
+ this._overlay.add_overlay(this._submenu_separator);
+ this._frame.add(this._overlay);
this.add(this._frame);
- this._frame.add(this._grid);
this._category_provider = new Gtk.CssProvider();
},
diff --git a/wikipedia/src/endless_wikipedia/textButton.js b/wikipedia/src/endless_wikipedia/textButton.js
new file mode 100644
index 0000000..f8cf373
--- /dev/null
+++ b/wikipedia/src/endless_wikipedia/textButton.js
@@ -0,0 +1,50 @@
+const Lang = imports.lang;
+const Gdk = imports.gi.Gdk;
+const GdkPixbuf = imports.gi.GdkPixbuf;
+const Gtk = imports.gi.Gtk;
+
+const TextButton = new Lang.Class({
+ Name: 'EndlessTextButton',
+ 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();
+ 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()
+ });
+
+ 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();
+ this._image.hide();
+ },
+
+ _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;
+ }
+});
+
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-02 18:19:17 +0000