Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Added darkmode support for loading spinner

Browse source
This commit is contained in:
Simon Backx 2022-07-20 17:03:45 +02:00
parent 28921a8dbf
commit 6eb32599bd
3 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/comments-ui/src/App.js
View file

@ -7,7 +7,6 @@ import AppContext from './AppContext';
import {hasMode} from './utils/check-mode';
import setupGhostApi from './utils/api';
import CommentsBox from './components/CommentsBox';
import Loading from './components/Loading';
function AuthFrame({adminUrl, onLoad}) {
const iframeStyle = {
@ -22,7 +21,7 @@ function AuthFrame({adminUrl, onLoad}) {
function CommentsBoxContainer({done, appVersion}) {
return (
<ShadowRoot appVersion={appVersion}>
{done ? <CommentsBox /> : <Loading />}
<CommentsBox done={done} />
</ShadowRoot>
);
}

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

@ -41,7 +41,7 @@ const Comment = (props) => {
if (isInEditMode) {
return (
<Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} avatarSaturation={props.avatarSaturation} />
<Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} />
);
} else {
return (

47
apps/comments-ui/src/components/CommentsBox.js
View file

@ -6,6 +6,29 @@ import Comment from './Comment';
import Pagination from './Pagination';
import NotPaidBox from './NotPaidBox';
import Empty from './Empty';
import Loading from './Loading';
const CommentsBoxContent = (props) => {
const {pagination, member, comments, commentsEnabled} = useContext(AppContext);
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
const commentsCount = comments.length;
const paidOnly = commentsEnabled === 'paid';
const isPaidMember = member && !!member.paid;
return (
<>
<Pagination />
<div className={!pagination ? 'mt-4' : ''}>
{commentsCount === 0 ? <Empty /> : commentsElements}
</div>
<div>
{ member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
</div>
</>
);
};
const CommentsBox = (props) => {
const luminance = (r, g, b) => {
@ -23,11 +46,12 @@ const CommentsBox = (props) => {
var darkest = Math.min(lum1, lum2);
return (brightest + 0.05) / (darkest + 0.05);
};
const {accentColor, colorScheme} = useContext(AppContext);
const darkMode = () => {
if (props.colorScheme === 'light') {
if (colorScheme === 'light') {
return false;
} else if (props.colorScheme === 'dark') {
} else if (colorScheme === 'dark') {
return true;
} else {
const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
@ -41,28 +65,15 @@ const CommentsBox = (props) => {
}
};
const {accentColor, pagination, member, comments, commentsEnabled} = useContext(AppContext);
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={props.avatarSaturation} />);
const containerClass = darkMode() ? 'dark' : '';
const commentsCount = comments.length;
const style = {
'--gh-accent-color': accentColor ?? 'blue'
};
const paidOnly = commentsEnabled === 'paid';
const isPaidMember = member && !!member.paid;
return (
<section className={'ghost-display ' + containerClass} style={style}>
<Pagination />
<div className={!pagination ? 'mt-4' : ''}>
{commentsCount === 0 ? <Empty /> : commentsElements}
</div>
<div>
{ member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
</div>
{props.done ? <>
<CommentsBoxContent />
</> : <Loading />}
</section>
);
};