summaryrefslogtreecommitdiff
path: root/wikipedia
diff options
context:
space:
mode:
authorPhilip Chimento <philip@endlessm.com>2014-01-20 17:16:03 -0200
committerPhilip Chimento <philip@endlessm.com>2014-01-22 22:30:22 -0200
commit4d7b0cb396f5a1992aacf077bcd893758cbc9b1f (patch)
tree20230ea6dc295764ea5ae7af8e04209be460333f /wikipedia
parent685b5708a1cdf2f70f75a12bd8ca8cde47fe672e (diff)
Replace back button PNG asset with SVG
This requires some restructuring because the SVG image and the label need to have different CSS. I ported the CompositeButton class from the photo app, in order to have the button transfer its prelight/active state flags to its children. [endlessm/eos-sdk#504]
Diffstat (limited to 'wikipedia')
-rw-r--r--wikipedia/Makefile.am.inc1
-rw-r--r--wikipedia/PrebuiltCategoryPage.js28
-rw-r--r--wikipedia/widgets/composite_button.js57
3 files changed, 80 insertions, 6 deletions
diff --git a/wikipedia/Makefile.am.inc b/wikipedia/Makefile.am.inc
index 6f214d1..f793c87 100644
--- a/wikipedia/Makefile.am.inc
+++ b/wikipedia/Makefile.am.inc
@@ -24,6 +24,7 @@ js_sources = \
wikipedia/ArticleList.js \
wikipedia/widgets/BackButton.js \
wikipedia/widgets/BoxWithBg.js \
+ wikipedia/widgets/composite_button.js \
wikipedia/widgets/FixedSizeTextView.js \
wikipedia/EndlessWikipedia.js \
wikipedia/PrebuiltArticlesPage.js \
diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index 6ad4be7..debf6a8 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -6,12 +6,15 @@ const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const BoxWithBg = imports.wikipedia.widgets.BoxWithBg;
+const CompositeButton = imports.wikipedia.widgets.composite_button;
const Config = imports.wikipedia.config;
const FixedSizeTextView = imports.wikipedia.widgets.FixedSizeTextView;
const ScaledImage = imports.wikipedia.widgets.scaled_image;
const SHADOW_SEPARATOR_RESOURCE_PATH = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_a.png";
const INTRO_TITLE_SEPARATOR_URI = "/com/endlessm/wikipedia-domain/assets/introduction_title_separator.png";
+const CATEGORY_BACK_BUTTON_ASSET_RESOURCE_URI = 'resource:///com/endlessm/wikipedia-domain/assets/wikipedia-category-back-symbolic.svg';
+const CATEGORY_BACK_BUTTON_SIZE_PIXELS = 68;
const LEFT_MARGIN_FOR_TEXT = 45;
GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
@@ -118,16 +121,29 @@ const PrebuiltCategoryPage = new Lang.Class({
this._description_scrolled_window.set_policy(Gtk.PolicyType.NEVER,
Gtk.PolicyType.AUTOMATIC);
- this._back_button = new Endless.AssetButton({
+ let gicon = new Gio.FileIcon({
+ file: Gio.File.new_for_uri(CATEGORY_BACK_BUTTON_ASSET_RESOURCE_URI)
+ });
+ let backButtonIcon = Gtk.Image.new_from_gicon(gicon,
+ Gtk.IconSize.DIALOG);
+ backButtonIcon.pixel_size = CATEGORY_BACK_BUTTON_SIZE_PIXELS;
+ let backButtonLabel = new Gtk.Label({
+ label: _("OTHER CATEGORIES")
+ });
+ let backButtonInnerGrid = new Gtk.Grid();
+ this._back_button = new CompositeButton.CompositeButton({
name: "category-back-button",
expand: true,
halign: Gtk.Align.START,
- valign: Gtk.Align.CENTER,
- normal_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_normal.png",
- active_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_pressed.png",
- prelight_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_hover.png",
- label: _("OTHER CATEGORIES")
+ valign: Gtk.Align.CENTER
});
+ backButtonInnerGrid.add(backButtonIcon);
+ backButtonInnerGrid.add(backButtonLabel);
+ this._back_button.add(backButtonInnerGrid);
+ this._back_button.setSensitiveChildren([
+ backButtonIcon,
+ backButtonLabel
+ ]);
this._back_button.connect('clicked', Lang.bind(this, function() {
this.emit('go-back-home');
diff --git a/wikipedia/widgets/composite_button.js b/wikipedia/widgets/composite_button.js
new file mode 100644
index 0000000..71fb559
--- /dev/null
+++ b/wikipedia/widgets/composite_button.js
@@ -0,0 +1,57 @@
+// Copyright 2014 Endless Mobile, Inc.
+
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+// Class for buttons whose :hover and :active CSS pseudoclass states should be
+// inherited by some of their child widgets, since as of GTK 3.10 these flags no
+// longer propagate from a widget to its children. Widgets in sensitiveChildren
+// will listen to this widget's state-flags-changed event and inherit all flag
+// values listed in _INHERITED_FLAGS.
+
+const CompositeButton = new Lang.Class({
+ Name: 'CompositeButton',
+ GTypeName: 'CompositeButton',
+ Extends: Gtk.Button,
+
+ _INHERITED_FLAGS: [Gtk.StateFlags.PRELIGHT, Gtk.StateFlags.ACTIVE],
+
+ _init: function (props) {
+ this._handlerSet = false;
+ this._sensitiveChildren = [];
+ this.parent(props);
+ },
+
+ // Set the list of child widgets which will inherit the CompositeButton's
+ // hover/active state flags.
+ setSensitiveChildren: function (children) {
+ this._sensitiveChildren = children;
+ // If the handlers for mouse events aren't already set, connect them
+ if (!this._handlerSet) {
+ this._connectStateChangedHandler();
+ }
+ },
+
+ _connectStateChangedHandler: function () {
+ this.connect('state-flags-changed',
+ Lang.bind(this, this._stateChangedHandler));
+ this._handlerSet = true;
+ },
+
+ _stateChangedHandler: function (widget, flags) {
+ let myFlags = this.get_state_flags();
+ this._sensitiveChildren.forEach(function (child) {
+ this._INHERITED_FLAGS.forEach(function (flag) {
+ // for each flag we want the children to inherit, grab this
+ // widget's flag value, and set the child's matching flag
+ // accordingly
+ let myFlag = myFlags & flag;
+ if (myFlag !== 0)
+ child.set_state_flags(flag, true);
+ else
+ child.unset_state_flags(flag);
+
+ });
+ }, this);
+ }
+});