mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-03-30 05:09:18 +03:00
Fix/Beautify the menus in Settings
This commit is contained in:
Lim Chee Aun
parent
dd1cd56a87
commit
ba2aa18843
3 changed files with 97 additions and 92 deletions
|
|
@ -62,6 +62,7 @@ const ICONS = {
|
||||||
history: 'mingcute:history-line',
|
history: 'mingcute:history-line',
|
||||||
share: 'mingcute:share-2-line',
|
share: 'mingcute:share-2-line',
|
||||||
sparkles: 'mingcute:sparkles-line',
|
sparkles: 'mingcute:sparkles-line',
|
||||||
|
exit: 'mingcute:exit-line',
|
||||||
};
|
};
|
||||||
|
|
||||||
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
|
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-container :is(section, .section) {
|
#settings-container section {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
@ -20,16 +20,16 @@
|
||||||
border-bottom: var(--hairline-width) solid var(--outline-color);
|
border-bottom: var(--hairline-width) solid var(--outline-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
#settings-container :is(section, .section) > li:last-child {
|
#settings-container section ul > li:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-container ul {
|
#settings-container section > ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
#settings-container ul:not([role='menu']) > li {
|
#settings-container section > ul > li {
|
||||||
padding: 8px 0 16px;
|
padding: 8px 0 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -37,26 +37,26 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
border-bottom: var(--hairline-width) solid var(--outline-color);
|
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;
|
margin-right: 8px;
|
||||||
color: var(--green-color);
|
color: var(--green-color);
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
#settings-container ul:not([role='menu']) > li .current.is-current {
|
#settings-container section > ul > li .current.is-current {
|
||||||
opacity: 1;
|
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);
|
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;
|
flex-grow: 1;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
#settings-container ul:not([role='menu']) > li > div.actions {
|
#settings-container section > ul > li > div.actions {
|
||||||
flex-basis: fit-content;
|
flex-basis: fit-content;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
#settings-container ul:not([role='menu']) > li > div:last-child {
|
#settings-container section > ul > li > div:last-child {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
#settings-container div,
|
#settings-container div,
|
||||||
|
|
|
||||||
|
|
@ -119,7 +119,8 @@ function Settings({ onClose }) {
|
||||||
setCurrentDefault(i);
|
setCurrentDefault(i);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Set as default
|
<Icon icon="check-circle" />
|
||||||
|
<span>Set as default</span>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
<MenuItem
|
<MenuItem
|
||||||
|
|
@ -133,7 +134,8 @@ function Settings({ onClose }) {
|
||||||
location.href = '/';
|
location.href = '/';
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Log out
|
<Icon icon="exit" />
|
||||||
|
<span>Log out</span>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -156,88 +158,90 @@ function Settings({ onClose }) {
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<h2>Settings</h2>
|
<h2>Settings</h2>
|
||||||
<ul class="section">
|
<section>
|
||||||
<li>
|
<ul>
|
||||||
<div>
|
<li>
|
||||||
<label>Appearance</label>
|
<div>
|
||||||
</div>
|
<label>Appearance</label>
|
||||||
<div>
|
</div>
|
||||||
<form
|
<div>
|
||||||
ref={themeFormRef}
|
<form
|
||||||
onInput={(e) => {
|
ref={themeFormRef}
|
||||||
console.log(e);
|
onInput={(e) => {
|
||||||
e.preventDefault();
|
console.log(e);
|
||||||
const formData = new FormData(themeFormRef.current);
|
e.preventDefault();
|
||||||
const theme = formData.get('theme');
|
const formData = new FormData(themeFormRef.current);
|
||||||
const html = document.documentElement;
|
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(
|
.setAttribute(
|
||||||
'content',
|
'content',
|
||||||
theme === 'auto' ? 'dark light' : theme,
|
theme === 'auto' ? 'dark light' : 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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label>
|
<label>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={snapStates.settings.boostsCarousel}
|
checked={snapStates.settings.boostsCarousel}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
states.settings.boostsCarousel = e.target.checked;
|
states.settings.boostsCarousel = e.target.checked;
|
||||||
}}
|
}}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
Boosts carousel (experimental)
|
Boosts carousel (experimental)
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</section>
|
||||||
<h2>Hidden features</h2>
|
<h2>Hidden features</h2>
|
||||||
<section>
|
<section>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue