Merge pull request #1611 from matrix-org/rxl881/invertOutlineColour

Make TintableSvg links behave like normal image links

src/Tinter.js

@@ -77,6 +77,7 @@ class Tinter {
             "#EAF5F0", // Vector Light Green
             "#D3EFE1", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
             "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
+            "#000000", // black lowlights of the SVGs (for switching to dark theme)
         ];
 
         // track the replacement colours actually being used
@@ -86,6 +87,7 @@ class Tinter {
             this.keyHex[1],
             this.keyHex[2],
             this.keyHex[3],
+            this.keyHex[4],
         ];
 
         // track the most current tint request inputs (which may differ from the
@@ -95,6 +97,7 @@ class Tinter {
             undefined,
             undefined,
             undefined,
+            undefined,
         ];
 
         this.cssFixups = [
@@ -232,6 +235,22 @@ class Tinter {
         });
     }
 
+    tintSvgBlack(blackColor) {
+        this.currentTint[4] = blackColor;
+
+        if (!blackColor) {
+            blackColor = this.colors[4];
+        }
+        if (this.colors[4] === blackColor) {
+            return;
+        }
+        this.colors[4] = blackColor;
+        this.tintables.forEach(function(tintable) {
+            tintable();
+        });
+    }
+
+
     setTheme(theme) {
         console.trace("setTheme " + theme);
         this.theme = theme;
@@ -259,8 +278,10 @@ class Tinter {
             // abuse the tinter to change all the SVG's #fff to #2d2d2d
             // XXX: obviously this shouldn't be hardcoded here.
             this.tintSvgWhite('#2d2d2d');
+            this.tintSvgBlack('#dddddd');
         } else {
             this.tintSvgWhite('#ffffff');
+            this.tintSvgBlack('#000000');
         }
     }
 

src/components/views/elements/AppTile.js

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

src/components/views/elements/TintableSvgButton.js

@@ -0,0 +1,61 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import TintableSvg from './TintableSvg';
+
+export default class TintableSvgButton extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let classes = "mx_TintableSvgButton";
+        if (this.props.className) {
+            classes += " " + this.props.className;
+        }
+        return (
+            <span
+                width={this.props.width}
+                height={this.props.height}
+                className={classes}>
+                <TintableSvg
+                    src={this.props.src}
+                    width={this.props.width}
+                    height={this.props.height}
+                ></TintableSvg>
+                <span
+                    title={this.props.title}
+                    onClick={this.props.onClick} />
+            </span>
+        );
+    }
+}
+
+TintableSvgButton.propTypes = {
+    src: PropTypes.string,
+    title: PropTypes.string,
+    className: PropTypes.string,
+    width: PropTypes.string.isRequired,
+    height: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+};
+
+TintableSvgButton.defaultProps = {
+    onClick: function() {},
+};