Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 00:56:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Beautify shortcuts settings

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-09 23:37:25 +08:00
parent 43296662d2
commit 03c0d61433
5 changed files with 107 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/assets/floating-button.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62">
<rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
<rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
<path fill="#4169E1" d="M14 52a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm64-42a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 371 B

6
src/assets/multi-column.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 62">
<rect width="78" height="58" x="2" y="2" fill="#999" fill-opacity=".3" stroke="#999" stroke-width="3" rx="4"/>
<rect width="18" height="46" x="8" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
<rect width="18" height="46" x="32" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
<rect width="18" height="46" x="56" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 479 B

10
src/assets/tab-menu-bar.svg Normal file
View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62">
<rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
<path fill="#999" fill-opacity=".3" d="M19 3h62v10H19z"/>
<path stroke="#4169E1" stroke-width="2" d="M43 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
<path stroke="#999" stroke-width="2" d="M52 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
<rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
<path fill="#999" fill-opacity=".3" d="M3 49h30v10H3z"/>
<path stroke="#4169E1" stroke-width="2" d="M11 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
<path stroke="#999" stroke-width="2" d="M20 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 784 B

48
src/components/shortcuts-settings.css
View file

@ -33,7 +33,55 @@
#shortcuts-settings-container .shortcuts-view-mode {
display: flex;
align-items: center;
gap: 2px;
margin: 8px 0 0;
}
#shortcuts-settings-container .shortcuts-view-mode label {
border-radius: 4px;
background-color: var(--bg-faded-color);
padding: 16px;
text-align: center;
cursor: pointer;
display: block;
flex-grow: 1;
display: flex;
gap: 8px;
flex-direction: column;
align-items: center;
}
#shortcuts-settings-container .shortcuts-view-mode label:first-child {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
#shortcuts-settings-container .shortcuts-view-mode label:last-child {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
#shortcuts-settings-container .shortcuts-view-mode label img {
max-height: 64px;
}
#shortcuts-settings-container .shortcuts-view-mode label span {
text-align: center;
font-size: 80%;
}
#shortcuts-settings-container .shortcuts-view-mode label input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#shortcuts-settings-container .shortcuts-view-mode label input ~ * {
opacity: 0.5;
transition: opacity 0.2s;
}
#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
box-shadow: inset 0 0 0 3px var(--link-color);
}
#shortcuts-settings-container
.shortcuts-view-mode
label
input:is(:hover, :active, :checked)
~ * {
opacity: 1;
}
#shortcuts-settings-container summary {

43
src/components/shortcuts-settings.jsx
View file

@ -4,6 +4,9 @@ import mem from 'mem';
import { useEffect, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
import floatingButtonUrl from '../assets/floating-button.svg';
import multiColumnUrl from '../assets/multi-column.svg';
import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
import { api } from '../utils/api';
import states from '../utils/states';
@ -208,9 +211,40 @@ function ShortcutsSettings() {
</header>
<main>
<p>
<label class="shortcuts-view-mode">
Specify a list of shortcuts that'll appear&nbsp;as:
<select
Specify a list of shortcuts that'll appear&nbsp;as:
<div class="shortcuts-view-mode">
{[
{
value: 'float-button',
label: 'Floating button',
imgURL: floatingButtonUrl,
},
{
value: 'tab-menu-bar',
label: 'Tab/Menu bar',
imgURL: tabMenuBarUrl,
},
{
value: 'multi-column',
label: 'Multi-column',
imgURL: multiColumnUrl,
},
].map(({ value, label, imgURL }) => (
<label>
<input
type="radio"
name="shortcuts-view-mode"
value={value}
checked={snapStates.settings.shortcutsViewMode === value}
onChange={(e) => {
states.settings.shortcutsViewMode = e.target.value;
}}
/>{' '}
<img src={imgURL} alt="" /> <span>{label}</span>
</label>
))}
</div>
{/* <select
value={snapStates.settings.shortcutsViewMode || 'float-button'}
onChange={(e) => {
states.settings.shortcutsViewMode = e.target.value;
@ -219,8 +253,7 @@ function ShortcutsSettings() {
<option value="float-button">Floating button</option>
<option value="multi-column">Multi-column</option>
<option value="tab-menu-bar">Tab/Menu bar </option>
</select>
</label>
</select> */}
</p>
{/* <p>
<details>