Skip to content

Commit bfe8af1

Browse files
one-communityone-community
authored
Merge pull request #2411 from OneCommunityGlobal/Nahiyan_Hotfix-for-Editor-and-User-profile-modals
Nahiyan_Added dark mode to editor and user profile modals
2 parents 6c2b93d + 674bed6 commit bfe8af1

3 files changed

Lines changed: 79 additions & 72 deletions

File tree

‎src/components/Announcements/index.jsx‎

Lines changed: 71 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react';
1+
import { useState, useEffect } from 'react';
22
import './Announcements.css';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { Editor } from '@tinymce/tinymce-react'; // Import Editor from TinyMCE
@@ -13,6 +13,73 @@ function Announcements() {
1313
const [headerContent, setHeaderContent] = useState('');
1414
const [emailSubject, setEmailSubject] = useState('');
1515
const [testEmail, setTestEmail] = useState('');
16+
const [showEditor, setShowEditor] = useState(true); // State to control rendering of the editor
17+
18+
useEffect(() => {
19+
// Toggle the showEditor state to force re-render when dark mode changes
20+
setShowEditor(false);
21+
setTimeout(() => setShowEditor(true), 0);
22+
}, [darkMode]);
23+
24+
const editorInit = {
25+
license_key: 'gpl',
26+
selector: 'textarea#open-source-plugins',
27+
height: 500,
28+
menubar: false,
29+
plugins: [
30+
'advlist autolink lists link image paste',
31+
'charmap print preview anchor help',
32+
'searchreplace visualblocks code',
33+
'insertdatetime media table paste wordcount',
34+
],
35+
image_title: true,
36+
automatic_uploads: true,
37+
file_picker_callback(cb, value, meta) {
38+
const input = document.createElement('input');
39+
input.setAttribute('type', 'file');
40+
input.setAttribute('accept', 'image/*');
41+
42+
/*
43+
Note: In modern browsers input[type="file"] is functional without
44+
even adding it to the DOM, but that might not be the case in some older
45+
or quirky browsers like IE, so you might want to add it to the DOM
46+
just in case, and visually hide it. And do not forget do remove it
47+
once you do not need it anymore.
48+
*/
49+
50+
input.onchange = function() {
51+
const file = this.files[0];
52+
53+
const reader = new FileReader();
54+
reader.onload = function() {
55+
/*
56+
Note: Now we need to register the blob in TinyMCEs image blob
57+
registry. In the next release this part hopefully won't be
58+
necessary, as we are looking to handle it internally.
59+
*/
60+
const id = `blobid${new Date().getTime()}`;
61+
const { blobCache } = tinymce.activeEditor.editorUpload;
62+
const base64 = reader.result.split(',')[1];
63+
const blobInfo = blobCache.create(id, file, base64);
64+
blobCache.add(blobInfo);
65+
66+
/* call the callback and populate the Title field with the file name */
67+
cb(blobInfo.blobUri(), { title: file.name });
68+
};
69+
reader.readAsDataURL(file);
70+
};
71+
72+
input.click();
73+
},
74+
a11y_advanced_options: true,
75+
menubar: 'file insert edit view format tools',
76+
toolbar:
77+
'undo redo | formatselect | bold italic | blocks fontfamily fontsize | image \
78+
alignleft aligncenter alignright | \
79+
bullist numlist outdent indent | removeformat | help',
80+
skin: darkMode ? 'oxide-dark' : 'oxide',
81+
content_css: darkMode ? 'dark' : 'default',
82+
}
1683

1784
const handleEmailListChange = e => {
1885
const emails = e.target.value.split(',');
@@ -75,71 +142,15 @@ function Announcements() {
75142
<div className="editor">
76143
<h3>Weekly Progress Editor</h3>
77144
<br />
78-
<Editor
145+
{showEditor && <Editor
79146
tinymceScriptSrc="/tinymce/tinymce.min.js"
80147
id="email-editor"
81148
initialValue="<p>This is the initial content of the editor</p>"
82-
init={{
83-
license_key: 'gpl',
84-
selector: 'textarea#open-source-plugins',
85-
height: 500,
86-
menubar: false,
87-
plugins: [
88-
'advlist autolink lists link image paste',
89-
'charmap print preview anchor help',
90-
'searchreplace visualblocks code',
91-
'insertdatetime media table paste wordcount',
92-
],
93-
image_title: true,
94-
automatic_uploads: true,
95-
file_picker_callback(cb, value, meta) {
96-
const input = document.createElement('input');
97-
input.setAttribute('type', 'file');
98-
input.setAttribute('accept', 'image/*');
99-
100-
/*
101-
Note: In modern browsers input[type="file"] is functional without
102-
even adding it to the DOM, but that might not be the case in some older
103-
or quirky browsers like IE, so you might want to add it to the DOM
104-
just in case, and visually hide it. And do not forget do remove it
105-
once you do not need it anymore.
106-
*/
107-
108-
input.onchange = function() {
109-
const file = this.files[0];
110-
111-
const reader = new FileReader();
112-
reader.onload = function() {
113-
/*
114-
Note: Now we need to register the blob in TinyMCEs image blob
115-
registry. In the next release this part hopefully won't be
116-
necessary, as we are looking to handle it internally.
117-
*/
118-
const id = `blobid${new Date().getTime()}`;
119-
const { blobCache } = tinymce.activeEditor.editorUpload;
120-
const base64 = reader.result.split(',')[1];
121-
const blobInfo = blobCache.create(id, file, base64);
122-
blobCache.add(blobInfo);
123-
124-
/* call the callback and populate the Title field with the file name */
125-
cb(blobInfo.blobUri(), { title: file.name });
126-
};
127-
reader.readAsDataURL(file);
128-
};
129-
130-
input.click();
131-
},
132-
a11y_advanced_options: true,
133-
menubar: 'file insert edit view format tools',
134-
toolbar:
135-
'undo redo | formatselect | bold italic | blocks fontfamily fontsize | image \
136-
alignleft aligncenter alignright | \
137-
bullist numlist outdent indent | removeformat | help',
138-
}}
149+
init={editorInit}
139150
onEditorChange={(content, editor) => {
140151
setEmailContent(content);
141152
}}
142-
/>
153+
/>}
143154
<button type="button" className="send-button" onClick={handleBroadcastEmails} style={darkMode ? boxStyleDark : boxStyle}>
144155
Broadcast Weekly Update
145156
</button>
@@ -167,12 +178,6 @@ function Announcements() {
167178
</div>
168179
</div>
169180
</div>
170-
{/* <div className="email-content-preview-section">
171-
<div className="email-content-preview-title">
172-
<h3>Preview</h3>
173-
</div>
174-
<div className="email-content-preview" dangerouslySetInnerHTML={{ __html: emailContent }} />
175-
</div> */}
176181
</div>
177182
);
178183
}

‎src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const BlueSquaresTable = ({ userProfile ,canEdit, isPrivate , handleUserProfile
1616
fontSize={20}
1717
isPermissionPage
1818
role={userProfile.role}
19+
darkMode={darkMode}
1920
/>
2021
</div>
2122
</div>

‎src/components/UserProfile/BluequareEmailBBCPopUp.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
2020
import { boxStyle, boxStyleDark } from 'styles';
2121

2222
const BluequareEmailAssignmentPopUp = React.memo(props => {
23+
const darkMode = useSelector(state => state.theme.darkMode);
2324
const dispatch = useDispatch();
2425
const [searchWord, setSearchWord] = useState('');
2526
const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -67,9 +68,9 @@ const BluequareEmailAssignmentPopUp = React.memo(props => {
6768
},[])
6869

6970
return (
70-
<Modal isOpen={props.isOpen} toggle={closePopup} size='lg'>
71-
<ModalHeader toggle={closePopup}>Set blue square email recipients</ModalHeader>
72-
<ModalBody>
71+
<Modal isOpen={props.isOpen} toggle={closePopup} size='lg' className={darkMode ? 'dark-mode text-light' : ''}>
72+
<ModalHeader toggle={closePopup} className={darkMode ? 'bg-space-cadet' : ''}>Set blue square email recipients</ModalHeader>
73+
<ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
7374
<Container>
7475
<InputGroup>
7576
<Input
@@ -112,7 +113,7 @@ const BluequareEmailAssignmentPopUp = React.memo(props => {
112113
</Dropdown>
113114
)}
114115

115-
<table className="table table-bordered table-responsive-lg mt-3">
116+
<table className={`table table-bordered table-responsive-lg mt-3 ${darkMode ? 'text-light' : ''}`}>
116117
<thead>
117118
<tr>
118119
<th>Status</th>
@@ -153,11 +154,11 @@ const BluequareEmailAssignmentPopUp = React.memo(props => {
153154
</table>
154155
</Container>
155156
</ModalBody>
156-
<ModalFooter>
157+
<ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
157158
<Button
158159
color="secondary"
159160
onClick={closePopup}
160-
style={props.darkMode ? boxStyleDark : boxStyle}
161+
style={darkMode ? boxStyleDark : boxStyle}
161162
>
162163
Close
163164
</Button>

0 commit comments

Comments
 (0)