CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-21 13:57:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Mention users in comments (#429)

Browse Source 
Mention users in comments (#429)
This commit is contained in:
MrPercheul
2022-06-01 13:23:21 +02:00
committed by GitHub
parent cbc9633fe2
commit f6a78dd0b4
17 changed files with 194 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/static/css/config/_dark_theme.scss
View File

@@ -94,6 +94,7 @@ body.dark_theme {
--comment-date-hover-text-color: #fff;
--comment-text-color: rgba(255, 255, 255, 0.88);
--comment-text-mentions-background-color-highlight:#006622;
--comment-actions-material-icon-text-color: rgba(255, 255, 255, 0.74);

1
frontend/src/static/css/config/_light_theme.scss
View File

@@ -94,6 +94,7 @@ body {
--comment-date-hover-text-color: #0a0a0a;
--comment-text-color: #111;
--comment-text-mentions-background-color-highlight:#00cc44;
--comment-actions-material-icon-text-color: rgba(17, 17, 17, 0.8);

104
frontend/src/static/js/components/comments/Comments.jsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useRef, useEffect } from 'react';
import { MentionsInput, Mention } from 'react-mentions';
import PropTypes from 'prop-types';
import { format } from 'timeago.js';
import { usePopup } from '../../utils/hooks/';
@@ -25,6 +26,7 @@ function CommentForm(props) {
const [madeChanges, setMadeChanges] = useState(false);
const [textareaFocused, setTextareaFocused] = useState(false);
const [textareaLineHeight, setTextareaLineHeight] = useState(-1);
const [userList, setUsersList] = useState('');
const [loginUrl] = useState(
!MemberContext._currentValue.is.anonymous
@@ -42,6 +44,17 @@ function CommentForm(props) {
setTextareaFocused(false);
}
function onUsersLoad()
{
const userList =[...MediaPageStore.get('users')];
const cleanList = []
userList.forEach(user => {
cleanList.push({id : user.username, display : user.name});
});
setUsersList(cleanList);
}
function onCommentSubmit() {
textareaRef.current.style.height = '';
@@ -61,6 +74,21 @@ function CommentForm(props) {
setMadeChanges(false);
}
function onChangeWithMention(event, newValue, newPlainTextValue, mentions) {
textareaRef.current.style.height = '';
setValue(newValue);
setMadeChanges(true);
const contentHeight = textareaRef.current.scrollHeight;
const contentLineHeight =
0 < textareaLineHeight ? textareaLineHeight : parseFloat(window.getComputedStyle(textareaRef.current).lineHeight);
setTextareaLineHeight(contentLineHeight);
textareaRef.current.style.height =
Math.max(20, textareaLineHeight * Math.ceil(contentHeight / contentLineHeight)) + 'px';
}
function onChange(event) {
textareaRef.current.style.height = '';
@@ -81,7 +109,7 @@ function CommentForm(props) {
return;
}
const val = textareaRef.current.value.trim();
const val = value.trim();
if ('' !== val) {
MediaPageActions.submitComment(val);
@@ -91,10 +119,18 @@ function CommentForm(props) {
useEffect(() => {
MediaPageStore.on('comment_submit', onCommentSubmit);
MediaPageStore.on('comment_submit_fail', onCommentSubmitFail);
if (MediaCMS.features.media.actions.comment_mention === true)
{
MediaPageStore.on('users_load', onUsersLoad);
}
return () => {
MediaPageStore.removeListener('comment_submit', onCommentSubmit);
MediaPageStore.removeListener('comment_submit_fail', onCommentSubmitFail);
if (MediaCMS.features.media.actions.comment_mention === true)
{
MediaPageStore.removeListener('users_load', onUsersLoad);
}
};
});
@@ -104,16 +140,33 @@ function CommentForm(props) {
<UserThumbnail />
<div className="form">
<div className={'form-textarea-wrap' + (textareaFocused ? ' focused' : '')}>
<textarea
ref={textareaRef}
className="form-textarea"
rows="1"
placeholder={'Add a ' + commentsText.single + '...'}
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
></textarea>
{ MediaCMS.features.media.actions.comment_mention ?
<MentionsInput
inputRef={textareaRef}
className="form-textarea"
rows="1"
placeholder={'Add a ' + commentsText.single + '...'}
value={value}
onChange={onChangeWithMention}
onFocus={onFocus}
onBlur={onBlur}>
<Mention
data={userList}
markup="@(___id___)[___display___]"
/>
</MentionsInput>
:
<textarea
ref={textareaRef}
className="form-textarea"
rows="1"
placeholder={'Add a ' + commentsText.single + '...'}
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
></textarea>
}
</div>
<div className="form-buttons">
<button className={'' === value.trim() ? 'disabled' : ''} onClick={submitComment}>
@@ -236,6 +289,10 @@ function Comment(props) {
};
}, []);
function parseComment(text) {
return { __html: text.replace(/\n/g, `<br />`) };
}
return (
<div className="comment">
<div className="comment-inner">
@@ -255,7 +312,7 @@ function Comment(props) {
<div
ref={commentTextInnerRef}
className="comment-text-inner"
dangerouslySetInnerHTML={{ __html: props.text }}
dangerouslySetInnerHTML={parseComment(props.text)}
></div>
</div>
{enabledViewMoreContent ? (
@@ -370,12 +427,25 @@ export default function CommentsList(props) {
function onCommentsLoad() {
const retrievedComments = [...MediaPageStore.get('media-comments')];
retrievedComments.forEach(comment => {
comment.text = setTimestampAnchors(comment.text);
if (MediaCMS.features.media.actions.comment_mention === true)
{
retrievedComments.forEach(comment => {
comment.text = setMentions(comment.text);
});
displayCommentsRelatedAlert();
setComments(retrievedComments);
}
retrievedComments.forEach(comment => {
comment.text = setTimestampAnchors(comment.text);
});
displayCommentsRelatedAlert();
setComments(retrievedComments);
}
function setMentions(text)
{
let sanitizedComment = text.split('@(_').join("<a href=\"/user/");
sanitizedComment = sanitizedComment.split('_)[_').join("\">");
return sanitizedComment.split('_]').join("</a>");
}
function setTimestampAnchors(text)

15
frontend/src/static/js/components/comments/Comments.scss
View File

@@ -2,7 +2,7 @@
.comments-form-inner {
.form {
.form-textarea-wrap {
.form-textarea-wrap{
border-color: var(--comments-textarea-wrapper-border-color);
&:after {
@@ -10,13 +10,20 @@
}
}
.form-textarea {
.form-textarea, .form-textarea__input, .form-textarea__suggestions__list {
color: var(--comments-textarea-text-color);
&:placeholder {
color: var(--comments-textarea-text-placeholder-color);
}
}
.form-textarea__suggestions__list {
background-color: var(--body-bg-color);
}
strong {
background-color: var(--comment-text-mentions-background-color-highlight)
}
}
}
@@ -160,7 +167,7 @@
}
}
.form-textarea {
.form-textarea, .form-textarea__input {
position: relative;
resize: none;
display: block;
@@ -204,7 +211,7 @@
text-decoration: none;
.form-textarea {
.form-textarea, .form-textarea__input {
opacity: 0.5;
}
}

3
frontend/src/static/js/utils/settings/member.js
View File

@@ -18,6 +18,7 @@ export function init(user, features) {
deleteProfile: false,
readComment: true,
addComment: false,
mentionComment: false,
deleteComment: false,
editMedia: false,
deleteMedia: false,
@@ -60,6 +61,7 @@ export function init(user, features) {
MEMBER.can.deleteProfile = true === user.can.deleteProfile;
MEMBER.can.addComment = true === user.can.addComment;
MEMBER.can.mentionComment = true === user.can.mentionComment;
MEMBER.can.deleteComment = true === user.can.deleteComment;
MEMBER.can.editMedia = true === user.can.editMedia;
MEMBER.can.deleteMedia = true === user.can.deleteMedia;
@@ -100,6 +102,7 @@ export function init(user, features) {
const mediaActions = features.media.actions;
MEMBER.can.addComment = MEMBER.can.addComment && true === mediaActions.comment;
MEMBER.can.mentionComment = MEMBER.can.mentionComment && true === mediaActions.comment_mention;
MEMBER.can.likeMedia = false === mediaActions.like ? false : true;
MEMBER.can.dislikeMedia = false === mediaActions.dislike ? false : true;

18
frontend/src/static/js/utils/stores/MediaPageStore.js
View File

@@ -51,6 +51,7 @@ class MediaPageStore extends EventEmitter {
this.pagePlaylistId = null;
this.pagePlaylistData = null;
this.userList = null;
MediaPageStoreData[
Object.defineProperty(this, 'id', { value: 'MediaPageStoreData_' + Object.keys(MediaPageStoreData).length }).id
@@ -158,6 +159,12 @@ class MediaPageStore extends EventEmitter {
getRequest(this.commentsAPIUrl, !1, this.commentsResponse);
}
loadUsers() {
this.usersAPIUrl = this.mediacms_config.api.users;
this.usersResponse = this.usersResponse.bind(this);
getRequest(this.usersAPIUrl, !1, this.usersResponse);
}
loadPlaylists() {
if (!this.mediacms_config.member.can.saveMedia) {
return;
@@ -187,6 +194,7 @@ class MediaPageStore extends EventEmitter {
}
this.loadPlaylists();
this.loadUsers();
if (this.mediacms_config.member.can.readComment) {
this.loadComments();
@@ -215,6 +223,13 @@ class MediaPageStore extends EventEmitter {
}
}
usersResponse(response) {
if (response && response.data) {
MediaPageStoreData.userList = response.data.count ? response.data.results : [];
this.emit('users_load');
}
}
playlistsResponse(response) {
if (response && response.data) {
let tmp_playlists = response.data.count ? response.data.results : [];
@@ -403,6 +418,9 @@ class MediaPageStore extends EventEmitter {
i,
r = null;
switch (type) {
case 'users':
r = MediaPageStoreData.userList || [];
break;
case 'playlists':
r = MediaPageStoreData[this.id].playlists || [];
break;