summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--data/css/eos-wikipedia-domain.css7
-rw-r--r--wikipedia/PrebuiltCategoryPage.js33
-rw-r--r--wikipedia/utils.js57
-rw-r--r--wikipedia/views/category_button.js24
-rw-r--r--wikipedia/views/title_label_view.js31
5 files changed, 59 insertions, 93 deletions
diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 35f409b..1007532 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -6,6 +6,7 @@
font-family: "BentonSans ExtraLight";
color: #ffffff;
text-shadow: 0px 1px 0px alpha(#23326e, 0.15);
+ padding-top: 15px;
}
.title.front-page {
@@ -14,6 +15,7 @@
.title.category.front-page {
font-size: 40px;
+ padding-top: 9px;
}
Gjs_ArticleList{
@@ -40,6 +42,11 @@ Gjs_ArticleList .button:active {
background-image: url('resource:///com/endlessm/wikipedia-domain/assets/submenu_bg_pressed.png');
}
+Gjs_ArticleList .scrollbar.slider {
+ border-radius: 6px;
+ background-color: alpha(#464646, 0.5);
+}
+
.articles-page {
color: black;
background-color: #babdb6;
diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index 05240b6..7222443 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -7,6 +7,7 @@ const Lang = imports.lang;
const BoxWithBg = imports.BoxWithBg;
const ScaledImage = imports.scaled_image;
+const CATEGORY_DESCRIPTION_WIDTH = 520;
const SUBMENU_SEPARATOR_A_URI = "/com/endlessm/wikipedia-domain/assets/submenu_separator_shadow_a.png";
const SPLASH_SEPARATOR_URI = "/com/endlessm/wikipedia-domain/assets/category_splash_separator_shadow.png";
const INTRO_TITLE_SEPARATOR_URI = "/com/endlessm/wikipedia-domain/assets/introduction_title_separator.png";
@@ -47,6 +48,7 @@ const PrebuiltCategoryPage = new Lang.Class({
orientation: Gtk.Orientation.VERTICAL,
expand:true
});
+ this._vbox.set_size_request(CATEGORY_DESCRIPTION_WIDTH, -1);
this._title = null;
this._description = null;
@@ -64,16 +66,8 @@ const PrebuiltCategoryPage = new Lang.Class({
this._title_label = new Gtk.Label({
name:"category_title",
- vexpand: false,
- halign: Gtk.Align.START,
- margin_left:45,
- margin_right:45
- });
- this._title_label.set_size_request(460, -1);
-
- this._separator = new Gtk.Separator({
- orientation: Gtk.Orientation.HORIZONTAL,
- vexpand: false
+ expand: false,
+ halign: Gtk.Align.START
});
this._submenu_separator = new ScaledImage.ScaledImage({
@@ -95,6 +89,8 @@ const PrebuiltCategoryPage = new Lang.Class({
this._description_text_view = new Gtk.TextView({
name:"category_description",
+ expand: true,
+ margin_left: 6, // stupid Benton Sans correction
sensitive: false,
editable: false,
cursor_visible: false
@@ -104,18 +100,25 @@ const PrebuiltCategoryPage = new Lang.Class({
this._description_text_view.set_wrap_mode(Gtk.WrapMode.WORD);
this._description_scrolled_window = new Gtk.ScrolledWindow({
- margin_left: 45,
- margin_right: 45
+ halign: Gtk.Align.FILL
});
this._description_scrolled_window.add(this._description_text_view);
this._description_scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS);
+ this._inner_grid = new Gtk.Grid({
+ orientation: Gtk.Orientation.VERTICAL,
+ expand: true,
+ margin_left: 45,
+ margin_right: 45
+ });
+
this.parent(props);
- this._vbox.pack_start(this._title_label, false, false, 0);
- this._vbox.pack_start(this._description_separator, false, false, 0);
- this._vbox.pack_start(this._description_scrolled_window, true, true, 0);
+ this._inner_grid.add(this._title_label);
+ this._inner_grid.add(this._description_separator);
+ this._inner_grid.add(this._description_scrolled_window);
+ this._vbox.add(this._inner_grid);
this._layout_grid.add(this._splash_separator);
this._layout_grid.add(this._vbox);
diff --git a/wikipedia/utils.js b/wikipedia/utils.js
index 404f412..f08deed 100644
--- a/wikipedia/utils.js
+++ b/wikipedia/utils.js
@@ -162,39 +162,30 @@ const array_contains = function (arr, obj, same_type) {
return false;
};
-// Convenience function to parse a clutter color from a string
-function parse_clutter_color(color_string) {
- let [res, color] = Clutter.Color.from_string(color_string);
- return color;
-}
-
-// Convenience function to load a gresource image into a Clutter.Image
-function load_clutter_image_from_resource(resource_path) {
- let pixbuf = GdkPixbuf.Pixbuf.new_from_resource(resource_path);
- let image = new Clutter.Image();
- if (pixbuf != null) {
- image.set_data(pixbuf.get_pixels(),
- pixbuf.get_has_alpha()
- ? Cogl.PixelFormat.RGBA_8888
- : Cogl.PixelFormat.RGB_888,
- pixbuf.get_width(),
- pixbuf.get_height(),
- pixbuf.get_rowstride());
- }
- return image;
-}
-
-// Private function to format a clutter actors allocation and print it
-function _clutter_allocation_printer(actor, box, flag) {
- print("Allocation for", actor);
- print(" Xs:", box.x1, box.x2);
- print(" Ys:", box.y1, box.y2);
-}
-
-// Call this function on a clutter actor to have it log it's allocation to
-// console
-function print_clutter_actor_allocation(actor) {
- actor.connect('allocation-changed', _clutter_allocation_printer);
+/*
+ * Loads a pixbuf sized to cover the dest_width and dest_height with the
+ * image in res_path, while mataining the aspect ratio of the image
+ */
+function load_pixbuf_cover(res_path, dest_width, dest_height) {
+ let [load_width, load_height] = [dest_width, dest_height];
+ // TODO: We need to get the size of the source image, so right now we
+ // are loading the image twice, once to get the size, and the again at
+ // the proper size. We should eventually use a GdkPixbuf.Loader and
+ // connect to the size-prepared signal, as described in the
+ // documentation
+ let temp_pixbuf = GdkPixbuf.Pixbuf.new_from_resource(res_path);
+ let source_aspect = temp_pixbuf.width / temp_pixbuf.height;
+ let dest_aspect = dest_width / dest_height;
+ if(dest_aspect > source_aspect)
+ load_height = -1;
+ else
+ load_width = -1;
+ let source_pixbuf = GdkPixbuf.Pixbuf.new_from_resource_at_scale(res_path,
+ load_width, load_height, true);
+ let cropped_pixbuf = source_pixbuf;
+ if(dest_width < source_pixbuf.width || dest_height < source_pixbuf.height)
+ cropped_pixbuf = source_pixbuf.new_subpixbuf(0, 0, dest_width, dest_height);
+ return cropped_pixbuf;
}
// Convenience function to convert a resource URI to a resource path, for
diff --git a/wikipedia/views/category_button.js b/wikipedia/views/category_button.js
index 0761a58..7fde6a1 100644
--- a/wikipedia/views/category_button.js
+++ b/wikipedia/views/category_button.js
@@ -112,9 +112,10 @@ const CategoryButton = new Lang.Class({
set image_uri(value) {
this._image_uri = value;
if(this._image) {
- let res_path = Utils.resourceUriToPath(value);
let allocation = this.get_allocation();
- this._updateImage(res_path, allocation.width, allocation.height);
+ let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
+ allocation.width, allocation.height);
+ this._image.set_from_pixbuf(new_pixbuf);
}
},
@@ -132,29 +133,14 @@ const CategoryButton = new Lang.Class({
vfunc_size_allocate: function(allocation) {
this.parent(allocation);
- this._updateImage(Utils.resourceUriToPath(this._image_uri),
+ let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
allocation.width, allocation.height);
+ this._image.set_from_pixbuf(new_pixbuf);
},
// HANDLERS
_onButtonPress: function(widget, event) {
this.emit('clicked')
- },
-
- // PRIVATE
-
- _updateImage: function(res_path, width, height) {
- let [source_width, source_height] = [width, height];
- if(width > height)
- source_height = -1;
- else
- source_width = -1;
- let source_pixbuf = GdkPixbuf.Pixbuf.new_from_resource_at_scale(res_path,
- source_width, source_height, true);
- let cropped_pixbuf = source_pixbuf;
- if(width < source_pixbuf.width || height < source_pixbuf.height)
- cropped_pixbuf = source_pixbuf.new_subpixbuf(0, 0, width, height);
- this._image.set_from_pixbuf(cropped_pixbuf);
}
});
diff --git a/wikipedia/views/title_label_view.js b/wikipedia/views/title_label_view.js
index 8ea821b..479747d 100644
--- a/wikipedia/views/title_label_view.js
+++ b/wikipedia/views/title_label_view.js
@@ -60,8 +60,9 @@ const TitleLabelView = new Lang.Class({
vfunc_size_allocate: function(allocation) {
this.parent(allocation);
if(this._image_uri !== "" && this._image_uri != null) {
- this._updateImage(Utils.resourceUriToPath(this._image_uri),
+ let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
allocation.width, allocation.height);
+ this._image.set_from_pixbuf(new_pixbuf);
}
},
@@ -86,31 +87,9 @@ const TitleLabelView = new Lang.Class({
if(this._image) {
let res_path = Utils.resourceUriToPath(value);
let allocation = this.get_allocation();
- this._updateImage(res_path, allocation.width, allocation.height);
+ let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
+ allocation.width, allocation.height);
+ this._image.set_from_pixbuf(new_pixbuf);
}
- },
-
- // PRIVATE
-
- _updateImage: function(res_path, dest_width, dest_height) {
- let [source_width, source_height] = [dest_width, dest_height];
- // TODO: We need to get the size of the source image, so right now we
- // are loading the image twice, once to get the size, and the again at
- // the proper size. We should eventually use a GdkPixbuf.Loader and
- // connect to the size-prepared signal, as described in the
- // documentation
- let temp_pixbuf = GdkPixbuf.Pixbuf.new_from_resource(res_path);
- let source_aspect = temp_pixbuf.width / temp_pixbuf.height;
- let dest_aspect = dest_width / dest_height;
- if(dest_aspect > source_aspect)
- source_height = -1;
- else
- source_width = -1;
- let source_pixbuf = GdkPixbuf.Pixbuf.new_from_resource_at_scale(res_path,
- source_width, source_height, true);
- let cropped_pixbuf = source_pixbuf;
- if(dest_width < source_pixbuf.width || dest_height < source_pixbuf.height)
- cropped_pixbuf = source_pixbuf.new_subpixbuf(0, 0, dest_width, dest_height);
- this._image.set_from_pixbuf(cropped_pixbuf);
}
});