diff options
Diffstat (limited to 'web')
28 files changed, 303 insertions, 232 deletions
diff --git a/web/react/components/admin_console/privacy_settings.jsx b/web/react/components/admin_console/privacy_settings.jsx index affd8ae11..c74d321e6 100644 --- a/web/react/components/admin_console/privacy_settings.jsx +++ b/web/react/components/admin_console/privacy_settings.jsx @@ -30,6 +30,7 @@ export default class PrivacySettings extends React.Component { var config = this.props.config; config.PrivacySettings.ShowEmailAddress = React.findDOMNode(this.refs.ShowEmailAddress).checked; config.PrivacySettings.ShowFullName = React.findDOMNode(this.refs.ShowFullName).checked; + config.PrivacySettings.EnableDiagnostic = React.findDOMNode(this.refs.EnableDiagnostic).checked; Client.saveConfig( config, @@ -137,6 +138,39 @@ export default class PrivacySettings extends React.Component { </div> <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='EnableDiagnostic' + > + {'Send Error and Diagnostic: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='EnableDiagnostic' + value='true' + ref='EnableDiagnostic' + defaultChecked={this.props.config.PrivacySettings.EnableDiagnostic} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='EnableDiagnostic' + value='false' + defaultChecked={!this.props.config.PrivacySettings.EnableDiagnostic} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'When true, The server will periodically send error and diagnostic information to Mattermost.'}</p> + </div> + </div> + + <div className='form-group'> <div className='col-sm-12'> {serverError} <button diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 9eda68b38..45981b295 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -15,14 +15,24 @@ export default class ChannelNotifications extends React.Component { this.onListenerChange = this.onListenerChange.bind(this); this.updateSection = this.updateSection.bind(this); - this.handleUpdate = this.handleUpdate.bind(this); - this.handleRadioClick = this.handleRadioClick.bind(this); - this.handleQuietToggle = this.handleQuietToggle.bind(this); - this.createDesktopSection = this.createDesktopSection.bind(this); - this.createQuietSection = this.createQuietSection.bind(this); - this.state = {notifyLevel: '', title: '', channelId: '', activeSection: ''}; + this.handleSubmitNotifyLevel = this.handleSubmitNotifyLevel.bind(this); + this.handleUpdateNotifyLevel = this.handleUpdateNotifyLevel.bind(this); + this.createNotifyLevelSection = this.createNotifyLevelSection.bind(this); + + this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this); + this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this); + this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this); + + this.state = { + notifyLevel: '', + markUnreadLevel: '', + title: '', + channelId: '', + activeSection: '' + }; } + componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); @@ -30,33 +40,34 @@ export default class ChannelNotifications extends React.Component { var button = e.relatedTarget; var channelId = button.getAttribute('data-channelid'); - var notifyLevel = ChannelStore.getMember(channelId).notify_level; - var quietMode = false; - - if (notifyLevel === 'quiet') { - quietMode = true; - } + const member = ChannelStore.getMember(channelId); + var notifyLevel = member.notify_props.desktop; + var markUnreadLevel = member.notify_props.mark_unread; - this.setState({notifyLevel: notifyLevel, quietMode: quietMode, title: button.getAttribute('data-title'), channelId: channelId}); + this.setState({ + notifyLevel, + markUnreadLevel, + title: button.getAttribute('data-title'), + channelId: channelId + }); }.bind(this)); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); } + onListenerChange() { if (!this.state.channelId) { return; } - var notifyLevel = ChannelStore.getMember(this.state.channelId).notify_level; - var quietMode = false; - if (notifyLevel === 'quiet') { - quietMode = true; - } + const member = ChannelStore.getMember(this.state.channelId); + var notifyLevel = member.notify_props.desktop; + var markUnreadLevel = member.notify_props.mark_unread; var newState = this.state; newState.notifyLevel = notifyLevel; - newState.quietMode = quietMode; + newState.markUnreadLevel = markUnreadLevel; if (!Utils.areStatesEqual(this.state, newState)) { this.setState(newState); @@ -65,53 +76,64 @@ export default class ChannelNotifications extends React.Component { updateSection(section) { this.setState({activeSection: section}); } - handleUpdate() { + + handleSubmitNotifyLevel() { var channelId = this.state.channelId; var notifyLevel = this.state.notifyLevel; - if (this.state.quietMode) { - notifyLevel = 'quiet'; + + if (ChannelStore.getMember(channelId).notify_props.desktop === notifyLevel) { + this.updateSection(''); + return; } var data = {}; data.channel_id = channelId; data.user_id = UserStore.getCurrentId(); - data.notify_level = notifyLevel; - - if (!data.notify_level || data.notify_level.length === 0) { - return; - } + data.desktop = notifyLevel; - Client.updateNotifyLevel(data, - function success() { + Client.updateNotifyProps(data, + () => { var member = ChannelStore.getMember(channelId); - member.notify_level = notifyLevel; + member.notify_props.desktop = notifyLevel; ChannelStore.setChannelMember(member); this.updateSection(''); - }.bind(this), - function error(err) { + }, + (err) => { this.setState({serverError: err.message}); - }.bind(this) + } ); } - handleRadioClick(notifyLevel) { - this.setState({notifyLevel: notifyLevel, quietMode: false}); - React.findDOMNode(this.refs.modal).focus(); - } - handleQuietToggle(quietMode) { - this.setState({notifyLevel: 'none', quietMode: quietMode}); + + handleUpdateNotifyLevel(notifyLevel) { + this.setState({notifyLevel}); React.findDOMNode(this.refs.modal).focus(); } - createDesktopSection(serverError) { + + createNotifyLevelSection(serverError) { var handleUpdateSection; + const user = UserStore.getCurrentUser(); + const globalNotifyLevel = user.notify_props.desktop; + + let globalNotifyLevelName; + if (globalNotifyLevel === 'all') { + globalNotifyLevelName = 'For all activity'; + } else if (globalNotifyLevel === 'mention') { + globalNotifyLevelName = 'Only for mentions'; + } else { + globalNotifyLevelName = 'Never'; + } + if (this.state.activeSection === 'desktop') { - var notifyActive = [false, false, false]; - if (this.state.notifyLevel === 'mention') { - notifyActive[1] = true; - } else if (this.state.notifyLevel === 'all') { + var notifyActive = [false, false, false, false]; + if (this.state.notifyLevel === 'default') { notifyActive[0] = true; - } else { + } else if (this.state.notifyLevel === 'all') { + notifyActive[1] = true; + } else if (this.state.notifyLevel === 'mention') { notifyActive[2] = true; + } else { + notifyActive[3] = true; } var inputs = []; @@ -123,9 +145,9 @@ export default class ChannelNotifications extends React.Component { <input type='radio' checked={notifyActive[0]} - onChange={this.handleRadioClick.bind(this, 'all')} + onChange={this.handleUpdateNotifyLevel.bind(this, 'default')} > - For all activity + {`Global default (${globalNotifyLevelName})`} </input> </label> <br/> @@ -135,9 +157,9 @@ export default class ChannelNotifications extends React.Component { <input type='radio' checked={notifyActive[1]} - onChange={this.handleRadioClick.bind(this, 'mention')} + onChange={this.handleUpdateNotifyLevel.bind(this, 'all')} > - Only for mentions + {'For all activity'} </input> </label> <br/> @@ -147,9 +169,21 @@ export default class ChannelNotifications extends React.Component { <input type='radio' checked={notifyActive[2]} - onChange={this.handleRadioClick.bind(this, 'none')} + onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')} + > + {'Only for mentions'} + </input> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={notifyActive[3]} + onChange={this.handleUpdateNotifyLevel.bind(this, 'none')} > - Never + {'Never'} </input> </label> </div> @@ -162,30 +196,19 @@ export default class ChannelNotifications extends React.Component { e.preventDefault(); }.bind(this); - let curChannel = ChannelStore.get(this.state.channelId); - let extraInfo = ( + const extraInfo = ( <span> - These settings will override the global notification settings. + {'Selecting an option other than "Default" will override the global notification settings.'} <br/> - Desktop notifications are available on Firefox, Safari, and Chrome. + {'Desktop notifications are available on Firefox, Safari, and Chrome.'} </span> ); - if (curChannel && curChannel.display_name) { - extraInfo = ( - <span> - These settings will override the global notification settings for the <b>{curChannel.display_name}</b> channel. - <br/> - Desktop notifications are available on Firefox, Safari, and Chrome. - </span> - ); - } - return ( <SettingItemMax title='Send desktop notifications' inputs={inputs} - submit={this.handleUpdate} + submit={this.handleSubmitNotifyLevel} server_error={serverError} updateSection={handleUpdateSection} extraInfo={extraInfo} @@ -194,7 +217,9 @@ export default class ChannelNotifications extends React.Component { } var describe; - if (this.state.notifyLevel === 'mention') { + if (this.state.notifyLevel === 'default') { + describe = `Global default (${globalNotifyLevelName})`; + } else if (this.state.notifyLevel === 'mention') { describe = 'Only for mentions'; } else if (this.state.notifyLevel === 'all') { describe = 'For all activity'; @@ -215,101 +240,123 @@ export default class ChannelNotifications extends React.Component { /> ); } - createQuietSection(serverError) { - var handleUpdateSection; - if (this.state.activeSection === 'quiet') { - var quietActive = [false, false]; - if (this.state.quietMode) { - quietActive[0] = true; - } else { - quietActive[1] = true; + + handleSubmitMarkUnreadLevel() { + const channelId = this.state.channelId; + const markUnreadLevel = this.state.markUnreadLevel; + + if (ChannelStore.getMember(channelId).notify_props.mark_unread === markUnreadLevel) { + this.updateSection(''); + return; + } + + const data = { + channel_id: channelId, + user_id: UserStore.getCurrentId(), + mark_unread: markUnreadLevel + }; + + Client.updateNotifyProps(data, + () => { + var member = ChannelStore.getMember(channelId); + member.notify_props.mark_unread = markUnreadLevel; + ChannelStore.setChannelMember(member); + this.updateSection(''); + }, + (err) => { + this.setState({serverError: err.message}); } + ); + } - var inputs = []; + handleUpdateMarkUnreadLevel(markUnreadLevel) { + this.setState({markUnreadLevel}); + React.findDOMNode(this.refs.modal).focus(); + } - inputs.push( + createMarkUnreadLevelSection(serverError) { + let content; + + if (this.state.activeSection === 'markUnreadLevel') { + const inputs = [( <div> <div className='radio'> <label> <input type='radio' - checked={quietActive[0]} - onChange={this.handleQuietToggle.bind(this, true)} + checked={this.state.markUnreadLevel === 'all'} + onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'all')} > - On + {'For all unread messages'} </input> </label> - <br/> + <br /> </div> <div className='radio'> <label> <input type='radio' - checked={quietActive[1]} - onChange={this.handleQuietToggle.bind(this, false)} + checked={this.state.markUnreadLevel === 'mention'} + onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'mention')} > - Off + {'Only for mentions'} </input> </label> - <br/> + <br /> </div> </div> - ); - - inputs.push( - <div> - <br/> - Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned. - </div> - ); + )]; - handleUpdateSection = function updateSection(e) { + const handleUpdateSection = function handleUpdateSection(e) { this.updateSection(''); this.onListenerChange(); e.preventDefault(); }.bind(this); - return ( + const extraInfo = <span>{'The channel name is bolded in the sidebar when there are unread messages. Selecting "Only for mentions" will bold the channel only when you are mentioned.'}</span>; + + content = ( <SettingItemMax - title='Quiet mode' + title='Mark Channel Unread' inputs={inputs} - submit={this.handleUpdate} + submit={this.handleSubmitMarkUnreadLevel} server_error={serverError} updateSection={handleUpdateSection} + extraInfo={extraInfo} /> ); - } - - var describe; - if (this.state.quietMode) { - describe = 'On'; } else { - describe = 'Off'; - } + let describe; - handleUpdateSection = function updateSection(e) { - this.updateSection('quiet'); - e.preventDefault(); - }.bind(this); + if (!this.state.markUnreadLevel || this.state.markUnreadLevel === 'all') { + describe = 'For all unread messages'; + } else { + describe = 'Only for mentions'; + } - return ( - <SettingItemMin - title='Quiet mode' - describe={describe} - updateSection={handleUpdateSection} - /> - ); + const handleUpdateSection = function handleUpdateSection(e) { + this.updateSection('markUnreadLevel'); + e.preventDefault(); + }.bind(this); + + content = ( + <SettingItemMin + title='Mark Channel Unread' + describe={describe} + updateSection={handleUpdateSection} + /> + ); + } + + return content; } + render() { var serverError = null; if (this.state.serverError) { serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; } - var desktopSection = this.createDesktopSection(serverError); - - var quietSection = this.createQuietSection(serverError); - return ( <div className='modal fade' @@ -341,9 +388,9 @@ export default class ChannelNotifications extends React.Component { > <br/> <div className='divider-dark first'/> - {desktopSection} + {this.createNotifyLevelSection(serverError)} <div className='divider-light'/> - {quietSection} + {this.createMarkUnreadLevelSection(serverError)} <div className='divider-dark'/> </div> </div> diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx index 0b7c41b62..f34b4669f 100644 --- a/web/react/components/notify_counts.jsx +++ b/web/react/components/notify_counts.jsx @@ -15,7 +15,7 @@ function getCountsStateFromStores() { count += channel.total_msg_count - channelMember.msg_count; } else if (channelMember.mention_count > 0) { count += channelMember.mention_count; - } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) { + } else if (channelMember.notify_props.mark_unread !== 'mention' && channel.total_msg_count - channelMember.msg_count > 0) { count += 1; } }); diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 82e746dc0..dba75ac5f 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -150,7 +150,7 @@ export default class PostInfo extends React.Component { var dropdown = this.createDropdown(); - let tooltip = <Tooltip id={post.id + 'tooltip'}>{utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}</Tooltip>; + let tooltip = <Tooltip id={post.id + 'tooltip'}>{`${utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}`}</Tooltip>; return ( <ul className='post-header post-info'> diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index dfaa4c794..c0841a508 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -200,13 +200,17 @@ export default class Sidebar extends React.Component { } var channel = ChannelStore.get(msg.channel_id); - var user = UserStore.getCurrentUser(); - if (user.notify_props && ((user.notify_props.desktop === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') || user.notify_props.desktop === 'none')) { - return; + const user = UserStore.getCurrentUser(); + const member = ChannelStore.getMember(msg.channel_id); + + var notifyLevel = member.notify_props.desktop; + if (notifyLevel === 'default') { + notifyLevel = user.notify_props.desktop; } - var member = ChannelStore.getMember(msg.channel_id); - if ((member.notify_level === 'mention' && mentions.indexOf(user.id) === -1) || member.notify_level === 'none' || member.notify_level === 'quiet') { + if (notifyLevel === 'none') { + return; + } else if (notifyLevel === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') { return; } @@ -330,7 +334,7 @@ export default class Sidebar extends React.Component { var unread = false; if (channelMember) { msgCount = channel.total_msg_count - channelMember.msg_count; - unread = (msgCount > 0 && channelMember.notify_level !== 'quiet') || channelMember.mention_count > 0; + unread = (msgCount > 0 && channelMember.notify_props.mark_unread !== 'mention') || channelMember.mention_count > 0; } var titleClass = ''; diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx index fa2e2e5e4..899dbcd05 100644 --- a/web/react/components/user_settings/manage_incoming_hooks.jsx +++ b/web/react/components/user_settings/manage_incoming_hooks.jsx @@ -148,6 +148,8 @@ export default class ManageIncomingHooks extends React.Component { return ( <div key='addIncomingHook'> + {'Create webhook URLs for channels and private groups. These URLs can be used by outside applications to create posts in any channels or private groups you have access to. The specified channel will be used as the default.'} + <br/> <label className='control-label'>{'Add a new incoming webhook'}</label> <div className='padding-top'> <select diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx index f8f916bd0..8116bffcc 100644 --- a/web/react/components/user_settings/premade_theme_chooser.jsx +++ b/web/react/components/user_settings/premade_theme_chooser.jsx @@ -24,7 +24,7 @@ export default class PremadeThemeChooser extends React.Component { premadeThemes.push( <div - className='col-sm-3 premade-themes' + className='col-xs-6 col-sm-3 premade-themes' key={'premade-theme-key' + k} > <div diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 4372069e7..c4a137ed8 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -220,7 +220,7 @@ export default class UserSettingsAppearance extends React.Component { className='theme' onClick={this.handleImportModal} > - {'Import from Slack'} + {'Import theme colors from Slack'} </a> </div> ); diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx index 42c65ef5d..e83f18aab 100644 --- a/web/react/components/user_settings/user_settings_notifications.jsx +++ b/web/react/components/user_settings/user_settings_notifications.jsx @@ -17,7 +17,7 @@ function getNotificationsStateFromStores() { if (user.notify_props && user.notify_props.desktop_sound) { sound = user.notify_props.desktop_sound; } - var desktop = 'all'; + var desktop = 'default'; if (user.notify_props && user.notify_props.desktop) { desktop = user.notify_props.desktop; } diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index ab2965000..7db3ef30d 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -152,21 +152,23 @@ export function getChannel(id) { } export function updateLastViewedAt() { - if (isCallInProgress('updateLastViewed')) { + const channelId = ChannelStore.getCurrentId(); + + if (channelId === null) { return; } - if (ChannelStore.getCurrentId() == null) { + if (isCallInProgress(`updateLastViewed${channelId}`)) { return; } - callTracker.updateLastViewed = utils.getTimestamp(); + callTracker[`updateLastViewed${channelId}`] = utils.getTimestamp(); client.updateLastViewedAt( - ChannelStore.getCurrentId(), - function updateLastViewedAtSuccess() { + channelId, + () => { callTracker.updateLastViewed = 0; }, - function updateLastViewdAtFailure(err) { + (err) => { callTracker.updateLastViewed = 0; dispatchError(err, 'updateLastViewedAt'); } @@ -634,4 +636,4 @@ export function getMyTeam() { dispatchError(err, 'getMyTeam'); } ); -}
\ No newline at end of file +} diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index b1be61fc7..5cb165b4c 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -582,16 +582,16 @@ export function updateChannelDesc(data, success, error) { track('api', 'api_channels_desc'); } -export function updateNotifyLevel(data, success, error) { +export function updateNotifyProps(data, success, error) { $.ajax({ - url: '/api/v1/channels/update_notify_level', + url: '/api/v1/channels/update_notify_props', dataType: 'json', contentType: 'application/json', type: 'POST', data: JSON.stringify(data), success, error: function onError(xhr, status, err) { - var e = handleError('updateNotifyLevel', xhr, status, err); + var e = handleError('updateNotifyProps', xhr, status, err); error(e); } }); diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index da59f8e5a..67414dc3b 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -179,7 +179,7 @@ module.exports = { centerChannelColor: '#DDDDDD', newMessageSeparator: '#5de5da', linkColor: '#A4FFEB', - buttonBg: '#1dacfc', + buttonBg: '#4CBBA4', buttonColor: '#FFFFFF' }, windows10: { diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx index 56bf49c3f..34e42cbae 100644 --- a/web/react/utils/text_formatting.jsx +++ b/web/react/utils/text_formatting.jsx @@ -87,8 +87,10 @@ function autolinkUrls(text, tokens) { const linkText = match.getMatchedText(); let url = linkText; - if (url.lastIndexOf('http', 0) !== 0) { - url = `http://${linkText}`; + if (match.getType() === 'email') { + url = `mailto:${url}`; + } else if (url.lastIndexOf('http', 0) !== 0) { + url = `http://${url}`; } const index = tokens.size; diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 8b20e2adf..1bc082175 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -395,35 +395,39 @@ export function toTitleCase(str) { export function applyTheme(theme) { if (theme.sidebarBg) { - changeCss('.sidebar--left', 'background:' + theme.sidebarBg, 1); + changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); } if (theme.sidebarText) { - changeCss('.sidebar--left .nav li>a, .sidebar--right', 'color:' + theme.sidebarText, 1); - changeCss('.sidebar--left .nav li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8), 1); + changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + theme.sidebarText, 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); + changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8), 1); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 1); changeCss('.sidebar--left .status path', 'fill:' + changeOpacity(theme.sidebarText, 0.5), 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); } if (theme.sidebarUnreadText) { - changeCss('.sidebar--left .nav li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 1); + changeCss('.sidebar--left .nav-pills__container li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 2); } if (theme.sidebarTextHoverBg) { - changeCss('.sidebar--left .nav li>a:hover, .sidebar--left .nav li>a:focus', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } if (theme.sidebarTextHoverColor) { - changeCss('.sidebar--left .nav li>a:hover, .sidebar--left .nav li>a:focus', 'color:' + theme.sidebarTextHoverColor, 2); + changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + theme.sidebarTextHoverColor, 2); + changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'color:' + theme.sidebarTextHoverColor, 2); } if (theme.sidebarTextActiveBg) { - changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + theme.sidebarTextActiveBg, 1); + changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'background:' + theme.sidebarTextActiveBg, 1); } if (theme.sidebarTextActiveColor) { - changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'color:' + theme.sidebarTextActiveColor, 2); + changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); } if (theme.sidebarHeaderBg) { @@ -458,45 +462,51 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .command-box', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .command-box, .modal .modal-content, .mentions-name, .mentions--top .mentions-box', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); changeCss('.post-image__column .post-image__details', 'background:' + theme.centerChannelBg, 1); - changeCss('.sidebar--right', 'background:' + theme.centerChannelBg, 1); + changeCss('.sidebar--right, .dropdown-menu, .popover', 'background:' + theme.centerChannelBg, 1); } if (theme.centerChannelColor) { - changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round, .command-name', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name', 'color:' + theme.centerChannelColor, 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); changeCss('.mentions--top, .command-box', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1); + changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3); + changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2); + changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1); changeCss('.post-body hr', 'background:' + theme.centerChannelColor, 1); changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1); changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .command-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.command-name', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .command-box, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .dropdown-menu, .modal .modal-header, .popover, .mentions--top .mentions-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.dropdown-menu .divider', 'background:' + theme.centerChannelColor, 1); changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1); changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2); changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); - changeCss('@media(max-width: 768px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.search-bar__container .search__form .search-bar', 'background: transparent; color:' + theme.centerChannelColor, 1); + changeCss('@media(max-width: 768px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1); changeCss('.search-bar__container .search__form', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.channel-intro .channel-intro__content', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2); - changeCss('.date-separator .separator__hr, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.channel-intro', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); - changeCss('.post:hover, .sidebar--right .sidebar--right__header', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.date-separator.hovered--before:after, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.date-separator.hovered--after:before, .new-separator.hovered--after:before, .command-name:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.post:hover, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('.post.current--user:hover .post-body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); } @@ -507,7 +517,7 @@ export function applyTheme(theme) { } if (theme.linkColor) { - changeCss('a, a:focus, a:hover', 'color:' + theme.linkColor, 1); + changeCss('a, a:focus, a:hover, .btn, .btn:focus, .btn:hover', 'color:' + theme.linkColor, 1); changeCss('.post .comment-icon__container', 'fill:' + theme.linkColor, 1); } diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss index 11794a269..5037da415 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/partials/_admin-console.scss @@ -144,7 +144,6 @@ } .popover { border-radius: 3px; - border: 1px solid #ccc; width: 100%; font-size: 0.95em; } diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 87d9b8200..fa465ff91 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -42,6 +42,21 @@ body { color: $primary-color; } } + .popover-title { + background: rgba(black, 0.1); + } +} + +.dropdown-menu { + .divider { + @include opacity(0.15); + } + > li > a { + color: inherit; + &:focus, &:hover { + color: inherit; + } + } } .word-break--all { @@ -68,6 +83,19 @@ a:focus, a:hover { margin: 0; } +.text-danger { + color: #E05F5D; +} + +.btn { + &.btn-danger { + color: #fff; + &:hover, &:active { + color: #fff; + } + } +} + .form-control { @include border-radius(2px); &.no-resize { diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index b5fcb6145..9b9e5f573 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -114,23 +114,6 @@ } } } - &.theme--black { - &:hover { - &:before { - background: rgba(white, 0.2); - } - } - } - &.theme--gray { - &:hover { - &:before { - background: rgba(white, 0.1); - } - } - } - a { - color: #fff; - } .navbar-right { font-size: 0.85em; position: absolute; @@ -145,7 +128,6 @@ .dropdown-menu { li a { padding: 3px 20px; - color: #555; text-overflow: ellipsis; overflow: hidden; } diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index 48746ba01..aff31e418 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -33,13 +33,6 @@ line-height: 36px; font-size: 13px; cursor: pointer; - &:hover { - background-color: #E6F2FA; - } -} - -.mentions-focus { - background-color: #E6F2FA; } .mentions-text { @@ -54,7 +47,6 @@ display: block; font-size: 20px; text-align: center; - color: #555; @include border-radius(32px); } diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index e4e8b20b6..96b26f251 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -9,12 +9,6 @@ @include opacity(0.7); } } - a, a:focus, a:hover { - color: #2389D7; - &.text-danger { - color: #a94442; - } - } .custom-textarea { color: inherit; border-color: #ccc; @@ -25,12 +19,9 @@ } .btn { font-size: 13px; - &.btn-primary { - background: #4285f4; - &:hover, &:focus, &:active { - background: $primary-color--hover; - color: #fff; - } + &.btn-default { + border: none; + background: transparent; } } .info__label { @@ -70,7 +61,7 @@ background: $primary-color; color: #FFF; padding: 15px 15px 11px; - border: none; + border: 1px solid #ddd; min-height: 56px; @include clearfix; .modal-title { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 9e8d0dc7d..82ec1811a 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -402,12 +402,6 @@ margin-left: 7px; } } - &.active, &:hover { - a { - color: #555; - background: #fff; - } - } } } } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 3aab05d70..1f785f63c 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -2,7 +2,6 @@ @import "activity-log"; .user-settings { - background: #fff; min-height:300px; .table-responsive { max-width: 560px; @@ -71,7 +70,7 @@ } .section-max { - background: #f2f2f2; + background: rgba(black, 0.05); padding: 1em 0 1.3em; margin-bottom: 0; @include clearfix; @@ -121,7 +120,7 @@ .fa { margin-right: 7px; font-size: 12px; - color: #aaa; + @include opacity(0.5); display: none; } } @@ -131,7 +130,7 @@ } .section-describe { - color:grey; + @include opacity(0.7); } .divider-dark { @@ -167,15 +166,11 @@ } } .control-label { - color: #555; font-weight: 600; &.text-left { text-align: left; } } - hr { - border-color: #ccc; - } } .file-status { diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 6a418e270..73d702fef 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -16,12 +16,6 @@ overflow-y: auto; max-width: 200px; width: 200px; - a { - color: #262626 !important; - &:hover, &:focus { - background: #f5f5f5 !important; - } - } } .search__form { margin: 0; @@ -75,7 +69,7 @@ top: 66px; } .nav-pills__unread-indicator-bottom { - bottom: 0px; + bottom: 10px; } .nav { @@ -98,7 +92,6 @@ padding: 3px 10px 3px 25px; line-height: 1.5; border-radius: 0; - color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -109,12 +102,8 @@ text-decoration: underline; } &.unread-title { - color: #333; font-weight: 600; } - &:hover, &:focus { - background: #e6f2fa; - } } &.active { a, a:hover, a:focus { diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss index 4366b1a6c..6f4a0cc38 100644 --- a/web/sass-files/sass/partials/_sidebar--menu.scss +++ b/web/sass-files/sass/partials/_sidebar--menu.scss @@ -54,7 +54,7 @@ > a { font-size: 15px; background: none !important; - color: #444; + color: inherit; line-height: 40px; padding: 0 15px; .glyphicon { diff --git a/web/static/images/themes/mattermost dark.png b/web/static/images/themes/mattermost dark.png Binary files differindex 832f64d2e..1ab44e104 100644 --- a/web/static/images/themes/mattermost dark.png +++ b/web/static/images/themes/mattermost dark.png diff --git a/web/static/images/themes/mattermost.png b/web/static/images/themes/mattermost.png Binary files differindex 4a321adcb..8dea37ff6 100644 --- a/web/static/images/themes/mattermost.png +++ b/web/static/images/themes/mattermost.png diff --git a/web/static/images/themes/organization.png b/web/static/images/themes/organization.png Binary files differindex 1a38bfb34..3066cca0b 100644 --- a/web/static/images/themes/organization.png +++ b/web/static/images/themes/organization.png diff --git a/web/static/images/themes/slack.png b/web/static/images/themes/slack.png Binary files differdeleted file mode 100644 index dc70c7dc2..000000000 --- a/web/static/images/themes/slack.png +++ /dev/null diff --git a/web/static/images/themes/windows dark.png b/web/static/images/themes/windows dark.png Binary files differindex d65304820..1f665d882 100644 --- a/web/static/images/themes/windows dark.png +++ b/web/static/images/themes/windows dark.png |
