* Use system's default font on non web UI pages * Remove import for Redirectmaster
@@ -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> | ||||
@@ -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 | |||||
&: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 { | &.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; | |||||
} |
@@ -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 | ||||
@@ -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 |