PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Change score color to match sender name

Browse source
This commit is contained in:
Tulir Asokan 2020-04-10 14:39:16 +03:00
parent 03299a28a4
commit e64ff0f099
2 changed files with 39 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
res/css/views/elements/_ReplyThread.scss
View file

@ -27,4 +27,36 @@ blockquote.mx_ReplyThread {
margin-bottom: 8px;
padding-left: 10px;
border-left: 4px solid $button-bg-color;
&.mx_ReplyThread_color1 {
border-left-color: $username-variant1-color;
}
&.mx_ReplyThread_color2 {
border-left-color: $username-variant2-color;
}
&.mx_ReplyThread_color3 {
border-left-color: $username-variant3-color;
}
&.mx_ReplyThread_color4 {
border-left-color: $username-variant4-color;
}
&.mx_ReplyThread_color5 {
border-left-color: $username-variant5-color;
}
&.mx_ReplyThread_color6 {
border-left-color: $username-variant6-color;
}
&.mx_ReplyThread_color7 {
border-left-color: $username-variant7-color;
}
&.mx_ReplyThread_color8 {
border-left-color: $username-variant8-color;
}
}

9
src/components/views/elements/ReplyThread.js
View file

@ -25,6 +25,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks
import SettingsStore from "../../../settings/SettingsStore";
import escapeHtml from "escape-html";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { getUserNameColorClass } from "../../../utils/FormattingUtils"
// This component does no cycle detection, simply because the only way to make such a cycle would be to
// craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@ -285,6 +286,10 @@ export default class ReplyThread extends React.Component {
dis.dispatch({action: 'focus_composer'});
}
getReplyThreadColorClass(ev) {
return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyThread");
}
render() {
let header = null;
@ -299,7 +304,7 @@ export default class ReplyThread extends React.Component {
const ev = this.state.loadedEv;
const Pill = sdk.getComponent('elements.Pill');
const room = this.context.getRoom(ev.getRoomId());
header = <blockquote className="mx_ReplyThread">
header = <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`}>
{
_t('<a>In reply to</a> <pill>', {}, {
'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
@ -315,7 +320,7 @@ export default class ReplyThread extends React.Component {
const ReplyTile = sdk.getComponent('views.rooms.ReplyTile');
const evTiles = this.state.events.map((ev) => {
return <blockquote className="mx_ReplyThread" key={ev.getId()}>
return <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`} key={ev.getId()}>
<ReplyTile
mxEvent={ev}
onHeightChanged={this.props.onHeightChanged}