IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2089 from mattermost/plt-1205

Browse Source 
PLT-1205 Remove appearance settings tab and move theme management to display s…
This commit is contained in:
Joram Wilander
2016-02-08 07:57:21 -05:00
parent be70bbc2f0 39b35b7b39
commit 96cb7345da
10 changed files with 179 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/react/components/setting_item_max.jsx
View File

@@ -46,9 +46,14 @@ export default class SettingItemMax extends React.Component {
widthClass = 'col-sm-9 col-sm-offset-3';
}
let title;
if (this.props.title) {
title = <li className='col-sm-12 section-title'>{this.props.title}</li>;
}
return (
<ul className='section-max form-horizontal'>
<li className='col-sm-12 section-title'>{this.props.title}</li>
{title}
<li className={widthClass}>
<ul className='setting-list'>
<li className='setting-list-item'>

8
web/react/components/user_settings/custom_theme_chooser.jsx
View File

@@ -222,7 +222,7 @@ class CustomThemeChooser extends React.Component {
} else {
elements.push(
<div
className='col-sm-4 form-group'
className='col-sm-4 form-group element'
key={'custom-theme-key' + index}
>
<label className='custom-label'>{formatMessage(messages[element.id])}</label>
@@ -265,8 +265,8 @@ class CustomThemeChooser extends React.Component {
);
return (
<div>
<div className='row form-group'>
<div className='appearance-section'>
<div className='theme-elements row form-group'>
{elements}
</div>
<div className='row'>
@@ -283,4 +283,4 @@ CustomThemeChooser.propTypes = {
updateTheme: React.PropTypes.func.isRequired
};
export default injectIntl(CustomThemeChooser);
export default injectIntl(CustomThemeChooser);

2
web/react/components/user_settings/premade_theme_chooser.jsx
View File

@@ -45,7 +45,7 @@ export default class PremadeThemeChooser extends React.Component {
}
return (
<div className='row'>
<div className='row appearance-section'>
{premadeThemes}
</div>
);

18
web/react/components/user_settings/user_settings.jsx
View File

@@ -6,7 +6,6 @@ import * as utils from '../../utils/utils.jsx';
import NotificationsTab from './user_settings_notifications.jsx';
import SecurityTab from './user_settings_security.jsx';
import GeneralTab from './user_settings_general.jsx';
import AppearanceTab from './user_settings_appearance.jsx';
import DeveloperTab from './user_settings_developer.jsx';
import IntegrationsTab from './user_settings_integrations.jsx';
import DisplayTab from './user_settings_display.jsx';
@@ -85,21 +84,6 @@ export default class UserSettings extends React.Component {
/>
</div>
);
} else if (this.props.activeTab === 'appearance') {
return (
<div>
<AppearanceTab
ref='activeTab'
activeSection={this.props.activeSection}
updateSection={this.props.updateSection}
updateTab={this.props.updateTab}
closeModal={this.props.closeModal}
collapseModal={this.props.collapseModal}
setEnforceFocus={this.props.setEnforceFocus}
setRequireConfirm={this.props.setRequireConfirm}
/>
</div>
);
} else if (this.props.activeTab === 'developer') {
return (
<div>
@@ -137,6 +121,8 @@ export default class UserSettings extends React.Component {
updateTab={this.props.updateTab}
closeModal={this.props.closeModal}
collapseModal={this.props.collapseModal}
setEnforceFocus={this.props.setEnforceFocus}
setRequireConfirm={this.props.setRequireConfirm}
/>
</div>
);

24
web/react/components/user_settings/user_settings_display.jsx
View File

@@ -1,15 +1,18 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {savePreferences} from '../../utils/client.jsx';
import SettingItemMin from '../setting_item_min.jsx';
import SettingItemMax from '../setting_item_max.jsx';
import Constants from '../../utils/constants.jsx';
const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
import PreferenceStore from '../../stores/preference_store.jsx';
import ManageLanguages from './manage_languages.jsx';
import ThemeSetting from './user_settings_theme.jsx';
import PreferenceStore from '../../stores/preference_store.jsx';
import * as Utils from '../../utils/utils.jsx';
import Constants from '../../utils/constants.jsx';
const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
import {savePreferences} from '../../utils/client.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
@@ -452,6 +455,13 @@ class UserSettingsDisplay extends React.Component {
/>
</h3>
<div className='divider-dark first'/>
<ThemeSetting
selected={this.props.activeSection === 'theme'}
updateSection={this.updateSection}
setRequireConfirm={this.props.setRequireConfirm}
setEnforceFocus={this.props.setEnforceFocus}
/>
<div className='divider-dark'/>
{fontSection}
<div className='divider-dark'/>
{clockSection}
@@ -472,7 +482,9 @@ UserSettingsDisplay.propTypes = {
updateTab: React.PropTypes.func,
activeSection: React.PropTypes.string,
closeModal: React.PropTypes.func.isRequired,
collapseModal: React.PropTypes.func.isRequired
collapseModal: React.PropTypes.func.isRequired,
setRequireConfirm: React.PropTypes.func.isRequired,
setEnforceFocus: React.PropTypes.func.isRequired
};
export default injectIntl(UserSettingsDisplay);
export default injectIntl(UserSettingsDisplay);

21
web/react/components/user_settings/user_settings_modal.jsx
View File

@@ -2,9 +2,13 @@
// See License.txt for license information.
import ConfirmModal from '../confirm_modal.jsx';
const Modal = ReactBootstrap.Modal;
import SettingsSidebar from '../settings_sidebar.jsx';
import UserSettings from './user_settings.jsx';
import SettingsSidebar from '../settings_sidebar.jsx';
import UserStore from '../../stores/user_store.jsx';
import * as Utils from '../../utils/utils.jsx';
const Modal = ReactBootstrap.Modal;
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
@@ -21,10 +25,6 @@ const holders = defineMessages({
id: 'user.settings.modal.notifications',
defaultMessage: 'Notifications'
},
appearance: {
id: 'user.settings.modal.appearance',
defaultMessage: 'Appearance'
},
developer: {
id: 'user.settings.modal.developer',
defaultMessage: 'Developer'
@@ -214,6 +214,12 @@ class UserSettingsModal extends React.Component {
if (!skipConfirm && this.requireConfirm) {
this.showConfirmModal(() => this.updateSection(section, true));
} else {
if (this.state.active_section === 'theme' && section !== 'theme') {
const user = UserStore.getCurrentUser();
if (user.theme_props != null) {
Utils.applyTheme(user.theme_props);
}
}
this.setState({active_section: section});
}
}
@@ -224,7 +230,6 @@ class UserSettingsModal extends React.Component {
tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'});
tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'});
tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'});
tabs.push({name: 'appearance', uiName: formatMessage(holders.appearance), icon: 'glyphicon glyphicon-wrench'});
if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'});
}
@@ -294,4 +299,4 @@ UserSettingsModal.propTypes = {
onModalDismissed: React.PropTypes.func.isRequired
};
export default injectIntl(UserSettingsModal);
export default injectIntl(UserSettingsModal);

226
web/react/components/user_settings/user_settings_appearance.jsx → web/react/components/user_settings/user_settings_theme.jsx
View File

@@ -1,8 +1,10 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import CustomThemeChooser from './custom_theme_chooser.jsx';
import PremadeThemeChooser from './premade_theme_chooser.jsx';
import SettingItemMin from '../setting_item_min.jsx';
import SettingItemMax from '../setting_item_max.jsx';
import UserStore from '../../stores/user_store.jsx';
@@ -12,11 +14,22 @@ import * as Utils from '../../utils/utils.jsx';
import Constants from '../../utils/constants.jsx';
import {FormattedMessage} from 'mm-intl';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const ActionTypes = Constants.ActionTypes;
export default class UserSettingsAppearance extends React.Component {
const holders = defineMessages({
themeTitle: {
id: 'user.settings.display.theme.title',
defaultMessage: 'Theme'
},
themeDescribe: {
id: 'user.settings.display.theme.describe',
defaultMessage: 'Open to manage your theme'
}
});
export default class ThemeSetting extends React.Component {
constructor(props) {
super(props);
@@ -34,16 +47,21 @@ export default class UserSettingsAppearance extends React.Component {
componentDidMount() {
UserStore.addChangeListener(this.onChange);
if (this.props.activeSection === 'theme') {
if (this.props.selected) {
$(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border');
}
}
componentDidUpdate() {
if (this.props.activeSection === 'theme') {
if (this.props.selected) {
$('.color-btn').removeClass('active-border');
$(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border');
}
}
componentWillReceiveProps(nextProps) {
if (!this.props.selected && nextProps.selected) {
this.resetFields();
}
}
componentWillUnmount() {
UserStore.removeChangeListener(this.onChange);
}
@@ -96,6 +114,7 @@ export default class UserSettingsAppearance extends React.Component {
this.props.setRequireConfirm(false);
this.originalTheme = Object.assign({}, this.state.theme);
this.scrollToTop();
this.props.updateSection('');
},
(err) => {
var state = this.getStateFromStores();
@@ -149,6 +168,8 @@ export default class UserSettingsAppearance extends React.Component {
this.props.setEnforceFocus(false);
}
render() {
const {formatMessage} = this.props.intl;
var serverError;
if (this.state.serverError) {
serverError = this.state.serverError;
@@ -160,136 +181,121 @@ export default class UserSettingsAppearance extends React.Component {
let premade;
if (displayCustom) {
custom = (
<CustomThemeChooser
theme={this.state.theme}
updateTheme={this.updateTheme}
/>
<div key='customThemeChooser'>
<br/>
<CustomThemeChooser
theme={this.state.theme}
updateTheme={this.updateTheme}
/>
</div>
);
} else {
premade = (
<PremadeThemeChooser
theme={this.state.theme}
updateTheme={this.updateTheme}
/>
<div key='premadeThemeChooser'>
<br/>
<PremadeThemeChooser
theme={this.state.theme}
updateTheme={this.updateTheme}
/>
</div>
);
}
const themeUI = (
<div className='section-max appearance-section'>
<div className='col-sm-12'>
<div className='radio'>
<label>
<input type='radio'
checked={!displayCustom}
onChange={this.updateType.bind(this, 'premade')}
/>
<FormattedMessage
id='user.settings.appearance.themeColors'
defaultMessage='Theme Colors'
/>
</label>
<br/>
</div>
{premade}
<div className='radio'>
<label>
<input type='radio'
checked={displayCustom}
onChange={this.updateType.bind(this, 'custom')}
/>
<FormattedMessage
id='user.settings.appearance.customTheme'
defaultMessage='Custom Theme'
/>
</label>
<br/>
</div>
{custom}
<hr />
{serverError}
<a
className='btn btn-sm btn-primary'
href='#'
onClick={this.submitTheme}
>
<FormattedMessage
id='user.settings.appearance.save'
defaultMessage='Save'
/>
</a>
<a
className='btn btn-sm theme'
href='#'
onClick={this.resetFields}
>
<FormattedMessage
id='user.settings.appearance.cancel'
defaultMessage='Cancel'
/>
</a>
</div>
</div>
);
let themeUI;
if (this.props.selected) {
let inputs = [];
return (
<div>
<div className='modal-header'>
<button
type='button'
className='close'
aria-label='Close'
onClick={this.props.closeModal}
>
<span aria-hidden='true'>{'×'}</span>
</button>
<h4
className='modal-title'
ref='title'
>
<i
className='modal-back'
onClick={this.props.collapseModal}
inputs.push(
<div
className='radio'
key='premadeThemeColorLabel'
>
<label>
<input type='radio'
checked={!displayCustom}
onChange={this.updateType.bind(this, 'premade')}
/>
<FormattedMessage
id='user.settings.appearance.title'
defaultMessage='Appearance Settings'
id='user.settings.display.theme.themeColors'
defaultMessage='Theme Colors'
/>
</h4>
</label>
<br/>
</div>
<div className='user-settings'>
<h3 className='tab-header'>
<FormattedMessage
id='user.settings.appearance.title'
defaultMessage='Appearance Settings'
);
inputs.push(premade);
inputs.push(
<div
className='radio'
key='customThemeColorLabel'
>
<label>
<input type='radio'
checked={displayCustom}
onChange={this.updateType.bind(this, 'custom')}
/>
</h3>
<div className='divider-dark first'/>
{themeUI}
<div className='divider-dark'/>
<FormattedMessage
id='user.settings.display.theme.customTheme'
defaultMessage='Custom Theme'
/>
</label>
<br/>
</div>
);
inputs.push(custom);
inputs.push(
<div key='importSlackThemeButton'>
<br/>
<a
className='theme'
onClick={this.handleImportModal}
>
<FormattedMessage
id='user.settings.appearance.import'
id='user.settings.display.theme.import'
defaultMessage='Import theme colors from Slack'
/>
</a>
</div>
</div>
);
);
themeUI = (
<SettingItemMax
inputs={inputs}
submit={this.submitTheme}
server_error={serverError}
width='full'
updateSection={(e) => {
this.props.updateSection('');
e.preventDefault();
}}
/>
);
} else {
themeUI = (
<SettingItemMin
title={formatMessage(holders.themeTitle)}
describe={formatMessage(holders.themeDescribe)}
updateSection={() => {
this.props.updateSection('theme');
}}
/>
);
}
return themeUI;
}
}
UserSettingsAppearance.defaultProps = {
activeSection: ''
};
UserSettingsAppearance.propTypes = {
activeSection: React.PropTypes.string,
updateTab: React.PropTypes.func,
closeModal: React.PropTypes.func.isRequired,
collapseModal: React.PropTypes.func.isRequired,
ThemeSetting.propTypes = {
intl: intlShape.isRequired,
selected: React.PropTypes.bool.isRequired,
updateSection: React.PropTypes.func.isRequired,
setRequireConfirm: React.PropTypes.func.isRequired,
setEnforceFocus: React.PropTypes.func.isRequired
};
export default injectIntl(ThemeSetting);

10
web/sass-files/sass/partials/_settings.scss
View File

@@ -178,9 +178,17 @@
}
}
}
.theme-elements {
padding-left:15px;
.element {
margin-right:10px;
}
}
.custom-label {
font-weight: normal;
font-size: 13px;
font-size: 12px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;

13
web/static/i18n/en.json
View File

@@ -1130,12 +1130,6 @@
"user.settings.advance.sendDesc": "If enabled 'Enter' inserts a new line and 'Ctrl + Enter' submits the message.",
"user.settings.advance.preReleaseDesc": "Check any pre-released features you'd like to preview. You may also need to refresh the page before the setting will take effect.",
"user.settings.advance.title": "Advanced Settings",
"user.settings.appearance.themeColors": "Theme Colors",
"user.settings.appearance.customTheme": "Custom Theme",
"user.settings.appearance.save": "Save",
"user.settings.appearance.cancel": "Cancel",
"user.settings.appearance.title": "Appearance Settings",
"user.settings.appearance.import": "Import theme colors from Slack",
"user.settings.developer.applicationsPreview": "Applications (Preview)",
"user.settings.developer.thirdParty": "Open to register a new third-party application",
"user.settings.developer.register": "Register New Application",
@@ -1153,6 +1147,11 @@
"user.settings.display.nameOptsDesc": "Set how to display other user's names in posts and the Direct Messages list.",
"user.settings.display.fontDesc": "Select the font displayed in the Mattermost user interface.",
"user.settings.display.title": "Display Settings",
"user.settings.display.theme.themeColors": "Theme Colors",
"user.settings.display.theme.customTheme": "Custom Theme",
"user.settings.display.theme.import": "Import theme colors from Slack",
"user.settings.display.theme.title": "Theme",
"user.settings.display.theme.describe": "Open to manage your theme",
"user.settings.general.usernameReserved": "This username is reserved, please choose a new one.",
"user.settings.general.usernameRestrictions": "'Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'.",
"user.settings.general.validEmail": "Please enter a valid email address",
@@ -1254,7 +1253,7 @@
"intro_messages.teammate": "This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.",
"intro_messages.offTopic": "<h4 class=\"channel-intro__title\">Beginning of {display_name}</h4><p class=\"channel-intro__content\">This is the start of {display_name}, a channel for non-work-related conversations.<br/></p>",
"intro_messages.inviteOthers": "Invite others to this team",
"intro_messages.default": "<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!'</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>",
"intro_messages.default": "<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>",
"intro_messages.group": "private group",
"intro_messages.onlyInvited": " Only invited members can see this private group.",
"intro_messages.channel": "channel",

11
web/static/i18n/es.json
View File

@@ -1057,12 +1057,6 @@
"user.settings.advance.sendDesc": "Si está habilitado 'Retorno' inserta una nueva linea y 'Ctrl + Retorno' envía el mensaje.",
"user.settings.advance.sendTitle": "Enviar mensajes con Ctrl + Retorno",
"user.settings.advance.title": "Configuración Avanzada",
"user.settings.appearance.cancel": "Cancelar",
"user.settings.appearance.customTheme": "Tema personalizado",
"user.settings.appearance.import": "Importar los colores de tema de Slack",
"user.settings.appearance.save": "Guardar",
"user.settings.appearance.themeColors": "Selecciona un Tema",
"user.settings.appearance.title": "Configuraciones de Apariencia",
"user.settings.cmds.add": "Agregar",
"user.settings.cmds.add_desc": "Crea comandos que permitan enviar eventos a integraciones externas. Por favor revisa <a href=\"http://mattermost.org/commands\">http://mattermost.org/commands</a> para aprender más.",
"user.settings.cmds.add_display_name.placeholder": "Nombre a mostrar",
@@ -1136,6 +1130,9 @@
"user.settings.display.showUsername": "Mostrar el nombre de usuario (predeterminado)",
"user.settings.display.teammateDisplay": "Visualización del nombre de los integrantes",
"user.settings.display.title": "Configuración de Visualización",
"user.settings.display.theme.customTheme": "Tema personalizado",
"user.settings.display.theme.import": "Importar los colores de tema de Slack",
"user.settings.display.theme.themeColors": "Selecciona un Tema",
"user.settings.general.checkEmail": "Revisa tu correo electrónico {email} para verificar la dirección.",
"user.settings.general.checkEmailNoAddress": "Revisa tu correo electrónico para verificar la dirección",
"user.settings.general.close": "Cerrar",
@@ -1262,4 +1259,4 @@
"view_image_popover.download": "Descargar",
"view_image_popover.file": "Archivo {count} de {total}",
"view_image_popover.publicLink": "Obtener Enlace Público"
}
}