FEATURE: Can create stylesheets for embedded comments

This commit is contained in:
Robin Ward 2015-08-06 17:18:00 -04:00
parent 0932e82508
commit bd631e343a
14 changed files with 77 additions and 47 deletions

View File

@ -1,5 +1,6 @@
const sections = ['css', 'header', 'top', 'footer', 'head-tag', 'body-tag', 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 = {}; const activeSections = {};
sections.forEach(function(s) { sections.forEach(function(s) {

View File

@ -2,7 +2,7 @@ import RestModel from 'discourse/models/rest';
const trackedProperties = [ const trackedProperties = [
'enabled', 'name', 'stylesheet', 'header', 'top', 'footer', 'mobile_stylesheet', '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() { function changed() {

View File

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

View File

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

View File

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

View File

@ -5,7 +5,7 @@
@import "./common/foundation/colors"; @import "./common/foundation/colors";
@import "./common/base/onebox"; @import "./common/base/onebox";
article.post { article {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
&.deleted { &.deleted {
@ -54,7 +54,26 @@ article.post {
} }
} }
h3.username {
.cooked {
padding: 10px 0 20px 0;
margin-left: 65px;
word-wrap: break-word;
word-break: break-word;
pre {
white-space: pre-wrap;
}
img {
max-width:100%;
}
p {
margin: 0 0 1em 0;
}
}
}
.username {
font-size: 0.929em; font-size: 0.929em;
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -75,35 +94,11 @@ article.post {
} }
} }
.cooked {
padding: 10px 0 20px 0;
margin-left: 65px;
word-wrap: break-word;
word-break: break-word;
pre {
white-space: pre-wrap;
}
img {
max-width:100%;
}
p {
margin: 0 0 1em 0;
}
}
}
img.emoji { img.emoji {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.post-replies {
background-color: #eee;
padding: 5px;
display: inline-block;
}
.in-reply-to { .in-reply-to {
font-size: 0.929em; font-size: 0.929em;
text-align: center; text-align: center;
@ -118,7 +113,7 @@ img.emoji {
color: #999; color: #999;
} }
header.embedded { header {
padding: 10px 10px 20px 10px; padding: 10px 10px 20px 10px;
font-size: 1.286em; font-size: 1.286em;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@ -132,7 +127,7 @@ footer {
margin-top: 10px; margin-top: 10px;
} }
a[href].button { .button {
margin: 10px 0 0 10px; margin: 10px 0 0 10px;
} }
} }
@ -142,7 +137,7 @@ footer {
max-height: 30px; max-height: 30px;
} }
a[href].button { .button {
background-color: #eee; background-color: #eee;
padding: 5px; padding: 5px;
display: inline-block; display: inline-block;

View File

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

View File

@ -2,7 +2,6 @@ class SiteCustomizationsController < ApplicationController
skip_before_filter :preload_json, :check_xhr, :redirect_to_login_if_required skip_before_filter :preload_json, :check_xhr, :redirect_to_login_if_required
def show def show
no_cookies no_cookies
cache_time = request.env["HTTP_IF_MODIFIED_SINCE"] cache_time = request.env["HTTP_IF_MODIFIED_SINCE"]
@ -30,7 +29,7 @@ class SiteCustomizationsController < ApplicationController
response.headers["Last-Modified"] = stylesheet_time.httpdate response.headers["Last-Modified"] = stylesheet_time.httpdate
expires_in 1.year, public: true 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" content_type: "text/css"
end end
end end

View File

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

View File

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

View File

@ -29,9 +29,9 @@
<%- if post.reply_count > 0 %> <%- if post.reply_count > 0 %>
<%- if post.reply_count == 1 %> <%- 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 %> <% 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 %>
<%- end %> <%- end %>
</div> </div>

View File

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

View File

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

View File

@ -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