diff options
-rw-r--r-- | data/css/eos-wikipedia-domain.css | 7 | ||||
-rw-r--r-- | wikipedia/PrebuiltCategoryPage.js | 33 | ||||
-rw-r--r-- | wikipedia/utils.js | 57 | ||||
-rw-r--r-- | wikipedia/views/category_button.js | 24 | ||||
-rw-r--r-- | wikipedia/views/title_label_view.js | 31 |
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); } }); |