From 2305f7c391325c7abf8746ebb2bb560c13df4437 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 1 Sep 2017 23:13:31 +0900 Subject: [PATCH] Use system's default font on non web UI pages (#4553) * Use system's default font on non web UI pages * Remove import for Redirect --- app/javascript/mastodon/features/ui/index.js | 9 +---- app/javascript/styles/basics.scss | 36 ++++++++------------ app/serializers/initial_state_serializer.rb | 1 - app/views/layouts/application.html.haml | 1 + 4 files changed, 16 insertions(+), 31 deletions(-) diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 34b59fcc5e..8f971ae675 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import classNames from 'classnames'; import NotificationsContainer from './containers/notifications_container'; import PropTypes from 'prop-types'; import LoadingBarContainer from './containers/loading_bar_container'; @@ -43,7 +42,6 @@ import { import '../../components/status'; const mapStateToProps = state => ({ - systemFontUi: state.getIn(['meta', 'system_font_ui']), isComposing: state.getIn(['compose', 'is_composing']), }); @@ -58,7 +56,6 @@ export default class UI extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, - systemFontUi: PropTypes.bool, isComposing: PropTypes.bool, location: PropTypes.object, }; @@ -197,12 +194,8 @@ 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 ( -
+
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index 6e87157ec3..f18a322014 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -1,4 +1,5 @@ body { + font-family: 'mastodon-font-sans-serif', sans-serif; background: $ui-base-color; background-size: cover; background-attachment: fixed; @@ -13,9 +14,19 @@ body { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; - // This is done because we want to use mastodon-font-sans-serif (a.k.a Roboto) on the `.ui` element in the app UI - &:not(.app-body) { - font-family: 'mastodon-font-sans-serif', sans-serif; + &.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-body { @@ -72,22 +83,3 @@ button { align-items: center; justify-content: center; } - -.ui.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; -} - -.ui:not(.system-font) { - font-family: 'mastodon-font-sans-serif', sans-serif; -} diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index 0ac5e83197..32ffcc6880 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/app/serializers/initial_state_serializer.rb @@ -19,7 +19,6 @@ class InitialStateSerializer < ActiveModel::Serializer store[:boost_modal] = object.current_account.user.setting_boost_modal store[:delete_modal] = object.current_account.user.setting_delete_modal store[:auto_play_gif] = object.current_account.user.setting_auto_play_gif - store[:system_font_ui] = object.current_account.user.setting_system_font_ui end store diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 82b20810a2..0ba0ffc37e 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -35,6 +35,7 @@ = yield :header_tags - body_classes ||= @body_classes + - body_classes += ' system-font' if current_account&.user&.setting_system_font_ui %body{ class: add_rtl_body_class(body_classes) } = content_for?(:content) ? yield(:content) : yield