External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: add translations

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-22 10:32:19 +02:00
parent b9e6b19476
commit 1a22ac5068
40 changed files with 637 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+12 -10
View File
@@ -93,7 +93,7 @@ const SortOptions = () => {
return (
<>
<span className='capitalize'>{t('sort_by')}</span>:&nbsp;
<select value={sortType} onChange={handleSortChange}>
<select className='capitalize' value={sortType} onChange={handleSortChange}>
<option value='active'>{t('bump_order')}</option>
<option value='new'>{t('creation_date')}</option>
</select>
@@ -102,28 +102,30 @@ const SortOptions = () => {
};
const ImageSizeOptions = () => {
const { t } = useTranslation();
const { imageSize, setImageSize } = useCatalogStyleStore();
return (
<>
<span>Image Size:</span>&nbsp;
<select value={imageSize} onChange={(e) => setImageSize(e.target.value as 'Small' | 'Large')}>
<option value='Small'>Small</option>
<option value='Large'>Large</option>
<span className='capitalize'>{t('image_size')}:</span>&nbsp;
<select className='capitalize' value={imageSize} onChange={(e) => setImageSize(e.target.value as 'Small' | 'Large')}>
<option value='Small'>{t('small')}</option>
<option value='Large'>{t('large')}</option>
</select>
</>
);
};
const ShowOPCommentOption = () => {
const { t } = useTranslation();
const { showOPComment, setShowOPComment } = useCatalogStyleStore();
return (
<>
<span>Show OP Comment:</span>&nbsp;
<select value={showOPComment ? 'On' : 'Off'} onChange={(e) => setShowOPComment(e.target.value === 'On')}>
<option value='Off'>Off</option>
<option value='On'>On</option>
<span className='capitalize'>{t('show_op_comment')}:</span>&nbsp;
<select className='capitalize' value={showOPComment ? 'On' : 'Off'} onChange={(e) => setShowOPComment(e.target.value === 'On')}>
<option value='Off'>{t('off')}</option>
<option value='On'>{t('on')}</option>
</select>
</>
);
@@ -159,7 +161,7 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
) : (
<> </>
)}
<select onChange={changeTimeFilter} className={[styles.feedName, styles.menuItem].join(' ')} value={selectedTimeFilterName}>
<select onChange={changeTimeFilter} className={[styles.feedName, styles.menuItem, 'capitalize'].join(' ')} value={selectedTimeFilterName}>
{timeFilterNames.map((timeFilterName, i) => (
<option key={timeFilterName + i} value={timeFilterName}>
{timeFilterName}
src/components/settings-modal/plebbit-options/plebbit-options.tsx
+3 -1
View File
@@ -1,5 +1,6 @@
import { RefObject, useRef, useState } from 'react';
import { setAccount, useAccount, usePlebbitRpcSettings } from '@plebbit/plebbit-react-hooks';
import { useTranslation } from 'react-i18next';
import styles from './plebbit-options.module.css';
interface SettingsProps {
@@ -134,6 +135,7 @@ const NodeDataPathSettings = ({ nodeDataPathRef }: SettingsProps) => {
};
const PlebbitOptions = () => {
const { t } = useTranslation();
const account = useAccount();
const { plebbitOptions } = account || {};
@@ -204,7 +206,7 @@ const PlebbitOptions = () => {
return (
<div className={styles.content}>
<button className={styles.saveOptions} onClick={handleSave}>
save options
{t('save_options')}
</button>
<div className={styles.category}>
<span className={styles.categoryTitle}>IPFS gateways:</span>
src/views/catalog/catalog-filters/catalog-filters.tsx
+4 -3
View File
@@ -23,9 +23,9 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
</div>
<div className={styles.filters}>
{isInCatalogView && (
<label className={styles.paddingBottom}>
<label className={`${styles.paddingBottom} capitalize`}>
<input type='checkbox' checked={showTextOnlyThreads} onChange={(e) => setShowTextOnlyThreads(e.target.checked)} />
Hide Threads Without Images
{t('hide_threads_without_images')}
</label>
)}
{isInAllView && (
@@ -48,6 +48,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
};
const CatalogFilters = () => {
const { t } = useTranslation();
const [showModal, setShowModal] = useState(false);
const closeModal = () => {
@@ -57,7 +58,7 @@ const CatalogFilters = () => {
return (
<>
<span className='button' onClick={() => setShowModal(true)}>
Filters
{t('filters')}
</span>
{showModal && <FiltersModal closeModal={closeModal} />}
</>
src/views/home/boards-box/boards-box.tsx
+1 -133
View File
@@ -1,4 +1,3 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Subplebbit, useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
@@ -7,138 +6,7 @@ import useHomeFiltersStore from '../../../stores/use-home-filters-store';
import { useMultisubMetadata } from '../../../hooks/use-default-subplebbits';
import styles from '../home.module.css';
import { nsfwTags } from '../home';
const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
const { t } = useTranslation();
const [showFilterModal, setShowFilterModal] = useState(false);
const modalRef = useRef<HTMLDivElement>(null);
const {
showNsfwBoardsOnly,
setShowNsfwBoardsOnly,
showWorksafeBoardsOnly,
setShowWorksafeBoardsOnly,
useCatalog,
setUseCatalog,
showWorksafeContentOnly,
setShowWorksafeContentOnly,
showNsfwContentOnly,
setShowNsfwContentOnly,
} = useHomeFiltersStore();
const handleClickOutside = useCallback(
(event: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
setShowFilterModal(false);
}
},
[modalRef, setShowFilterModal],
);
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [handleClickOutside]);
return (
<>
<span ref={modalRef} onClick={() => setShowFilterModal(true)}>
{isBoardsBoxModal ? t('filter') : t('options')} ▼
</span>
{showFilterModal && (
<div ref={modalRef} className={styles.filterModal}>
{isBoardsBoxModal ? (
<>
<div
className={`${styles.option} ${!showNsfwBoardsOnly && !showWorksafeBoardsOnly && styles.selected}`}
onClick={() => {
setShowNsfwBoardsOnly(false);
setShowWorksafeBoardsOnly(false);
setShowFilterModal(false);
}}
>
Show All Boards
</div>
<div
className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
onClick={() => {
if (showWorksafeBoardsOnly) {
setShowWorksafeBoardsOnly(false);
}
setShowNsfwBoardsOnly(!showNsfwBoardsOnly);
setShowFilterModal(false);
}}
>
Show NSFW Boards Only
</div>
<div
className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
onClick={() => {
if (showNsfwBoardsOnly) {
setShowNsfwBoardsOnly(false);
}
setShowWorksafeBoardsOnly(!showWorksafeBoardsOnly);
setShowFilterModal(false);
}}
>
Show Worksafe Boards Only
</div>
<div className={styles.separator} />
<div
className={`${styles.option} ${useCatalog && styles.selected}`}
onClick={() => {
setUseCatalog(!useCatalog);
setShowFilterModal(false);
}}
>
Use Catalog
</div>
</>
) : (
<>
<div
className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
onClick={() => {
if (showNsfwContentOnly) {
setShowNsfwContentOnly(false);
}
setShowWorksafeContentOnly(!showWorksafeContentOnly);
setShowFilterModal(false);
}}
>
Show Worksafe Content Only
</div>
<div
className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
onClick={() => {
if (showWorksafeContentOnly) {
setShowWorksafeContentOnly(false);
}
setShowNsfwContentOnly(!showNsfwContentOnly);
setShowFilterModal(false);
}}
>
Show NSFW Content Only
</div>
<div
className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
onClick={() => {
setShowWorksafeContentOnly(false);
setShowNsfwContentOnly(false);
setShowFilterModal(false);
}}
>
Show All Content
</div>
</>
)}
</div>
)}
</>
);
};
import BoxModal from '../box-modal';
const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subplebbit }) => {
const { t } = useTranslation();
src/views/home/box-modal/box-modal.tsx
+7 -7
View File
@@ -54,7 +54,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Show All Boards
{t('show_all_boards')}
</div>
<div
className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
@@ -66,7 +66,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Show NSFW Boards Only
{t('show_nsfw_boards_only')}
</div>
<div
className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
@@ -78,7 +78,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Show Worksafe Boards Only
{t('show_worksafe_boards_only')}
</div>
<div className={styles.separator} />
<div
@@ -88,7 +88,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Use Catalog
{t('use_catalog')}
</div>
</>
) : (
@@ -103,7 +103,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Show Worksafe Content Only
{t('show_worksafe_content_only')}
</div>
<div
className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
@@ -115,7 +115,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Show NSFW Content Only
{t('show_nsfw_content_only')}
</div>
<div
className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
@@ -125,7 +125,7 @@ const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
setShowFilterModal(false);
}}
>
Show All Content
{t('show_all_content')}
</div>
</>
)}