Add support for multiple themes (#4959)

* Add support for selecting a theme

* Fix codeclimate issues

* Look up site default style if current user is not available due to e.g. not being logged in

* Remove outdated comment in common.js

* Address requested changes in themes PR

* Fix codeclimate issues

* Explicitly check current_account in application controller and only check theme availability if non-nil

* codeclimate

* explicit precedence with &&

* Fix code style in application_controller according to @nightpool's suggestion, use default style in embedded.html.haml

* codeclimate: indentation + return
This commit is contained in:
Andrew 2017-09-19 07:36:23 -07:00 committed by Eugen Rochko
parent 4aea3f88a6
commit 0401a24558
15 changed files with 64 additions and 21 deletions

View File

@ -12,6 +12,7 @@ class ApplicationController < ActionController::Base
helper_method :current_account helper_method :current_account
helper_method :current_session helper_method :current_session
helper_method :current_theme
helper_method :single_user_mode? helper_method :single_user_mode?
rescue_from ActionController::RoutingError, with: :not_found rescue_from ActionController::RoutingError, with: :not_found
@ -77,6 +78,11 @@ class ApplicationController < ActionController::Base
@current_session ||= SessionActivation.find_by(session_id: cookies.signed['_session_id']) @current_session ||= SessionActivation.find_by(session_id: cookies.signed['_session_id'])
end end
def current_theme
return Setting.default_settings['theme'] unless Themes.instance.names.include? current_user&.setting_theme
current_user.setting_theme
end
def cache_collection(raw, klass) def cache_collection(raw, klass)
return raw unless klass.respond_to?(:with_includes) return raw unless klass.respond_to?(:with_includes)

View File

@ -41,6 +41,7 @@ class Settings::PreferencesController < ApplicationController
:setting_auto_play_gif, :setting_auto_play_gif,
:setting_system_font_ui, :setting_system_font_ui,
:setting_noindex, :setting_noindex,
:setting_theme,
notification_emails: %i(follow follow_request reblog favourite mention digest), notification_emails: %i(follow follow_request reblog favourite mention digest),
interactions: %i(must_be_follower must_be_following) interactions: %i(must_be_follower must_be_following)
) )

View File

@ -1,9 +1,6 @@
import { start } from 'rails-ujs'; import { start } from 'rails-ujs';
// import default stylesheet with variables
require('font-awesome/css/font-awesome.css'); require('font-awesome/css/font-awesome.css');
require('mastodon-application-style');
require.context('../images/', true); require.context('../images/', true);
start(); start();

16
app/lib/themes.rb Normal file
View File

@ -0,0 +1,16 @@
# frozen_string_literal: true
require 'singleton'
require 'yaml'
class Themes
include Singleton
def initialize
@conf = YAML.load_file(Rails.root.join('config', 'themes.yml'))
end
def names
@conf.keys
end
end

View File

@ -25,6 +25,7 @@ class UserSettingsDecorator
user.settings['auto_play_gif'] = auto_play_gif_preference user.settings['auto_play_gif'] = auto_play_gif_preference
user.settings['system_font_ui'] = system_font_ui_preference user.settings['system_font_ui'] = system_font_ui_preference
user.settings['noindex'] = noindex_preference user.settings['noindex'] = noindex_preference
user.settings['theme'] = theme_preference
end end
def merged_notification_emails def merged_notification_emails
@ -67,6 +68,10 @@ class UserSettingsDecorator
boolean_cast_setting 'setting_noindex' boolean_cast_setting 'setting_noindex'
end end
def theme_preference
settings['setting_theme']
end
def boolean_cast_setting(key) def boolean_cast_setting(key)
settings[key] == '1' settings[key] == '1'
end end

View File

@ -110,6 +110,10 @@ class User < ApplicationRecord
settings.noindex settings.noindex
end end
def setting_theme
settings.theme
end
def token_for_app(a) def token_for_app(a)
return nil if a.nil? || a.owner != self return nil if a.nil? || a.owner != self
Doorkeeper::AccessToken Doorkeeper::AccessToken

View File

@ -19,6 +19,7 @@
= title = title
= stylesheet_pack_tag 'common', media: 'all' = stylesheet_pack_tag 'common', media: 'all'
= stylesheet_pack_tag current_theme, media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
%link{ href: asset_pack_path('features/getting_started.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ %link{ href: asset_pack_path('features/getting_started.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/

View File

@ -5,6 +5,7 @@
%meta{ name: 'robots', content: 'noindex' }/ %meta{ name: 'robots', content: 'noindex' }/
= stylesheet_pack_tag 'common', media: 'all' = stylesheet_pack_tag 'common', media: 'all'
= stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'

View File

@ -5,6 +5,8 @@
= render 'shared/error_messages', object: current_user = render 'shared/error_messages', object: current_user
.fields-group .fields-group
= f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| safe_join([I18n.t("themes.#{theme}", default: theme)])}, wrapper: :with_label, include_blank: false
= f.input :locale, = f.input :locale,
collection: I18n.available_locales, collection: I18n.available_locales,
wrapper: :with_label, wrapper: :with_label,

View File

@ -461,6 +461,8 @@ en:
settings: Settings settings: Settings
two_factor_authentication: Two-factor Authentication two_factor_authentication: Two-factor Authentication
your_apps: Your applications your_apps: Your applications
themes:
default: Mastodon
statuses: statuses:
open_in_web: Open in web open_in_web: Open in web
over_character_limit: character limit of %{max} exceeded over_character_limit: character limit of %{max} exceeded

View File

@ -13,6 +13,7 @@ en:
one: <span class="note-counter">1</span> character left one: <span class="note-counter">1</span> character left
other: <span class="note-counter">%{count}</span> characters left other: <span class="note-counter">%{count}</span> characters left
setting_noindex: Affects your public profile and status pages setting_noindex: Affects your public profile and status pages
setting_theme: Affects how Mastodon looks when you're logged in from any device.
imports: imports:
data: CSV file exported from another Mastodon instance data: CSV file exported from another Mastodon instance
sessions: sessions:
@ -44,6 +45,7 @@ en:
setting_noindex: Opt-out of search engine indexing setting_noindex: Opt-out of search engine indexing
setting_system_font_ui: Use system's default font setting_system_font_ui: Use system's default font
setting_unfollow_modal: Show confirmation dialog before unfollowing someone setting_unfollow_modal: Show confirmation dialog before unfollowing someone
setting_theme: Site theme
severity: Severity severity: Severity
type: Import type type: Import type
username: Username username: Username

View File

@ -24,6 +24,7 @@ defaults: &defaults
auto_play_gif: false auto_play_gif: false
system_font_ui: false system_font_ui: false
noindex: false noindex: false
theme: 'default'
notification_emails: notification_emails:
follow: false follow: false
reblog: false reblog: false

1
config/themes.yml Normal file
View File

@ -0,0 +1 @@
default: styles/application.scss

View File

@ -9,6 +9,9 @@ const configPath = resolve('config', 'webpacker.yml');
const loadersDir = join(__dirname, 'loaders'); const loadersDir = join(__dirname, 'loaders');
const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]; const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV];
const themePath = resolve('config', 'themes.yml');
const themes = safeLoad(readFileSync(themePath), 'utf8');
function removeOuterSlashes(string) { function removeOuterSlashes(string) {
return string.replace(/^\/*/, '').replace(/\/*$/, ''); return string.replace(/^\/*/, '').replace(/\/*$/, '');
} }
@ -29,6 +32,7 @@ const output = {
module.exports = { module.exports = {
settings, settings,
themes,
env, env,
loadersDir, loadersDir,
output, output,

View File

@ -1,13 +1,12 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect // Note: You must restart bin/webpack-dev-server for changes to take effect
const { existsSync } = require('fs');
const webpack = require('webpack'); const webpack = require('webpack');
const { basename, dirname, join, relative, resolve, sep } = require('path'); const { basename, dirname, join, relative, resolve, sep } = require('path');
const { sync } = require('glob'); const { sync } = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin'); const ManifestPlugin = require('webpack-manifest-plugin');
const extname = require('path-complete-extname'); const extname = require('path-complete-extname');
const { env, settings, output, loadersDir } = require('./configuration.js'); const { env, settings, themes, output, loadersDir } = require('./configuration.js');
const localePackPaths = require('./generateLocalePacks'); const localePackPaths = require('./generateLocalePacks');
const extensionGlob = `**/*{${settings.extensions.join(',')}}*`; const extensionGlob = `**/*{${settings.extensions.join(',')}}*`;
@ -15,11 +14,15 @@ const entryPath = join(settings.source_path, settings.source_entry_path);
const packPaths = sync(join(entryPath, extensionGlob)); const packPaths = sync(join(entryPath, extensionGlob));
const entryPacks = [...packPaths, ...localePackPaths].filter(path => path !== join(entryPath, 'custom.js')); const entryPacks = [...packPaths, ...localePackPaths].filter(path => path !== join(entryPath, 'custom.js'));
const customApplicationStyle = resolve(join(settings.source_path, 'styles/custom.scss')); const themePaths = Object.keys(themes).reduce(
const originalApplicationStyle = resolve(join(settings.source_path, 'styles/application.scss')); (themePaths, name) => {
themePaths[name] = resolve(join(settings.source_path, themes[name]));
return themePaths;
}, {});
module.exports = { module.exports = {
entry: entryPacks.reduce( entry: Object.assign(
entryPacks.reduce(
(map, entry) => { (map, entry) => {
const localMap = map; const localMap = map;
let namespace = relative(join(entryPath), dirname(entry)); let namespace = relative(join(entryPath), dirname(entry));
@ -29,6 +32,7 @@ module.exports = {
localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry); localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
return localMap; return localMap;
}, {} }, {}
), themePaths
), ),
output: { output: {
@ -67,10 +71,6 @@ module.exports = {
], ],
resolve: { resolve: {
alias: {
'mastodon-application-style': existsSync(customApplicationStyle) ?
customApplicationStyle : originalApplicationStyle,
},
extensions: settings.extensions, extensions: settings.extensions,
modules: [ modules: [
resolve(settings.source_path), resolve(settings.source_path),