diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/file_upload_overlay.jsx | 28 | ||||
-rw-r--r-- | web/react/components/search_bar.jsx | 6 | ||||
-rw-r--r-- | web/react/components/user_settings/manage_incoming_hooks.jsx | 52 | ||||
-rw-r--r-- | web/react/components/user_settings/manage_outgoing_hooks.jsx | 32 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_integrations.jsx | 4 | ||||
-rw-r--r-- | web/react/stores/socket_store.jsx | 2 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 12 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 10 |
8 files changed, 90 insertions, 56 deletions
diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index d991dd625..dbba00022 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -12,19 +12,21 @@ export default class FileUploadOverlay extends React.Component { return ( <div className={overlayClass}> - <div className='overlay__circle'> - <img - className='overlay__files' - src='/static/images/filesOverlay.png' - alt='Files' - /> - <span><i className='fa fa-upload'></i>{'Drop a file to upload it.'}</span> - <img - className='overlay__logo' - src='/static/images/logoWhite.png' - width='100' - alt='Logo' - /> + <div className='overlay__indent'> + <div className='overlay__circle'> + <img + className='overlay__files' + src='/static/images/filesOverlay.png' + alt='Files' + /> + <span><i className='fa fa-upload'></i>{'Drop a file to upload it.'}</span> + <img + className='overlay__logo' + src='/static/images/logoWhite.png' + width='100' + alt='Logo' + /> + </div> </div> </div> ); diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index bf12ca160..7540b41a4 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -8,7 +8,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -var Tooltip = ReactBootstrap.Tooltip; +var Popover = ReactBootstrap.Popover; export default class SearchBar extends React.Component { constructor() { @@ -163,7 +163,7 @@ export default class SearchBar extends React.Component { onMouseUp={this.handleMouseInput} /> {isSearching} - <Tooltip + <Popover placement='bottom' className={helpClass} > @@ -176,7 +176,7 @@ export default class SearchBar extends React.Component { <span>{'Use '}</span><b>{'from:'}</b><span>{' to find posts from specific users and '}</span><b>{'in:'}</b><span>{' to find posts in specific channels'}</span> </li> </ul> - </Tooltip> + </Popover> </form> </div> ); diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx index f5a2774a0..812169be4 100644 --- a/web/react/components/user_settings/manage_incoming_hooks.jsx +++ b/web/react/components/user_settings/manage_incoming_hooks.jsx @@ -96,7 +96,14 @@ export default class ManageIncomingHooks extends React.Component { const options = []; channels.forEach((channel) => { if (channel.type !== Constants.DM_CHANNEL) { - options.push(<option value={channel.id}>{channel.name}</option>); + options.push( + <option + key={'incoming-hook' + channel.id} + value={channel.id} + > + {channel.display_name} + </option> + ); } }); @@ -108,26 +115,31 @@ export default class ManageIncomingHooks extends React.Component { const hooks = []; this.state.hooks.forEach((hook) => { const c = ChannelStore.get(hook.channel_id); - hooks.push( - <div className='font--small'> - <div className='padding-top x2 divider-light'></div> - <div className='padding-top x2'> - <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span> - </div> - <div className='padding-top'> - <strong>{'Channel: '}</strong>{c.name} - </div> - <div className='padding-top'> - <a - className={'text-danger'} - href='#' - onClick={this.removeHook.bind(this, hook.id)} - > - {'Remove'} - </a> + if (c) { + hooks.push( + <div + key={hook.id} + className='font--small' + > + <div className='padding-top x2 divider-light'></div> + <div className='padding-top x2'> + <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span> + </div> + <div className='padding-top'> + <strong>{'Channel: '}</strong>{c.display_name} + </div> + <div className='padding-top'> + <a + className={'text-danger'} + href='#' + onClick={this.removeHook.bind(this, hook.id)} + > + {'Remove'} + </a> + </div> </div> - </div> - ); + ); + } }); let displayHooks; diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx index e83ae3bd6..f6d6b515b 100644 --- a/web/react/components/user_settings/manage_outgoing_hooks.jsx +++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx @@ -128,21 +128,42 @@ export default class ManageOutgoingHooks extends React.Component { } const channels = ChannelStore.getAll(); - const options = [<option value=''>{'--- Select a channel ---'}</option>]; + const options = []; + options.push( + <option + key='select-channel' + value='' + > + {'--- Select a channel ---'} + </option> + ); + channels.forEach((channel) => { if (channel.type === Constants.OPEN_CHANNEL) { - options.push(<option value={channel.id}>{channel.name}</option>); + options.push( + <option + key={'outgoing-hook' + channel.id} + value={channel.id} + > + {channel.display_name} + </option> + ); } }); const hooks = []; this.state.hooks.forEach((hook) => { const c = ChannelStore.get(hook.channel_id); + + if (!c && hook.channel_id && hook.channel_id.length !== 0) { + return; + } + let channelDiv; if (c) { channelDiv = ( <div className='padding-top'> - <strong>{'Channel: '}</strong>{c.name} + <strong>{'Channel: '}</strong>{c.display_name} </div> ); } @@ -157,7 +178,10 @@ export default class ManageOutgoingHooks extends React.Component { } hooks.push( - <div className='font--small'> + <div + key={hook.id} + className='font--small' + > <div className='padding-top x2 divider-light'></div> <div className='padding-top x2'> <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span> diff --git a/web/react/components/user_settings/user_settings_integrations.jsx b/web/react/components/user_settings/user_settings_integrations.jsx index 1d9ea0ad5..83a6bf53a 100644 --- a/web/react/components/user_settings/user_settings_integrations.jsx +++ b/web/react/components/user_settings/user_settings_integrations.jsx @@ -37,7 +37,7 @@ export default class UserSettingsIntegrationsTab extends React.Component { if (global.window.mm_config.EnableIncomingWebhooks === 'true') { if (this.props.activeSection === 'incoming-hooks') { inputs.push( - <ManageIncomingHooks /> + <ManageIncomingHooks key='incoming-hook-ui' /> ); incomingHooksSection = ( @@ -68,7 +68,7 @@ export default class UserSettingsIntegrationsTab extends React.Component { if (global.window.mm_config.EnableOutgoingWebhooks === 'true') { if (this.props.activeSection === 'outgoing-hooks') { inputs.push( - <ManageOutgoingHooks /> + <ManageOutgoingHooks key='outgoing-hook-ui' /> ); outgoingHooksSection = ( diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx index 33cdc79fb..8c3489001 100644 --- a/web/react/stores/socket_store.jsx +++ b/web/react/stores/socket_store.jsx @@ -38,7 +38,7 @@ class SocketStoreClass extends EventEmitter { return; } - if (!global.window.mm_session_token_index) { + if (!global.window.hasOwnProperty('mm_session_token_index')) { return; } diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index d891cc48b..7d2626fc1 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -139,7 +139,7 @@ module.exports = { sidebarText: '#333333', sidebarUnreadText: '#333333', sidebarTextHoverBg: '#e6f2fa', - sidebarTextActiveBg: '#e1e1e1', + sidebarTextActiveBorder: '#378FD2', sidebarTextActiveColor: '#111111', sidebarHeaderBg: '#2389d7', sidebarHeaderTextColor: '#ffffff', @@ -161,7 +161,7 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#136197', - sidebarTextActiveBg: '#136197', + sidebarTextActiveBorder: '#7AB0D6', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#2f81b7', sidebarHeaderTextColor: '#FFFFFF', @@ -183,7 +183,7 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#4A5664', - sidebarTextActiveBg: '#39769C', + sidebarTextActiveBorder: '#39769C', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1B2C3E', sidebarHeaderTextColor: '#FFFFFF', @@ -205,7 +205,7 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#302e30', - sidebarTextActiveBg: '#484748', + sidebarTextActiveBorder: '#196CAF', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1f1f1f', sidebarHeaderTextColor: '#FFFFFF', @@ -248,8 +248,8 @@ module.exports = { uiName: 'Sidebar Text Hover BG' }, { - id: 'sidebarTextActiveBg', - uiName: 'Sidebar Text Active BG' + id: 'sidebarTextActiveBorder', + uiName: 'Sidebar Text Active Border' }, { id: 'sidebarTextActiveColor', diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index c72c3f32c..3d0cee562 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -118,7 +118,7 @@ export function notifyMe(title, body, channel) { } if (permission === 'granted') { - var notification = new Notification(title, {body: body, tag: body, icon: '/static/images/icon50x50.gif'}); + var notification = new Notification(title, {body: body, tag: body, icon: '/static/images/icon50x50.png'}); notification.onclick = function onClick() { window.focus(); if (channel) { @@ -425,18 +425,14 @@ export function applyTheme(theme) { changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } - if (theme.sidebarTextActiveBg) { - 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.sidebarTextActiveBorder) { + changeCss('.sidebar--left .nav li.active a:before, .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); } if (theme.sidebarTextActiveColor) { 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.sidebarTextActiveBg === theme.onlineIndicator) { - changeCss('.sidebar--left .nav-pills__container li.active a .status .online--icon', 'fill:' + theme.sidebarTextActiveColor, 1); - } - if (theme.sidebarHeaderBg) { changeCss('.sidebar--left .team__header, .sidebar--menu .team__header', 'background:' + theme.sidebarHeaderBg, 1); changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1); |