diff options
-rw-r--r-- | data/assets/introduction_back_button_hover.png | bin | 9252 -> 0 bytes | |||
-rw-r--r-- | data/assets/introduction_back_button_normal.png | bin | 8932 -> 0 bytes | |||
-rw-r--r-- | data/assets/introduction_back_button_pressed.png | bin | 8029 -> 0 bytes | |||
-rw-r--r-- | data/assets/wikipedia-category-back-symbolic.svg | 9 | ||||
-rw-r--r-- | data/css/eos-wikipedia-domain.css | 27 | ||||
-rw-r--r-- | data/eos-wikipedia-domain.gresource.xml | 4 | ||||
-rw-r--r-- | wikipedia/Makefile.am.inc | 1 | ||||
-rw-r--r-- | wikipedia/PrebuiltCategoryPage.js | 28 | ||||
-rw-r--r-- | wikipedia/widgets/composite_button.js | 57 |
9 files changed, 115 insertions, 11 deletions
diff --git a/data/assets/introduction_back_button_hover.png b/data/assets/introduction_back_button_hover.png Binary files differdeleted file mode 100644 index 418fee7..0000000 --- a/data/assets/introduction_back_button_hover.png +++ /dev/null diff --git a/data/assets/introduction_back_button_normal.png b/data/assets/introduction_back_button_normal.png Binary files differdeleted file mode 100644 index 54ea015..0000000 --- a/data/assets/introduction_back_button_normal.png +++ /dev/null diff --git a/data/assets/introduction_back_button_pressed.png b/data/assets/introduction_back_button_pressed.png Binary files differdeleted file mode 100644 index a1d3bc0..0000000 --- a/data/assets/introduction_back_button_pressed.png +++ /dev/null diff --git a/data/assets/wikipedia-category-back-symbolic.svg b/data/assets/wikipedia-category-back-symbolic.svg new file mode 100644 index 0000000..f844163 --- /dev/null +++ b/data/assets/wikipedia-category-back-symbolic.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" + width="68px" height="68px" viewBox="-0.5 0.5 68 68" enable-background="new -0.5 0.5 68 68" xml:space="preserve"> +<path style="fill:#bebebe" d="M33.5,68.5c18.776,0,34-15.224,34-34c0-18.775-15.224-34-34-34c-18.775,0-34,15.225-34,34 + C-0.5,53.276,14.725,68.5,33.5,68.5z M37.456,16.652l5.151,5.15L29.73,34.682l12.876,12.88l-5.151,5.152L19.424,34.682 + L37.456,16.652z"/> +</svg> diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css index ad1c9b3..ed1a92e 100644 --- a/data/css/eos-wikipedia-domain.css +++ b/data/css/eos-wikipedia-domain.css @@ -88,12 +88,35 @@ Gjs_CategoryButton.clickable:hover { background-color: rgba(0, 0, 0, 0.2); } -.category-page Gjs_AssetButton { +#category-back-button GtkImage { + color: black; + opacity: 0.6; + icon-shadow: inset 0 1px 1px alpha(black, 0.5), 0 1px alpha(white, 0.2); +} + +#category-back-button GtkImage:hover { + color: white; +} + +#category-back-button GtkImage:active { + color: #d7d7d7; +} + +#category-back-button GtkImage:hover, +#category-back-button GtkImage:active { + opacity: 0.95; + icon-shadow: inset 0 1px 1px alpha(black, 0.5), + 0 1px alpha(white, 0.2), + 0 0 15px alpha(black, 0.15); +} + +#category-back-button GtkLabel { font-weight: bold; color: alpha(white, 0.0); } -.category-page Gjs_AssetButton:prelight { +#category-back-button GtkLabel:hover, +#category-back-button GtkLabel:active { text-shadow: 0px 1px 0px alpha(#000000, 0.5), 0px 0px 12px alpha(#000000, 0.3); color: alpha(white, 1.0); } diff --git a/data/eos-wikipedia-domain.gresource.xml b/data/eos-wikipedia-domain.gresource.xml index e4672d1..8f0025d 100644 --- a/data/eos-wikipedia-domain.gresource.xml +++ b/data/eos-wikipedia-domain.gresource.xml @@ -12,9 +12,7 @@ <file>assets/submenu_background.jpg</file> <file>assets/category_hover_arrow.png</file> <file>assets/image_strip_back_button.png</file> - <file>assets/introduction_back_button_normal.png</file> - <file>assets/introduction_back_button_pressed.png</file> - <file>assets/introduction_back_button_hover.png</file> + <file compressed="true">assets/wikipedia-category-back-symbolic.svg</file> <file>assets/topbar_back_icon_normal.png</file> </gresource> </gresources> 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); + } +}); |