Merge pull request #254 from glitch-soc/new-theme-ux
New flavour/skin UX
This commit is contained in:
commit
af0031fe1b
18 changed files with 116 additions and 19 deletions
35
app/controllers/settings/flavours_controller.rb
Normal file
35
app/controllers/settings/flavours_controller.rb
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
class Settings::FlavoursController < Settings::BaseController
|
||||||
|
|
||||||
|
def index
|
||||||
|
redirect_to action: 'show', flavour: current_flavour
|
||||||
|
end
|
||||||
|
|
||||||
|
def show
|
||||||
|
unless Themes.instance.flavours.include?(params[:flavour]) or params[:flavour] == current_flavour
|
||||||
|
redirect_to action: 'show', flavour: current_flavour
|
||||||
|
end
|
||||||
|
|
||||||
|
@listing = Themes.instance.flavours
|
||||||
|
@selected = params[:flavour]
|
||||||
|
end
|
||||||
|
|
||||||
|
def update
|
||||||
|
user_settings.update(user_settings_params(params[:flavour]).to_h)
|
||||||
|
redirect_to action: 'show', flavour: params[:flavour]
|
||||||
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
|
||||||
|
def user_settings
|
||||||
|
UserSettingsDecorator.new(current_user)
|
||||||
|
end
|
||||||
|
|
||||||
|
def user_settings_params(flavour)
|
||||||
|
params.require(:user).merge({ setting_flavour: flavour }).permit(
|
||||||
|
:setting_flavour,
|
||||||
|
:setting_skin
|
||||||
|
)
|
||||||
|
end
|
||||||
|
end
|
|
@ -39,8 +39,6 @@ class Settings::PreferencesController < Settings::BaseController
|
||||||
:setting_reduce_motion,
|
:setting_reduce_motion,
|
||||||
:setting_system_font_ui,
|
:setting_system_font_ui,
|
||||||
:setting_noindex,
|
:setting_noindex,
|
||||||
:setting_flavour,
|
|
||||||
:setting_skin,
|
|
||||||
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)
|
||||||
)
|
)
|
||||||
|
|
|
@ -37,7 +37,3 @@ delegate(document, '#account_header', 'change', ({ target }) => {
|
||||||
|
|
||||||
header.style.backgroundImage = `url(${url})`;
|
header.style.backgroundImage = `url(${url})`;
|
||||||
});
|
});
|
||||||
|
|
||||||
delegate(document, '#user_setting_flavour, #user_setting_skin', 'change', ({ target }) => {
|
|
||||||
target.form.submit();
|
|
||||||
});
|
|
||||||
|
|
BIN
app/javascript/flavours/glitch/images/glitch-preview.jpg
Normal file
BIN
app/javascript/flavours/glitch/images/glitch-preview.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 193 KiB |
|
@ -1,6 +1,8 @@
|
||||||
en:
|
en:
|
||||||
flavours:
|
flavours:
|
||||||
glitch: Glitch Edition
|
glitch:
|
||||||
|
description: The default flavour for GlitchSoc instances.
|
||||||
|
name: Glitch Edition
|
||||||
skins:
|
skins:
|
||||||
glitch:
|
glitch:
|
||||||
default: Default
|
default: Default
|
||||||
|
|
|
@ -1 +1,4 @@
|
||||||
import 'flavours/glitch/styles/index.scss';
|
import 'flavours/glitch/styles/index.scss';
|
||||||
|
|
||||||
|
// This ensures that webpack compiles our images.
|
||||||
|
require.context('../images', true);
|
||||||
|
|
|
@ -246,6 +246,22 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flavour-screen {
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flavour-description {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.report-accounts {
|
.report-accounts {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
|
@ -26,6 +26,12 @@ pack:
|
||||||
# language tags and whose default exports are a messages object.
|
# language tags and whose default exports are a messages object.
|
||||||
locales: locales
|
locales: locales
|
||||||
|
|
||||||
|
# (OPTIONAL) A file to use as the preview screenshot for the flavour,
|
||||||
|
# or an array thereof. These filenames must be unique across all
|
||||||
|
# images (regardless of path), so it's a good idea to namespace them
|
||||||
|
# to your theme. It's up to you to let webpack know to compile them.
|
||||||
|
screenshot: glitch-preview.jpg
|
||||||
|
|
||||||
# (OPTIONAL) The directory which contains the pack files.
|
# (OPTIONAL) The directory which contains the pack files.
|
||||||
# Defaults to the theme directory (`app/javascript/themes/[theme]`),
|
# Defaults to the theme directory (`app/javascript/themes/[theme]`),
|
||||||
# which should be sufficient for like 99% of use-cases lol.
|
# which should be sufficient for like 99% of use-cases lol.
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
en:
|
en:
|
||||||
flavours:
|
flavours:
|
||||||
vanilla: Vanilla Mastodon
|
vanilla:
|
||||||
|
description: The theme used by vanilla Mastodon instances. This theme might not support all of the features of GlitchSoc.
|
||||||
|
name: Vanilla Mastodon
|
||||||
skins:
|
skins:
|
||||||
vanilla:
|
vanilla:
|
||||||
default: Default
|
default: Default
|
||||||
|
|
|
@ -24,6 +24,12 @@ pack:
|
||||||
# the flavour, relative to this directory.
|
# the flavour, relative to this directory.
|
||||||
locales: ../../mastodon/locales
|
locales: ../../mastodon/locales
|
||||||
|
|
||||||
|
# (OPTIONAL) A file to use as the preview screenshot for the flavour,
|
||||||
|
# or an array thereof. These filenames must be unique across all
|
||||||
|
# images (regardless of path), so it's a good idea to namespace them
|
||||||
|
# to your theme. It's up to you to let webpack know to compile them.
|
||||||
|
screenshot: screenshot.jpg
|
||||||
|
|
||||||
# (OPTIONAL) The directory which contains the pack files.
|
# (OPTIONAL) The directory which contains the pack files.
|
||||||
# Defaults to this directory (`app/javascript/flavour/[flavour]`),
|
# Defaults to this directory (`app/javascript/flavour/[flavour]`),
|
||||||
# but in the case of the vanilla Mastodon flavour the pack files are
|
# but in the case of the vanilla Mastodon flavour the pack files are
|
||||||
|
|
BIN
app/javascript/images/screenshot.jpg
Normal file
BIN
app/javascript/images/screenshot.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 234 KiB |
|
@ -14,17 +14,27 @@ class Themes
|
||||||
result = Hash.new
|
result = Hash.new
|
||||||
Dir.glob(Rails.root.join('app', 'javascript', 'flavours', '*', 'theme.yml')) do |path|
|
Dir.glob(Rails.root.join('app', 'javascript', 'flavours', '*', 'theme.yml')) do |path|
|
||||||
data = YAML.load_file(path)
|
data = YAML.load_file(path)
|
||||||
name = File.basename(File.dirname(path))
|
dir = File.dirname(path)
|
||||||
|
name = File.basename(dir)
|
||||||
|
locales = []
|
||||||
|
screenshots = []
|
||||||
if data['locales']
|
if data['locales']
|
||||||
locales = []
|
Dir.glob(File.join(dir, data['locales'], '*.{js,json}')) do |locale|
|
||||||
Dir.glob(File.join(File.dirname(path), data['locales'], '*.{js,json}')) do |locale|
|
|
||||||
localeName = File.basename(locale, File.extname(locale))
|
localeName = File.basename(locale, File.extname(locale))
|
||||||
locales.push(localeName) unless localeName.match(/defaultMessages|whitelist|index/)
|
locales.push(localeName) unless localeName.match(/defaultMessages|whitelist|index/)
|
||||||
end
|
end
|
||||||
data['locales'] = locales
|
end
|
||||||
|
if data['screenshot']
|
||||||
|
if data['screenshot'].is_a? Array
|
||||||
|
screenshots = data['screenshot']
|
||||||
|
else
|
||||||
|
screenshots.push(data['screenshot'])
|
||||||
|
end
|
||||||
end
|
end
|
||||||
if data['pack']
|
if data['pack']
|
||||||
data['name'] = name
|
data['name'] = name
|
||||||
|
data['locales'] = locales
|
||||||
|
data['screenshot'] = screenshots
|
||||||
data['skin'] = { 'default' => [] }
|
data['skin'] = { 'default' => [] }
|
||||||
result[name] = data
|
result[name] = data
|
||||||
end
|
end
|
||||||
|
|
19
app/views/settings/flavours/show.html.haml
Normal file
19
app/views/settings/flavours/show.html.haml
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
- content_for :page_title do
|
||||||
|
= t "flavours.#{@selected}.name", default: @selected
|
||||||
|
|
||||||
|
= simple_form_for current_user, url: settings_flavour_path(@selected), html: { method: :put } do |f|
|
||||||
|
= render 'shared/error_messages', object: current_user
|
||||||
|
|
||||||
|
- Themes.instance.flavour(@selected)['screenshot'].each do |screen|
|
||||||
|
%img.flavour-screen{ src: asset_pack_path(screen) }
|
||||||
|
|
||||||
|
.flavour-description
|
||||||
|
= t "flavours.#{@selected}.description", default: ''
|
||||||
|
|
||||||
|
%hr/
|
||||||
|
|
||||||
|
.fields-group
|
||||||
|
= f.input :setting_skin, collection: Themes.instance.skins_for(@selected), label_method: lambda { |skin| I18n.t("skins.#{@selected}.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false
|
||||||
|
|
||||||
|
.actions
|
||||||
|
= f.button :button, t('generic.use_this'), type: :submit
|
|
@ -26,10 +26,6 @@
|
||||||
%h4= t 'preferences.web'
|
%h4= t 'preferences.web'
|
||||||
|
|
||||||
.fields-group
|
.fields-group
|
||||||
- if Themes.instance.flavours.size > 1
|
|
||||||
= f.input :setting_flavour, collection: Themes.instance.flavours, label_method: lambda { |flavour| I18n.t("flavours.#{flavour}", default: flavour) }, wrapper: :with_label, include_blank: false
|
|
||||||
= f.input :setting_skin, collection: Themes.instance.skins_for(current_flavour), label_method: lambda { |skin| I18n.t("skins.#{current_flavour}.#{skin}", default: skin) }, wrapper: :with_label, include_blank: false
|
|
||||||
|
|
||||||
= f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
|
= f.input :setting_unfollow_modal, as: :boolean, wrapper: :with_label
|
||||||
= f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
|
= f.input :setting_boost_modal, as: :boolean, wrapper: :with_label
|
||||||
= f.input :setting_favourite_modal, as: :boolean, wrapper: :with_label
|
= f.input :setting_favourite_modal, as: :boolean, wrapper: :with_label
|
||||||
|
|
|
@ -424,6 +424,7 @@ en:
|
||||||
changes_saved_msg: Changes successfully saved!
|
changes_saved_msg: Changes successfully saved!
|
||||||
powered_by: powered by %{link}
|
powered_by: powered by %{link}
|
||||||
save_changes: Save changes
|
save_changes: Save changes
|
||||||
|
use_this: Use this
|
||||||
validation_errors:
|
validation_errors:
|
||||||
one: Something isn't quite right yet! Please review the error below
|
one: Something isn't quite right yet! Please review the error below
|
||||||
other: Something isn't quite right yet! Please review %{count} errors below
|
other: Something isn't quite right yet! Please review %{count} errors below
|
||||||
|
@ -587,6 +588,7 @@ en:
|
||||||
development: Development
|
development: Development
|
||||||
edit_profile: Edit profile
|
edit_profile: Edit profile
|
||||||
export: Data export
|
export: Data export
|
||||||
|
flavours: Flavours
|
||||||
followers: Authorized followers
|
followers: Authorized followers
|
||||||
import: Import
|
import: Import
|
||||||
keyword_mutes: Muted keywords
|
keyword_mutes: Muted keywords
|
||||||
|
|
|
@ -13,7 +13,6 @@ en:
|
||||||
note:
|
note:
|
||||||
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_flavour: Affects how Mastodon looks when you're logged in from any device
|
|
||||||
setting_noindex: Affects your public profile and status pages
|
setting_noindex: Affects your public profile and status pages
|
||||||
setting_skin: Reskins the selected Mastodon flavour
|
setting_skin: Reskins the selected Mastodon flavour
|
||||||
imports:
|
imports:
|
||||||
|
@ -47,7 +46,6 @@ en:
|
||||||
setting_default_sensitive: Always mark media as sensitive
|
setting_default_sensitive: Always mark media as sensitive
|
||||||
setting_delete_modal: Show confirmation dialog before deleting a toot
|
setting_delete_modal: Show confirmation dialog before deleting a toot
|
||||||
setting_favourite_modal: Show confirmation dialog before favouriting
|
setting_favourite_modal: Show confirmation dialog before favouriting
|
||||||
setting_flavour: Flavour
|
|
||||||
setting_noindex: Opt-out of search engine indexing
|
setting_noindex: Opt-out of search engine indexing
|
||||||
setting_reduce_motion: Reduce motion in animations
|
setting_reduce_motion: Reduce motion in animations
|
||||||
setting_skin: Skin
|
setting_skin: Skin
|
||||||
|
|
|
@ -17,6 +17,12 @@ SimpleNavigation::Configuration.run do |navigation|
|
||||||
settings.item :follower_domains, safe_join([fa_icon('users fw'), t('settings.followers')]), settings_follower_domains_url
|
settings.item :follower_domains, safe_join([fa_icon('users fw'), t('settings.followers')]), settings_follower_domains_url
|
||||||
end
|
end
|
||||||
|
|
||||||
|
primary.item :flavours, safe_join([fa_icon('paint-brush fw'), t('settings.flavours')]), settings_flavours_url do |flavours|
|
||||||
|
Themes.instance.flavours.each do |flavour|
|
||||||
|
flavours.item flavour.to_sym, safe_join([fa_icon('star fw'), t("flavours.#{flavour}.name", default: flavour)]), settings_flavour_url(flavour)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
primary.item :invites, safe_join([fa_icon('user-plus fw'), t('invites.title')]), invites_path, if: proc { Setting.min_invite_role == 'user' }
|
primary.item :invites, safe_join([fa_icon('user-plus fw'), t('invites.title')]), invites_path, if: proc { Setting.min_invite_role == 'user' }
|
||||||
|
|
||||||
primary.item :development, safe_join([fa_icon('code fw'), t('settings.development')]), settings_applications_url do |development|
|
primary.item :development, safe_join([fa_icon('code fw'), t('settings.development')]), settings_applications_url do |development|
|
||||||
|
|
|
@ -102,6 +102,8 @@ Rails.application.routes.draw do
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
resources :flavours, only: [:index, :show, :update], param: :flavour
|
||||||
|
|
||||||
resource :delete, only: [:show, :destroy]
|
resource :delete, only: [:show, :destroy]
|
||||||
resource :migration, only: [:show, :update]
|
resource :migration, only: [:show, :update]
|
||||||
|
|
||||||
|
@ -240,7 +242,7 @@ Rails.application.routes.draw do
|
||||||
resources :media, only: [:create, :update]
|
resources :media, only: [:create, :update]
|
||||||
resources :blocks, only: [:index]
|
resources :blocks, only: [:index]
|
||||||
resources :mutes, only: [:index] do
|
resources :mutes, only: [:index] do
|
||||||
collection do
|
collection do
|
||||||
get 'details'
|
get 'details'
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue