Commit 983635d8 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Harrison Healey

MM-10064 - Updating title for icons (#1256)

* MM-10064 - Updating title for icons

* Updating activity log icon

* Updating menu icon

* Updating unrelated code change

* Updating plus icon

* Updating tests

* Updating localised strings

* Updating Utils typo
parent 7597360c
......@@ -99,9 +99,11 @@ export default class ActivityLogModal extends React.Component {
let deviceTypeId;
let deviceTypeMessage;
let devicePicture;
let deviceTitle;
if (session.device_id.includes('apple')) {
devicePicture = 'fa fa-apple';
deviceTitle = Utils.localizeMessage('device_icons.apple', 'Apple Icon');
deviceTypeId = 'activity_log_modal.iphoneNativeClassicApp';
deviceTypeMessage = 'iPhone Native Classic App';
......@@ -111,6 +113,7 @@ export default class ActivityLogModal extends React.Component {
}
} else if (session.device_id.includes('android')) {
devicePicture = 'fa fa-android';
deviceTitle = Utils.localizeMessage('device_icons.android', 'Android Icon');
deviceTypeId = 'activity_log_modal.androidNativeClassicApp';
deviceTypeMessage = 'Android Native Classic App';
......@@ -122,6 +125,7 @@ export default class ActivityLogModal extends React.Component {
return {
devicePicture,
deviceTitle,
devicePlatform: (
<FormattedMessage
id={deviceTypeId}
......@@ -140,6 +144,7 @@ export default class ActivityLogModal extends React.Component {
const firstAccessTime = new Date(currentSession.create_at);
let devicePlatform = currentSession.props.platform;
let devicePicture = '';
let deviceTitle = '';
if (currentSession.props.type === 'UserAccessToken') {
continue;
......@@ -147,6 +152,7 @@ export default class ActivityLogModal extends React.Component {
if (currentSession.props.platform === 'Windows') {
devicePicture = 'fa fa-windows';
deviceTitle = Utils.localizeMessage('device_icons.windows', 'Windows Icon');
} else if (this.isMobileSession(currentSession)) {
const sessionInfo = this.mobileSessionInfo(currentSession);
......@@ -155,6 +161,7 @@ export default class ActivityLogModal extends React.Component {
} else if (currentSession.props.platform === 'Macintosh' ||
currentSession.props.platform === 'iPhone') {
devicePicture = 'fa fa-apple';
deviceTitle = Utils.localizeMessage('device_icons.apple', 'Apple Icon');
} else if (currentSession.props.platform === 'Linux') {
if (currentSession.props.os.indexOf('Android') >= 0) {
devicePlatform = (
......@@ -164,11 +171,14 @@ export default class ActivityLogModal extends React.Component {
/>
);
devicePicture = 'fa fa-android';
deviceTitle = Utils.localizeMessage('device_icons.android', 'Android Icon');
} else {
devicePicture = 'fa fa-linux';
deviceTitle = Utils.localizeMessage('device_icons.linux', 'Linux Icon');
}
} else if (currentSession.props.os.indexOf('Linux') !== -1) {
devicePicture = 'fa fa-linux';
deviceTitle = Utils.localizeMessage('device_icons.linux', 'Linux Icon');
}
if (currentSession.props.browser.indexOf('Desktop App') !== -1) {
......@@ -257,7 +267,12 @@ export default class ActivityLogModal extends React.Component {
className='activity-log__table'
>
<div className='activity-log__report'>
<div className='report__platform'><i className={devicePicture}/>{devicePlatform}</div>
<div className='report__platform'>
<i
className={devicePicture}
title={deviceTitle}
/>{devicePlatform}
</div>
<div className='report__info'>
<div>
<FormattedMessage
......
......@@ -181,7 +181,10 @@ export default class AddUsersToTeam extends React.Component {
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<i className='fa fa-plus'/>
<i
className='fa fa-plus'
title={localizeMessage('generic_icons.add', 'Add Icon')}
/>
</div>
</div>
</div>
......
......@@ -133,7 +133,10 @@ export default class AdminNavbarDropdown extends React.Component {
<BlockableLink
to={'/select_team'}
>
<i className='fa fa-exchange'/>
<i
className='fa fa-exchange'
title={Utils.localizeMessage('select_team.icon', 'Select Team Icon')}
/>
<FormattedMessage
id='admin.nav.switch'
defaultMessage='Team Selection'
......
......@@ -6,6 +6,7 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import ComplianceReports from 'components/admin_console/compliance_reports';
import {localizeMessage} from 'utils/utils.jsx';
import AuditTable from 'components/audit_table.jsx';
import LoadingScreen from 'components/loading_screen.jsx';
......@@ -85,7 +86,10 @@ export default class Audits extends React.PureComponent {
className='btn btn-link pull-right'
onClick={this.reload}
>
<i className='fa fa-refresh'/>
<i
className='fa fa-refresh'
title={localizeMessage('generic_icons.reload', 'Reload Icon')}
/>
<FormattedMessage
id='admin.audits.reload'
defaultMessage='Reload User Activity Logs'
......
......@@ -45,13 +45,19 @@ export default class UploadButton extends React.PureComponent {
switch (status) {
case UploadStatuses.LOADING:
buttonIcon = (
<i className='fa fa-refresh icon--rotate'/>
<i
className='fa fa-refresh icon--rotate'
title={Utils.localizeMessage('generic_icons.loading', 'Loading Icon')}
/>
);
buttonText = Utils.localizeMessage('admin.team.uploading', 'Uploading..');
break;
case UploadStatuses.COMPLETE:
buttonIcon = (
<i className='fa fa-check'/>
<i
className='fa fa-check'
title={Utils.localizeMessage('generic_icons.success', 'Success Icon')}
/>
);
buttonText = Utils.localizeMessage('admin.team.uploaded', 'Uploaded!');
break;
......
......@@ -81,7 +81,10 @@ export default class ClusterSettings extends AdminSettings {
style={style.configLoadedFromCluster}
className='alert alert-warning'
>
<i className='fa fa-warning'/>
<i
className='fa fa-warning'
title={Utils.localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
<FormattedHTMLMessage
id='admin.cluster.loadedFrom'
defaultMessage='This configuration file was loaded from Node ID {clusterId}. Please see the Troubleshooting Guide in our <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a> if you are accessing the System Console through a load balancer and experiencing issues.'
......@@ -100,7 +103,10 @@ export default class ClusterSettings extends AdminSettings {
style={style.warning}
className='alert alert-warning'
>
<i className='fa fa-warning'/>
<i
className='fa fa-warning'
title={Utils.localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
<FormattedHTMLMessage
id='admin.cluster.should_not_change'
defaultMessage='WARNING: These settings may not sync with the other servers in the cluster. High Availability inter-node communication will not start until you modify the config.json to be identical on all servers and restart Mattermost. Please see the <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a> on how to add or remove a server from the cluster. If you are accessing the System Console through a load balancer and experiencing issues, please see the Troubleshooting Guide in our <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a>.'
......
......@@ -115,7 +115,10 @@ export default class ClusterTable extends React.Component {
className='btn btn-link'
onClick={this.props.reload}
>
<i className='fa fa-refresh'/>
<i
className='fa fa-refresh'
title={Utils.localizeMessage('generic_icons.reload', 'Reload Icon')}
/>
<FormattedMessage
id='admin.cluster.status_table.reload'
defaultMessage=' Reload Cluster Status'
......
......@@ -378,7 +378,10 @@ export default class ComplianceReports extends React.PureComponent {
disabled={this.state.runningReport}
onClick={this.reload}
>
<i className='fa fa-refresh'/>
<i
className='fa fa-refresh'
title={Utils.localizeMessage('generic_icons.reload', 'Reload Icon')}
/>
<FormattedMessage
id='admin.compliance_reports.reload'
defaultMessage='Reload Completed Compliance Reports'
......
......@@ -67,7 +67,10 @@ export default class EmailConnectionTestButton extends React.Component {
if (this.state.success) {
testMessage = (
<div className='alert alert-success'>
<i className='fa fa-check'/>
<i
className='fa fa-check'
title={Utils.localizeMessage('generic_icons.success', 'Success Icon')}
/>
<FormattedMessage
id='admin.email.emailSuccess'
defaultMessage='No errors were reported while sending an email. Please check your inbox to make sure.'
......@@ -77,7 +80,10 @@ export default class EmailConnectionTestButton extends React.Component {
} else if (this.state.fail) {
testMessage = (
<div className='alert alert-warning'>
<i className='fa fa-warning'/>
<i
className='fa fa-warning'
title={Utils.localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
{this.state.fail}
</div>
);
......@@ -87,7 +93,10 @@ export default class EmailConnectionTestButton extends React.Component {
if (this.state.testing) {
contents = (
<span>
<span className='fa fa-refresh icon--rotate'/>
<span
className='fa fa-refresh icon--rotate'
title={Utils.localizeMessage('generic_icons.testing', 'Testing Icon')}
/>
{Utils.localizeMessage('admin.email.testing', 'Testing...')}
</span>
);
......
......@@ -134,7 +134,7 @@ class LicenseSettings extends React.Component {
className='btn btn-danger'
onClick={this.handleRemove}
id='remove-button'
data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.removing)}
data-loading-text={'<span class=\'fa fa-refresh icon--rotate\' title=\'' + Utils.localizeMessage('generic_icons.reload', 'Reload Icon') + '\'></span> ' + this.props.intl.formatMessage(holders.removing)}
>
<FormattedMessage
id='admin.license.keyRemove'
......@@ -198,7 +198,7 @@ class LicenseSettings extends React.Component {
disabled={!this.state.fileSelected}
onClick={this.handleSubmit}
id='upload-button'
data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.uploading)}
data-loading-text={'<span class=\'fa fa-refresh icon--rotate\' title=\'' + Utils.localizeMessage('generic_icons.reload', 'Reload Icon') + '\'></span> ' + this.props.intl.formatMessage(holders.uploading)}
>
<FormattedMessage
id='admin.license.upload'
......
......@@ -192,7 +192,10 @@ export default class RequestButton extends React.Component {
message = (
<div>
<div className='alert alert-warning'>
<i className='fa fa-warning'/>
<i
className='fa fa-warning'
title={Utils.localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
<FormattedMessage
id={this.props.errorMessage.id}
defaultMessage={this.props.errorMessage.defaultMessage}
......@@ -207,7 +210,10 @@ export default class RequestButton extends React.Component {
message = (
<div>
<div className='alert alert-success'>
<i className='fa fa-success'/>
<i
className='fa fa-success'
title={Utils.localizeMessage('generic_icons.success', 'Success Icon')}
/>
<FormattedMessage
id={this.props.successMessage.id}
defaultMessage={this.props.successMessage.defaultMessage}
......@@ -225,7 +231,10 @@ export default class RequestButton extends React.Component {
}
contents = (
<span>
<span className='fa fa-refresh icon--rotate'/>
<span
className='fa fa-refresh icon--rotate'
title={Utils.localizeMessage('generic_icons.loading', 'Loading Icon')}
/>
{loadingText}
</span>
);
......
......@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {localizeMessage} from 'utils/utils.jsx';
const NEXT_BUTTON_TIMEOUT = 500;
export default class Logs extends React.PureComponent {
......@@ -75,7 +77,10 @@ export default class Logs extends React.PureComponent {
id='admin.logs.next'
defaultMessage='Next'
/>
<i className='fa fa-chevron-right margin-left'/>
<i
className='fa fa-chevron-right margin-left'
title={localizeMessage('generic_icons.next', 'Next Icon')}
/>
</button>
);
}
......@@ -86,7 +91,10 @@ export default class Logs extends React.PureComponent {
className='btn btn-default filter-control filter-control__prev'
onClick={this.previousPage}
>
<i className='fa fa-angle-left'/>
<i
className='fa fa-angle-left'
title={localizeMessage('generic_icons.previous', 'Previous Icon')}
/>
<FormattedMessage
id='admin.logs.prev'
defaultMessage='Previous'
......
......@@ -4,6 +4,8 @@
import PropTypes from 'prop-types';
import React from 'react';
import {localizeMessage} from 'utils/utils.jsx';
export default class BackstageHeader extends React.Component {
static get propTypes() {
return {
......@@ -21,7 +23,10 @@ export default class BackstageHeader extends React.Component {
key={'divider' + index}
className='backstage-header__divider'
>
<i className='fa fa-angle-right'/>
<i
className='fa fa-angle-right'
title={localizeMessage('generic_icons.breadcrumb', 'Breadcrumb Icon')}
/>
</span>
);
}
......
......@@ -89,7 +89,10 @@ export default class BackstageList extends React.Component {
</div>
<div className='backstage-filters'>
<div className='backstage-filter__search'>
<i className='fa fa-search'/>
<i
className='fa fa-search'
title={Utils.localizeMessage('generic_icons.search', 'Search Icon')}
/>
<input
type='search'
className='form-control'
......
......@@ -7,6 +7,7 @@ import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';
import {Constants} from 'utils/constants.jsx';
import {localizeMessage} from 'utils/utils.jsx';
export default class BackstageNavbar extends React.Component {
static get propTypes() {
......@@ -27,7 +28,10 @@ export default class BackstageNavbar extends React.Component {
className='backstage-navbar__back'
to={`/${this.props.team.name}/channels/${Constants.DEFAULT_CHANNEL}`}
>
<i className='fa fa-angle-left'/>
<i
className='fa fa-angle-left'
title={localizeMessage('generic_icons.back', 'Back Icon')}
/>
<span>
<FormattedMessage
id='backstage_navbar.backToMattermost'
......
......@@ -979,7 +979,10 @@ export default class ChannelHeader extends React.Component {
onClick={this.unmute}
className={'style--none color--link channel-header__mute inactive'}
>
<i className={'icon fa fa-bell-slash-o'}/>
<i
className={'icon fa fa-bell-slash-o'}
title={Utils.localizeMessage('generic_icons.muted', 'Muted Icon')}
/>
</button>
</OverlayTrigger>
);
......@@ -1044,6 +1047,7 @@ export default class ChannelHeader extends React.Component {
<span
id='channelHeaderDropdownIcon'
className='fa fa-angle-down header-dropdown__icon'
title={Utils.localizeMessage('generic_icons.dropdown', 'Dropdown Icon')}
/>
</button>
<ul
......
......@@ -214,7 +214,10 @@ export default class ChannelInviteModal extends React.Component {
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<i className='fa fa-plus'/>
<i
className='fa fa-plus'
title={localizeMessage('generic_icons.add', 'Add Icon')}
/>
</div>
</div>
</div>
......
......@@ -178,7 +178,10 @@ export default class ChannelMembersDropdown extends React.Component {
aria-expanded='true'
>
<span>{role} </span>
<span className='fa fa-chevron-down'/>
<span
className='fa fa-chevron-down'
title={Utils.localizeMessage('generic_icons.dropdown', 'Dropdown Icon')}
/>
</button>
<ul
className='dropdown-menu member-menu'
......
......@@ -6,6 +6,8 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';
import {localizeMessage} from 'utils/utils.jsx';
export default class BackButton extends React.PureComponent {
static propTypes = {
......@@ -31,7 +33,10 @@ export default class BackButton extends React.PureComponent {
onClick={this.props.onClick}
to={this.props.url}
>
<span className='fa fa-chevron-left'/>
<span
className='fa fa-chevron-left'
title={localizeMessage('generic_icons.back', 'Back Icon')}
/>
<FormattedMessage
id='web.header.back'
defaultMessage='Back'
......
......@@ -935,7 +935,10 @@ export default class CreatePost extends React.Component {
className={sendButtonClass}
onClick={this.handleSubmit}
>
<i className='fa fa-paper-plane'/>
<i
className='fa fa-paper-plane'
title={Utils.localizeMessage('create_post.icon', 'Send Post Icon')}
/>
</a>
</span>
</div>
......
......@@ -10,6 +10,7 @@ import {trackEvent} from 'actions/diagnostics_actions.jsx';
import Constants from 'utils/constants.jsx';
import {cleanUpUrlable} from 'utils/url.jsx';
import logoImage from 'images/logo.png';
import {localizeMessage} from 'utils/utils.jsx';
export default class TeamSignupDisplayNamePage extends React.PureComponent {
static propTypes = {
......@@ -126,7 +127,11 @@ export default class TeamSignupDisplayNamePage extends React.PureComponent {
<FormattedMessage
id='create_team.display_name.next'
defaultMessage='Next'
/><i className='fa fa-chevron-right'/>
/>
<i
className='fa fa-chevron-right'
title={localizeMessage('generic_icons.next', 'Next Icon')}
/>
</button>
</form>
</div>
......
......@@ -5,6 +5,7 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import DeleteModalTrigger from 'components/delete_modal_trigger.jsx';
import {localizeMessage} from 'utils/utils.jsx';
export default class DeleteEmoji extends DeleteModalTrigger {
static propTypes = {
......@@ -32,7 +33,10 @@ export default class DeleteEmoji extends DeleteModalTrigger {
get modalMessage() {
return (
<div className='alert alert-warning'>
<i className='fa fa-warning fa-margin--right'/>
<i
className='fa fa-warning fa-margin--right'
title={localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
<FormattedMessage
id='emoji_list.delete.confirm.msg'
defaultMessage='This action permanently deletes the custom emoji. Are you sure you want to delete it?'
......
......@@ -197,7 +197,10 @@ export default class EmojiList extends React.Component {
id='filtered_user_list.next'
defaultMessage='Next'
/>
<i className='fa fa-chevron-right margin-left'/>
<i
className='fa fa-chevron-right margin-left'
title={localizeMessage('generic_icons.next', 'Next Icon')}
/>
</span>
);
......@@ -220,7 +223,10 @@ export default class EmojiList extends React.Component {
className='btn btn-link'
onClick={this.previousPage}
>
<i className='fa fa-chevron-left margin-right'/>
<i
className='fa fa-chevron-left margin-right'
title={localizeMessage('generic_icons.previous', 'Previous Icon')}
/>
<FormattedMessage
id='filtered_user_list.prev'
defaultMessage='Previous'
......@@ -234,7 +240,10 @@ export default class EmojiList extends React.Component {
<div>
<div className='backstage-filters'>
<div className='backstage-filter__search'>
<i className='fa fa-search'/>
<i
className='fa fa-search'
title={localizeMessage('generic_icons.search', 'Search Icon')}
/>
<input
type='search'
className='form-control'
......
......@@ -9,6 +9,7 @@ import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';
import {ErrorPageTypes} from 'utils/constants.jsx';
import {localizeMessage} from 'utils/utils.jsx';
import ErrorTitle from './error_title.jsx';
import ErrorMessage from './error_message.jsx';
......@@ -78,7 +79,10 @@ export default class ErrorPage extends React.PureComponent {
<div className='container-fluid'>
<div className='error__container'>
<div className='error__icon'>
<i className='fa fa-exclamation-triangle'/>
<i
className='fa fa-exclamation-triangle'
title={localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
</div>
<h2>
<ErrorTitle
......
......@@ -119,7 +119,10 @@ export default class FilePreview extends React.PureComponent {
className='file-preview__remove'
onClick={this.handleRemove.bind(this, info.id)}
>
<i className='fa fa-remove'/>
<i
className='fa fa-remove'
title={Utils.localizeMessage('generic_icons.remove', 'Remove Icon')}
/>
</a>
</div>
</div>
......@@ -143,7 +146,10 @@ export default class FilePreview extends React.PureComponent {
className='file-preview__remove'
onClick={this.handleRemove.bind(this, clientId)}
>
<i className='fa fa-remove'/>
<i
className='fa fa-remove'
title={Utils.localizeMessage('generic_icons.remove', 'Remove Icon')}
/>
</a>
</div>
);
......
......@@ -6,6 +6,7 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import fileOverlayImage from 'images/filesOverlay.png';
import {localizeMessage} from 'utils/utils.jsx';
import overlayLogoImage from 'images/logoWhite.png';
export default function FileUploadOverlay(props) {
......@@ -25,7 +26,11 @@ export default function FileUploadOverlay(props) {
src={fileOverlayImage}
alt='Files'
/>
<span><i className='fa fa-upload'/>
<span>
<i
className='fa fa-upload'
title={localizeMessage('generic_icons.upload', 'Upload Icon')}
/>
<FormattedMessage
id='upload_overlay.info'
defaultMessage='Drop a file to upload it.'
......
......@@ -6,6 +6,8 @@ import React from 'react';
import {Modal} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
import {localizeMessage} from 'utils/utils.jsx';
export default class GetLinkModal extends React.PureComponent {
static propTypes = {
show: PropTypes.bool.isRequired,
......@@ -93,7 +95,10 @@ export default class GetLinkModal extends React.PureComponent {
if (this.state.copiedLink) {
copyLinkConfirm = (
<p className='alert alert-success alert--confirm'>
<i className='fa fa-check'/>
<i
className='fa fa-check'
title={localizeMessage('generic_icons.success', 'Success Icon')}
/>
<FormattedMessage
id='get_link.clipboard'
defaultMessage=' Link copied'
......
......@@ -6,6 +6,7 @@ import React from 'react';
import {FormattedMessage} from 'react-intl';
import DeleteModalTrigger from 'components/delete_modal_trigger.jsx';
import {localizeMessage} from 'utils/utils.jsx';
export default class DeleteIntegration extends DeleteModalTrigger {
get triggerTitle() {
......@@ -29,7 +30,10 @@ export default class DeleteIntegration extends DeleteModalTrigger {
get modalMessage() {
return (
<div className='alert alert-warning'>
<i className='fa fa-warning fa-margin--right'/>
<i
className='fa fa-warning fa-margin--right'
title={localizeMessage('generic_icons.warning', 'Warning Icon')}
/>
<FormattedMessage
id={this.props.messageId}
defaultMessage='This action permanently deletes the integration and breaks any integrations using it. Are you sure you want to delete it?'
......
......@@ -266,7 +266,10 @@ class InviteMemberModal extends React.Component {
className='btn btn-link remove__member'
onClick={this.removeInviteFields.bind(this, index)}
>
<span className='fa fa-trash'/>
<span
className='fa fa-trash'
title={utils.localizeMessage('generic_icons.remove', 'Remove Icon')}
/>
</button>
</div>
);
......@@ -393,7 +396,11 @@ class InviteMemberModal extends React.Component {
);