Merge pull request #4127 from NCI-Agency/AZ-608-make-rich-text-headin…

…gs-smaller Make rich text headings smaller
NCI-Agency · Nov 9, 2022 · 0f56d6b · 0f56d6b
2 parents bd6a467 + 6d8ddf0
commit 0f56d6b
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 9 deletions.
diff --git a/client/src/components/CustomFields.js b/client/src/components/CustomFields.js
@@ -89,6 +89,7 @@ const ReadonlySpecialField = ({
         name={name}
         isCompact={isCompact}
         component={FieldHelper.ReadonlyField}
+        className="rich-text-readonly"
         humanValue={parseHtmlWithLinkTo(fieldValue)}
         {...Object.without(otherFieldProps, "style")}
       />

diff --git a/client/src/components/MergeField.js b/client/src/components/MergeField.js
@@ -10,7 +10,8 @@ const MergeField = ({
   align,
   action,
   mergeState,
-  dispatchMergeActions
+  dispatchMergeActions,
+  className
 }) => {
   const fieldRef = useRef(null)
   const [height, setSetHeight] = useState("auto")
@@ -43,7 +44,9 @@ const MergeField = ({
     >
       <div style={{ flex: "1 1 auto" }}>
         <LabelBox align={align}>{label}</LabelBox>
-        <ValueBox align={align}>{value}</ValueBox>
+        <ValueBox className={className} align={align}>
+          {value}
+        </ValueBox>
       </div>
       {action}
     </MergeFieldBox>
@@ -95,7 +98,8 @@ MergeField.propTypes = {
   align: PropTypes.oneOf(Object.values(ALIGN_OPTIONS)).isRequired,
   action: PropTypes.node,
   mergeState: PropTypes.object,
-  dispatchMergeActions: PropTypes.func
+  dispatchMergeActions: PropTypes.func,
+  className: PropTypes.string
 }
 
 export default MergeField
diff --git a/client/src/components/RelatedObjectNotes.js b/client/src/components/RelatedObjectNotes.js
@@ -231,6 +231,7 @@ const RelatedObjectNotes = ({
                         ))}
                     </div>
                     <div
+                      className="rich-text-readonly"
                       style={{
                         overflowWrap: "break-word",
                         wordWrap: "break-word" // IE

diff --git a/client/src/components/editor/RichTextEditor.css b/client/src/components/editor/RichTextEditor.css
@@ -45,3 +45,20 @@
 .editor-link-chooser {
   z-index: 1300;
 }
+
+/* 
+ * Rich text editor style overrides.
+ * when making a change, change rich-text-readonly class accordingly.
+*/
+
+.editable h1 {
+  font-size: 1.5rem;
+}
+
+.editable h2 {
+  font-size: 1.25rem;
+}
+
+.editable h3 {
+  font-size: 1.0rem;
+}
diff --git a/client/src/components/previews/PersonPreview.js b/client/src/components/previews/PersonPreview.js
@@ -180,7 +180,7 @@ const PersonPreview = ({ className, uuid }) => {
         </Row>
 
         <div className="preview-field-label">Biography</div>
-        <div className="preview-field-value">
+        <div className="preview-field-value rich-text-readonly">
           {parseHtmlWithLinkTo(person.biography)}
         </div>
       </div>

diff --git a/client/src/components/previews/ReportPreview.js b/client/src/components/previews/ReportPreview.js
@@ -276,7 +276,7 @@ const ReportPreview = ({ className, uuid }) => {
       {report.reportText && (
         <React.Fragment>
           <h4>{Settings.fields.report.reportText}</h4>
-          <div className="preview-section">
+          <div className="preview-section rich-text-readonly">
             {parseHtmlWithLinkTo(report.reportText)}
           </div>
         </React.Fragment>

diff --git a/client/src/index.css b/client/src/index.css
@@ -1308,3 +1308,15 @@ div[id*='fg-entityAssessment'] {
     text-align: left;
   }
 }
+
+.rich-text-readonly h1 {
+  font-size: 1.5rem;
+}
+
+.rich-text-readonly h2 {
+  font-size: 1.25rem;
+}
+
+.rich-text-readonly h3 {
+  font-size: 1.0rem;
+}
diff --git a/client/src/pages/admin/merge/MergePeople.js b/client/src/pages/admin/merge/MergePeople.js
@@ -393,6 +393,7 @@ const MergePeople = ({ pageDispatchers }) => {
               <PersonField
                 label="Biography"
                 value={parseHtmlWithLinkTo(mergedPerson.biography)}
+                className="rich-text-readonly"
                 align={ALIGN_OPTIONS.CENTER}
                 action={getClearButton(() =>
                   dispatchMergeActions(setAMergedField("biography", "", null))
@@ -845,6 +846,7 @@ const PersonColumn = ({ align, label, mergeState, dispatchMergeActions }) => {
           <PersonField
             label="Biography"
             fieldName="biography"
+            className="rich-text-readonly"
             value={parseHtmlWithLinkTo(person.biography)}
             align={align}
             action={getActionButton(

diff --git a/client/src/pages/people/Compact.js b/client/src/pages/people/Compact.js
@@ -387,7 +387,7 @@ const CompactPersonView = ({ pageDispatchers }) => {
 
   function mapNonCustomFields() {
     const classNameExceptions = {
-      biography: "biography"
+      biography: "biography rich-text-readonly"
     }
 
     const idExceptions = {

diff --git a/client/src/pages/people/Show.js b/client/src/pages/people/Show.js
@@ -475,7 +475,7 @@ const PersonShow = ({ pageDispatchers }) => {
 
   function mapNonCustomFields() {
     const classNameExceptions = {
-      biography: "biography"
+      biography: "biography rich-text-readonly"
     }
 
     // map fields that have specific human person

diff --git a/client/src/pages/reports/Compact.js b/client/src/pages/reports/Compact.js
@@ -368,7 +368,7 @@ const CompactReportView = ({ pageDispatchers }) => {
                       <CompactRow
                         label={Settings.fields.report.reportText}
                         content={parseHtmlWithLinkTo(report.reportText)}
-                        className="reportField"
+                        className="reportField rich-text-readonly"
                       />
                     ) : null}
                     {Settings.fields.report.customFields ? (

diff --git a/client/src/pages/reports/Show.js b/client/src/pages/reports/Show.js
@@ -672,12 +672,16 @@ const ReportShow = ({ setSearchQuery, pageDispatchers }) => {
                 <Fieldset
                   title={Settings.fields.report.reportText}
                   id="report-text"
+                  className="rich-text-readonly"
                 >
                   {parseHtmlWithLinkTo(report.reportText)}
                 </Fieldset>
               )}
               {report.reportSensitiveInformation?.text && (
-                <Fieldset title="Sensitive information">
+                <Fieldset
+                  title="Sensitive information"
+                  className="rich-text-readonly"
+                >
                   {parseHtmlWithLinkTo(report.reportSensitiveInformation.text)}
                   {(hasAuthorizationGroups && (
                     <div>