Skip to content

Commit

Permalink
general font change for all resource and editor seperate change option
Browse files Browse the repository at this point in the history
  • Loading branch information
@sijumoncy
sijumoncy committed May 29, 2024
1 parent c51fe26 commit 5818a59
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 29 deletions.
6 changes: 3 additions & 3 deletions renderer/src/components/EditorPage/TextEditor/Editor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function Editor(props) {

const {
state: {
chapter, selectedFont, fontSize, projectScriptureDir,
chapter, selectedFont, editorFontSize, projectScriptureDir,
},
} = useContext(ReferenceContext);

Expand Down Expand Up @@ -166,8 +166,8 @@ export default function Editor(props) {
id="fulleditor"
style={{
fontFamily: selectedFont || 'sans-serif',
fontSize: `${fontSize}rem`,
lineHeight: (fontSize > 1.3) ? 1.5 : '',
fontSize: `${editorFontSize}rem`,
lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
}}
className="border-l-2 border-r-2 border-secondary pb-16 overflow-auto h-full scrollbars-width leading-8"
Expand Down
45 changes: 44 additions & 1 deletion renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ProjectContext } from '@/components/context/ProjectContext';
import MenuDropdown from '@/components/MenuDropdown/MenuDropdown';
import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/outline';
// import BibleNavigationX from '@/components/EditorPage/TextEditor/BibleNavigationX';
import { useTranslation } from 'react-i18next';
import BibleNavigationX from './BibleNavigationX';
import Buttons from './Buttons';
import InsertMenu from './InsertMenu';
Expand All @@ -17,16 +18,29 @@ export default function EditorMenuBar(props) {
setVerseNumber,
handleSelectedFont,
setTriggerVerseInsert,
setEditorFontSize,
editorFontSize,
} = props;

const { t } = useTranslation();

const {
states: { scrollLock },
actions: { setScrollLock },
} = useContext(ProjectContext);

const handleFontSize = (status) => {
if (status === 'dec' && editorFontSize > 0.70) {
setEditorFontSize(editorFontSize - 0.2);
}
if (status === 'inc' && editorFontSize < 2) {
setEditorFontSize(editorFontSize + 0.2);
}
};

return (
<div className="relative min-h-[66px] flex flex-col bg-secondary rounded-t-md overflow-hidden">
<div className="flex min-h-[33px] items-center justify-between ">
<div className="flex min-h-[33px] items-center justify-between gap-2">
<BibleNavigationX
chapterNumber={chapterNumber}
setChapterNumber={setChapterNumber}
Expand All @@ -39,6 +53,35 @@ export default function EditorMenuBar(props) {
>
Editor
</div>

<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 text-gray-300 hover:text-white 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-white font-bold text-lg text-center flex items-center pl-1 text-gray-300"
onClick={() => { handleFontSize('inc'); }}
role="button"
title={t('tooltip-editor-font-inc')}
tabIndex="0"
>
{t('label-editor-font-char')}
</div>
</button>

<div
title="navigation lock/unlock"
className="flex items-center mr-auto"
Expand Down
12 changes: 6 additions & 6 deletions renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function ReferenceScribex(props) {
const { state, actions } = useContext(ScribexContext);
const { verbose } = state;
const {
usfmData, bookAvailable, refName, bookId, scrollLock, font,
usfmData, bookAvailable, refName, bookId, scrollLock, font, fontSize,
} = props;
const [selectedBook, setSelectedBook] = useState();
const [bookChange, setBookChange] = useState(false);
Expand All @@ -24,11 +24,11 @@ export default function ReferenceScribex(props) {
newStateId,
documents: usfmData,
});
const {
state: {
fontSize,
},
} = useContext(ReferenceContext);
// const {
// state: {

// },
// } = useContext(ReferenceContext);

useEffect(() => {
setSelectedBook(bookId.toUpperCase());
Expand Down
10 changes: 7 additions & 3 deletions renderer/src/components/EditorPage/TextEditor/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@ export default function TextEditor() {
const { usfmData, bookAvailable } = useReadUsfmFile();

const {
state: { bookId, selectedFont },
actions: { handleSelectedFont, onChangeChapter, onChangeVerse },
state: { bookId, selectedFont, editorFontSize },
actions: {
handleSelectedFont, onChangeChapter, onChangeVerse, setEditorFontSize,
},
} = useContext(ReferenceContext);

const {
Expand Down Expand Up @@ -59,7 +61,7 @@ export default function TextEditor() {
useEffect(() => {
onChangeChapter(chapterNumber, 1);
onChangeVerse(verseNumber, 1);
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chapterNumber, verseNumber]);

const { catalog } = useCatalog({ proskomma, stateId, verbose });
Expand Down Expand Up @@ -94,13 +96,15 @@ export default function TextEditor() {
...perfState,
...actions,
...perfActions,
editorFontSize,
selectedFont,
chapterNumber,
verseNumber,
isLoading,
bookName,
bookChange,
bookAvailable,
setEditorFontSize,
setBookChange,
setChapterNumber,
setVerseNumber,
Expand Down
33 changes: 21 additions & 12 deletions renderer/src/layouts/editor/SubMenuBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,24 @@ export default function SubMenuBar() {
row,
// openResource1,
// openResource3,
fontSize1,
fontSize2,
fontSize3,
fontSize4,

},
actions: {
setOpenResource1,
setOpenResource3,
setLayout,
setRow,
setFontsize1,
setFontsize2,
setFontsize3,
setFontsize4,
},
} = useContext(ReferenceContext);

const {
states: {
editorSave,
Expand Down Expand Up @@ -128,20 +137,20 @@ export default function SubMenuBar() {
supabaseResourceType();
}
});
const {
state: {
fontSize,
},
actions: {
setFontsize,
},
} = useContext(ReferenceContext);

// All Panel together
const handleFontSize = (status) => {
if (status === 'dec' && fontSize > 0.70) {
setFontsize(fontSize - 0.2);
if (status === 'dec') {
fontSize1 > 0.70 && setFontsize1(fontSize1 - 0.2);
fontSize2 > 0.70 && setFontsize2(fontSize2 - 0.2);
fontSize3 > 0.70 && setFontsize3(fontSize3 - 0.2);
fontSize4 > 0.70 && setFontsize4(fontSize4 - 0.2);
}
if (status === 'inc' && fontSize < 2) {
setFontsize(fontSize + 0.2);
if (status === 'inc') {
fontSize1 < 2 && setFontsize1(fontSize1 + 0.2);
fontSize2 < 2 && setFontsize2(fontSize2 + 0.2);
fontSize3 < 2 && setFontsize3(fontSize3 + 0.2);
fontSize4 < 2 && setFontsize4(fontSize4 + 0.2);
}
};
return (
Expand Down
45 changes: 41 additions & 4 deletions renderer/src/modules/editor/Editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function Editor({
const {
state: {
selectedFont,
fontSize,
editorFontSize,
bookmarksVerses,
bookName,
chapter,
Expand All @@ -43,6 +43,7 @@ export default function Editor({
setBookmarksVerses,
setObsNavigation,
handleSelectedFont,
setEditorFontSize,
},
} = useContext(ReferenceContext);
const [bookMarked, setBookMarks] = useState(false);
Expand All @@ -52,6 +53,15 @@ export default function Editor({
setScrollLock(!scrollLock);
};

const handleFontSize = (status) => {
if (status === 'dec' && editorFontSize > 0.70) {
setEditorFontSize(editorFontSize - 0.2);
}
if (status === 'inc' && editorFontSize < 2) {
setEditorFontSize(editorFontSize + 0.2);
}
};

useEffect(() => {
if (((bookmarksVerses?.find((x) => x.bookname === bookName && x.chapter === chapter)
!== undefined))) {
Expand Down Expand Up @@ -148,7 +158,34 @@ export default function Editor({
<div aria-label="editor-pane" className="h-4 flex flex-1 justify-center text-white text-xxs uppercase tracking-wider font-bold leading-3 truncate">
{t('label-editor-pane')}
</div>
<div className="flex ml-auto">
<div className="flex ml-auto items-center gap-4">
<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 text-gray-300 hover:text-white 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-white font-bold text-lg text-center flex items-center pl-1 text-gray-300"
onClick={() => { handleFontSize('inc'); }}
role="button"
title={t('tooltip-editor-font-inc')}
tabIndex="0"
>
{t('label-editor-font-char')}
</div>
</button>
<MenuDropdown selectedFont={selectedFont || 'sans-serif'} setSelectedFont={handleSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
{/* <InsertMenu handleClick={handleClick} selectedText={selectedText} /> */}
</div>
Expand Down Expand Up @@ -183,8 +220,8 @@ export default function Editor({
<div
style={{
fontFamily: selectedFont || 'sans-serif',
fontSize: `${fontSize}rem`,
lineHeight: (fontSize > 1.3) ? 1.5 : '',
fontSize: `${editorFontSize}rem`,
lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
}}
aria-label="editor"
Expand Down

0 comments on commit 5818a59

Please sign in to comment.