summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhilip Chimento <philip@endlessm.com>2014-01-20 17:51:02 -0200
committerPhilip Chimento <philip@endlessm.com>2014-01-22 22:33:34 -0200
commit46b36cd29f5dd4fe7aefce1e2edb668c3254cee6 (patch)
tree2d058f9667f968548545611249f757bc9df8d016
parent4d7b0cb396f5a1992aacf077bcd893758cbc9b1f (diff)
Move category back button to its own class
For better code organization and cleaner CSS; add style classes. [endlessm/eos-sdk#504]
-rw-r--r--data/css/eos-wikipedia-domain.css18
-rw-r--r--wikipedia/Makefile.am.inc1
-rw-r--r--wikipedia/PrebuiltCategoryPage.js30
-rw-r--r--wikipedia/widgets/category_back_button.js47
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);
+ }
+});