diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-07-31 17:10:43 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-07-31 08:10:43 -0400 |
commit | 860f2c8332f34d02e53ea1460decb4d1490bcbd4 (patch) | |
tree | eb7523405ac99fbc656f74321e3be8ac66138fb9 /webapp/components | |
parent | 3c0f082506a68240abd1960cbd0fda22679e12c2 (diff) | |
download | chat-860f2c8332f34d02e53ea1460decb4d1490bcbd4.tar.gz chat-860f2c8332f34d02e53ea1460decb4d1490bcbd4.tar.bz2 chat-860f2c8332f34d02e53ea1460decb4d1490bcbd4.zip |
Multiple Ui improvements (#7029)
* PLT-7119 - Updating headings on compact view
* PLT-7103 - Removing line below channel intro
* PLT-7112 - Fixing system console banner
* PLT-7144 - Adding ellipsis to system console boxes
* PLT-7181 - Changing channel header opacity
* PLT-6899 - Updating unread bar
* Updating margin for new messages indicator
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/admin_console/cluster_settings.jsx | 4 | ||||
-rw-r--r-- | webapp/components/admin_console/database_settings.jsx | 4 | ||||
-rw-r--r-- | webapp/components/post_view/new_message_indicator.jsx | 11 | ||||
-rw-r--r-- | webapp/components/sidebar.jsx | 8 | ||||
-rw-r--r-- | webapp/components/unread_channel_indicator.jsx | 7 |
5 files changed, 22 insertions, 12 deletions
diff --git a/webapp/components/admin_console/cluster_settings.jsx b/webapp/components/admin_console/cluster_settings.jsx index 0c3346c5a..36f86f0ef 100644 --- a/webapp/components/admin_console/cluster_settings.jsx +++ b/webapp/components/admin_console/cluster_settings.jsx @@ -120,12 +120,12 @@ export default class ClusterSettings extends AdminSettings { <SettingsGroup> {configLoadedFromCluster} {clusterTableContainer} - <p> + <div className='banner'> <FormattedMessage id='admin.cluster.noteDescription' defaultMessage='Changing properties in this section will require a server restart before taking effect. When High Availability mode is enabled, the System Console is set to read-only and can only be changed from the configuration file unless ReadOnlyConfig is disabled in the configuration file.' /> - </p> + </div> {warning} <BooleanSetting id='Enable' diff --git a/webapp/components/admin_console/database_settings.jsx b/webapp/components/admin_console/database_settings.jsx index 303865d91..9f008483c 100644 --- a/webapp/components/admin_console/database_settings.jsx +++ b/webapp/components/admin_console/database_settings.jsx @@ -108,12 +108,12 @@ export default class DatabaseSettings extends AdminSettings { return ( <SettingsGroup> - <p> + <div className='banner'> <FormattedMessage id='admin.sql.noteDescription' defaultMessage='Changing properties in this section will require a server restart before taking effect.' /> - </p> + </div> <div className='form-group'> <label className='control-label col-sm-4' diff --git a/webapp/components/post_view/new_message_indicator.jsx b/webapp/components/post_view/new_message_indicator.jsx index d5fb6c1d3..537520c29 100644 --- a/webapp/components/post_view/new_message_indicator.jsx +++ b/webapp/components/post_view/new_message_indicator.jsx @@ -3,6 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Constants from 'utils/constants.jsx'; import {FormattedMessage} from 'react-intl'; export default class NewMessageIndicator extends React.PureComponent { @@ -30,6 +31,7 @@ export default class NewMessageIndicator extends React.PureComponent { } render() { + const unreadIcon = Constants.UNREAD_ICON_SVG; let className = 'new-messages__button'; if (this.state.visible > 0) { className += ' visible'; @@ -44,14 +46,15 @@ export default class NewMessageIndicator extends React.PureComponent { ref='indicator' > <div onClick={this.props.onClick}> - <i - className='fa fa-angle-down' - /> <FormattedMessage id='posts_view.newMsgBelow' - defaultMessage='New {count, plural, one {message} other {messages}} below' + defaultMessage='New {count, plural, one {message} other {messages}}' values={{count: this.props.newMessages}} /> + <span + className='icon icon__unread' + dangerouslySetInnerHTML={{__html: unreadIcon}} + /> </div> </div> ); diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 25ad51ba9..788f14cd9 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -745,15 +745,15 @@ export default class Sidebar extends React.Component { const above = ( <FormattedMessage - id='sidebar.unreadAbove' - defaultMessage='Unread post(s) above' + id='sidebar.unreads' + defaultMessage='More unreads' /> ); const below = ( <FormattedMessage - id='sidebar.unreadBelow' - defaultMessage='Unread post(s) below' + id='sidebar.unreads' + defaultMessage='More unreads' /> ); diff --git a/webapp/components/unread_channel_indicator.jsx b/webapp/components/unread_channel_indicator.jsx index d1ffd4c0a..9462761ac 100644 --- a/webapp/components/unread_channel_indicator.jsx +++ b/webapp/components/unread_channel_indicator.jsx @@ -6,18 +6,25 @@ import PropTypes from 'prop-types'; // Indicator for the left sidebar which indicate if there's unread posts in a channel that is not shown // because it is either above or below the screen import React from 'react'; +import Constants from 'utils/constants.jsx'; export default function UnreadChannelIndicator(props) { + const unreadIcon = Constants.UNREAD_ICON_SVG; let displayValue = 'none'; if (props.show) { displayValue = 'block'; } + return ( <div className={'nav-pills__unread-indicator ' + props.extraClass} style={{display: displayValue}} > {props.text} + <span + className='icon icon__unread' + dangerouslySetInnerHTML={{__html: unreadIcon}} + /> </div> ); } |