imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix colour of avatar and colour matching with username (#11470)

Browse source 
* Use consistent colouring of username with avatar

* Upgrade Compound to fix Firefox issue

* Use the approapriate color shade for usernames

* Use the approapriate color shade for usernames

* Upgrade Compound

* Fix tests
This commit is contained in:
Germain 2023-08-24 18:12:28 +01:00 • committed by GitHub
parent 195dc4716b
commit 23897dff4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 269 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/messages/DisambiguatedProfile.tsx
View file

@ -40,7 +40,7 @@ export default class DisambiguatedProfile extends React.Component<IProps> {
let colorClass: string | undefined;
if (colored) {
colorClass = getUserNameColorClass(fallbackName);
colorClass = getUserNameColorClass(mxid ?? "");
}
let mxidElement;

28
src/utils/FormattingUtils.ts
View file

@ -16,6 +16,7 @@ limitations under the License.
*/
import { ReactElement, ReactNode } from "react";
import { useIdColorHash } from "@vector-im/compound-web";
import { _t, getCurrentLanguage } from "../languageHandler";
import { jsxJoin } from "./ReactUtils";
@ -73,30 +74,11 @@ export function formatBytes(bytes: number, decimals = 2): string {
export function formatCryptoKey(key: string): string {
return key.match(/.{1,4}/g)!.join(" ");
}
/**
* calculates a numeric hash for a given string
*
* @param {string} str string to hash
*
* @return {number}
*/
export function hashCode(str?: string): number {
let hash = 0;
let chr: number;
if (!str?.length) {
return hash;
}
for (let i = 0; i < str.length; i++) {
chr = str.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0;
}
return Math.abs(hash);
}
export function getUserNameColorClass(userId?: string): string {
const colorNumber = (hashCode(userId) % 8) + 1;
return `mx_Username_color${colorNumber}`;
export function getUserNameColorClass(userId: string): string {
// eslint-disable-next-line react-hooks/rules-of-hooks
const number = useIdColorHash(userId);
return `mx_Username_color${number}`;
}
/**