diff options
-rw-r--r-- | data/css/eos-wikipedia-domain.css | 18 | ||||
-rw-r--r-- | wikipedia/Makefile.am.inc | 1 | ||||
-rw-r--r-- | wikipedia/PrebuiltCategoryPage.js | 30 | ||||
-rw-r--r-- | wikipedia/widgets/category_back_button.js | 47 |
4 files changed, 59 insertions, 37 deletions
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css index ed1a92e..125fcee 100644 --- a/data/css/eos-wikipedia-domain.css +++ b/data/css/eos-wikipedia-domain.css @@ -88,40 +88,40 @@ Gjs_CategoryButton.clickable:hover { background-color: rgba(0, 0, 0, 0.2); } -#category-back-button GtkImage { +.category-page .back .image { 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 { +.category-page .back .image:hover { color: white; } -#category-back-button GtkImage:active { +.category-page .back .image:active { color: #d7d7d7; } -#category-back-button GtkImage:hover, -#category-back-button GtkImage:active { +.category-page .back .image:hover, +.category-page .back .image: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 { +.category-page .back .label { font-weight: bold; color: alpha(white, 0.0); } -#category-back-button GtkLabel:hover, -#category-back-button GtkLabel:active { +.category-page .back .label:hover, +.category-page .back .label:active { text-shadow: 0px 1px 0px alpha(#000000, 0.5), 0px 0px 12px alpha(#000000, 0.3); color: alpha(white, 1.0); } -#category-back-button { +.category-page .back { padding-left: 40px; padding-right: 40px; } diff --git a/wikipedia/Makefile.am.inc b/wikipedia/Makefile.am.inc index f793c87..00e5984 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/category_back_button.js \ wikipedia/widgets/composite_button.js \ wikipedia/widgets/FixedSizeTextView.js \ wikipedia/EndlessWikipedia.js \ diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js index debf6a8..fdae4f2 100644 --- a/wikipedia/PrebuiltCategoryPage.js +++ b/wikipedia/PrebuiltCategoryPage.js @@ -1,27 +1,19 @@ const Endless = imports.gi.Endless; -const Gettext = imports.gettext; -const GLib = imports.gi.GLib; const GObject = imports.gi.GObject; 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 CategoryBackButton = imports.wikipedia.widgets.category_back_button; 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; -const _ = function(string) { return GLib.dgettext('eos-sdk', string); }; -Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale'); - function _resourceUriToPath(uri) { if(uri.startsWith('resource://')) return uri.slice('resource://'.length); @@ -121,30 +113,12 @@ const PrebuiltCategoryPage = new Lang.Class({ this._description_scrolled_window.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC); - 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({ + this._back_button = new CategoryBackButton.CategoryBackButton({ name: "category-back-button", expand: true, halign: Gtk.Align.START, 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/category_back_button.js b/wikipedia/widgets/category_back_button.js new file mode 100644 index 0000000..d358601 --- /dev/null +++ b/wikipedia/widgets/category_back_button.js @@ -0,0 +1,47 @@ +// Copyright 2014 Endless Mobile, Inc. + +const Gettext = imports.gettext; +const GLib = imports.gi.GLib; +const Gtk = imports.gi.Gtk; +const Lang = imports.lang; + +const CompositeButton = imports.wikipedia.widgets.composite_button; +const Config = imports.wikipedia.config; + +const _ = function (string) { return GLib.dgettext('eos-sdk', string); }; +Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale'); + +const CATEGORY_BACK_BUTTON_RESOURCE_URI = 'resource:///com/endlessm/wikipedia-domain/assets/wikipedia-category-back-symbolic.svg'; +const CATEGORY_BACK_BUTTON_SIZE_PIXELS = 68; +const STYLE_CONTEXT_LABEL = 'label'; +const STYLE_CONTEXT_BACK = 'back'; + +const CategoryBackButton = new Lang.Class({ + Name: 'CategoryBackButton', + GTypeName: 'CategoryBackButton', + Extends: CompositeButton.CompositeButton, + + _init: function(props) { + this.parent(props); + + let gicon = new Gio.FileIcon({ + file: Gio.File.new_for_uri(CATEGORY_BACK_BUTTON_RESOURCE_URI) + }); + let icon = Gtk.Image.new_from_gicon(gicon, Gtk.IconSize.DIALOG); + icon.pixel_size = CATEGORY_BACK_BUTTON_SIZE_PIXELS; + let label = new Gtk.Label({ + label: _("OTHER CATEGORIES") + }); + let innerGrid = new Gtk.Grid(); + + innerGrid.add(icon); + innerGrid.add(label); + this.add(innerGrid); + this.setSensitiveChildren([icon, label]); + + // Define style classes for CSS + icon.get_style_context().add_class(Gtk.STYLE_CLASS_IMAGE); + label.get_style_context().add_class(STYLE_CONTEXT_LABEL); + this.get_style_context().add_class(STYLE_CONTEXT_BACK); + } +}); |