FEATURE: Uploaded images to categories are shown when browsing

app/assets/javascripts/discourse/controllers/application.js.es6

@@ -0,0 +1,9 @@
+export default Ember.Controller.extend({
+  styleCategory: null,
+
+  backgroundClass: function() {
+    var id = this.get('styleCategory.id');
+    if (Em.isNone(id)) { return; }
+    return "category-" + this.get('styleCategory.id');
+  }.property('styleCategory')
+});

app/assets/javascripts/discourse/controllers/navigation/category.js.es6

@@ -5,4 +5,3 @@ export default NavigationDefaultController.extend({
     return Discourse.NavItem.buildList(this.get('category'), { noSubcategories: this.get('noSubcategories') });
   }.property('category', 'noSubcategories')
 });
-

app/assets/javascripts/discourse/routes/discovery_route_builders.js

@@ -103,6 +103,7 @@ function buildCategoryRoute(filter, params) {
         this.replaceWith('/404');
         return;
       }
+      this.controllerFor('application').set('styleCategory', model);
 
       var self = this,
           noSubcategories = params && !!params.no_subcategories,
@@ -166,6 +167,7 @@ function buildCategoryRoute(filter, params) {
     deactivate: function() {
       this._super();
       this.controllerFor('search').set('searchContext', null);
+      this.controllerFor('application').set('styleCategory', null);
     },
 
     actions: {

app/assets/javascripts/discourse/templates/application.js.handlebars

@@ -1,6 +1,6 @@
 {{render "header"}}
 
-<div id='main-outlet'>
+<div id='main-outlet' {{bind-attr class=backgroundClass}}>
   {{outlet}}
 </div>
 

app/assets/javascripts/discourse/templates/discovery.js.handlebars

@@ -23,4 +23,3 @@
     </div>
   </div>
 </div>
-

app/assets/javascripts/discourse/templates/navigation/category.js.handlebars

@@ -7,14 +7,20 @@
   {{custom-html "extraNavItem"}}
 </ul>
 
-{{#if canChangeCategoryNotificationLevel}}
-  {{view 'category-notifications-button' category=category}}
-{{/if}}
+<section class='category-heading'>
+  {{#if category.logo_url}}
+  <img {{bind-attr src=category.logo_url}} class="category-logo">
+  {{/if}}
 
-{{#if canCreateTopic}}
-  <button id="create-topic" class='btn btn-default' {{action createTopic}}><i class='fa fa-plus'></i>{{i18n topic.create}}</button>
-{{/if}}
+  {{#if canChangeCategoryNotificationLevel}}
+    {{view 'category-notifications-button' category=category}}
+  {{/if}}
 
-{{#if canEditCategory}}
-  <button class='btn btn-default' {{action editCategory category}}><i class="fa fa-wrench"></i> {{i18n category.edit_long}}</button>
-{{/if}}
+  {{#if canCreateTopic}}
+    <button id="create-topic" class='btn btn-default' {{action createTopic}}><i class='fa fa-plus'></i>{{i18n topic.create}}</button>
+  {{/if}}
+
+  {{#if canEditCategory}}
+    <button class='btn btn-default' {{action editCategory category}}><i class="fa fa-wrench"></i> {{i18n category.edit_long}}</button>
+  {{/if}}
+</section>

app/assets/stylesheets/desktop.scss

@@ -18,3 +18,4 @@
 
 @import "plugins";
 @import "plugins_desktop";
+@import "category_backgrounds";

app/assets/stylesheets/desktop/header.scss

@@ -30,6 +30,8 @@
 
 #main-outlet {
   padding-top: 82px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
 }
 
 // Dropdowns

app/assets/stylesheets/desktop/topic-list.scss

@@ -282,3 +282,12 @@ button.dismiss-read {
   bottom: auto;
   left: auto;
 }
+
+.category-heading {
+  clear: both;
+}
+.category-logo {
+  max-height: 150px;
+  float: left;
+  margin-bottom: 15px;
+}

app/assets/stylesheets/mobile.scss

@@ -18,3 +18,4 @@
 
 @import "plugins";
 @import "plugins_mobile";
+@import "category_backgrounds";

app/models/category.rb

@@ -68,6 +68,9 @@ class Category < ActiveRecord::Base
   # we may consider wrapping this in another spot
   attr_accessor :displayable_topics, :permission, :subcategory_ids, :notification_level
 
+  def self.last_updated_at
+    order('updated_at desc').limit(1).pluck(:updated_at).first.to_i
+  end
 
   def self.scoped_to_permissions(guardian, permission_types)
     if guardian && guardian.is_staff?

lib/sass/discourse_sass_importer.rb

@@ -45,6 +45,21 @@ class DiscourseSassImporter < Sass::Importers::Filesystem
   end
 
   def find(name, options)
+
+    if name == "category_backgrounds"
+      contents = ""
+      Category.where('background_url IS NOT NULL').each do |c|
+        if c.background_url.present?
+          contents << "#main-outlet.category-#{c.id} { background-image: url(#{c.background_url}) }\n"
+        end
+      end
+      return Sass::Engine.new(contents, options.merge(
+        filename: "#{name}.scss",
+        importer: self,
+        syntax: :scss
+      ))
+    end
+
     if special_imports.has_key? name
       if name == "theme_variables"
         contents = ""

lib/sass/discourse_stylesheets.rb

@@ -107,7 +107,8 @@ class DiscourseStylesheets
   def digest
     @digest ||= begin
       theme = (cs = ColorScheme.enabled) ? "#{cs.id}-#{cs.version}" : 0
-      Digest::SHA1.hexdigest("#{RailsMultisite::ConnectionManagement.current_db}-#{theme}-#{DiscourseStylesheets.last_file_updated}")
+      category_updated = Category.last_updated_at
+      Digest::SHA1.hexdigest("#{RailsMultisite::ConnectionManagement.current_db}-#{theme}-#{DiscourseStylesheets.last_file_updated}-#{category_updated}")
     end
   end
 end

spec/models/category_spec.rb

@@ -20,6 +20,14 @@ describe Category do
   it { should have_many :featured_topics }
   it { should belong_to :parent_category}
 
+  describe "last_updated_at" do
+    it "returns a number value of when the category was last updated" do
+      last = Category.last_updated_at
+      last.should be_present
+      last.to_i.should == last
+    end
+  end
+
   describe "resolve_permissions" do
     it "can determine read_restricted" do
       read_restricted, resolved = Category.resolve_permissions(:everyone => :full)