diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb
index 71f5a7c04be2bbb6ec1ed702673edb82aec746d7..a15c26031bf2612d98e4975615061f9d264bc385 100644
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@@ -37,6 +37,7 @@ class Settings::PreferencesController < ApplicationController
:setting_boost_modal,
:setting_delete_modal,
:setting_auto_play_gif,
+ :setting_system_font_ui,
notification_emails: %i(follow follow_request reblog favourite mention digest),
interactions: %i(must_be_follower must_be_following)
)
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 08d087da1b8d1bc39ff2ee74fbca370b5e8c3b70..54e623d9952676160c0dcc87b26ee135d3e864c6 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -1,4 +1,5 @@
import React from 'react';
+import classNames from 'classnames';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Redirect from 'react-router-dom/Redirect';
@@ -72,12 +73,17 @@ class WrappedRoute extends React.Component {
}
-@connect()
+const mapStateToProps = state => ({
+ systemFontUi: state.getIn(['meta', 'system_font_ui']),
+});
+
+@connect(mapStateToProps)
export default class UI extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
+ systemFontUi: PropTypes.bool,
};
state = {
@@ -176,8 +182,12 @@ export default class UI extends React.PureComponent {
const { width, draggingOver } = this.state;
const { children } = this.props;
+ const className = classNames('ui', {
+ 'system-font': this.props.systemFontUi,
+ });
+
return (
- <div className='ui' ref={this.setRef}>
+ <div className={className} ref={this.setRef}>
<TabsBar />
<ColumnsAreaContainer singleColumn={isMobile(width)}>
<WrappedSwitch>
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index 0cb271ddde6a5c1bbe718fc3a752aaaef4a72d7e..4da698e816922dc28ad09c9ddd42e61919be3e9d 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -63,3 +63,18 @@ button {
align-items: center;
justify-content: center;
}
+
+.system-font {
+ // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
+ // -apple-system => Safari <11 specific
+ // BlinkMacSystemFont => Chrome <56 on macOS specific
+ // Segoe UI => Windows 7/8/10
+ // Oxygen => KDE
+ // Ubuntu => Unity/Ubuntu
+ // Cantarell => GNOME
+ // Fira Sans => Firefox OS
+ // Droid Sans => Older Androids (<4.0)
+ // Helvetica Neue => Older macOS <10.11
+ // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
+ font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif;
+}
diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb
index af264bbd5354727d0a6e47fbe6fd859e43babc08..9c0cb454597b09601eb5eeb9b7d16063cd57cd7d 100644
--- a/app/lib/user_settings_decorator.rb
+++ b/app/lib/user_settings_decorator.rb
@@ -21,6 +21,7 @@ class UserSettingsDecorator
user.settings['boost_modal'] = boost_modal_preference
user.settings['delete_modal'] = delete_modal_preference
user.settings['auto_play_gif'] = auto_play_gif_preference
+ user.settings['system_font_ui'] = system_font_ui_preference
end
def merged_notification_emails
@@ -43,6 +44,10 @@ class UserSettingsDecorator
boolean_cast_setting 'setting_delete_modal'
end
+ def system_font_ui_preference
+ boolean_cast_setting 'setting_system_font_ui'
+ end
+
def auto_play_gif_preference
boolean_cast_setting 'setting_auto_play_gif'
end
diff --git a/app/models/user.rb b/app/models/user.rb
index c31a0c644049b56840be675689781211fbc47d00..e2bb3d0ed201f57598be7f2114d5d52d2dc11ce7 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -91,6 +91,10 @@ class User < ApplicationRecord
settings.auto_play_gif
end
+ def setting_system_font_ui
+ settings.system_font_ui
+ end
+
def activate_session(request)
session_activations.activate(session_id: SecureRandom.hex,
user_agent: request.user_agent,
diff --git a/app/views/home/initial_state.json.rabl b/app/views/home/initial_state.json.rabl
index e305f8e7ae226db4475cbb6ffaa09ff5158e8f86..291ff806ba0c401f8afbe8f1b2de48c1e88afe15 100644
--- a/app/views/home/initial_state.json.rabl
+++ b/app/views/home/initial_state.json.rabl
@@ -11,6 +11,7 @@ node(:meta) do
boost_modal: current_account.user.setting_boost_modal,
delete_modal: current_account.user.setting_delete_modal,
auto_play_gif: current_account.user.setting_auto_play_gif,
+ system_font_ui: current_account.user.setting_system_font_ui,
}
end
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index 721ce6a219aa01079992061418277211a6072dbd..26fbfdf82abb8feb53776e6334b2fe7d3ef457d5 100644
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -44,6 +44,7 @@
.fields-group
= f.input :setting_auto_play_gif, as: :boolean, wrapper: :with_label
+ = f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label
.actions
= f.button :button, t('generic.save_changes'), type: :submit
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 3e769fb96be7c3dfe1ae58cba1e6c93c45b5363d..d8d3b8a6fb744d8b4dc46cccb3c513102a5fa7d0 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -38,6 +38,7 @@ en:
setting_boost_modal: Show confirmation dialog before boosting
setting_default_privacy: Post privacy
setting_delete_modal: Show confirmation dialog before deleting a toot
+ setting_system_font_ui: Use system's default font
severity: Severity
type: Import type
username: Username
diff --git a/config/locales/simple_form.fr.yml b/config/locales/simple_form.fr.yml
index ae4975143c8473937498e54d106a894b9a087931..446c569473ea91154b19a32fe775af5ddfc118e5 100644
--- a/config/locales/simple_form.fr.yml
+++ b/config/locales/simple_form.fr.yml
@@ -28,6 +28,7 @@ fr:
password: Mot de passe
setting_boost_modal: Afficher un dialogue de confirmation avant de partager
setting_default_privacy: Confidentialité des statuts
+ setting_system_font_ui: Utiliser la police par défaut du système
severity: Séverité
type: Type d'import
username: Identifiant
diff --git a/config/settings.yml b/config/settings.yml
index 5aea232e7c79c29b6b411f6cdd5a677578deef18..18b70b51f06c3ed4add5266641de3e9f4109fc2e 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -19,6 +19,7 @@ defaults: &defaults
boost_modal: false
auto_play_gif: true
delete_modal: true
+ system_font_ui: false
notification_emails:
follow: false
reblog: false
diff --git a/spec/lib/user_settings_decorator_spec.rb b/spec/lib/user_settings_decorator_spec.rb
index 66e42fa0ecc5034e5667b14532afb72445be35f4..e1ba56d97543328b5c69402b986f64f85e844610 100644
--- a/spec/lib/user_settings_decorator_spec.rb
+++ b/spec/lib/user_settings_decorator_spec.rb
@@ -48,5 +48,12 @@ describe UserSettingsDecorator do
settings.update(values)
expect(user.settings['auto_play_gif']).to eq false
end
+
+ it 'updates the user settings value for system font in UI' do
+ values = { 'setting_system_font_ui' => '0' }
+
+ settings.update(values)
+ expect(user.settings['system_font_ui']).to eq false
+ end
end
end
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index a6df3fb2621b098b3116e9f68e3929dfcc365eb1..2019ec0f6981eb4eecfde70542bc29b67419f840 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -184,6 +184,14 @@ RSpec.describe User, type: :model do
expect(user.setting_auto_play_gif).to eq false
end
end
+
+ describe '#setting_system_font_ui' do
+ it 'returns system font ui setting' do
+ user = Fabricate(:user)
+ user.settings[:system_font_ui] = false
+ expect(user.setting_system_font_ui).to eq false
+ end
+ end
describe '#setting_boost_modal' do
it 'returns boost modal setting' do