summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/file_upload_overlay.jsx28
-rw-r--r--web/react/components/search_bar.jsx6
-rw-r--r--web/react/components/user_settings/manage_incoming_hooks.jsx52
-rw-r--r--web/react/components/user_settings/manage_outgoing_hooks.jsx32
-rw-r--r--web/react/components/user_settings/user_settings_integrations.jsx4
-rw-r--r--web/react/stores/socket_store.jsx2
-rw-r--r--web/react/utils/constants.jsx12
-rw-r--r--web/react/utils/utils.jsx10
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);
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-01 08:20:46 +0000