Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added theme variables to context

Browse source
This commit is contained in:
Peter Zimon 2022-07-08 11:36:40 +02:00
parent 1550f582be
commit da21656b14
5 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,13 +23,13 @@ function AuthFrame({adminUrl, onLoad}) {
);
}
function CommentsBoxContainer({done, colorScheme, avatarSaturation}) {
function CommentsBoxContainer({done}) {
if (!done) {
return null;
}
return (
<ShadowRoot>
<CommentsBox colorScheme={colorScheme} avatarSaturation={avatarSaturation} />
<CommentsBox />
</ShadowRoot>
);
}
@ -276,6 +276,9 @@ export default class App extends React.Component {
comments,
pagination,
postId,
colorScheme: this.props.colorScheme,
avatarSaturation: this.props.avatarSaturation,
accentColor: this.props.accentColor,
dispatchAction: (_action, data) => this.dispatchAction(_action, data),
/**
@ -297,7 +300,7 @@ export default class App extends React.Component {
return (
<SentryErrorBoundary dsn={this.props.sentryDsn}>
<AppContext.Provider value={this.getContextFromState()}>
<CommentsBoxContainer done={done} colorScheme={this.props.colorScheme} avatarSaturation={this.props.avatarSaturation} />
<CommentsBoxContainer done={done} />
<AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initSetup.bind(this)}/>
</AppContext.Provider>
</SentryErrorBoundary>

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

@ -21,7 +21,7 @@ const Comment = (props) => {
setIsInReplyMode(current => !current);
};
const {admin} = useContext(AppContext);
const {admin, avatarSaturation} = useContext(AppContext);
const comment = props.comment;
const hasReplies = comment.replies && comment.replies.length > 0;
const isNotPublished = comment.status !== 'published';
@ -45,7 +45,7 @@ const Comment = (props) => {
<div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-12'}`}>
<div>
<div className="flex justify-start items-center">
<Avatar comment={comment} saturation={props.avatarSaturation} />
<Avatar comment={comment} saturation={avatarSaturation} />
<div className="ml-3">
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-[rgba(255,255,255,0.85)]">{comment.member.name}</h4>
</div>
@ -71,12 +71,12 @@ const Comment = (props) => {
leaveTo="opacity-0"
>
<div className="ml-14 my-10">
<Form parent={comment} toggle={toggleReplyMode} avatarSaturation={props.avatarSaturation} isReply={true} />
<Form parent={comment} toggle={toggleReplyMode} isReply={true} />
</div>
</Transition>
{hasReplies &&
<div className="ml-14 mt-10">
<Replies comment={comment} avatarSaturation={props.avatarSaturation} />
<Replies comment={comment} />
</div>
}
</>

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

@ -31,9 +31,9 @@ class CommentsBox extends React.Component {
}
darkMode() {
if (this.props.colorScheme === 'light') {
if (this.context.colorScheme === 'light') {
return false;
} else if (this.props.colorScheme === 'dark') {
} else if (this.context.colorScheme === 'dark') {
return true;
} else {
const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
@ -48,7 +48,7 @@ class CommentsBox extends React.Component {
}
render() {
const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={this.props.avatarSaturation} />);
const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={this.context.avatarSaturation} />);
const containerClass = this.darkMode() ? 'dark' : '';
const commentsCount = comments.length;
@ -60,7 +60,7 @@ class CommentsBox extends React.Component {
{comments}
</div>
<div>
{ this.context.member ? <Form commentsCount={commentsCount} avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
{ this.context.member ? <Form commentsCount={commentsCount} /> : <NotSignedInBox /> }
</div>
</section>
);

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

@ -6,7 +6,7 @@ import {useEditor, EditorContent} from '@tiptap/react';
import {getEditorConfig} from '../utils/editor';
const Form = (props) => {
const {member, postId, dispatchAction, onAction} = useContext(AppContext);
const {member, postId, dispatchAction, onAction, avatarSaturation} = useContext(AppContext);
let config;
if (props.isReply) {
@ -128,7 +128,7 @@ const Form = (props) => {
</div>
</div>
<div className="flex mb-1 justify-start items-center absolute top-[4px] left-0">
<Avatar saturation={props.avatarSaturation} />
<Avatar saturation={avatarSaturation} />
<Transition
show={focused}
enter="transition duration-500 ease-in-out"

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

@ -5,7 +5,7 @@ const Replies = (props) => {
return (
<div>
{comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} avatarSaturation={props.avatarSaturation} />))}
{comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} isReply={true} />))}
</div>
);
};