Use TintableSvgButtons for widget menubar icons.

This commit is contained in:
Richard Lewis 2017-11-15 13:24:38 +00:00
parent 6c2e9096cd
commit 59d405d4fa

View file

@ -22,6 +22,7 @@ import React from 'react';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import PlatformPeg from '../../../PlatformPeg'; import PlatformPeg from '../../../PlatformPeg';
import ScalarAuthClient from '../../../ScalarAuthClient'; import ScalarAuthClient from '../../../ScalarAuthClient';
import TintableSvgButton from './TintableSvgButton';
import SdkConfig from '../../../SdkConfig'; import SdkConfig from '../../../SdkConfig';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import { _t, _td } from '../../../languageHandler'; import { _t, _td } from '../../../languageHandler';
@ -371,8 +372,8 @@ export default React.createClass({
// editing is done in scalar // editing is done in scalar
const showEditButton = Boolean(this._scalarClient && this._canUserModify()); const showEditButton = Boolean(this._scalarClient && this._canUserModify());
const deleteWidgetLabel = this._deleteWidgetLabel(); const deleteWidgetLabel = this._deleteWidgetLabel();
let deleteIcon = 'img/cancel.svg'; let deleteIcon = 'img/cancel_green.svg';
let deleteClasses = 'mx_filterFlipColor mx_AppTileMenuBarWidget'; let deleteClasses = 'mx_AppTileMenuBarWidget';
if(this._canUserModify()) { if(this._canUserModify()) {
deleteIcon = 'img/icon-delete-pink.svg'; deleteIcon = 'img/icon-delete-pink.svg';
deleteClasses += ' mx_AppTileMenuBarWidgetDelete'; deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
@ -384,22 +385,19 @@ export default React.createClass({
<b>{ this.formatAppTileName() }</b> <b>{ this.formatAppTileName() }</b>
<span className="mx_AppTileMenuBarWidgets"> <span className="mx_AppTileMenuBarWidgets">
{ /* Edit widget */ } { /* Edit widget */ }
{ showEditButton && <img { showEditButton && <TintableSvgButton
src="img/edit_green.svg" src="img/edit_green.svg"
className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding" className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
width="8" height="8"
alt={_t('Edit')}
title={_t('Edit')} title={_t('Edit')}
onClick={this._onEditClick} onClick={this._onEditClick}
/> } /> }
{ /* Delete widget */ } { /* Delete widget */ }
<img src={deleteIcon} <TintableSvgButton
className={deleteClasses} src={deleteIcon}
width="8" height="8" className={deleteClasses}
alt={_t(deleteWidgetLabel)} title={_t(deleteWidgetLabel)}
title={_t(deleteWidgetLabel)} onClick={this._onDeleteClick}
onClick={this._onDeleteClick}
/> />
</span> </span>
</div> </div>