FEATURE: Can create stylesheets for embedded comments

app/assets/javascripts/admin/controllers/admin-customize-css-html-show.js.es6

@@ -1,5 +1,6 @@
 const sections = ['css', 'header', 'top', 'footer', 'head-tag', 'body-tag',
-                  'mobile-css', 'mobile-header', 'mobile-top', 'mobile-footer' ];
+                  'mobile-css', 'mobile-header', 'mobile-top', 'mobile-footer',
+                  'embedded-css'];
 
 const activeSections = {};
 sections.forEach(function(s) {

app/assets/javascripts/admin/models/site-customization.js.es6

@@ -2,7 +2,7 @@ import RestModel from 'discourse/models/rest';
 
 const trackedProperties = [
   'enabled', 'name', 'stylesheet', 'header', 'top', 'footer', 'mobile_stylesheet',
-  'mobile_header', 'mobile_top', 'mobile_footer', 'head_tag', 'body_tag'
+  'mobile_header', 'mobile_top', 'mobile_footer', 'head_tag', 'body_tag', 'embedded_css'
 ];
 
 function changed() {

app/assets/javascripts/admin/routes/admin-customize-css-html.js.es6

@@ -13,11 +13,11 @@ export default Ember.Route.extend({
 
     newCustomization(obj) {
       obj = obj || {name: I18n.t("admin.customize.new_style")};
-      const item = this.store.createRecord('site-customization', obj);
+      const item = this.store.createRecord('site-customization');
 
       const all = this.modelFor('adminCustomizeCssHtml');
       const self = this;
-      item.save().then(function() {
+      item.save(obj).then(function() {
         all.pushObject(item);
         self.transitionTo('adminCustomizeCssHtml.show', item.get('id'), 'css');
       }).catch(popupAjaxError);

app/assets/javascripts/admin/templates/customize-css-html-show.hbs

@@ -25,6 +25,7 @@
               {{fa-icon "file-text-o"}} {{i18n 'admin.customize.body_tag.text'}}
             {{/link-to}}
           </li>
+          <li>{{#link-to 'adminCustomizeCssHtml.show' model.id 'embedded-css' replace=true}}{{i18n "admin.customize.embedded"}}{{/link-to}}</li>
         {{/if}}
         <li class='toggle-mobile'>
           <a {{bind-attr class="mobile:active"}} {{action "toggleMobile"}}>{{fa-icon "mobile"}}</a>
@@ -44,6 +45,7 @@
       {{#if footerActive}}{{ace-editor content=model.footer mode="html"}}{{/if}}
       {{#if headTagActive}}{{ace-editor content=model.head_tag mode="html"}}{{/if}}
       {{#if bodyTagActive}}{{ace-editor content=model.body_tag mode="html"}}{{/if}}
+      {{#if embeddedCssActive}}{{ace-editor content=model.embedded_css mode="css"}}{{/if}}
       {{#if mobileCssActive}}{{ace-editor content=model.mobile_stylesheet mode="scss"}}{{/if}}
       {{#if mobileHeaderActive}}{{ace-editor content=model.mobile_header mode="html"}}{{/if}}
       {{#if mobileTopActive}}{{ace-editor content=model.mobile_top mode="html"}}{{/if}}
@@ -71,4 +73,3 @@
     </div>
   </div>
 </div>
-

app/assets/javascripts/discourse/controllers/upload-customization.js.es6

@@ -15,7 +15,6 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   actions: {
     createCustomization: function() {
-      const self = this;
       const object = JSON.parse(this.get('customizationFile')).site_customization;
 
       // Slight fixup before creating object

app/assets/stylesheets/embed.css.scss

@@ -5,7 +5,7 @@
 @import "./common/foundation/colors";
 @import "./common/base/onebox";
 
-article.post {
+article {
   border-bottom: 1px solid #ddd;
 
   &.deleted {
@@ -54,26 +54,6 @@ article.post {
     }
   }
 
-  h3.username {
-    font-size: 0.929em;
-    margin: 0 0 10px 0;
-
-    a {
-      color: #5c5c5c
-    }
-    a.staff {
-      background-color: #ffffc2;
-    }
-
-    a.new-user {
-      color: scale-color($primary, $lightness: 70%);
-    }
-
-    span.title {
-      font-weight: normal;
-      color: #999;
-    }
-  }
 
   .cooked {
     padding: 10px 0 20px 0;
@@ -93,17 +73,32 @@ article.post {
   }
 }
 
+.username {
+  font-size: 0.929em;
+  margin: 0 0 10px 0;
+
+  a {
+    color: #5c5c5c
+  }
+  a.staff {
+    background-color: #ffffc2;
+  }
+
+  a.new-user {
+    color: scale-color($primary, $lightness: 70%);
+  }
+
+  span.title {
+    font-weight: normal;
+    color: #999;
+  }
+}
+
 img.emoji {
   width: 20px;
   height: 20px;
 }
 
-.post-replies {
-  background-color: #eee;
-  padding: 5px;
-  display: inline-block;
-}
-
 .in-reply-to {
   font-size: 0.929em;
   text-align: center;
@@ -118,7 +113,7 @@ img.emoji {
   color: #999;
 }
 
-header.embedded {
+header {
   padding: 10px 10px 20px 10px;
   font-size: 1.286em;
   border-bottom: 1px solid #ddd;
@@ -132,7 +127,7 @@ footer {
     margin-top: 10px;
   }
 
-  a[href].button {
+  .button {
     margin: 10px 0 0 10px;
   }
 }
@@ -142,7 +137,7 @@ footer {
   max-height: 30px;
 }
 
-a[href].button {
+.button {
   background-color: #eee;
   padding: 5px;
   display: inline-block;

app/controllers/admin/site_customizations_controller.rb

@@ -78,7 +78,7 @@ class Admin::SiteCustomizationsController < Admin::AdminController
                     :mobile_stylesheet, :mobile_header, :mobile_top, :mobile_footer,
                     :head_tag, :body_tag,
                     :position, :enabled, :key,
-                    :stylesheet_baked)
+                    :stylesheet_baked, :embedded_css)
     end
 
     def log_site_customization_change(old_record, new_params)

app/controllers/site_customizations_controller.rb

@@ -2,7 +2,6 @@ class SiteCustomizationsController < ApplicationController
   skip_before_filter :preload_json, :check_xhr, :redirect_to_login_if_required
 
   def show
-
     no_cookies
 
     cache_time = request.env["HTTP_IF_MODIFIED_SINCE"]
@@ -30,7 +29,7 @@ class SiteCustomizationsController < ApplicationController
 
     response.headers["Last-Modified"] = stylesheet_time.httpdate
     expires_in 1.year, public: true
-    render text: SiteCustomization.stylesheet_contents(params[:key], params[:target] == "mobile" ? :mobile : :desktop),
+    render text: SiteCustomization.stylesheet_contents(params[:key], params[:target]),
            content_type: "text/css"
   end
 end

app/models/site_customization.rb

@@ -6,6 +6,10 @@ class SiteCustomization < ActiveRecord::Base
   ENABLED_KEY = '7e202ef2-56d7-47d5-98d8-a9c8d15e57dd'
   @cache = DistributedCache.new('site_customization')
 
+  def self.css_fields
+    %w(stylesheet mobile_stylesheet embedded_css)
+  end
+
   before_create do
     self.enabled ||= false
     self.key ||= SecureRandom.uuid
@@ -20,7 +24,7 @@ class SiteCustomization < ActiveRecord::Base
   end
 
   before_save do
-    ['stylesheet', 'mobile_stylesheet'].each do |stylesheet_attr|
+    SiteCustomization.css_fields.each do |stylesheet_attr|
       if self.send("#{stylesheet_attr}_changed?")
         begin
           self.send("#{stylesheet_attr}_baked=", compile_stylesheet(self.send(stylesheet_attr)))
@@ -31,9 +35,16 @@ class SiteCustomization < ActiveRecord::Base
     end
   end
 
+  def any_stylesheet_changed?
+    SiteCustomization.css_fields.each do |fieldname|
+      return true if self.send("#{fieldname}_changed?")
+    end
+    false
+  end
+
   after_save do
     remove_from_cache!
-    if stylesheet_changed? || mobile_stylesheet_changed?
+    if any_stylesheet_changed?
       MessageBus.publish "/file-change/#{key}", SecureRandom.hex
       MessageBus.publish "/file-change/#{SiteCustomization::ENABLED_KEY}", SecureRandom.hex
     end
@@ -50,10 +61,24 @@ class SiteCustomization < ActiveRecord::Base
     ENABLED_KEY.dup << RailsMultisite::ConnectionManagement.current_db
   end
 
+  def self.field_for_target(target=nil)
+    target ||= :desktop
+
+    case target.to_sym
+      when :mobile then :mobile_stylesheet
+      when :desktop then :stylesheet
+      when :embedded then :embedded_css
+    end
+  end
+
+  def self.baked_for_target(target=nil)
+    "#{field_for_target(target)}_baked".to_sym
+  end
+
   def self.enabled_stylesheet_contents(target=:desktop)
     @cache["enabled_stylesheet_#{target}"] ||= where(enabled: true)
       .order(:name)
-      .pluck(target == :desktop ? :stylesheet_baked : :mobile_stylesheet_baked)
+      .pluck(baked_for_target(target))
       .compact
       .join("\n")
   end
@@ -63,7 +88,7 @@ class SiteCustomization < ActiveRecord::Base
       enabled_stylesheet_contents(target)
     else
       where(key: key)
-        .pluck(target == :mobile ? :mobile_stylesheet_baked : :stylesheet_baked)
+        .pluck(baked_for_target(target))
         .first
     end
   end
@@ -127,7 +152,7 @@ class SiteCustomization < ActiveRecord::Base
   end
 
   def stylesheet_link_tag(target=:desktop)
-    content = target == :mobile ? mobile_stylesheet : stylesheet
+    content = self.send(SiteCustomization.field_for_target(target))
     SiteCustomization.stylesheet_link_tag(key, target, content)
   end
 

app/serializers/site_customization_serializer.rb

@@ -3,5 +3,5 @@ class SiteCustomizationSerializer < ApplicationSerializer
   attributes :id, :name, :key, :enabled, :created_at, :updated_at,
              :stylesheet, :header, :footer, :top,
              :mobile_stylesheet, :mobile_header, :mobile_footer, :mobile_top,
-             :head_tag, :body_tag
+             :head_tag, :body_tag, :embedded_css
 end

app/views/embed/comments.html.erb

@@ -29,9 +29,9 @@
 
         <%- if post.reply_count > 0 %>
           <%- if post.reply_count == 1 %>
-            <%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, 'data-link-to-post' => post.replies.first.id.to_s, :class => 'post-replies' %>
+            <%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, 'data-link-to-post' => post.replies.first.id.to_s, :class => 'post-replies button' %>
           <% else %>
-            <%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, class: 'post-replies', target: "_blank" %>
+            <%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, class: 'post-replies button', target: "_blank" %>
           <%- end %>
         <%- end %>
       </div>

app/views/layouts/embed.html.erb

@@ -2,6 +2,9 @@
 <html>
   <head>
     <%= stylesheet_link_tag 'embed' %>
+    <%- unless customization_disabled? %>
+      <%= SiteCustomization.custom_stylesheet(session[:preview_style], :embedded) %>
+    <%- end %>
     <%= javascript_include_tag 'break_string' %>
 
     <script>

config/locales/client.en.yml

@@ -1973,6 +1973,7 @@ en:
         header: "Header"
         top: "Top"
         footer: "Footer"
+        embedded_css: "Embedded CSS"
         head_tag:
           text: "</head>"
           title: "HTML that will be inserted before the </head> tag"

db/migrate/20150806210727_add_embedded_css_to_site_customizations.rb

@@ -0,0 +1,6 @@
+class AddEmbeddedCssToSiteCustomizations < ActiveRecord::Migration
+  def change
+    add_column :site_customizations, :embedded_css, :text
+    add_column :site_customizations, :embedded_css_baked, :text
+  end
+end