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

Added separate BlankAvatar component

Browse source 
refs https://github.com/TryGhost/Team/issues/1858
This commit is contained in:
Simon Backx 2022-08-31 13:28:37 +02:00
parent b701ba9c0d
commit 90e0ced175
3 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,21 +3,24 @@ import AppContext from '../AppContext';
import {getInitials} from '../utils/helpers';
import {ReactComponent as AvatarIcon} from '../images/icons/avatar.svg';
const Avatar = ({comment, size, isBlank}) => {
const {member, avatarSaturation} = useContext(AppContext);
const dimensionClasses = (size === 'small' ? 'w-6 h-6 sm:w-8 sm:h-8' : 'w-9 h-9 sm:w-[40px] sm:h-[40px]');
function getDimensionClasses() {
return 'w-9 h-9 sm:w-[40px] sm:h-[40px]';
}
// When an avatar has been deleted or hidden
// todo: move to seperate component
if (isBlank) {
return (
<figure className={`relative ${dimensionClasses}`}>
<div className={`flex items-center justify-center rounded-full bg-[rgba(200,200,200,0.3)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white dark:opacity-70" />
</div>
</figure>
);
}
export const BlankAvatar = () => {
const dimensionClasses = getDimensionClasses();
return (
<figure className={`relative ${dimensionClasses}`}>
<div className={`flex items-center justify-center rounded-full bg-[rgba(200,200,200,0.3)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white dark:opacity-70" />
</div>
</figure>
);
}
export const Avatar = ({comment}) => {
const {member, avatarSaturation} = useContext(AppContext);
const dimensionClasses = getDimensionClasses();
const memberName = member?.name ?? comment?.member?.name;
@ -72,7 +75,6 @@ const Avatar = ({comment, size, isBlank}) => {
return getInitials(commentMember.name);
};
let initialsClasses = (size === 'small' ? 'text-sm' : 'text-lg');
let commentMember = (comment ? comment.member : member);
const bgColor = HSLtoString(generateHSL());
@ -84,7 +86,7 @@ const Avatar = ({comment, size, isBlank}) => {
<>
{memberName ?
(<div className={`flex items-center justify-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
<p className={`font-sans font-semibold text-white ${initialsClasses}`}>{ commentGetInitials() }</p>
<p className="font-sans font-semibold text-white text-lg">{ commentGetInitials() }</p>
</div>) :
(<div className={`flex items-center justify-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
@ -99,5 +101,3 @@ const Avatar = ({comment, size, isBlank}) => {
</figure>
);
};
export default Avatar;

7
apps/comments-ui/src/components/Comment.js
View file

@ -1,6 +1,6 @@
import React, {useContext, useState} from 'react';
import {Transition} from '@headlessui/react';
import Avatar from './Avatar';
import {BlankAvatar, Avatar} from './Avatar';
import Like from './Like';
import Reply from './Reply';
import More from './More';
@ -96,12 +96,11 @@ function UnpublishedComment({comment, openEditMode}) {
notPublishedMessage = 'This comment has been removed.';
}
// TODO: consider swapping this with a seperate avatar component
const blankAvatar = (<Avatar isBlank={true} />);
const avatar = (<BlankAvatar />);
const hasReplies = comment.replies && comment.replies.length > 0;
return (
<CommentLayout hasReplies={hasReplies} avatar={blankAvatar}>
<CommentLayout hasReplies={hasReplies} avatar={avatar}>
<div className="-mt-[3px] mb-2 flex items-start">
<div className="flex h-12 flex-row items-center gap-4 pb-[8px] pr-4">
<p className="mt-[4px] font-sans text-[16px] italic leading-normal text-neutral-300 dark:text-[rgba(255,255,255,0.5)]">{notPublishedMessage}</p>

2
apps/comments-ui/src/components/Form.js
View file

@ -1,7 +1,7 @@
import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
import {Transition} from '@headlessui/react';
import AppContext from '../AppContext';
import Avatar from './Avatar';
import {Avatar} from './Avatar';
import {useEditor, EditorContent} from '@tiptap/react';
import {getEditorConfig} from '../utils/editor';
import {isMobile} from '../utils/helpers';