summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--data/assets/introduction_back_button_hover.pngbin9252 -> 0 bytes
-rw-r--r--data/assets/introduction_back_button_normal.pngbin8932 -> 0 bytes
-rw-r--r--data/assets/introduction_back_button_pressed.pngbin8029 -> 0 bytes
-rw-r--r--data/assets/wikipedia-category-back-symbolic.svg9
-rw-r--r--data/css/eos-wikipedia-domain.css27
-rw-r--r--data/eos-wikipedia-domain.gresource.xml4
-rw-r--r--wikipedia/Makefile.am.inc1
-rw-r--r--wikipedia/PrebuiltCategoryPage.js28
-rw-r--r--wikipedia/widgets/composite_button.js57
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
deleted file mode 100644
index 418fee7..0000000
--- a/data/assets/introduction_back_button_hover.png
+++ /dev/null
Binary files differ
diff --git a/data/assets/introduction_back_button_normal.png b/data/assets/introduction_back_button_normal.png
deleted file mode 100644
index 54ea015..0000000
--- a/data/assets/introduction_back_button_normal.png
+++ /dev/null
Binary files differ
diff --git a/data/assets/introduction_back_button_pressed.png b/data/assets/introduction_back_button_pressed.png
deleted file mode 100644
index a1d3bc0..0000000
--- a/data/assets/introduction_back_button_pressed.png
+++ /dev/null
Binary files differ
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);
+ }
+});
generated by cgit v1.2.1 (git 2.18.0) at 2021-09-21 06:35:33 +0000