all panes changed with icons

bible-technology · May 29, 2024 · c51fe26 · c51fe26
1 parent f8853e6
commit c51fe26
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 27 deletions.
diff --git a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
@@ -31,7 +31,7 @@ const AudioEditor = ({ editor }) => {
       audioContent,
       audioPath,
       selectedFont,
-      fontSize,
+      editorFontSize,
       // eslint-disable-next-line no-unused-vars
       updateWave, // updateWave is used to update the waveform in the Editor after recording audio
     }, actions: {
@@ -40,6 +40,7 @@ const AudioEditor = ({ editor }) => {
       setAudioContent,
       setAudioCurrentChapter,
       setAudioPath,
+      setEditorFontSize,
     },
   } = useContext(ReferenceContext);
 
@@ -219,7 +220,7 @@ const AudioEditor = ({ editor }) => {
         verse={verse}
         location={audioPath}
         updateWave={updateWave}
-        fontSize={fontSize}
+        fontSize={editorFontSize}
         selectedFont={selectedFont}
       />
 )}

diff --git a/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js b/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
@@ -8,12 +8,13 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
   const {
     state: {
       selectedFont,
-      fontSize,
+      editorFontSize,
     },
     actions: {
       setSelectedStory,
     },
 } = useContext(ReferenceContext);
+
   const { states: { scrollLock } } = useContext(ProjectContext);
   const { t } = useTranslation();
   const handleChange = (e) => {
@@ -90,7 +91,7 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               className="flex-grow text-justify ml-2 p-2 text-xl"
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
+                fontSize: `${editorFontSize}rem`,
               }}
             />
           </div>
@@ -118,8 +119,8 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               onInput={(e) => handleAutoHeight(e)}
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
-                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+                fontSize: `${editorFontSize}rem`,
+                lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
               }}
             />
           </div>
@@ -140,8 +141,8 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               className="flex-grow text-justify ml-2 p-2 text-sm"
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
-                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+                fontSize: `${editorFontSize}rem`,
+                lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
               }}
             />
           </div>

diff --git a/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js b/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
@@ -25,6 +25,8 @@ const ReferenceAudio = ({
   chapter,
   verse,
   bookId,
+  font,
+  fontSize,
 }) => {
   const {
     actions: {
@@ -227,6 +229,8 @@ const ReferenceAudio = ({
               data={bookData}
               versepath={mp3Path}
               verse={verse}
+              font={font}
+              fontSize={fontSize}
             //   goToVerse={{
             //     chapter: parseInt(chapter, 10),
             //     verse: parseInt(verse, 10),

diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
@@ -17,6 +17,7 @@ function ObsResourceCard({
   isLoading,
   setIndex,
   font,
+  fontSize,
 }) {
   const {
     state: { filters, markdownView },
@@ -36,7 +37,12 @@ function ObsResourceCard({
         itemIndex={index}
         setItemIndex={setIndex}
       />
-      <div style={{ fontFamily: font || 'sans-serif' }}>
+      <div style={{
+          fontFamily: font || 'sans-serif',
+          fontSize: `${fontSize}rem`,
+          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        }}
+      >
         <CardContent
           item={[]}
           items={items}

diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
@@ -27,6 +27,7 @@ function ObsTnCard({
   resourceId,
   offlineResource,
   font,
+  fontSize,
   ...props
 }) {
   const [index, setIndex] = useState(0);
@@ -143,6 +144,7 @@ function ObsTnCard({
         index={index}
         setIndex={(v) => setIndex(v)}
         font={font}
+        fontSize={fontSize}
       />
     ) : <LoadingScreen />
   );

diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
@@ -23,6 +23,7 @@ function ObsTwlCard({
   resourceId,
   offlineResource,
   font,
+  fontSize,
   ...props
 }) {
   const [index, setIndex] = useState(1);
@@ -104,6 +105,7 @@ function ObsTwlCard({
         index={index}
         setIndex={(v) => setIndex(v)}
         font={font}
+        fontSize={fontSize}
       />
     ) : (
       <LoadingScreen />

diff --git a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
@@ -13,6 +13,7 @@ const ReferenceBibleX = ({
   refName,
   bookId,
   font,
+  fontSize,
 }) => {
   const {
     states: {
@@ -47,6 +48,7 @@ const ReferenceBibleX = ({
     refName,
     scrollLock,
     font,
+    fontSize,
   };
   return (
     <>

diff --git a/renderer/src/components/MenuDropdown/MenuDropdown.js b/renderer/src/components/MenuDropdown/MenuDropdown.js
@@ -14,7 +14,7 @@ import {
 } from 'font-detect-rhl';
 
 export default function MenuDropdown({
- selectedFont, setSelectedFont, buttonStyle,
+ selectedFont, setSelectedFont, buttonStyle, showIcon = true,
 }) {
   const detectedFonts = useDetectFonts({ fonts: fontsArray });
   const [query, setQuery] = useState('');
@@ -37,12 +37,16 @@ export default function MenuDropdown({
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className={buttonStyle || 'cursor-pointer py-2 px-2 text-left sm:text-sm'}
+        className={buttonStyle || 'cursor-pointer py-2 px-2 text-left sm:text-sm flex '}
       >
-        <TextAa
-          className="w-5 h-5 text-grey-800"
-          aria-hidden="true"
-        />
+        {showIcon ? (
+          <TextAa
+            className="w-5 h-5 text-grey-800"
+            aria-hidden="true"
+          />
+        ) : (
+          <span className="self-center justify-self-center">Font</span>
+        )}
       </button>
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog

diff --git a/renderer/src/layouts/editor/EditorSection.js b/renderer/src/layouts/editor/EditorSection.js
@@ -40,14 +40,15 @@ export default function EditorSection({
   setAddingSection,
   font,
   setFont,
+  fontSize,
+  setFontsize,
 }) {
   const [openResourcePopUp, setOpenResourcePopUp] = useState(false);
   const [openModal, setOpenModal] = useState(false);
   const [projectScriptureDir, setProjectScriptureDir] = useState();
   const { t } = useTranslation();
   const {
     state: {
-      fontSize,
       layout,
       openResource1,
       openResource2,
@@ -131,6 +132,15 @@ export default function EditorSection({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [openResourcePopUp, title]);
 
+  const handleFontSize = (status) => {
+    if (status === 'dec' && fontSize > 0.70) {
+      setFontsize(fontSize - 0.2);
+    }
+    if (status === 'inc' && fontSize < 2) {
+      setFontsize(fontSize + 0.2);
+    }
+  };
+
   const addRow = () => {
     if (sectionNum >= 0 && sectionNum < 2) {
       setSectionNum(sectionNum + 1);
@@ -224,7 +234,10 @@ export default function EditorSection({
                     />
                   )}
 
-                    <div className="relative lg:left-72 sm:left-48 sm:ml-2.5 top-4 text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                    <div
+                      className="relative lg:left-72 sm:left-48 sm:ml-2.5 top-4 text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                      title={title}
+                    >
                       {title}
                     </div>
                   </div>
@@ -233,25 +246,61 @@ export default function EditorSection({
                   {scrollLock && title ? (
                     <>
                       {CustomNavigation}
-                      <div className="ml-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                      <div
+                        title={title}
+                        className="ml-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                      >
                         {title}
                       </div>
                     </>
                   ) : (
                     <div className="flex">
                       <div className="py-2 uppercase tracking-wider text-xs font-semibold">
-                        <div className="ml-4 h-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                        <div
+                          title={title}
+                          className="ml-4 h-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                        >
                           {title}
                         </div>
                       </div>
                     </div>
                   )}
                 </>
               )}
-              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible ">
+              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible  pl-2 ite">
+
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center border rounded-md shadow-sm
+                  text-xs h-fit py-1
+                  focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-300 focus:ring-gray-300"
+                >
+                  <div
+                    aria-label="decrease-font"
+                    onClick={() => { handleFontSize('dec'); }}
+                    role="button"
+                    tabIndex="0"
+                    title={t('tooltip-editor-font-dec')}
+                    className="h-5 w-5 hover:text-black font-bold border-r border-gray-200 text-center flex items-center pl-1.5 "
+                  >
+                    {t('label-editor-font-char')}
+                  </div>
+                  <div
+                    aria-label="increase-font"
+                    className="h-5 w-5 hover:text-black font-bold text-lg text-center flex items-center pl-1"
+                    onClick={() => { handleFontSize('inc'); }}
+                    role="button"
+                    title={t('tooltip-editor-font-inc')}
+                    tabIndex="0"
+                  >
+                    {t('label-editor-font-char')}
+                  </div>
+                </button>
+
                 <MenuDropdown
                   selectedFont={font || 'sans-serif'}
                   setSelectedFont={setFont}
+                  showIcon={false}
                 />
                 <button
                   aria-label="resources-selector"