Revert "Merge pull request #2336 from matrix-org/travis/notif-button"
This reverts commit 96300b45b7.
This commit is contained in:
Travis Ralston
parent
c11d0bdf0c
commit
6447a60e1f
5 changed files with 11 additions and 66 deletions
|
|
@ -55,10 +55,6 @@ limitations under the License.
|
|||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badgeHighlight .mx_RightPanel_headerButton_badge {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_highlight {
|
||||
width: 25px;
|
||||
height: 5px;
|
||||
|
|
|
|||
|
|
@ -289,11 +289,6 @@ const Notifier = {
|
|||
const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
|
||||
const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
|
||||
if (actions && actions.notify) {
|
||||
dis.dispatch({
|
||||
action: "event_notification",
|
||||
event: ev,
|
||||
room: room,
|
||||
});
|
||||
if (this.isEnabled()) {
|
||||
this._displayPopupNotification(ev, room);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -390,7 +390,7 @@ class Tinter {
|
|||
// XXX: we could just move this all into TintableSvg, but as it's so similar
|
||||
// to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
|
||||
// keeping it here for now.
|
||||
calcSvgFixups(svgs, forceColors) {
|
||||
calcSvgFixups(svgs) {
|
||||
// go through manually fixing up SVG colours.
|
||||
// we could do this by stylesheets, but keeping the stylesheets
|
||||
// updated would be a PITA, so just brute-force search for the
|
||||
|
|
@ -418,21 +418,13 @@ class Tinter {
|
|||
const tag = tags[j];
|
||||
for (let k = 0; k < this.svgAttrs.length; k++) {
|
||||
const attr = this.svgAttrs[k];
|
||||
for (let m = 0; m < this.keyHex.length; m++) { // dev note: don't use L please.
|
||||
// We use a different attribute from the one we're setting
|
||||
// because we may also be using forceColors. If we were to
|
||||
// check the keyHex against a forceColors value, it may not
|
||||
// match and therefore not change when we need it to.
|
||||
const valAttrName = "mx-val-" + attr;
|
||||
let attribute = tag.getAttribute(valAttrName);
|
||||
if (!attribute) attribute = tag.getAttribute(attr); // fall back to the original
|
||||
if (attribute && (attribute.toUpperCase() === this.keyHex[m] || attribute.toLowerCase() === this.keyRgb[m])) {
|
||||
for (let l = 0; l < this.keyHex.length; l++) {
|
||||
if (tag.getAttribute(attr) &&
|
||||
tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) {
|
||||
fixups.push({
|
||||
node: tag,
|
||||
attr: attr,
|
||||
refAttr: valAttrName,
|
||||
index: m,
|
||||
forceColors: forceColors,
|
||||
index: l,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -448,9 +440,7 @@ class Tinter {
|
|||
if (DEBUG) console.log("applySvgFixups start for " + fixups);
|
||||
for (let i = 0; i < fixups.length; i++) {
|
||||
const svgFixup = fixups[i];
|
||||
const forcedColor = svgFixup.forceColors ? svgFixup.forceColors[svgFixup.index] : null;
|
||||
svgFixup.node.setAttribute(svgFixup.attr, forcedColor ? forcedColor : this.colors[svgFixup.index]);
|
||||
svgFixup.node.setAttribute(svgFixup.refAttr, this.colors[svgFixup.index]);
|
||||
svgFixup.node.setAttribute(svgFixup.attr, this.colors[svgFixup.index]);
|
||||
}
|
||||
if (DEBUG) console.log("applySvgFixups end");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddres
|
|||
import GroupStore from '../../stores/GroupStore';
|
||||
|
||||
import { formatCount } from '../../utils/FormattingUtils';
|
||||
import MatrixClientPeg from "../../MatrixClientPeg";
|
||||
|
||||
class HeaderButton extends React.Component {
|
||||
constructor() {
|
||||
|
|
@ -50,26 +49,17 @@ class HeaderButton extends React.Component {
|
|||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
|
||||
|
||||
// XXX: We really shouldn't be hardcoding colors here, but the way TintableSvg
|
||||
// works kinda prevents us from using normal CSS tactics. We use $warning-color
|
||||
// here.
|
||||
// Note: This array gets passed along to the Tinter's forceColors eventually.
|
||||
const tintableColors = this.props.badgeHighlight ? ["#ff0064"] : null;
|
||||
|
||||
const classNames = ["mx_RightPanel_headerButton"];
|
||||
if (this.props.badgeHighlight) classNames.push("mx_RightPanel_headerButton_badgeHighlight");
|
||||
|
||||
return <AccessibleButton
|
||||
aria-label={this.props.title}
|
||||
aria-expanded={this.props.isHighlighted}
|
||||
title={this.props.title}
|
||||
className={classNames.join(" ")}
|
||||
className="mx_RightPanel_headerButton"
|
||||
onClick={this.onClick} >
|
||||
|
||||
<div className="mx_RightPanel_headerButton_badge">
|
||||
{ this.props.badge ? this.props.badge : <span> </span> }
|
||||
</div>
|
||||
<TintableSvg src={this.props.iconSrc} width="25" height="25" forceColors={tintableColors} />
|
||||
<TintableSvg src={this.props.iconSrc} width="25" height="25" />
|
||||
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
|
||||
|
||||
</AccessibleButton>;
|
||||
|
|
@ -86,7 +76,6 @@ HeaderButton.propTypes = {
|
|||
|
||||
// The badge to display above the icon
|
||||
badge: PropTypes.node,
|
||||
badgeHighlight: PropTypes.bool,
|
||||
// The parameters to track the click event
|
||||
analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
|
||||
|
|
@ -216,10 +205,7 @@ module.exports = React.createClass({
|
|||
}, 500),
|
||||
|
||||
onAction: function(payload) {
|
||||
if (payload.action === "event_notification") {
|
||||
// Try and re-caclulate any badge counts we might have
|
||||
this.forceUpdate();
|
||||
} else if (payload.action === "view_user") {
|
||||
if (payload.action === "view_user") {
|
||||
dis.dispatch({
|
||||
action: 'show_right_panel',
|
||||
});
|
||||
|
|
@ -322,14 +308,6 @@ module.exports = React.createClass({
|
|||
|
||||
let headerButtons = [];
|
||||
if (this.props.roomId) {
|
||||
let notifCountBadge;
|
||||
let notifCount = 0;
|
||||
MatrixClientPeg.get().getRooms().forEach(r => notifCount += (r.getUnreadNotificationCount('highlight') || 0));
|
||||
if (notifCount > 0) {
|
||||
const title = _t("%(count)s Notifications", {count: formatCount(notifCount)});
|
||||
notifCountBadge = <div title={title}>{ formatCount(notifCount) }</div>;
|
||||
}
|
||||
|
||||
headerButtons = [
|
||||
<HeaderButton key="_membersButton" title={membersTitle} iconSrc="img/icons-people.svg"
|
||||
isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
|
||||
|
|
@ -345,7 +323,6 @@ module.exports = React.createClass({
|
|||
<HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg"
|
||||
isHighlighted={this.state.phase === this.Phase.NotificationPanel}
|
||||
clickPhase={this.Phase.NotificationPanel}
|
||||
badge={notifCountBadge} badgeHighlight={notifCount > 0}
|
||||
analytics={['Right Panel', 'Notification List Button', 'click']}
|
||||
/>,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ var TintableSvg = React.createClass({
|
|||
width: PropTypes.string.isRequired,
|
||||
height: PropTypes.string.isRequired,
|
||||
className: PropTypes.string,
|
||||
forceColors: PropTypes.arrayOf(PropTypes.string),
|
||||
},
|
||||
|
||||
statics: {
|
||||
|
|
@ -51,12 +50,6 @@ var TintableSvg = React.createClass({
|
|||
delete TintableSvg.mounts[this.id];
|
||||
},
|
||||
|
||||
componentDidUpdate: function(prevProps, prevState) {
|
||||
if (prevProps.forceColors !== this.props.forceColors) {
|
||||
this.calcAndApplyFixups(this.refs.svgContainer);
|
||||
}
|
||||
},
|
||||
|
||||
tint: function() {
|
||||
// TODO: only bother running this if the global tint settings have changed
|
||||
// since we loaded!
|
||||
|
|
@ -64,13 +57,8 @@ var TintableSvg = React.createClass({
|
|||
},
|
||||
|
||||
onLoad: function(event) {
|
||||
this.calcAndApplyFixups(event.target);
|
||||
},
|
||||
|
||||
calcAndApplyFixups: function(target) {
|
||||
if (!target) return;
|
||||
// console.log("TintableSvg.calcAndApplyFixups for " + this.props.src);
|
||||
this.fixups = Tinter.calcSvgFixups([target], this.props.forceColors);
|
||||
// console.log("TintableSvg.onLoad for " + this.props.src);
|
||||
this.fixups = Tinter.calcSvgFixups([event.target]);
|
||||
Tinter.applySvgFixups(this.fixups);
|
||||
},
|
||||
|
||||
|
|
@ -83,7 +71,6 @@ var TintableSvg = React.createClass({
|
|||
height={this.props.height}
|
||||
onLoad={this.onLoad}
|
||||
tabIndex="-1"
|
||||
ref="svgContainer"
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue