mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-30 13:19:16 +03:00
Code Issues Projects Releases Packages Wiki Activity

Code cleanup on Settings page

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-10 20:48:48 +08:00
parent 4b93d13256
commit 46d5e20008
2 changed files with 148 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/pages/settings.css
View file

@ -4,18 +4,23 @@
animation: fade-in 0.2s ease-out; animation: fade-in 0.2s ease-out;
max-height: 100vh; max-height: 100vh;
overflow: auto; overflow: auto;
position: relative;
} }
#settings-container .close-button { #settings-container .close-button {
float: right; position: absolute;
top: 0;
right: 0;
} }
#settings-container h2 { #settings-container h2 {
margin: 3em 0 1em;
font-size: .9em; font-size: .9em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
} }
#settings-container h2 ~ h2 {
margin-top: 2em;
}
#settings-container ul { #settings-container ul {
margin: 0; margin: 0;

277
src/pages/settings.jsx
View file

@ -24,163 +24,168 @@ export default ({ onClose }) => {
return ( return (
<div id="settings-container" class="box"> <div id="settings-container" class="box">
<div> <button type="button" class="close-button plain large" onClick={onClose}>
<button type="button" class="close-button plain" onClick={onClose}> <Icon icon="x" alt="Close" />
<Icon icon="x" alt="Close" /> </button>
</button> <h2>Accounts</h2>
</div> <ul class="accounts-list">
<div> {accounts.map((account, i) => {
<h2>Accounts</h2> const isCurrent = account.info.id === currentAccount;
<ul class="accounts-list"> const isDefault = i === (currentDefault || 0);
{accounts.map((account, i) => { return (
const isCurrent = account.info.id === currentAccount; <li>
const isDefault = i === (currentDefault || 0); <div>
return ( {moreThanOneAccount && (
<li> <span class={`current ${isCurrent ? 'is-current' : ''}`}>
<Icon icon="check-circle" alt="Current" />
</span>
)}
<Avatar url={account.info.avatarStatic} size="xxl" />
<NameText account={account.info} showAcct />
</div>
<div class="actions">
{isDefault && moreThanOneAccount && (
<>
<span class="tag">Default</span>{' '}
</>
)}
{!isCurrent && (
<button
type="button"
class="light"
onClick={() => {
store.session.set('currentAccount', account.info.id);
location.reload();
}}
>
<Icon icon="transfer" /> Switch
</button>
)}
<div> <div>
{moreThanOneAccount && ( {!isDefault && moreThanOneAccount && (
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
<Icon icon="check-circle" alt="Current" />
</span>
)}
<Avatar url={account.info.avatarStatic} size="xxl" />
<NameText account={account.info} showAcct />
</div>
<div class="actions">
{isDefault && moreThanOneAccount && (
<>
<span class="tag">Default</span>{' '}
</>
)}
{!isCurrent && (
<button <button
type="button" type="button"
class="light" class="plain small"
onClick={() => { onClick={() => {
store.session.set('currentAccount', account.info.id); // Move account to the top of the list
location.reload(); accounts.splice(i, 1);
accounts.unshift(account);
store.local.setJSON('accounts', accounts);
setCurrentDefault(i);
}} }}
> >
<Icon icon="transfer" /> Switch Set as default
</button> </button>
)} )}
<div> {isCurrent && (
{!isDefault && moreThanOneAccount && ( <>
{' '}
<button <button
type="button" type="button"
class="plain small" class="plain small"
onClick={() => { onClick={() => {
// Move account to the top of the list const yes = confirm(
'Are you sure you want to log out?',
);
if (!yes) return;
accounts.splice(i, 1); accounts.splice(i, 1);
accounts.unshift(account);
store.local.setJSON('accounts', accounts); store.local.setJSON('accounts', accounts);
setCurrentDefault(i); location.reload();
}} }}
> >
Set as default Log out
</button> </button>
)} </>
{isCurrent && ( )}
<>
{' '}
<button
type="button"
class="plain small"
onClick={() => {
const yes = confirm(
'Are you sure you want to log out?',
);
if (!yes) return;
accounts.splice(i, 1);
store.local.setJSON('accounts', accounts);
location.reload();
}}
>
Log out
</button>
</>
)}
</div>
</div> </div>
</li> </div>
); </li>
})} );
</ul> })}
{moreThanOneAccount && ( </ul>
<p> {moreThanOneAccount && (
<small> <p>
Note: <i>Default</i> account will always be used for first load. <small>
Switched accounts will persist during the session. Note: <i>Default</i> account will always be used for first load.
</small> Switched accounts will persist during the session.
</p> </small>
)}
<p style={{ textAlign: 'end' }}>
<a href="/#/login" class="button" onClick={onClose}>
Add new account
</a>
</p> </p>
</div> )}
<div> <p style={{ textAlign: 'end' }}>
<h2>Theme</h2> <a href="/#/login" class="button" onClick={onClose}>
<form Add new account
ref={themeFormRef} </a>
onInput={(e) => { </p>
console.log(e); <h2>Theme</h2>
e.preventDefault(); <form
const formData = new FormData(themeFormRef.current); ref={themeFormRef}
const theme = formData.get('theme'); onInput={(e) => {
const html = document.documentElement; console.log(e);
e.preventDefault();
const formData = new FormData(themeFormRef.current);
const theme = formData.get('theme');
const html = document.documentElement;
if (theme === 'auto') { if (theme === 'auto') {
html.classList.remove('is-light', 'is-dark'); html.classList.remove('is-light', 'is-dark');
} else { } else {
html.classList.toggle('is-light', theme === 'light'); html.classList.toggle('is-light', theme === 'light');
html.classList.toggle('is-dark', theme === 'dark'); html.classList.toggle('is-dark', theme === 'dark');
} }
document document
.querySelector('meta[name="color-scheme"]') .querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme); .setAttribute('content', theme);
if (theme === 'auto') { if (theme === 'auto') {
store.local.del('theme'); store.local.del('theme');
} else { } else {
store.local.set('theme', theme); store.local.set('theme', theme);
} }
}} }}
> >
<div class="radio-group"> <div class="radio-group">
<label> <label>
<input <input
type="radio" type="radio"
name="theme" name="theme"
value="light" value="light"
defaultChecked={currentTheme === 'light'} defaultChecked={currentTheme === 'light'}
/> />
<span>Light</span> <span>Light</span>
</label> </label>
<label> <label>
<input <input
type="radio" type="radio"
name="theme" name="theme"
value="dark" value="dark"
defaultChecked={currentTheme === 'dark'} defaultChecked={currentTheme === 'dark'}
/> />
<span>Dark</span> <span>Dark</span>
</label> </label>
<label> <label>
<input <input
type="radio" type="radio"
name="theme" name="theme"
value="auto" value="auto"
defaultChecked={ defaultChecked={
currentTheme !== 'light' && currentTheme !== 'dark' currentTheme !== 'light' && currentTheme !== 'dark'
} }
/> />
<span>Auto</span> <span>Auto</span>
</label> </label>
</div> </div>
</form> </form>
</div> <h2>About</h2>
<p>
<a href="https://github.com/cheeaun/phanpy" target="_blank">
Built
</a>{' '}
by{' '}
<a href="https://mastodon.social/@cheeaun" target="_blank">
@cheeaun
</a>
.
</p>
</div> </div>
); );
}; };