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
This commit is contained in:
Yamagishi Kazutoshi 2017-09-01 23:13:31 +09:00 committed by Eugen Rochko
parent ff7d02b236
commit 2305f7c391
4 changed files with 16 additions and 31 deletions

View file

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import NotificationsContainer from './containers/notifications_container'; import NotificationsContainer from './containers/notifications_container';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import LoadingBarContainer from './containers/loading_bar_container'; import LoadingBarContainer from './containers/loading_bar_container';
@ -43,7 +42,6 @@ import {
import '../../components/status'; import '../../components/status';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
systemFontUi: state.getIn(['meta', 'system_font_ui']),
isComposing: state.getIn(['compose', 'is_composing']), isComposing: state.getIn(['compose', 'is_composing']),
}); });
@ -58,7 +56,6 @@ export default class UI extends React.PureComponent {
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
children: PropTypes.node, children: PropTypes.node,
systemFontUi: PropTypes.bool,
isComposing: PropTypes.bool, isComposing: PropTypes.bool,
location: PropTypes.object, location: PropTypes.object,
}; };
@ -197,12 +194,8 @@ export default class UI extends React.PureComponent {
const { width, draggingOver } = this.state; const { width, draggingOver } = this.state;
const { children } = this.props; const { children } = this.props;
const className = classNames('ui', {
'system-font': this.props.systemFontUi,
});
return ( return (
<div className={className} ref={this.setRef}> <div className='ui' ref={this.setRef}>
<TabsBar /> <TabsBar />
<ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={isMobile(width)}> <ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={isMobile(width)}>
<WrappedSwitch> <WrappedSwitch>

View file

@ -1,4 +1,5 @@
body { body {
font-family: 'mastodon-font-sans-serif', sans-serif;
background: $ui-base-color; background: $ui-base-color;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
@ -13,9 +14,19 @@ body {
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; -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 &.system-font {
&:not(.app-body) { // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
font-family: 'mastodon-font-sans-serif', sans-serif; // -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 { &.app-body {
@ -72,22 +83,3 @@ button {
align-items: center; align-items: center;
justify-content: 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;
}

View file

@ -19,7 +19,6 @@ class InitialStateSerializer < ActiveModel::Serializer
store[:boost_modal] = object.current_account.user.setting_boost_modal store[:boost_modal] = object.current_account.user.setting_boost_modal
store[:delete_modal] = object.current_account.user.setting_delete_modal store[:delete_modal] = object.current_account.user.setting_delete_modal
store[:auto_play_gif] = object.current_account.user.setting_auto_play_gif 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 end
store store

View file

@ -35,6 +35,7 @@
= yield :header_tags = yield :header_tags
- body_classes ||= @body_classes - body_classes ||= @body_classes
- body_classes += ' system-font' if current_account&.user&.setting_system_font_ui
%body{ class: add_rtl_body_class(body_classes) } %body{ class: add_rtl_body_class(body_classes) }
= content_for?(:content) ? yield(:content) : yield = content_for?(:content) ? yield(:content) : yield