mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-12-18 08:32:33 +03:00
Restyle settings sheet
This commit is contained in:
Lim Chee Aun
parent
d0880f5c56
commit
a87b95ed18
2 changed files with 228 additions and 189 deletions
|
|
@ -1,12 +1,28 @@
|
||||||
|
#settings-container {
|
||||||
|
background-color: var(--bg-faded-color);
|
||||||
|
}
|
||||||
|
|
||||||
#settings-container h2 {
|
#settings-container h2 {
|
||||||
font-size: 0.9em;
|
font-size: 85%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--text-insignificant-color);
|
color: var(--text-insignificant-color);
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
#settings-container h2 ~ h2 {
|
#settings-container h2 ~ h2 {
|
||||||
margin-top: 2em;
|
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 {
|
#settings-container ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -82,3 +98,10 @@
|
||||||
#settings-container .radio-group label:has(input:checked) input:checked + span {
|
#settings-container .radio-group label:has(input:checked) input:checked + span {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 40em) {
|
||||||
|
#settings-container :is(section, .section) {
|
||||||
|
margin-inline: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,218 +33,234 @@ function Settings({ onClose }) {
|
||||||
<Icon icon="x" alt="Close" />
|
<Icon icon="x" alt="Close" />
|
||||||
</button> */}
|
</button> */}
|
||||||
<h2>Accounts</h2>
|
<h2>Accounts</h2>
|
||||||
<ul class="accounts-list">
|
<section>
|
||||||
{accounts.map((account, i) => {
|
<ul class="accounts-list">
|
||||||
const isCurrent = account.info.id === currentAccount;
|
{accounts.map((account, i) => {
|
||||||
const isDefault = i === (currentDefault || 0);
|
const isCurrent = account.info.id === currentAccount;
|
||||||
return (
|
const isDefault = i === (currentDefault || 0);
|
||||||
<li>
|
return (
|
||||||
<div>
|
<li>
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
<div>
|
<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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="plain small"
|
class="light"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// Move account to the top of the list
|
store.session.set('currentAccount', account.info.id);
|
||||||
accounts.splice(i, 1);
|
location.reload();
|
||||||
accounts.unshift(account);
|
|
||||||
store.local.setJSON('accounts', accounts);
|
|
||||||
setCurrentDefault(i);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Set as default
|
<Icon icon="transfer" /> Switch
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{isCurrent && (
|
<div>
|
||||||
<>
|
{!isDefault && moreThanOneAccount && (
|
||||||
{' '}
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="plain small"
|
class="plain small"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const yes = confirm(
|
// Move account to the top of the list
|
||||||
'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);
|
||||||
location.reload();
|
setCurrentDefault(i);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Log out
|
Set as default
|
||||||
</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>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</ul>
|
||||||
</ul>
|
{moreThanOneAccount && (
|
||||||
{moreThanOneAccount && (
|
<p>
|
||||||
<p>
|
<small>
|
||||||
<small>
|
Note: <i>Default</i> account will always be used for first load.
|
||||||
Note: <i>Default</i> account will always be used for first load.
|
Switched accounts will persist during the session.
|
||||||
Switched accounts will persist during the session.
|
</small>
|
||||||
</small>
|
</p>
|
||||||
|
)}
|
||||||
|
<p style={{ textAlign: 'end' }}>
|
||||||
|
<a href="/#/login" class="button" onClick={onClose}>
|
||||||
|
Add new account
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
)}
|
</section>
|
||||||
<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>
|
|
||||||
<h2>Settings</h2>
|
<h2>Settings</h2>
|
||||||
<label>
|
<ul class="section">
|
||||||
<input
|
<li>
|
||||||
type="checkbox"
|
<div>
|
||||||
checked={snapStates.settings.boostsCarousel}
|
<label>Appearance</label>
|
||||||
onChange={(e) => {
|
</div>
|
||||||
states.settings.boostsCarousel = e.target.checked;
|
<div>
|
||||||
}}
|
<form
|
||||||
/>{' '}
|
ref={themeFormRef}
|
||||||
Boosts carousel (experimental)
|
onInput={(e) => {
|
||||||
</label>
|
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>
|
<h2>Hidden features</h2>
|
||||||
<p>
|
<section>
|
||||||
<button
|
<div>
|
||||||
type="button"
|
<button
|
||||||
class="light"
|
type="button"
|
||||||
onClick={() => {
|
class="light"
|
||||||
states.showDrafts = true;
|
onClick={() => {
|
||||||
states.showSettings = false;
|
states.showDrafts = true;
|
||||||
}}
|
states.showSettings = false;
|
||||||
>
|
}}
|
||||||
Unsent drafts
|
>
|
||||||
</button>
|
Unsent drafts
|
||||||
</p>
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<h2>About</h2>
|
<h2>About</h2>
|
||||||
<p>
|
<section>
|
||||||
<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>
|
<p>
|
||||||
Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
|
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
||||||
{__COMMIT_HASH__ && (
|
Built
|
||||||
<>
|
</a>{' '}
|
||||||
(
|
by{' '}
|
||||||
<a
|
<a
|
||||||
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
|
href="https://mastodon.social/@cheeaun"
|
||||||
target="_blank"
|
// target="_blank"
|
||||||
>
|
onClick={(e) => {
|
||||||
<code>{__COMMIT_HASH__}</code>
|
e.preventDefault();
|
||||||
</a>
|
states.showAccount = 'cheeaun@mastodon.social';
|
||||||
)
|
}}
|
||||||
</>
|
>
|
||||||
)}
|
@cheeaun
|
||||||
|
</a>
|
||||||
|
.
|
||||||
</p>
|
</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>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue