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