diff options
22 files changed, 157 insertions, 85 deletions
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 7cc4eea27..f5753963d 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -12,6 +12,8 @@ class ApplicationController < ActionController::Base helper_method :current_account helper_method :current_session + helper_method :current_theme + helper_method :current_skin helper_method :single_user_mode? rescue_from ActionController::RoutingError, with: :not_found @@ -52,14 +54,14 @@ class ApplicationController < ActionController::Base new_user_session_path end - def pack(data, pack_name) + def pack(data, pack_name, skin = 'default') return nil unless pack?(data, pack_name) pack_data = { common: pack_name == 'common' ? nil : resolve_pack(data['name'] ? Themes.instance.get(current_theme) : Themes.instance.core, 'common'), name: data['name'], pack: pack_name, preload: nil, - stylesheet: false + skin: nil, } if data['pack'][pack_name].is_a?(Hash) pack_data[:common] = nil if data['pack'][pack_name]['use_common'] == false @@ -68,7 +70,11 @@ class ApplicationController < ActionController::Base pack_data[:preload] = [data['pack'][pack_name]['preload']] if data['pack'][pack_name]['preload'].is_a?(String) pack_data[:preload] = data['pack'][pack_name]['preload'] if data['pack'][pack_name]['preload'].is_a?(Array) end - pack_data[:stylesheet] = true if data['pack'][pack_name]['stylesheet'] + if skin != 'default' && data['skin'][skin] + pack_data[:skin] = skin if data['skin'][skin].include?(pack_name) + else # default skin + pack_data[:skin] = 'default' if data['pack'][pack_name]['stylesheet'] + end end pack_data end @@ -80,39 +86,39 @@ class ApplicationController < ActionController::Base false end - def nil_pack(data, pack_name) + def nil_pack(data, pack_name, skin = 'default') { - common: pack_name == 'common' ? nil : resolve_pack(data['name'] ? Themes.instance.get(current_theme) : Themes.instance.core, 'common'), + common: pack_name == 'common' ? nil : resolve_pack(data['name'] ? Themes.instance.get(current_theme) : Themes.instance.core, 'common', skin), name: data['name'], pack: nil, preload: nil, - stylesheet: false + skin: nil, } end - def resolve_pack(data, pack_name) - result = pack(data, pack_name) + def resolve_pack(data, pack_name, skin = 'default') + result = pack(data, pack_name, skin) unless result if data['name'] && data.key?('fallback') if data['fallback'].nil? - return nil_pack(data, pack_name) + return nil_pack(data, pack_name, skin) elsif data['fallback'].is_a?(String) && Themes.instance.get(data['fallback']) - return resolve_pack(Themes.instance.get(data['fallback']), pack_name) + return resolve_pack(Themes.instance.get(data['fallback']), pack_name, skin) elsif data['fallback'].is_a?(Array) data['fallback'].each do |fallback| - return resolve_pack(Themes.instance.get(fallback), pack_name) if Themes.instance.get(fallback) + return resolve_pack(Themes.instance.get(fallback), pack_name, skin) if Themes.instance.get(fallback) end end - return nil_pack(data, pack_name) + return nil_pack(data, pack_name, skin) end - return data.key?('name') && data['name'] != default_theme ? resolve_pack(Themes.instance.get(default_theme), pack_name) : nil_pack(data, pack_name) + return data.key?('name') && data['name'] != default_theme ? resolve_pack(Themes.instance.get(default_theme), pack_name, skin) : nil_pack(data, pack_name, skin) end result end def use_pack(pack_name) @core = resolve_pack(Themes.instance.core, pack_name) - @theme = resolve_pack(Themes.instance.get(current_theme), pack_name) + @theme = resolve_pack(Themes.instance.get(current_theme), pack_name, current_skin) end protected @@ -154,6 +160,15 @@ class ApplicationController < ActionController::Base current_user.setting_theme end + def default_skin + 'default' + end + + def current_skin + return default_skin unless Themes.instance.skins_for(current_theme).include? current_user&.setting_skin + current_user.setting_skin + end + def cache_collection(raw, klass) return raw unless klass.respond_to?(:with_includes) diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb index 3aefd90a2..56baebed2 100644 --- a/app/controllers/settings/preferences_controller.rb +++ b/app/controllers/settings/preferences_controller.rb @@ -39,6 +39,7 @@ class Settings::PreferencesController < Settings::BaseController :setting_system_font_ui, :setting_noindex, :setting_theme, + :setting_skin, notification_emails: %i(follow follow_request reblog favourite mention digest), interactions: %i(must_be_follower must_be_following) ) diff --git a/app/javascript/core/common.js b/app/javascript/core/common.js index 24c0fdf61..bb4b97935 100644 --- a/app/javascript/core/common.js +++ b/app/javascript/core/common.js @@ -1,5 +1,8 @@ // This file will be loaded on all pages, regardless of theme. import { start } from 'rails-ujs'; +import 'font-awesome/css/font-awesome.css'; + +require.context('images/', true); start(); diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js index 7fb1d8e77..bc5f9ed1d 100644 --- a/app/javascript/core/settings.js +++ b/app/javascript/core/settings.js @@ -3,6 +3,8 @@ const { length } = require('stringz'); const { delegate } = require('rails-ujs'); +import { processBio } from 'themes/glitch/util/bio_metadata'; + delegate(document, '.account_display_name', 'input', ({ target }) => { const nameCounter = document.querySelector('.name-counter'); @@ -35,3 +37,7 @@ delegate(document, '#account_header', 'change', ({ target }) => { header.style.backgroundImage = `url(${url})`; }); + +delegate(document, '#user_setting_theme', 'change', ({ target }) => { + target.form.submit(); +}); diff --git a/app/javascript/core/theme.yml b/app/javascript/core/theme.yml index 17e8e66b3..0dc05a149 100644 --- a/app/javascript/core/theme.yml +++ b/app/javascript/core/theme.yml @@ -4,7 +4,9 @@ pack: about: admin: admin.js auth: - common: common.js + common: + filename: common.js + stylesheet: true embed: embed.js error: home: diff --git a/app/javascript/packs/common.js b/app/javascript/packs/common.js index f3156c1c6..5d42509c5 100644 --- a/app/javascript/packs/common.js +++ b/app/javascript/packs/common.js @@ -1,3 +1 @@ -import 'font-awesome/css/font-awesome.css'; -import 'styles/application.scss' -require.context('../images/', true); +import 'styles/application.scss'; diff --git a/app/javascript/skins/vanilla/win95.scss b/app/javascript/skins/vanilla/win95.scss new file mode 100644 index 000000000..298f6ee9d --- /dev/null +++ b/app/javascript/skins/vanilla/win95.scss @@ -0,0 +1 @@ +@import 'styles/win95'; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 0ded6f159..8566585c5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2075,7 +2075,7 @@ .getting-started { box-sizing: border-box; padding-bottom: 235px; - background: url('../images/mastodon-getting-started.png') no-repeat 0 100%; + background: url('~images/mastodon-getting-started.png') no-repeat 0 100%; flex: 1 0 auto; p { @@ -2270,7 +2270,7 @@ button.icon-button.active i.fa-retweet { justify-content: center; & > div { - background: url('../images/mastodon-not-found.png') no-repeat center -50px; + background: url('~images/mastodon-not-found.png') no-repeat center -50px; padding-top: 210px; width: 100%; } @@ -3143,7 +3143,7 @@ button.icon-button.active i.fa-retweet { img, canvas { display: block; - background: url('../images/void.png') repeat; + background: url('~images/void.png') repeat; object-fit: contain; } @@ -3390,7 +3390,7 @@ button.icon-button.active i.fa-retweet { } .onboarding-modal__page-one__elephant-friend { - background: url('../images/elephant-friend-1.png') no-repeat center center / contain; + background: url('~images/elephant-friend-1.png') no-repeat center center / contain; width: 155px; height: 193px; margin-right: 15px; diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss index 6c89fc5bf..d683218b0 100644 --- a/app/javascript/styles/win95.scss +++ b/app/javascript/styles/win95.scss @@ -1,7 +1,7 @@ // win95 theme from cybrespace. -// Modified to inherit glitch styles (themes/glitch/styles/index.scss) -// instead of vanilla ones (./application.scss) +// Modified by kibi! to use webpack package syntax for urls (eg, +// `url(~images/…)`) for easy importing into skins. $win95-bg: #bfbfbf; $win95-dark-grey: #404040; @@ -73,10 +73,10 @@ $ui-highlight-color: $win95-window-header; @font-face { font-family:"premillenium"; - src: url('../fonts/premillenium/MSSansSerif.ttf') format('truetype'); + src: url('~fonts/premillenium/MSSansSerif.ttf') format('truetype'); } -@import '../themes/glitch/styles/index'; // Imports glitch themes +@import 'application'; /* borrowed from cybrespace style: wider columns and full column width images */ @@ -179,7 +179,7 @@ body.admin { font-size:0px; color:$win95-bg; - background-image: url("../images/start.png"); + background-image: url("~images/start.png"); background-repeat:no-repeat; background-position:8%; background-clip:padding-box; @@ -716,7 +716,7 @@ body.admin { font-size:0px; color:$win95-bg; - background-image: url("../images/start.png"); + background-image: url("~images/start.png"); background-repeat:no-repeat; background-position:8%; background-clip:padding-box; @@ -1055,40 +1055,40 @@ body.admin { } .column-link[href="/web/timelines/public"] { - background-image: url("../images/icon_public.png"); - &:hover { background-image: url("../images/icon_public.png"); } + background-image: url("~images/icon_public.png"); + &:hover { background-image: url("~images/icon_public.png"); } } .column-link[href="/web/timelines/public/local"] { - background-image: url("../images/icon_local.png"); - &:hover { background-image: url("../images/icon_local.png"); } + background-image: url("~images/icon_local.png"); + &:hover { background-image: url("~images/icon_local.png"); } } .column-link[href="/web/pinned"] { - background-image: url("../images/icon_pin.png"); - &:hover { background-image: url("../images/icon_pin.png"); } + background-image: url("~images/icon_pin.png"); + &:hover { background-image: url("~images/icon_pin.png"); } } .column-link[href="/web/favourites"] { - background-image: url("../images/icon_likes.png"); - &:hover { background-image: url("../images/icon_likes.png"); } + background-image: url("~images/icon_likes.png"); + &:hover { background-image: url("~images/icon_likes.png"); } } .column-link[href="/web/blocks"] { - background-image: url("../images/icon_blocks.png"); - &:hover { background-image: url("../images/icon_blocks.png"); } + background-image: url("~images/icon_blocks.png"); + &:hover { background-image: url("~images/icon_blocks.png"); } } .column-link[href="/web/mutes"] { - background-image: url("../images/icon_mutes.png"); - &:hover { background-image: url("../images/icon_mutes.png"); } + background-image: url("~images/icon_mutes.png"); + &:hover { background-image: url("~images/icon_mutes.png"); } } .column-link[href="/settings/preferences"] { - background-image: url("../images/icon_settings.png"); - &:hover { background-image: url("../images/icon_settings.png"); } + background-image: url("~images/icon_settings.png"); + &:hover { background-image: url("~images/icon_settings.png"); } } .column-link[href="/about/more"] { - background-image: url("../images/icon_about.png"); - &:hover { background-image: url("../images/icon_about.png"); } + background-image: url("~images/icon_about.png"); + &:hover { background-image: url("~images/icon_about.png"); } } .column-link[href="/auth/sign_out"] { - background-image: url("../images/icon_logout.png"); - &:hover { background-image: url("../images/icon_logout.png"); } + background-image: url("~images/icon_logout.png"); + &:hover { background-image: url("~images/icon_logout.png"); } } .getting-started__footer { diff --git a/app/javascript/themes/glitch/packs/common.js b/app/javascript/themes/glitch/packs/common.js index f4fa129e1..fd4254a0e 100644 --- a/app/javascript/themes/glitch/packs/common.js +++ b/app/javascript/themes/glitch/packs/common.js @@ -1,3 +1 @@ -import 'font-awesome/css/font-awesome.css'; -require.context('images/', true); import 'themes/glitch/styles/index.scss'; diff --git a/app/javascript/themes/glitch/packs/public.js b/app/javascript/themes/glitch/packs/public.js index d9a1b9655..410e66716 100644 --- a/app/javascript/themes/glitch/packs/public.js +++ b/app/javascript/themes/glitch/packs/public.js @@ -1,5 +1,4 @@ import loadPolyfills from 'themes/glitch/util/load_polyfills'; -import { processBio } from 'themes/glitch/util/bio_metadata'; import ready from 'themes/glitch/util/ready'; function main() { diff --git a/app/javascript/themes/win95/index.js b/app/javascript/themes/win95/index.js deleted file mode 100644 index bed6a1ef3..000000000 --- a/app/javascript/themes/win95/index.js +++ /dev/null @@ -1,10 +0,0 @@ -// These lines are the same as in glitch: -import 'font-awesome/css/font-awesome.css'; -require.context('../../images/', true); - -// …But we want to use our own styles instead. -import 'styles/win95.scss'; - -// Be sure to make this style file import from -// `themes/glitch/styles/index.scss` (the glitch styling), and not -// `application.scss` (which are the vanilla styles). diff --git a/app/javascript/themes/win95/theme.yml b/app/javascript/themes/win95/theme.yml deleted file mode 100644 index c4ac8aa55..000000000 --- a/app/javascript/themes/win95/theme.yml +++ /dev/null @@ -1,18 +0,0 @@ -# win95 theme. - -# Ported over from `cybrespace:mastodon/theme_win95`. -# <https://github.com/cybrespace/mastodon/tree/theme_win95> - -# You can use this theme file as inspiration for porting over -# a preëxisting Mastodon theme. - -# We only modify the `common` pack, which contains our styling. -pack: - common: - filename: index.js - stylesheet: true - # All unspecified packs will inherit from glitch. - -# The `fallback` parameter tells us to use glitch files for everything -# we haven't specified. -fallback: glitch diff --git a/app/lib/themes.rb b/app/lib/themes.rb index 7ced9f945..0819e2c90 100644 --- a/app/lib/themes.rb +++ b/app/lib/themes.rb @@ -17,10 +17,31 @@ class Themes name = File.basename(File.dirname(path)) if data['pack'] data['name'] = name + data['skin'] = { 'default' => [] } result[name] = data end end + Dir.glob(Rails.root.join('app', 'javascript', 'skins', '*', '*')) do |path| + ext = File.extname(path) + skin = File.basename(path) + name = File.basename(File.dirname(path)) + if result[name] + if File.directory?(path) + pack = [] + Dir.glob(File.join(path, '*.{css,scss}')) do |sheet| + pack.push(File.basename(sheet, File.extname(sheet))) + end + elsif ext.match?(/^\.s?css$/i) + skin = File.basename(path, ext) + pack = ['common'] + end + if skin != 'default' + result[name]['skin'][skin] = pack + end + end + end + @core = core @conf = result @@ -37,4 +58,8 @@ class Themes def names @conf.keys end + + def skins_for(name) + @conf[name]['skin'].keys + end end diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb index d86959c0b..730c70177 100644 --- a/app/lib/user_settings_decorator.rb +++ b/app/lib/user_settings_decorator.rb @@ -27,6 +27,7 @@ class UserSettingsDecorator user.settings['system_font_ui'] = system_font_ui_preference if change?('setting_system_font_ui') user.settings['noindex'] = noindex_preference if change?('setting_noindex') user.settings['theme'] = theme_preference if change?('setting_theme') + user.settings['skin'] = skin_preference if change?('setting_skin') end def merged_notification_emails @@ -76,7 +77,11 @@ class UserSettingsDecorator def theme_preference settings['setting_theme'] end - + + def skin_preference + settings['setting_skin'] + end + def boolean_cast_setting(key) settings[key] == '1' end diff --git a/app/models/user.rb b/app/models/user.rb index b9b228c00..1d42d4f70 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -74,7 +74,7 @@ class User < ApplicationRecord has_many :session_activations, dependent: :destroy delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :delete_modal, - :reduce_motion, :system_font_ui, :noindex, :theme, + :reduce_motion, :system_font_ui, :noindex, :theme, :skin, to: :settings, prefix: :setting, allow_nil: false def confirmed? diff --git a/app/views/layouts/_theme.html.haml b/app/views/layouts/_theme.html.haml index cdec4b370..941ccc914 100644 --- a/app/views/layouts/_theme.html.haml +++ b/app/views/layouts/_theme.html.haml @@ -3,8 +3,11 @@ = render partial: 'layouts/theme', object: theme[:common] - if theme[:pack] = javascript_pack_tag theme[:name] ? "themes/#{theme[:name]}/#{theme[:pack]}" : "core/#{theme[:pack]}", integrity: true, crossorigin: 'anonymous' - - if theme[:stylesheet] - = stylesheet_pack_tag theme[:name] ? "themes/#{theme[:name]}/#{theme[:pack]}" : "core/#{theme[:pack]}", integrity: true, media: 'all' + - if theme[:skin] + - if !theme[:name] || theme[:skin] == 'default' + = stylesheet_pack_tag theme[:name] ? "themes/#{theme[:name]}/#{theme[:pack]}" : "core/#{theme[:pack]}", integrity: true, media: 'all' + - else + = stylesheet_pack_tag "skins/#{theme[:name]}/#{theme[:skin]}/#{theme[:pack]}" - if theme[:preload] - theme[:preload].each do |link| %link{ href: asset_pack_path("#{link}.js"), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml index 69e26a7be..0d487d9f3 100644 --- a/app/views/settings/preferences/show.html.haml +++ b/app/views/settings/preferences/show.html.haml @@ -28,6 +28,7 @@ .fields-group - if Themes.instance.names.size > 1 = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false + = f.input :setting_skin, collection: Themes.instance.skins_for(current_theme), label_method: lambda { |skin| I18n.t("themes.#{current_theme}.skins.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false = f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml index faf41f316..b9ef21fef 100644 --- a/config/locales/simple_form.en.yml +++ b/config/locales/simple_form.en.yml @@ -15,6 +15,7 @@ en: other: <span class="note-counter">%{count}</span> characters left setting_noindex: Affects your public profile and status pages setting_theme: Affects how Mastodon looks when you're logged in from any device. + setting_skin: Reskins the selected Mastodon theme imports: data: CSV file exported from another Mastodon instance sessions: @@ -47,6 +48,7 @@ en: setting_reduce_motion: Reduce motion in animations setting_system_font_ui: Use system's default font setting_theme: Site theme + setting_skin: Skin setting_unfollow_modal: Show confirmation dialog before unfollowing someone severity: Severity type: Import type diff --git a/config/settings.yml b/config/settings.yml index 6983484d0..5abf647e8 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -26,6 +26,7 @@ defaults: &defaults system_font_ui: false noindex: false theme: 'glitch' + skin: 'default' notification_emails: follow: false reblog: false diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js index f8741c5d8..cb31c6ab8 100644 --- a/config/webpack/configuration.js +++ b/config/webpack/configuration.js @@ -1,15 +1,16 @@ // Common configuration for webpacker loaded from config/webpacker.yml -const { basename, dirname, join, resolve } = require('path'); +const { basename, dirname, extname, join, resolve } = require('path'); const { env } = require('process'); const { safeLoad } = require('js-yaml'); -const { readFileSync } = require('fs'); +const { lstatSync, readFileSync } = require('fs'); const glob = require('glob'); const configPath = resolve('config', 'webpacker.yml'); const loadersDir = join(__dirname, 'loaders'); const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]; const themeFiles = glob.sync('app/javascript/themes/*/theme.yml'); +const skinFiles = glob.sync('app/javascript/skins/*/*'); const themes = {}; const core = function () { @@ -25,14 +26,35 @@ for (let i = 0; i < themeFiles.length; i++) { const themeFile = themeFiles[i]; const data = safeLoad(readFileSync(themeFile), 'utf8'); data.name = basename(dirname(themeFile)); + data.skin = {}; if (!data.pack_directory) { data.pack_directory = dirname(themeFile); } - if (data.pack && typeof data.pack == 'object') { + if (data.pack && typeof data.pack === 'object') { themes[data.name] = data; } } +for (let i = 0; i < skinFiles.length; i++) { + const skinFile = skinFiles[i]; + let skin = basename(skinFile); + const name = basename(dirname(skinFile)); + if (!themes[name]) { + continue; + } + const data = themes[name].skin; + if (lstatSync(skinFile).isDirectory()) { + data[skin] = {}; + const skinPacks = glob.sync(skinFile, '*.{css,scss}'); + for (let j = 0; j < skinPacks.length; j++) { + const pack = skinPacks[i]; + data[skin][basename(pack, extname(pack))] = pack; + } + } else if ((skin = skin.match(/^(.*)\.s?css$/i))) { + data[skin[1]] = { common: skinFile }; + } +} + function removeOuterSlashes(string) { return string.replace(/^\/*/, '').replace(/\/*$/, ''); } diff --git a/config/webpack/shared.js b/config/webpack/shared.js index 5b90f27fb..a2550bc81 100644 --- a/config/webpack/shared.js +++ b/config/webpack/shared.js @@ -1,7 +1,7 @@ // Note: You must restart bin/webpack-dev-server for changes to take effect const webpack = require('webpack'); -const { basename, dirname, join, relative, resolve } = require('path'); +const { basename, join, resolve } = require('path'); const { sync } = require('glob'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ManifestPlugin = require('webpack-manifest-plugin'); @@ -24,6 +24,24 @@ function reducePacks (data, into = {}) { } return map; }, into); + if (data.name) { + Object.keys(data.skin).reduce((map, entry) => { + const skin = data.skin[entry]; + const skinName = entry; + if (!skin) { + return map; + } + Object.keys(skin).reduce((map, entry) => { + const packFile = skin[entry]; + if (!packFile) { + return map; + } + map[`skins/${data.name}/${skinName}/${entry}`] = resolve(packFile); + return map; + }, into); + return map; + }, into); + } return into; } |