summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRory MacQueen <rorymacqueen@gmail.com>2013-09-30 21:58:00 -0700
committerRory MacQueen <rorymacqueen@gmail.com>2013-10-01 16:08:12 -0700
commited8c15a21b0f5060c1403a80047bbd785ea7b511 (patch)
treea14a287354f6db70971e9031ffb83f14c5f73b6b
parente3c9ea1cb19dc4d381c263b718ffd24e5ef55438 (diff)
Styled top bar back button
Previously, the back button on the top window bar was not styled correctly according to designs. This commit changes the BackButton widget to now suclass Endless Asset Button and have the right styling. [endlessm/eos-sdk#301]
-rw-r--r--data/assets/topbar_back_icon_normal.pngbin0 -> 1438 bytes
-rw-r--r--data/css/eos-wikipedia-domain.css20
-rw-r--r--data/eos-wikipedia-domain.gresource.xml1
-rw-r--r--po/POTFILES.in1
-rw-r--r--wikipedia/PrebuiltCategoryPage.js7
-rw-r--r--wikipedia/views/domain_wiki_view.js11
-rw-r--r--wikipedia/widgets/BackButton.js20
7 files changed, 36 insertions, 24 deletions
diff --git a/data/assets/topbar_back_icon_normal.png b/data/assets/topbar_back_icon_normal.png
new file mode 100644
index 0000000..84c6861
--- /dev/null
+++ b/data/assets/topbar_back_icon_normal.png
Binary files differ
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 2b20fb5..5e42acd 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -52,23 +52,23 @@ Gjs_ArticleList .scrollbar.slider {
background-color: #babdb6;
}
-#category_info{
+.category-page #category_info{
background-color: rgba(0, 0, 0, 0.5);
}
-#category_description{
+.category-page #category_description{
color:rgba(255, 255, 255, 1.0);
background-color: rgba(0, 0, 0, 0);
font-size: 12px;
font-family: "Source Sans Pro";
}
-#category_scrolled_window .scrollbar.slider {
+.category-page #category_scrolled_window .scrollbar.slider {
border-radius: 6px;
background-color: alpha(white, 0.3);
}
-#category_title{
+.category-page #category_title{
/* Top padding is hack because we have bad version of BentonSans */
padding-top: 20px;
font-family: "BentonSans ExtraLight";
@@ -89,12 +89,20 @@ Gjs_CategoryButton GtkEventBox:hover {
background-color: rgba(0, 0, 0, 0.2);
}
-#category_page_back_button {
+.category-page Gjs_AssetButton {
font-weight: bold;
color: alpha(white, 0.0);
}
-#category_page_back_button:prelight {
+.category-page Gjs_AssetButton:prelight {
text-shadow: 0px 1px 0px alpha(#000000, 0.5), 0px 0px 12px alpha(#000000, 0.3);
color: alpha(white, 1.0);
}
+
+Gjs_BackButton {
+ -GtkButton-image-spacing: 7;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
diff --git a/data/eos-wikipedia-domain.gresource.xml b/data/eos-wikipedia-domain.gresource.xml
index 19c31f4..8442d5e 100644
--- a/data/eos-wikipedia-domain.gresource.xml
+++ b/data/eos-wikipedia-domain.gresource.xml
@@ -16,5 +16,6 @@
<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>assets/topbar_back_icon_normal.png</file>
</gresource>
</gresources>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 017b1f7..2639260 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -1,3 +1,4 @@
# List of source files which contain translatable strings.
wikipedia/views/domain_wiki_view.js
+wikipedia/widgets/BackButton.js
wikipedia/PrebuiltCategoryPage.js
diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index be20547..3ad3ebf 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -122,8 +122,7 @@ const PrebuiltCategoryPage = new Lang.Class({
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"),
- name: "category_page_back_button"
+ label: _("OTHER CATEGORIES")
});
this._back_button.connect('clicked', Lang.bind(this, function() {
@@ -153,6 +152,10 @@ const PrebuiltCategoryPage = new Lang.Class({
this.add(this._outer_most_grid);
this._category_provider = new Gtk.CssProvider();
+
+ // Add style contexts for CSS
+ let context = this.get_style_context();
+ context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY_PAGE);
},
get title() {
diff --git a/wikipedia/views/domain_wiki_view.js b/wikipedia/views/domain_wiki_view.js
index 90a29ff..ca0d6bd 100644
--- a/wikipedia/views/domain_wiki_view.js
+++ b/wikipedia/views/domain_wiki_view.js
@@ -1,18 +1,12 @@
const EndlessWikipedia = imports.wikipedia.EndlessWikipedia;
-const Gettext = imports.gettext;
-const GLib = imports.gi.GLib;
const Lang = imports.lang;
const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;
const Endless = imports.gi.Endless;
-const Config = imports.wikipedia.config;
const BackButton = imports.wikipedia.widgets.BackButton;
const SideBarButton = imports.wikipedia.widgets.SideBarButton;
-const _ = function(string) { return GLib.dgettext('eos-sdk', string); };
-Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale');
-
const SIDEBAR_BACK_BUTTON_URI = "/com/endlessm/wikipedia-domain/assets/image_strip_back_button.png";
const SUBMENU_SEPARATOR_A_URI = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_a.png";
const SUBMENU_SEPARATOR_B_URI = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_b.png";
@@ -142,12 +136,9 @@ const DomainWikiView = new Lang.Class({
this._category_page.add(this._category_view);
this._category_page.add(this._category_article_list);
- this._category_back_button = new BackButton.BackButton({
- label: _("HOME")
- });
+ this._category_back_button = new BackButton.BackButton();
this._category_back_button.show();
-
this._category_article_list.connect('article-chosen',
Lang.bind(this, this._onArticleClicked));
diff --git a/wikipedia/widgets/BackButton.js b/wikipedia/widgets/BackButton.js
index cfb3155..2d44e3f 100644
--- a/wikipedia/widgets/BackButton.js
+++ b/wikipedia/widgets/BackButton.js
@@ -1,18 +1,26 @@
+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 Config = imports.wikipedia.config;
+
+const _ = function(string) { return GLib.dgettext('eos-sdk', string); };
+Gettext.bindtextdomain('eos-sdk', Config.DATADIR + '/locale');
+
+const BACK_BUTTON_URI = "resource://com/endlessm/wikipedia-domain/assets/topbar_back_icon_normal.png";
+
const BackButton = new Lang.Class({
Name: 'BackButton',
- Extends: Gtk.Button,
+ Extends: Endless.AssetButton,
_init: function(props) {
props = props || {};
- props.image = Gtk.Image.new_from_icon_name('go-previous-symbolic',
- Gtk.IconSize.BUTTON);
- props.always_show_image = true;
- // Don't do that. What should actually happen is the system-wide setting
- // that controls whether buttons show images should be changed.
+ props.label = _("BACK");
+ props.normal_image_uri = BACK_BUTTON_URI;
+
this.parent(props);
}
});