diff options
author | Philip Chimento <philip@endlessm.com> | 2014-01-20 17:16:03 -0200 |
---|---|---|
committer | Philip Chimento <philip@endlessm.com> | 2014-01-22 22:30:22 -0200 |
commit | 4d7b0cb396f5a1992aacf077bcd893758cbc9b1f (patch) | |
tree | 20230ea6dc295764ea5ae7af8e04209be460333f /wikipedia | |
parent | 685b5708a1cdf2f70f75a12bd8ca8cde47fe672e (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.inc | 1 | ||||
-rw-r--r-- | wikipedia/PrebuiltCategoryPage.js | 28 | ||||
-rw-r--r-- | wikipedia/widgets/composite_button.js | 57 |
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); + } +}); |