Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Moved Avatar to new style

Browse source
This commit is contained in:
Simon Backx 2022-07-08 13:21:37 +02:00
parent 5f9f05d60e
commit ef84ab2f40
1 changed files with 36 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
apps/comments-ui/src/components/Avatar.js
View file

@ -1,76 +1,74 @@
import React from 'react'; import React, {useContext} from 'react';
import AppContext from '../AppContext'; import AppContext from '../AppContext';
import {getInitials} from '../utils/helpers'; import {getInitials} from '../utils/helpers';
class Avatar extends React.Component { const Avatar = (props) => {
static contextType = AppContext; const {member} = useContext(AppContext);
getHashOfString(str) { const getHashOfString = (str) => {
let hash = 0; let hash = 0;
for (let i = 0; i < str.length; i++) { for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash); hash = str.charCodeAt(i) + ((hash << 5) - hash);
} }
hash = Math.abs(hash); hash = Math.abs(hash);
return hash; return hash;
} };
normalizeHash(hash, min, max) { const normalizeHash = (hash, min, max) => {
return Math.floor((hash % (max - min)) + min); return Math.floor((hash % (max - min)) + min);
} };
generateHSL() { const generateHSL = () => {
let commentMember = (this.props.comment ? this.props.comment.member : this.context.member); let commentMember = (props.comment ? props.comment.member : member);
if (!commentMember || !commentMember.name) { if (!commentMember || !commentMember.name) {
return [0,0,10]; return [0,0,10];
} }
const saturation = isNaN(this.props.saturation) ? 50 : this.props.saturation; const saturation = isNaN(props.saturation) ? 50 : props.saturation;
const hRange = [0, 360]; const hRange = [0, 360];
const lRangeTop = Math.round(saturation / (100 / 30)) + 30; const lRangeTop = Math.round(saturation / (100 / 30)) + 30;
const lRangeBottom = lRangeTop - 20; const lRangeBottom = lRangeTop - 20;
const lRange = [lRangeBottom, lRangeTop]; const lRange = [lRangeBottom, lRangeTop];
const hash = this.getHashOfString(commentMember.name); const hash = getHashOfString(commentMember.name);
const h = this.normalizeHash(hash, hRange[0], hRange[1]); const h = normalizeHash(hash, hRange[0], hRange[1]);
const l = this.normalizeHash(hash, lRange[0], lRange[1]); const l = normalizeHash(hash, lRange[0], lRange[1]);
return [h, saturation, l]; return [h, saturation, l];
} };
HSLtoString(hsl) { const HSLtoString = (hsl) => {
return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`; return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
} };
getInitials() { const commentGetInitials = () => {
let commentMember = (this.props.comment ? this.props.comment.member : this.context.member); let commentMember = (props.comment ? props.comment.member : member);
if (!commentMember || !commentMember.name) { if (!commentMember || !commentMember.name) {
return getInitials('Anonymous'); return getInitials('Anonymous');
} }
return getInitials(commentMember.name); return getInitials(commentMember.name);
} };
render() { let dimensionClasses = (props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11');
let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11'); let initialsClasses = (props.size === 'small' ? 'text-sm' : 'text-lg');
let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-lg'); let commentMember = (props.comment ? props.comment.member : member);
let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
const bgColor = this.HSLtoString(this.generateHSL()); const bgColor = HSLtoString(generateHSL());
const avatarStyle = { const avatarStyle = {
background: bgColor background: bgColor
}; };
return ( return (
<figure className={`relative ${dimensionClasses}`}> <figure className={`relative ${dimensionClasses}`}>
<div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}> <div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
<p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ this.getInitials() }</p> <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
</div> </div>
<img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/> <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>
</figure> </figure>
); );
} };
}
export default Avatar; export default Avatar;