Restyle settings sheet

This commit is contained in:
Lim Chee Aun 2023-01-17 17:58:04 +08:00
parent d0880f5c56
commit a87b95ed18
2 changed files with 228 additions and 189 deletions

View file

@ -1,12 +1,28 @@
#settings-container {
background-color: var(--bg-faded-color);
}
#settings-container h2 {
font-size: 0.9em;
font-size: 85%;
text-transform: uppercase;
color: var(--text-insignificant-color);
font-weight: normal;
}
#settings-container h2 ~ h2 {
margin-top: 2em;
}
#settings-container :is(section, .section) {
background-color: var(--bg-color);
margin: 0 -16px;
padding: 8px 16px;
border-top: var(--hairline-width) solid var(--outline-color);
border-bottom: var(--hairline-width) solid var(--outline-color);
}
#settings-container :is(section, .section) > li + li {
border-top: var(--hairline-width) solid var(--outline-color);
}
#settings-container ul {
margin: 0;
padding: 0;
@ -82,3 +98,10 @@
#settings-container .radio-group label:has(input:checked) input:checked + span {
color: inherit;
}
@media (min-width: 40em) {
#settings-container :is(section, .section) {
margin-inline: 0;
border-radius: 8px;
}
}

View file

@ -33,218 +33,234 @@ function Settings({ onClose }) {
<Icon icon="x" alt="Close" />
</button> */}
<h2>Accounts</h2>
<ul class="accounts-list">
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
const isDefault = i === (currentDefault || 0);
return (
<li>
<div>
{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
onClick={() => {
states.showAccount = `${account.info.username}@${account.instanceURL}`;
}}
/>
</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>
)}
<section>
<ul class="accounts-list">
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
const isDefault = i === (currentDefault || 0);
return (
<li>
<div>
{!isDefault && moreThanOneAccount && (
{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
onClick={() => {
states.showAccount = `${account.info.username}@${account.instanceURL}`;
}}
/>
</div>
<div class="actions">
{isDefault && moreThanOneAccount && (
<>
<span class="tag">Default</span>{' '}
</>
)}
{!isCurrent && (
<button
type="button"
class="plain small"
class="light"
onClick={() => {
// Move account to the top of the list
accounts.splice(i, 1);
accounts.unshift(account);
store.local.setJSON('accounts', accounts);
setCurrentDefault(i);
store.session.set('currentAccount', account.info.id);
location.reload();
}}
>
Set as default
<Icon icon="transfer" /> Switch
</button>
)}
{isCurrent && (
<>
{' '}
<div>
{!isDefault && moreThanOneAccount && (
<button
type="button"
class="plain small"
onClick={() => {
const yes = confirm(
'Are you sure you want to log out?',
);
if (!yes) return;
// Move account to the top of the list
accounts.splice(i, 1);
accounts.unshift(account);
store.local.setJSON('accounts', accounts);
location.reload();
setCurrentDefault(i);
}}
>
Log out
Set as default
</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>
);
})}
</ul>
{moreThanOneAccount && (
<p>
<small>
Note: <i>Default</i> account will always be used for first load.
Switched accounts will persist during the session.
</small>
</li>
);
})}
</ul>
{moreThanOneAccount && (
<p>
<small>
Note: <i>Default</i> account will always be used for first load.
Switched accounts will persist during the session.
</small>
</p>
)}
<p style={{ textAlign: 'end' }}>
<a href="/#/login" class="button" onClick={onClose}>
Add new account
</a>
</p>
)}
<p style={{ textAlign: 'end' }}>
<a href="/#/login" class="button" onClick={onClose}>
Add new account
</a>
</p>
<h2>Theme</h2>
<form
ref={themeFormRef}
onInput={(e) => {
console.log(e);
e.preventDefault();
const formData = new FormData(themeFormRef.current);
const theme = formData.get('theme');
const html = document.documentElement;
if (theme === 'auto') {
html.classList.remove('is-light', 'is-dark');
} else {
html.classList.toggle('is-light', theme === 'light');
html.classList.toggle('is-dark', theme === 'dark');
}
document
.querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme);
if (theme === 'auto') {
store.local.del('theme');
} else {
store.local.set('theme', theme);
}
}}
>
<div class="radio-group">
<label>
<input
type="radio"
name="theme"
value="light"
defaultChecked={currentTheme === 'light'}
/>
<span>Light</span>
</label>
<label>
<input
type="radio"
name="theme"
value="dark"
defaultChecked={currentTheme === 'dark'}
/>
<span>Dark</span>
</label>
<label>
<input
type="radio"
name="theme"
value="auto"
defaultChecked={
currentTheme !== 'light' && currentTheme !== 'dark'
}
/>
<span>Auto</span>
</label>
</div>
</form>
</section>
<h2>Settings</h2>
<label>
<input
type="checkbox"
checked={snapStates.settings.boostsCarousel}
onChange={(e) => {
states.settings.boostsCarousel = e.target.checked;
}}
/>{' '}
Boosts carousel (experimental)
</label>
<ul class="section">
<li>
<div>
<label>Appearance</label>
</div>
<div>
<form
ref={themeFormRef}
onInput={(e) => {
console.log(e);
e.preventDefault();
const formData = new FormData(themeFormRef.current);
const theme = formData.get('theme');
const html = document.documentElement;
if (theme === 'auto') {
html.classList.remove('is-light', 'is-dark');
} else {
html.classList.toggle('is-light', theme === 'light');
html.classList.toggle('is-dark', theme === 'dark');
}
document
.querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme);
if (theme === 'auto') {
store.local.del('theme');
} else {
store.local.set('theme', theme);
}
}}
>
<div class="radio-group">
<label>
<input
type="radio"
name="theme"
value="light"
defaultChecked={currentTheme === 'light'}
/>
<span>Light</span>
</label>
<label>
<input
type="radio"
name="theme"
value="dark"
defaultChecked={currentTheme === 'dark'}
/>
<span>Dark</span>
</label>
<label>
<input
type="radio"
name="theme"
value="auto"
defaultChecked={
currentTheme !== 'light' && currentTheme !== 'dark'
}
/>
<span>Auto</span>
</label>
</div>
</form>
</div>
</li>
<li>
<label>
<input
type="checkbox"
checked={snapStates.settings.boostsCarousel}
onChange={(e) => {
states.settings.boostsCarousel = e.target.checked;
}}
/>{' '}
Boosts carousel (experimental)
</label>
</li>
</ul>
<h2>Hidden features</h2>
<p>
<button
type="button"
class="light"
onClick={() => {
states.showDrafts = true;
states.showSettings = false;
}}
>
Unsent drafts
</button>
</p>
<section>
<div>
<button
type="button"
class="light"
onClick={() => {
states.showDrafts = true;
states.showSettings = false;
}}
>
Unsent drafts
</button>
</div>
</section>
<h2>About</h2>
<p>
<a href="https://github.com/cheeaun/phanpy" target="_blank">
Built
</a>{' '}
by{' '}
<a
href="https://mastodon.social/@cheeaun"
// target="_blank"
onClick={(e) => {
e.preventDefault();
states.showAccount = 'cheeaun@mastodon.social';
}}
>
@cheeaun
</a>
.
</p>
{__BUILD_TIME__ && (
<section>
<p>
Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
{__COMMIT_HASH__ && (
<>
(
<a
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
target="_blank"
>
<code>{__COMMIT_HASH__}</code>
</a>
)
</>
)}
<a href="https://github.com/cheeaun/phanpy" target="_blank">
Built
</a>{' '}
by{' '}
<a
href="https://mastodon.social/@cheeaun"
// target="_blank"
onClick={(e) => {
e.preventDefault();
states.showAccount = 'cheeaun@mastodon.social';
}}
>
@cheeaun
</a>
.
</p>
)}
{__BUILD_TIME__ && (
<p>
Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
{__COMMIT_HASH__ && (
<>
(
<a
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
target="_blank"
>
<code>{__COMMIT_HASH__}</code>
</a>
)
</>
)}
</p>
)}
</section>
</main>
</div>
);