diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/user_settings/user_settings_display.jsx | 9 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 22 |
2 files changed, 16 insertions, 15 deletions
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index dc3865c68..c464258de 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -241,7 +241,7 @@ export default class UserSettingsDisplay extends React.Component { const inputs = [ <div key='userDisplayNameOptions'> <div - className='input-group theme-group dropdown' + className='dropdown' > <select className='form-control' @@ -251,9 +251,6 @@ export default class UserSettingsDisplay extends React.Component { > {options} </select> - <span className={'input-group-addon ' + Constants.FONTS[this.state.selectedFont]}> - {this.state.selectedFont} - </span> </div> <div><br/>{'Select the font displayed in the Mattermost user interface.'}</div> </div> @@ -312,12 +309,12 @@ export default class UserSettingsDisplay extends React.Component { <div className='user-settings'> <h3 className='tab-header'>{'Display Settings'}</h3> <div className='divider-dark first'/> + {fontSection} + <div className='divider-dark'/> {clockSection} <div className='divider-dark'/> {nameFormatSection} <div className='divider-dark'/> - {fontSection} - <div className='divider-dark'/> </div> </div> ); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 788d8a45c..0a52f5b37 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -695,15 +695,19 @@ export function applyTheme(theme) { } export function applyFont(fontName) { - const body = document.querySelector('body'); - const keys = Object.getOwnPropertyNames(body.classList); - keys.forEach((k) => { - const className = body.classList[k]; - if (className && className.lastIndexOf('font') === 0) { - body.classList.remove(className); + const body = $('body'); + + for (const key of Reflect.ownKeys(Constants.FONTS)) { + const className = Constants.FONTS[key]; + + if (fontName === key) { + if (!body.hasClass(className)) { + body.addClass(className); + } + } else { + body.removeClass(className); } - }); - body.classList.add(Constants.FONTS[fontName]); + } } export function changeCss(className, classValue, classRepeat) { @@ -1238,4 +1242,4 @@ export function getPostTerm(post) { export function isFeatureEnabled(feature) { return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true'; -}
\ No newline at end of file +} |