From bd631e343afd53f06f9e58495cd68e5c408caf3a Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 6 Aug 2015 17:18:00 -0400 Subject: [PATCH] FEATURE: Can create stylesheets for embedded comments --- .../admin-customize-css-html-show.js.es6 | 3 +- .../admin/models/site-customization.js.es6 | 2 +- .../routes/admin-customize-css-html.js.es6 | 4 +- .../templates/customize-css-html-show.hbs | 3 +- .../controllers/upload-customization.js.es6 | 1 - app/assets/stylesheets/embed.css.scss | 55 +++++++++---------- .../admin/site_customizations_controller.rb | 2 +- .../site_customizations_controller.rb | 3 +- app/models/site_customization.rb | 35 ++++++++++-- .../site_customization_serializer.rb | 2 +- app/views/embed/comments.html.erb | 4 +- app/views/layouts/embed.html.erb | 3 + config/locales/client.en.yml | 1 + ...add_embedded_css_to_site_customizations.rb | 6 ++ 14 files changed, 77 insertions(+), 47 deletions(-) create mode 100644 db/migrate/20150806210727_add_embedded_css_to_site_customizations.rb diff --git a/app/assets/javascripts/admin/controllers/admin-customize-css-html-show.js.es6 b/app/assets/javascripts/admin/controllers/admin-customize-css-html-show.js.es6 index 01dc0da32..59d3245aa 100644 --- a/app/assets/javascripts/admin/controllers/admin-customize-css-html-show.js.es6 +++ b/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) { diff --git a/app/assets/javascripts/admin/models/site-customization.js.es6 b/app/assets/javascripts/admin/models/site-customization.js.es6 index 655d15bf7..fe2176bf1 100644 --- a/app/assets/javascripts/admin/models/site-customization.js.es6 +++ b/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() { diff --git a/app/assets/javascripts/admin/routes/admin-customize-css-html.js.es6 b/app/assets/javascripts/admin/routes/admin-customize-css-html.js.es6 index 8bbd22a45..5bbb46095 100644 --- a/app/assets/javascripts/admin/routes/admin-customize-css-html.js.es6 +++ b/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); diff --git a/app/assets/javascripts/admin/templates/customize-css-html-show.hbs b/app/assets/javascripts/admin/templates/customize-css-html-show.hbs index 4d93f5ee8..69c97245e 100644 --- a/app/assets/javascripts/admin/templates/customize-css-html-show.hbs +++ b/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}} +
  • {{#link-to 'adminCustomizeCssHtml.show' model.id 'embedded-css' replace=true}}{{i18n "admin.customize.embedded"}}{{/link-to}}
    • {{/if}}
  • {{fa-icon "mobile"}} @@ -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 @@ - diff --git a/app/assets/javascripts/discourse/controllers/upload-customization.js.es6 b/app/assets/javascripts/discourse/controllers/upload-customization.js.es6 index 72bf3aee6..d7a980a0b 100644 --- a/app/assets/javascripts/discourse/controllers/upload-customization.js.es6 +++ b/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 diff --git a/app/assets/stylesheets/embed.css.scss b/app/assets/stylesheets/embed.css.scss index 8ada6da38..cc4865d7a 100644 --- a/app/assets/stylesheets/embed.css.scss +++ b/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; diff --git a/app/controllers/admin/site_customizations_controller.rb b/app/controllers/admin/site_customizations_controller.rb index 0308b85b9..afd3c162e 100644 --- a/app/controllers/admin/site_customizations_controller.rb +++ b/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) diff --git a/app/controllers/site_customizations_controller.rb b/app/controllers/site_customizations_controller.rb index e457d7d78..34a314720 100644 --- a/app/controllers/site_customizations_controller.rb +++ b/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 diff --git a/app/models/site_customization.rb b/app/models/site_customization.rb index 790f15ca4..4b316a067 100644 --- a/app/models/site_customization.rb +++ b/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 diff --git a/app/serializers/site_customization_serializer.rb b/app/serializers/site_customization_serializer.rb index 1c8ff8f9d..6a3e70ff2 100644 --- a/app/serializers/site_customization_serializer.rb +++ b/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 diff --git a/app/views/embed/comments.html.erb b/app/views/embed/comments.html.erb index f381e965a..0608da9d6 100644 --- a/app/views/embed/comments.html.erb +++ b/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 %> diff --git a/app/views/layouts/embed.html.erb b/app/views/layouts/embed.html.erb index b9d40e1a7..3466bd1b5 100644 --- a/app/views/layouts/embed.html.erb +++ b/app/views/layouts/embed.html.erb @@ -2,6 +2,9 @@ <%= stylesheet_link_tag 'embed' %> + <%- unless customization_disabled? %> + <%= SiteCustomization.custom_stylesheet(session[:preview_style], :embedded) %> + <%- end %> <%= javascript_include_tag 'break_string' %>