mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 09:15:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix/Beautify the menus in Settings

Browse source
This commit is contained in:
Lim Chee Aun 2023-02-28 17:12:17 +08:00
parent dd1cd56a87
commit ba2aa18843
3 changed files with 97 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/icon.jsx
View file

@ -62,6 +62,7 @@ const ICONS = {
history: 'mingcute:history-line',
share: 'mingcute:share-2-line',
sparkles: 'mingcute:sparkles-line',
exit: 'mingcute:exit-line',
};
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

20
src/pages/settings.css
View file

@ -12,7 +12,7 @@
margin-top: 2em;
}
#settings-container :is(section, .section) {
#settings-container section {
background-color: var(--bg-color);
margin: 0;
padding: 8px 16px;
@ -20,16 +20,16 @@
border-bottom: var(--hairline-width) solid var(--outline-color);
border-radius: 8px;
}
#settings-container :is(section, .section) > li:last-child {
#settings-container section ul > li:last-child {
border-bottom: none;
}
#settings-container ul {
#settings-container section > ul {
margin: 0;
padding: 0;
list-style: none;
}
#settings-container ul:not([role='menu']) > li {
#settings-container section > ul > li {
padding: 8px 0 16px;
display: flex;
justify-content: space-between;
@ -37,26 +37,26 @@
flex-wrap: wrap;
border-bottom: var(--hairline-width) solid var(--outline-color);
}
#settings-container ul:not([role='menu']) > li .current {
#settings-container section > ul > li .current {
margin-right: 8px;
color: var(--green-color);
opacity: 0.1;
}
#settings-container ul:not([role='menu']) > li .current.is-current {
#settings-container section > ul > li .current.is-current {
opacity: 1;
}
#settings-container ul:not([role='menu']) > li .current.is-current + .avatar {
#settings-container section > ul > li .current.is-current + .avatar {
box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
}
#settings-container ul:not([role='menu']) > li > div {
#settings-container section > ul > li > div {
flex-grow: 1;
max-width: 100%;
}
#settings-container ul:not([role='menu']) > li > div.actions {
#settings-container section > ul > li > div.actions {
flex-basis: fit-content;
margin-top: 8px;
}
#settings-container ul:not([role='menu']) > li > div:last-child {
#settings-container section > ul > li > div:last-child {
text-align: right;
}
#settings-container div,

168
src/pages/settings.jsx
View file

@ -119,7 +119,8 @@ function Settings({ onClose }) {
setCurrentDefault(i);
}}
>
Set as default
<Icon icon="check-circle" />
<span>Set as default</span>
</MenuItem>
)}
<MenuItem
@ -133,7 +134,8 @@ function Settings({ onClose }) {
location.href = '/';
}}
>
Log out
<Icon icon="exit" />
<span>Log out</span>
</MenuItem>
</Menu>
</div>
@ -156,88 +158,90 @@ function Settings({ onClose }) {
</p>
</section>
<h2>Settings</h2>
<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;
<section>
<ul>
<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 === 'auto' ? 'dark light' : theme,
);
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 === 'auto' ? 'dark light' : 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>
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>
</section>
<h2>Hidden features</h2>
<section>
<div>