Merge pull request #512 from endlessm/issues/505

Issues/505

5 files changed, 41 insertions, 42 deletions

diff --git a/data/assets/category_hover_arrow.png b/data/assets/category_hover_arrow.png
deleted file mode 100644
index 13a2fb0..0000000
--- a/data/assets/category_hover_arrow.png
+++ /dev/null
diff --git a/data/assets/wikipedia-category-forward-symbolic.svg b/data/assets/wikipedia-category-forward-symbolic.svg
new file mode 100644
index 0000000..2fe909d
--- /dev/null
+++ b/data/assets/wikipedia-category-forward-symbolic.svg
@@ -0,0 +1,8 @@
+<?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="42px" height="42px" viewBox="-0.5 0.5 42 42" enable-background="new -0.5 0.5 42 42" xml:space="preserve">
+<path style="fill:#bebebe" d="M20.5,0.5c-11.598,0-21,9.402-21,21s9.402,21,21,21s21-9.402,21-21S32.098,0.5,20.5,0.5z M17.999,32.499L15,29.5l7.998-8
+	L15,13.5l2.999-2.999l11,10.999L17.999,32.499z"/>
+</svg>
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 7ee21ca..e352407 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -10,7 +10,6 @@ EosWindow {
     font-family: "Lato Light";
     color: #ffffff;
     text-shadow: 0px 1px 0px alpha(#23326e, 0.15);
-    padding-top: 15px;
 }
 
 .title.main-element.category.front-page {
@@ -81,7 +80,15 @@ Gjs_CategoryButton.clickable {
 
 Gjs_CategoryButton.clickable:hover {
     background-color: alpha(#212121, 0.5);
-    transition: background-color 150ms ease-in-out;
+}
+
+Gjs_CategoryButton .image {
+    opacity: 0.0;
+    transition: opacity 150ms ease-in-out;
+}
+
+Gjs_CategoryButton.clickable .image:hover {
+    opacity: 1.0;
 }
 
 #side_bar_button:hover {
diff --git a/data/eos-wikipedia-domain.gresource.xml b/data/eos-wikipedia-domain.gresource.xml
index 8f0025d..0d319b1 100644
--- a/data/eos-wikipedia-domain.gresource.xml
+++ b/data/eos-wikipedia-domain.gresource.xml
@@ -10,9 +10,9 @@
     <file>assets/submenu_separator_shadow_b.png</file>
     <file>assets/submenu_hover_arrow.png</file>
     <file>assets/submenu_background.jpg</file>
-    <file>assets/category_hover_arrow.png</file>
     <file>assets/image_strip_back_button.png</file>
     <file compressed="true">assets/wikipedia-category-back-symbolic.svg</file>
+    <file compressed="true">assets/wikipedia-category-forward-symbolic.svg</file>
     <file>assets/topbar_back_icon_normal.png</file>
   </gresource>
 </gresources>
diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
index e6cfdde..08ce2ed 100644
--- a/wikipedia/widgets/category_button.js
+++ b/wikipedia/widgets/category_button.js
@@ -4,24 +4,20 @@ const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
+const CompositeButton = imports.wikipedia.widgets.composite_button;
 const Utils = imports.wikipedia.utils;
 
-const CATEGORY_LABEL_LEFT_MARGIN = 25;  // pixels
-const CATEGORY_LABEL_BOTTOM_MARGIN = 20;  // pixels
-const CATEGORY_BUTTON_RIGHT_MARGIN = 20;  // pixels
-const CATEGORY_BUTTON_BOTTOM_MARGIN = 20;  // pixels
-// The following two are corrections because GTK 3.8 doesn't have baseline
-// alignment. Remove and align properly in GTK 3.10. FIXME
-const CATEGORY_LABEL_BASELINE_CORRECTION = 0; // pixels
-const CATEGORY_BUTTON_BASELINE_CORRECTION = 10; // pixels
-const _HOVER_ARROW_URI = '/com/endlessm/wikipedia-domain/assets/category_hover_arrow.png';
+const CATEGORY_LABEL_LEFT_MARGIN_PIXELS = 5;  // in addition to the 20px below
+const CATEGORY_LABEL_SPACING_PIXELS = 20;
+const CATEGORY_BUTTON_SIZE_PIXELS = 42;
+const CATEGORY_BUTTON_RESOURCE_URI = 'resource:///com/endlessm/wikipedia-domain/assets/wikipedia-category-forward-symbolic.svg';
 const CATEGORY_MIN_WIDTH = 120; // pixels
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
 const CategoryButton = new Lang.Class({
     Name: 'CategoryButton',
-    Extends: Gtk.Button,
+    Extends: CompositeButton.CompositeButton,
     Properties: {
         // resource URI for the category's accompanying image
         'image-uri': GObject.ParamSpec.string('image-uri',
@@ -60,31 +56,31 @@ const CategoryButton = new Lang.Class({
         this._is_main_category = null;
         this._pixbuf = null;
 
-        this._overlay = new Gtk.Overlay({
+        this._inner_grid = new Gtk.Grid({
+            valign: Gtk.Align.END,
+            halign: Gtk.Align.FILL,
+            border_width: CATEGORY_LABEL_SPACING_PIXELS,
+            column_spacing: CATEGORY_LABEL_SPACING_PIXELS,
             expand: true
         });
         this._label = new Gtk.Label({
-            margin_left: CATEGORY_LABEL_LEFT_MARGIN,
-            margin_bottom: CATEGORY_LABEL_BOTTOM_MARGIN - CATEGORY_LABEL_BASELINE_CORRECTION,
+            margin_left: CATEGORY_LABEL_LEFT_MARGIN_PIXELS,
             halign: Gtk.Align.START,
-            valign: Gtk.Align.END,
+            valign: Gtk.Align.BASELINE,
             xalign: 0.0,  // deprecated Gtk.Misc properties; necessary because
             wrap: true,   // "wrap" doesn't respect "halign"
-            width_chars: 18,
             max_width_chars: 20
         });
         this._arrow = new Gtk.Image({
-            resource: _HOVER_ARROW_URI,
-            margin_right: CATEGORY_BUTTON_RIGHT_MARGIN,
-            margin_bottom: CATEGORY_BUTTON_BOTTOM_MARGIN + CATEGORY_BUTTON_BASELINE_CORRECTION,
+            gicon: new Gio.FileIcon({
+                file: Gio.File.new_for_uri(CATEGORY_BUTTON_RESOURCE_URI)
+            }),
+            pixel_size: CATEGORY_BUTTON_SIZE_PIXELS,
+            hexpand: true,
             halign: Gtk.Align.END,
             valign: Gtk.Align.END
         });
-        // Make the arrow image transparent to mouse events
-        this._arrow.connect_after('realize', function (frame) {
-            let gdk_window = frame.get_window();
-            gdk_window.set_child_input_shapes();
-        });
+        this._arrow.get_style_context().add_class(Gtk.STYLE_CLASS_IMAGE);
 
         let context = this._label.get_style_context();
         context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
@@ -95,21 +91,11 @@ const CategoryButton = new Lang.Class({
         this.parent(props);
 
         // Put widgets together
-        let alignment = new Gtk.Alignment({ expand: true });
-        alignment.add(this._label);
-        this._overlay.add(alignment);
-        this._overlay.add_overlay(this._arrow);
-        this.add(this._overlay);
+        this.setSensitiveChildren([this._arrow]);
+        this._inner_grid.add(this._label);
+        this._inner_grid.add(this._arrow);
+        this.add(this._inner_grid);
         this.show_all();
-        this._arrow.hide();
-
-        this.connect("enter", Lang.bind(this, function (w) {
-            if(this._clickable_category)
-                this._arrow.show();
-        }));
-        this.connect("leave", Lang.bind(this, function (w) {
-            this._arrow.hide();
-        }));
     },
 
     get image_uri() {
@@ -152,8 +138,6 @@ const CategoryButton = new Lang.Class({
         if(this._is_main_category) {
             let context = this._label.get_style_context();
             context.add_class(EndlessWikipedia.STYLE_CLASS_MAIN);
-            this._label.margin_bottom = 0;
-            this._label.width_chars = 8;
             this._label.max_width_chars = 9;
         }
     },