display translate button outside of the menu if detected content lang… (

#390) * display translate button outside of the menu if detected content language is different from user's preferred lang * add config option for inline translate button also reformat the file * move showInlineTranslateButton and change the title --------- Co-authored-by: Aivean <[email protected]>
spaceshelter · Aug 25, 2024 · 9c02b3d · 9c02b3d
1 parent 514bf5c
commit 9c02b3d
Show file tree

Hide file tree

Showing 3 changed files with 282 additions and 176 deletions.
diff --git a/frontend/src/Components/CommentComponent.tsx b/frontend/src/Components/CommentComponent.tsx
@@ -15,6 +15,7 @@ import {useInterpreter} from '../API/use/useInterpreter';
 import OutsideClickHandler from 'react-outside-click-handler';
 import {AltTranslateButton, AnnotateButton, TranslateButton} from './ContentButtons';
 import {InviewContext} from '../Pages/PostPage';
+import {getPreferredLang, getShowInlineTranslateButton} from './UserProfileSettings';
 
 interface CommentProps {
     comment: CommentInfo;
@@ -135,7 +136,7 @@ interface ControlsProps {
     setAltContent: (value: string | undefined) => void;
 }
 
-function Controls({contentRef, comment, setEditingText, hideRating, onEdit, onAnswer, answerOpen, setAnswerOpen, setAltContent}: ControlsProps) {
+function Controls({contentRef, comment, setEditingText, hideRating, onEdit, onAnswer, answerOpen, setAnswerOpen, setAltContent: setCommentAltContent}: ControlsProps) {
     const api = useAPI();
 
     const handleVote = useMemo(() => {
@@ -168,7 +169,10 @@ function Controls({contentRef, comment, setEditingText, hideRating, onEdit, onAn
         e.preventDefault();
         setAnswerOpen(!answerOpen);
     };
-    useEffect(() => setAltContent(altContent), [altContent]);
+    useEffect(() => setCommentAltContent(altContent), [setCommentAltContent, altContent]);
+    const showTranslateButtonInline = useMemo(() => {
+        return getShowInlineTranslateButton() && comment.language !== getPreferredLang();
+    }, [comment]);
 
     return (
       <div className={styles.controls}>
@@ -179,9 +183,9 @@ function Controls({contentRef, comment, setEditingText, hideRating, onEdit, onAn
         {comment.canEdit && onEdit && <div className={styles.control}><button onClick={handleEdit} className='i i-edit' /></div>}
 
         <div className={styles.control + ' ' + postStyles.options}>
-            {currentMode === 'translate' &&
+            {(showTranslateButtonInline || currentMode === 'translate') &&
               <div className={styles.control}>
-                  <TranslateButton iconOnly={true} isActive={true} inProgress={inProgress} onClick={translate} />
+                  <TranslateButton iconOnly={true} isActive={currentMode === 'translate'} inProgress={inProgress} onClick={translate} />
               </div>}
             {currentMode === 'altTranslate' &&
               <div className={styles.control}>
@@ -196,7 +200,7 @@ function Controls({contentRef, comment, setEditingText, hideRating, onEdit, onAn
             {showOptions &&
               <OutsideClickHandler onOutsideClick={() => setShowOptions(false)}>
                   <div className={postStyles.optionsList}>
-                      <TranslateButton inProgress={inProgress} onClick={() => {setShowOptions(false);translate();}} isActive={currentMode === 'translate'} />
+                      {!showTranslateButtonInline && <TranslateButton inProgress={inProgress} onClick={() => {setShowOptions(false);translate();}} isActive={currentMode === 'translate'} />}
                       {calcShowAltTranslate() &&
                         <AltTranslateButton inProgress={inProgress} onClick={() => {setShowOptions(false);altTranslate();}} isActive={currentMode === 'altTranslate'}/>}
                       {calcShowAnnotate() &&

diff --git a/frontend/src/Components/PostComponent.tsx b/frontend/src/Components/PostComponent.tsx
@@ -17,6 +17,7 @@ import {SignatureComponent} from './SignatureComponent';
 import Conf from '../Conf';
 import {useInterpreter} from '../API/use/useInterpreter';
 import {AltTranslateButton, AnnotateButton, TranslateButton, UnwatchButton, WatchButton} from './ContentButtons';
+import {getPreferredLang, getShowInlineTranslateButton} from './UserProfileSettings';
 
 interface PostComponentProps {
     post: PostInfo;
@@ -135,6 +136,9 @@ export default function PostComponent(props: PostComponentProps) {
 
     const altMode = currentMode !== undefined || inProgress;
     const autoCut = altMode ? undefined : props.autoCut;
+    const showTranslateButtonInline = useMemo(() => {
+        return getShowInlineTranslateButton() && props.post.language !== getPreferredLang();
+    }, [props.post]);
 
     return (
         <div className={'postComponent ' + styles.post} ref={contentRef}>
@@ -172,9 +176,9 @@ export default function PostComponent(props: PostComponentProps) {
                 {/*<div className={styles.control}><button disabled={true} onClick={toggleBookmark} className={bookmark ? styles.active : ''}><BookmarkIcon /><span className={styles.label}></span></button></div>*/}
                 {props.post.canEdit && props.onEdit && <div className={styles.control}><button onClick={handleEdit}><EditIcon /></button></div>}
                 <div className={styles.control + ' ' + styles.options}>
-                    {currentMode === 'translate' &&
+                    {(showTranslateButtonInline || currentMode === 'translate') &&
                         <div className={styles.control}>
-                            <TranslateButton iconOnly={true} isActive={true} inProgress={inProgress} onClick={translate}/>
+                            <TranslateButton iconOnly={true} isActive={currentMode === 'translate'} inProgress={inProgress} onClick={translate}/>
                         </div>}
                     {currentMode === 'altTranslate' &&
                         <div className={styles.control}>
@@ -189,7 +193,7 @@ export default function PostComponent(props: PostComponentProps) {
                     {showOptions &&
                         <OutsideClickHandler onOutsideClick={() => setShowOptions(false)}>
                         <div className={styles.optionsList}>
-                            <TranslateButton className={styles.control} inProgress={inProgress} onClick={() => {setShowOptions(false);translate();}} isActive={currentMode === 'translate'} />
+                            {!showTranslateButtonInline && <TranslateButton className={styles.control} inProgress={inProgress} onClick={() => {setShowOptions(false);translate();}} isActive={currentMode === 'translate'} />}
                             {calcShowAltTranslate() &&
                                 <AltTranslateButton className={styles.control} inProgress={inProgress} onClick={() => {setShowOptions(false);altTranslate();}} isActive={currentMode === 'altTranslate'}/>}
                             {calcShowAnnotate() &&