Add a setting allowing the use of system's default font in Web UI (#4033)

* add a system_font_ui setting on the server

* Plug the system_font_ui on the front-end

* add EN/FR locales for the new setting

* put Roboto after all other fonts

* remove trailing whitespace so CodeClimate is happy

* fix user_spec.rb

* correctly write user_spect this time

* slightly better way of adding the classes

* add comments to the system-font stack for clarification

* use .system-font for the class instead

* don't use multiple lines for comments

* remove trailing whitespace

* use the classnames module for consistency

* use `mastodon-font-sans-serif` instead of Roboto directly

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)
     )

app/javascript/mastodon/features/ui/index.js

 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>

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;
+}

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

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,

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
 

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

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

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

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

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

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