Better themeing support!!

This commit is contained in:
kibigo! 2017-09-25 19:24:32 -07:00
parent c2b479efec
commit 86e617a839
25 changed files with 117 additions and 50 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,4 +1,4 @@
@import 'variables'; @import 'styles/variables';
.glitch.local-settings__navigation__item { .glitch.local-settings__navigation__item {
display: block; display: block;

View file

@ -1,4 +1,4 @@
@import 'variables'; @import 'styles/variables';
.glitch.local-settings__navigation { .glitch.local-settings__navigation {
background: $primary-text-color; background: $primary-text-color;

View file

@ -1,4 +1,4 @@
@import 'variables'; @import 'styles/variables';
.glitch.local-settings__page__item { .glitch.local-settings__page__item {
select { select {

View file

@ -1,4 +1,4 @@
@import 'variables'; @import 'styles/variables';
.glitch.local-settings__page { .glitch.local-settings__page {
display: block; display: block;

View file

@ -1,4 +1,4 @@
@import 'variables'; @import 'styles/variables';
.glitch.local-settings { .glitch.local-settings {
position: relative; position: relative;

View file

@ -2,7 +2,7 @@ import loadPolyfills from '../mastodon/load_polyfills';
// import default stylesheet with variables // import default stylesheet with variables
require('font-awesome/css/font-awesome.css'); require('font-awesome/css/font-awesome.css');
require('mastodon-application-style'); import 'styles/application';
require.context('../images/', true); require.context('../images/', true);

View file

@ -1,16 +0,0 @@
// This file replaces `app/javascript/packs/application.js` for use
// with multiple frontends.
import loadPolyfills from '../../mastodon/load_polyfills';
// import default stylesheet with variables
require('font-awesome/css/font-awesome.css');
require('mastodon-application-style');
require.context('../../images/', true);
loadPolyfills().then(() => {
require('../../mastodon/main').default();
}).catch(e => {
console.error(e);
});

View file

@ -1 +0,0 @@
@import 'application';

View file

@ -0,0 +1,9 @@
# (REQUIRED) Name must be unique across all installed themes.
name: default
# (REQUIRED) The location of the pack file inside `pack_directory`.
pack: application.js
# (OPTIONAL) The directory which contains the pack file.
# Defaults to the theme directory (`app/javascript/themes/[theme]`).
pack_directory: app/javascript/packs

View file

@ -0,0 +1,2 @@
import 'packs/application';
import 'themes/spin/style';

View file

@ -0,0 +1,14 @@
:root:root:root {
.button, .icon-button, .emoji-button, .account__avatar, .account__avatar-overlay {
animation: spin 4s linear infinite;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View file

@ -0,0 +1,2 @@
name: spin
pack: pack.js

23
app/lib/themes.rb Normal file
View file

@ -0,0 +1,23 @@
# frozen_string_literal: true
require 'singleton'
require 'yaml'
class Themes
include Singleton
def initialize
result = Hash.new
Dir.glob(Rails.root.join('app', 'javascript', 'themes', '*', 'theme.yml')) do |path|
data = YAML.load_file(path)
if data['pack'] && data['name']
result[data['name']] = data
end
end
@conf = result
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

@ -2,8 +2,8 @@
%meta{name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key} %meta{name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key}
%script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json) %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json)
= javascript_pack_tag "frontends/#{@frontend}", integrity: true, crossorigin: 'anonymous' = javascript_pack_tag "themes/#{current_theme}", integrity: true, crossorigin: 'anonymous'
= stylesheet_pack_tag "frontends/#{@frontend}", integrity: true, media: 'all' = stylesheet_pack_tag "themes/#{current_theme}", integrity: true, media: 'all'
.app-holder#mastodon{ data: { props: Oj.dump(default_props) } } .app-holder#mastodon{ data: { props: Oj.dump(default_props) } }
%noscript %noscript

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

@ -1,7 +0,0 @@
# Be sure to restart your server when you modify this file.
Rails.application.configure do
frontends = []
Rails.root.join('app', 'javascript', 'packs', 'frontends').each_child(false) { |f| frontends.push f.to_s }
config.x.available_frontends = frontends
end

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

View file

@ -1,13 +1,27 @@
// Common configuration for webpacker loaded from config/webpacker.yml // Common configuration for webpacker loaded from config/webpacker.yml
const { join, resolve } = require('path'); const { dirname, join, resolve } = require('path');
const { env } = require('process'); const { env } = require('process');
const { safeLoad } = require('js-yaml'); const { safeLoad } = require('js-yaml');
const { readFileSync } = require('fs'); const { readFileSync } = require('fs');
const glob = require('glob');
const configPath = resolve('config', 'webpacker.yml'); 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 themeFiles = glob.sync('app/javascript/themes/*/theme.yml');
const themes = {};
for (let i = 0; i < themeFiles.length; i++) {
const themeFile = themeFiles[i];
const data = safeLoad(readFileSync(themeFile), 'utf8');
if (!data.pack_directory) {
data.pack_directory = dirname(themeFile);
}
if (data.name && data.pack) {
themes[data.name] = data;
}
}
function removeOuterSlashes(string) { function removeOuterSlashes(string) {
return string.replace(/^\/*/, '').replace(/\/*$/, ''); return string.replace(/^\/*/, '').replace(/\/*$/, '');
@ -29,6 +43,7 @@ const output = {
module.exports = { module.exports = {
settings, settings,
themes,
env, env,
loadersDir, loadersDir,
output, output,

View file

@ -9,7 +9,7 @@ module.exports = {
{ loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } }, { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
{ loader: 'postcss-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { sourceMap: true } },
'resolve-url-loader', 'resolve-url-loader',
{ loader: 'sass-loader', options: { includePaths: ['app/javascript/styles'] } }, { loader: 'sass-loader', options: { includePaths: ['app/javascript'] } },
], ],
}), }),
}; };

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 } = require('path'); const { basename, dirname, join, relative, resolve } = 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(',')}}*`;
@ -18,17 +17,27 @@ const entryPacks = [...packPaths, ...localePackPaths].filter(path => path !== jo
const customApplicationStyle = resolve(join(settings.source_path, 'styles/custom.scss')); const customApplicationStyle = resolve(join(settings.source_path, 'styles/custom.scss'));
const originalApplicationStyle = resolve(join(settings.source_path, 'styles/application.scss')); const originalApplicationStyle = resolve(join(settings.source_path, 'styles/application.scss'));
const themePaths = Object.keys(themes).reduce(
(themePaths, name) => {
themeData = themes[name];
themePaths[`themes/${name}`] = resolve(themeData.pack_directory, themeData.pack);
return themePaths;
}, {}
);
module.exports = { module.exports = {
entry: entryPacks.reduce( entry: Object.assign(
(map, entry) => { entryPacks.reduce(
const localMap = map; (map, entry) => {
let namespace = relative(join(entryPath), dirname(entry)); const localMap = map;
if (namespace === join('..', '..', '..', 'tmp', 'packs')) { let namespace = relative(join(entryPath), dirname(entry));
namespace = ''; // generated by generateLocalePacks.js if (namespace === join('..', '..', '..', 'tmp', 'packs')) {
} namespace = ''; // generated by generateLocalePacks.js
localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry); }
return localMap; localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
}, {} return localMap;
}, {}
), themePaths
), ),
output: { output: {
@ -59,10 +68,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),