Merge pull request #254 from glitch-soc/new-theme-ux

New flavour/skin UX
pull/259/head
beatrix 2017-12-11 09:36:14 -05:00 committed by GitHub
commit 771b950feb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 116 additions and 19 deletions

View 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

View File

@ -39,8 +39,6 @@ class Settings::PreferencesController < Settings::BaseController
:setting_reduce_motion,
:setting_system_font_ui,
:setting_noindex,
:setting_flavour,
:setting_skin,
notification_emails: %i(follow follow_request reblog favourite mention digest),
interactions: %i(must_be_follower must_be_following)
)

View File

@ -37,7 +37,3 @@ delegate(document, '#account_header', 'change', ({ target }) => {
header.style.backgroundImage = `url(${url})`;
});
delegate(document, '#user_setting_flavour, #user_setting_skin', 'change', ({ target }) => {
target.form.submit();
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

View File

@ -1,6 +1,8 @@
en:
flavours:
glitch: Glitch Edition
glitch:
description: The default flavour for GlitchSoc instances.
name: Glitch Edition
skins:
glitch:
default: Default

View File

@ -1 +1,4 @@
import 'flavours/glitch/styles/index.scss';
// This ensures that webpack compiles our images.
require.context('../images', true);

View File

@ -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 {
display: flex;
flex-wrap: wrap;

View File

@ -26,6 +26,12 @@ pack:
# language tags and whose default exports are a messages object.
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.
# Defaults to the theme directory (`app/javascript/themes/[theme]`),
# which should be sufficient for like 99% of use-cases lol.

View File

@ -1,6 +1,8 @@
en:
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:
vanilla:
default: Default

View File

@ -24,6 +24,12 @@ pack:
# the flavour, relative to this directory.
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.
# Defaults to this directory (`app/javascript/flavour/[flavour]`),
# but in the case of the vanilla Mastodon flavour the pack files are

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

View File

@ -14,17 +14,27 @@ class Themes
result = Hash.new
Dir.glob(Rails.root.join('app', 'javascript', 'flavours', '*', 'theme.yml')) do |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']
locales = []
Dir.glob(File.join(File.dirname(path), data['locales'], '*.{js,json}')) do |locale|
Dir.glob(File.join(dir, data['locales'], '*.{js,json}')) do |locale|
localeName = File.basename(locale, File.extname(locale))
locales.push(localeName) unless localeName.match(/defaultMessages|whitelist|index/)
end
data['locales'] = locales
end
if data['screenshot']
if data['screenshot'].is_a? Array
screenshots = data['screenshot']
else
screenshots.push(data['screenshot'])
end
end
if data['pack']
data['name'] = name
data['locales'] = locales
data['screenshot'] = screenshots
data['skin'] = { 'default' => [] }
result[name] = data
end

View 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

View File

@ -26,10 +26,6 @@
%h4= t 'preferences.web'
.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_boost_modal, as: :boolean, wrapper: :with_label
= f.input :setting_favourite_modal, as: :boolean, wrapper: :with_label

View File

@ -424,6 +424,7 @@ en:
changes_saved_msg: Changes successfully saved!
powered_by: powered by %{link}
save_changes: Save changes
use_this: Use this
validation_errors:
one: Something isn't quite right yet! Please review the error below
other: Something isn't quite right yet! Please review %{count} errors below
@ -587,6 +588,7 @@ en:
development: Development
edit_profile: Edit profile
export: Data export
flavours: Flavours
followers: Authorized followers
import: Import
keyword_mutes: Muted keywords

View File

@ -13,7 +13,6 @@ en:
note:
one: <span class="note-counter">1</span> character 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_skin: Reskins the selected Mastodon flavour
imports:
@ -47,7 +46,6 @@ en:
setting_default_sensitive: Always mark media as sensitive
setting_delete_modal: Show confirmation dialog before deleting a toot
setting_favourite_modal: Show confirmation dialog before favouriting
setting_flavour: Flavour
setting_noindex: Opt-out of search engine indexing
setting_reduce_motion: Reduce motion in animations
setting_skin: Skin

View File

@ -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
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 :development, safe_join([fa_icon('code fw'), t('settings.development')]), settings_applications_url do |development|

View File

@ -102,6 +102,8 @@ Rails.application.routes.draw do
end
end
resources :flavours, only: [:index, :show, :update], param: :flavour
resource :delete, only: [:show, :destroy]
resource :migration, only: [:show, :update]
@ -240,7 +242,7 @@ Rails.application.routes.draw do
resources :media, only: [:create, :update]
resources :blocks, only: [:index]
resources :mutes, only: [:index] do
collection do
collection do
get 'details'
end
end