From 56a70f5530bf969222f87cdd8c8cfec7af661efe Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 15 Nov 2017 10:40:07 +0000 Subject: [PATCH 1/4] Add tinting for lowlights. --- src/Tinter.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/Tinter.js b/src/Tinter.js index f2a02b6e6d..cbecccf9ab 100644 --- a/src/Tinter.js +++ b/src/Tinter.js @@ -72,6 +72,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 @@ -81,6 +82,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 @@ -90,6 +92,7 @@ class Tinter { undefined, undefined, undefined, + undefined, ]; this.cssFixups = [ @@ -223,7 +226,23 @@ class Tinter { }); } - setTheme(theme) { + 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) { this.theme = theme; // update keyRgb from the current theme CSS itself, if it defines it @@ -252,8 +271,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'); } } From 6c2e9096cd43624c1eac452080a3a0dda202c7e3 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 15 Nov 2017 13:08:24 +0000 Subject: [PATCH 2/4] Tintable SVGs that behave like normal image buttons / links. --- .../views/elements/TintableSvgButton.js | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/views/elements/TintableSvgButton.js diff --git a/src/components/views/elements/TintableSvgButton.js b/src/components/views/elements/TintableSvgButton.js new file mode 100644 index 0000000000..df7b7cd844 --- /dev/null +++ b/src/components/views/elements/TintableSvgButton.js @@ -0,0 +1,59 @@ +/* +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 ( + + + + + ); + } +} + +TintableSvgButton.propTypes = { + src: PropTypes.string, + title: PropTypes.string, + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, + onClick: PropTypes.func, +}; + +TintableSvgButton.defaultProps = { + onClick: function() {}, +}; From 59d405d4fa20bc9063449b1f0fd649709e9a20a5 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 15 Nov 2017 13:24:38 +0000 Subject: [PATCH 3/4] Use TintableSvgButtons for widget menubar icons. --- src/components/views/elements/AppTile.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index aa781c2d62..8b9f1f2cd9 100644 --- a/src/components/views/elements/AppTile.js +++ b/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,19 @@ export default React.createClass({ { this.formatAppTileName() } { /* Edit widget */ } - { showEditButton && {_t('Edit')} } { /* Delete widget */ } - {_t(deleteWidgetLabel)} From 750e64deee0fe1e8d681f2160776ce359dcd63ee Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 15 Nov 2017 15:17:21 +0000 Subject: [PATCH 4/4] Pass required props to TintableSvg. --- src/components/views/elements/AppTile.js | 4 ++++ src/components/views/elements/TintableSvgButton.js | 6 ++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 8b9f1f2cd9..e31b50be37 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -390,6 +390,8 @@ export default React.createClass({ className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding" title={_t('Edit')} onClick={this._onEditClick} + width="10" + height="10" /> } { /* Delete widget */ } @@ -398,6 +400,8 @@ export default React.createClass({ className={deleteClasses} title={_t(deleteWidgetLabel)} onClick={this._onDeleteClick} + width="10" + height="10" /> diff --git a/src/components/views/elements/TintableSvgButton.js b/src/components/views/elements/TintableSvgButton.js index df7b7cd844..9ca2cdcbb4 100644 --- a/src/components/views/elements/TintableSvgButton.js +++ b/src/components/views/elements/TintableSvgButton.js @@ -36,6 +36,8 @@ export default class TintableSvgButton extends React.Component { className={classes}>