mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add settings translations, assets, styling
This commit is contained in:
plebeius.eth
@@ -4,24 +4,28 @@
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.settingsModal {
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
top: 25px;
|
||||
width: 394px;
|
||||
height: auto;
|
||||
max-height: 80%;
|
||||
left: calc(50% - 25px);
|
||||
left: calc(50% - 22px);
|
||||
overflow-y: auto;
|
||||
margin-left: -178px;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
padding: 2px 5px 5px;
|
||||
padding: 2px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
|
||||
background-color: var(--settings-modal-background-color);
|
||||
border-top: var(--settings-modal-border-top);
|
||||
border-right: var(--settings-modal-border-right);
|
||||
border-bottom: var(--settings-modal-border-bottom);
|
||||
border-left: var(--settings-modal-border-left);
|
||||
}
|
||||
|
||||
.settingsModal select {
|
||||
@@ -78,6 +82,44 @@
|
||||
|
||||
.setting {
|
||||
margin-bottom: 8px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hideButton, .showButton {
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: inline-block;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.hideButton {
|
||||
background-image: var(--settings-modal-hide-button-background-image);
|
||||
}
|
||||
|
||||
.showButton {
|
||||
background-image: var(--settings-modal-show-button-background-image);
|
||||
}
|
||||
|
||||
.category {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.category label {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.checkForUpdatesButton {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.setting, .category {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import styles from './settings-modal.module.css';
|
||||
import useTheme from '../../hooks/use-theme';
|
||||
import packageJson from '../../../package.json';
|
||||
import { useAccount } from '@plebbit/plebbit-react-hooks';
|
||||
|
||||
const commitRef = process.env.REACT_APP_COMMIT_REF;
|
||||
const isElectron = window.isElectron === true;
|
||||
@@ -57,12 +58,9 @@ const CheckForUpdates = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.checkForUpdates}>
|
||||
{/* <Trans i18nKey='check_for_updates' components={{ 1: <button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading} /> }} /> */}
|
||||
<button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading}>
|
||||
{t('check_for_updates')}
|
||||
</button>
|
||||
</div>
|
||||
<button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading}>
|
||||
{t('check')}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -105,6 +103,29 @@ const InterfaceLanguage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const AccountSettings = () => {
|
||||
const account = useAccount();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.setting}>{account ? account.username : 'Not logged in'}test</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PlebbitOptionsSettings = () => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.setting}>
|
||||
<label>
|
||||
<input type='checkbox' />
|
||||
Show NSFW content
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SettingsModal = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
@@ -113,6 +134,9 @@ const SettingsModal = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const [showAccountSettings, setShowAccountSettings] = useState(false);
|
||||
const [showPlebbitOptionsSettings, setShowPlebbitOptionsSettings] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.overlay} onClick={closeModal}></div>
|
||||
@@ -132,14 +156,28 @@ const SettingsModal = () => {
|
||||
<span className={styles.closeButton} title='close' onClick={closeModal} />
|
||||
</div>
|
||||
<div className={styles.setting}>
|
||||
<CheckForUpdates />
|
||||
{t('update')}: <CheckForUpdates />
|
||||
</div>
|
||||
<div className={styles.setting}>
|
||||
Style: <Style />
|
||||
{t('style')}: <Style />
|
||||
</div>
|
||||
<div className={styles.setting}>
|
||||
Interface Language: <InterfaceLanguage />
|
||||
{t('interface_language')}: <InterfaceLanguage />
|
||||
</div>
|
||||
<div className={`${styles.setting} ${styles.category}`}>
|
||||
<label onClick={() => setShowAccountSettings(!showAccountSettings)}>
|
||||
<span className={showAccountSettings ? styles.hideButton : styles.showButton} />
|
||||
Account
|
||||
</label>
|
||||
</div>
|
||||
{showAccountSettings && <AccountSettings />}
|
||||
<div className={`${styles.setting} ${styles.category}`}>
|
||||
<label onClick={() => setShowPlebbitOptionsSettings(!showPlebbitOptionsSettings)}>
|
||||
<span className={showPlebbitOptionsSettings ? styles.hideButton : styles.showButton} />
|
||||
Plebbit Options
|
||||
</label>
|
||||
</div>
|
||||
{showPlebbitOptionsSettings && <PlebbitOptionsSettings />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
+54
-18
@@ -91,8 +91,8 @@
|
||||
--post-capcode-mod-text-color: purple;
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/plus-red.png");
|
||||
--post-subject-text-color: #cc1105;
|
||||
--post-subject-font-weight: 700;
|
||||
--post-name-text-color: #117743;
|
||||
@@ -100,7 +100,7 @@
|
||||
--post-menu-button-color: #000080;
|
||||
--post-menu-button-color-hover: red;
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
|
||||
|
||||
/* post mobile */
|
||||
--post-mobile-background-color: #f5e9e1;
|
||||
@@ -153,7 +153,13 @@
|
||||
/* settings modal */
|
||||
--settings-modal-background-color: #f0e0d6;
|
||||
--settings-modal-header-border-bottom: 1px solid #d9bfb7;
|
||||
--settings-modal-border-top: none;
|
||||
--settings-modal-border-right: 1px solid #d9bfb7;
|
||||
--settings-modal-border-bottom: 1px solid #d9bfb7;
|
||||
--settings-modal-border-left: none;
|
||||
--settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png");
|
||||
--settings-modal-show-button-background-image: url("/public/assets/buttons/plus-red.png");
|
||||
--settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
|
||||
|
||||
/* stats */
|
||||
--stats-font-size: 11px;
|
||||
@@ -253,8 +259,8 @@
|
||||
--post-capcode-mod-text-color: purple;
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/plus-blue.png");
|
||||
--post-subject-text-color: #0f0c5d;
|
||||
--post-subject-font-weight: 700;
|
||||
--post-name-text-color: #117743;
|
||||
@@ -262,7 +268,7 @@
|
||||
--post-menu-button-color: #34345c;
|
||||
--post-menu-button-color-hover: #d00;
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
|
||||
|
||||
/* post form */
|
||||
--post-form-toggle-font-size: 22px;
|
||||
@@ -313,8 +319,14 @@
|
||||
|
||||
/* settings modal */
|
||||
--settings-modal-background-color: #d6daf0;
|
||||
--settings-modal-border-top: none;
|
||||
--settings-modal-border-right: 1px solid #b7c5d9;
|
||||
--settings-modal-border-bottom: 1px solid #b7c5d9;
|
||||
--settings-modal-border-left: none;
|
||||
--settings-modal-header-border-bottom: 1px solid #b7c5d9;
|
||||
--settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png");
|
||||
--settings-modal-show-button-background-image: url("/public/assets/buttons/plus-blue.png");
|
||||
--settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
|
||||
|
||||
/* stats */
|
||||
--stats-font-size: 11px;
|
||||
@@ -391,8 +403,8 @@
|
||||
--post-capcode-mod-text-color: purple;
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/plus-red.png");
|
||||
--post-subject-text-color: #cc1105;
|
||||
--post-subject-font-weight: 700;
|
||||
--post-name-text-color: #117743;
|
||||
@@ -400,7 +412,7 @@
|
||||
--post-menu-button-color: #000080;
|
||||
--post-menu-button-color-hover: red;
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
|
||||
|
||||
/* post form */
|
||||
--post-form-toggle-font-size: 22px;
|
||||
@@ -441,8 +453,14 @@
|
||||
|
||||
/* settings modal */
|
||||
--settings-modal-background-color: #f0e0d6;
|
||||
--settings-modal-border-top: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-border-right: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-border-left: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2);
|
||||
--settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png");
|
||||
--settings-modal-show-button-background-image: url("/public/assets/buttons/plus-red.png");
|
||||
--settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-red.png");
|
||||
|
||||
/* stats */
|
||||
--stats-font-size: 10pt;
|
||||
@@ -533,8 +551,8 @@
|
||||
--post-capcode-mod-text-color: purple;
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/plus-blue.png");
|
||||
--post-subject-text-color: #0f0c5d;
|
||||
--post-subject-font-weight: 700;
|
||||
--post-name-text-color: #117743;
|
||||
@@ -542,7 +560,7 @@
|
||||
--post-menu-button-color: #34345c;
|
||||
--post-menu-button-color-hover: #d00;
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
|
||||
|
||||
/* post form */
|
||||
--post-form-toggle-font-size: 22px;
|
||||
@@ -583,8 +601,14 @@
|
||||
|
||||
/* settings modal */
|
||||
--settings-modal-background-color: #d6daf0;
|
||||
--settings-modal-border-top: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-border-right: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-border-left: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2);
|
||||
--settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png");
|
||||
--settings-modal-show-button-background-image: url("/public/assets/buttons/plus-blue.png");
|
||||
--settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-blue.png");
|
||||
|
||||
/* stats */
|
||||
--stats-font-size: 10pt;
|
||||
@@ -676,8 +700,8 @@
|
||||
--post-capcode-mod-text-color: #81a2be;
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-dark.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/minus-dark.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/plus-dark.png");
|
||||
--post-subject-text-color: #b294bb;
|
||||
--post-subject-font-weight: 700;
|
||||
--post-name-text-color: #c5c8c6;
|
||||
@@ -685,7 +709,7 @@
|
||||
--post-menu-button-color: #5F89AC;
|
||||
--post-menu-button-color-hover: #81a2be;
|
||||
--post-greentext-color: #b5bd68;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/plus-dark.png");
|
||||
|
||||
/* post form */
|
||||
--post-form-toggle-font-size: 22px;
|
||||
@@ -746,8 +770,14 @@
|
||||
|
||||
/* settings modal */
|
||||
--settings-modal-background-color: #282a2e;
|
||||
--settings-modal-border-top: 1px solid #111;
|
||||
--settings-modal-border-right: 1px solid #111;
|
||||
--settings-modal-border-bottom: 1px solid #111;
|
||||
--settings-modal-border-left: 1px solid #111;
|
||||
--settings-modal-header-border-bottom: 1px solid #111;
|
||||
--settings-modal-close-button-background-image: url("/public/assets/buttons/cross-dark.png");
|
||||
--settings-modal-show-button-background-image: url("/public/assets/buttons/plus-dark.png");
|
||||
--settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-dark.png");
|
||||
|
||||
/* stats */
|
||||
--stats-font-size: 11px;
|
||||
@@ -826,8 +856,8 @@
|
||||
--post-capcode-mod-text-color: #f60;
|
||||
|
||||
/* post desktop */
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-photon.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");
|
||||
--post-hide-button-background-image: url("/public/assets/buttons/minus-photon.png");
|
||||
--post-unhide-button-background-image: url("/public/assets/buttons/plus-photon.png");
|
||||
--post-subject-text-color: #111;
|
||||
--post-subject-font-weight: 700;
|
||||
--post-name-text-color: #004a99;
|
||||
@@ -835,7 +865,7 @@
|
||||
--post-menu-button-color: #FF6600;
|
||||
--post-menu-button-color-hover: #FF3300;
|
||||
--post-greentext-color: #789922;
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");
|
||||
--post-replies-expand-button-background-image: url("/public/assets/buttons/plus-photon.png");
|
||||
|
||||
/* post mobile */
|
||||
--post-mobile-background-color: #eee;
|
||||
@@ -889,8 +919,14 @@
|
||||
|
||||
/* settings modal */
|
||||
--settings-modal-background-color: #ddd;
|
||||
--settings-modal-border-top: 1px solid #ccc;
|
||||
--settings-modal-border-right: 1px solid #ccc;
|
||||
--settings-modal-border-bottom: 1px solid #ccc;
|
||||
--settings-modal-border-left: 1px solid #ccc;
|
||||
--settings-modal-header-border-bottom: 1px solid rgba(0, 0, 0, 0.20);
|
||||
--settings-modal-close-button-background-image: url("/public/assets/buttons/cross-photon.png");
|
||||
--settings-modal-show-button-background-image: url("/public/assets/buttons/plus-photon.png");
|
||||
--settings-modal-hide-button-background-image: url("/public/assets/buttons/minus-photon.png");
|
||||
|
||||
/* stats */
|
||||
--stats-font-size: 11px;
|
||||
|
||||
Reference in New Issue
Block a user