this repo has no description
Beautify shortcuts settings
+107
-5
+6
src/assets/multi-column.svg
+6
src/assets/multi-column.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 62">
2
+
<rect width="78" height="58" x="2" y="2" fill="#999" fill-opacity=".3" stroke="#999" stroke-width="3" rx="4"/>
3
+
<rect width="18" height="46" x="8" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
4
+
<rect width="18" height="46" x="32" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
5
+
<rect width="18" height="46" x="56" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
6
+
</svg>
+48
src/components/shortcuts-settings.css
+48
src/components/shortcuts-settings.css
···
33
33
#shortcuts-settings-container .shortcuts-view-mode {
34
34
display: flex;
35
35
align-items: center;
36
+
gap: 2px;
37
+
margin: 8px 0 0;
38
+
}
39
+
#shortcuts-settings-container .shortcuts-view-mode label {
40
+
border-radius: 4px;
41
+
background-color: var(--bg-faded-color);
42
+
padding: 16px;
43
+
text-align: center;
44
+
cursor: pointer;
45
+
display: block;
46
+
flex-grow: 1;
47
+
display: flex;
36
48
gap: 8px;
49
+
flex-direction: column;
50
+
align-items: center;
51
+
}
52
+
#shortcuts-settings-container .shortcuts-view-mode label:first-child {
53
+
border-top-left-radius: 16px;
54
+
border-bottom-left-radius: 16px;
55
+
}
56
+
#shortcuts-settings-container .shortcuts-view-mode label:last-child {
57
+
border-top-right-radius: 16px;
58
+
border-bottom-right-radius: 16px;
59
+
}
60
+
#shortcuts-settings-container .shortcuts-view-mode label img {
61
+
max-height: 64px;
62
+
}
63
+
#shortcuts-settings-container .shortcuts-view-mode label span {
64
+
text-align: center;
65
+
font-size: 80%;
66
+
}
67
+
#shortcuts-settings-container .shortcuts-view-mode label input {
68
+
position: absolute;
69
+
opacity: 0;
70
+
pointer-events: none;
71
+
}
72
+
#shortcuts-settings-container .shortcuts-view-mode label input ~ * {
73
+
opacity: 0.5;
74
+
transition: opacity 0.2s;
75
+
}
76
+
#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
77
+
box-shadow: inset 0 0 0 3px var(--link-color);
78
+
}
79
+
#shortcuts-settings-container
80
+
.shortcuts-view-mode
81
+
label
82
+
input:is(:hover, :active, :checked)
83
+
~ * {
84
+
opacity: 1;
37
85
}
38
86
39
87
#shortcuts-settings-container summary {
+38
-5
src/components/shortcuts-settings.jsx
+38
-5
src/components/shortcuts-settings.jsx
···
4
4
import { useEffect, useState } from 'preact/hooks';
5
5
import { useSnapshot } from 'valtio';
6
6
7
+
import floatingButtonUrl from '../assets/floating-button.svg';
8
+
import multiColumnUrl from '../assets/multi-column.svg';
9
+
import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
7
10
import { api } from '../utils/api';
8
11
import states from '../utils/states';
9
12
···
208
211
</header>
209
212
<main>
210
213
<p>
211
-
<label class="shortcuts-view-mode">
212
-
Specify a list of shortcuts that'll appear as:
213
-
<select
214
+
Specify a list of shortcuts that'll appear as:
215
+
<div class="shortcuts-view-mode">
216
+
{[
217
+
{
218
+
value: 'float-button',
219
+
label: 'Floating button',
220
+
imgURL: floatingButtonUrl,
221
+
},
222
+
{
223
+
value: 'tab-menu-bar',
224
+
label: 'Tab/Menu bar',
225
+
imgURL: tabMenuBarUrl,
226
+
},
227
+
{
228
+
value: 'multi-column',
229
+
label: 'Multi-column',
230
+
imgURL: multiColumnUrl,
231
+
},
232
+
].map(({ value, label, imgURL }) => (
233
+
<label>
234
+
<input
235
+
type="radio"
236
+
name="shortcuts-view-mode"
237
+
value={value}
238
+
checked={snapStates.settings.shortcutsViewMode === value}
239
+
onChange={(e) => {
240
+
states.settings.shortcutsViewMode = e.target.value;
241
+
}}
242
+
/>{' '}
243
+
<img src={imgURL} alt="" /> <span>{label}</span>
244
+
</label>
245
+
))}
246
+
</div>
247
+
{/* <select
214
248
value={snapStates.settings.shortcutsViewMode || 'float-button'}
215
249
onChange={(e) => {
216
250
states.settings.shortcutsViewMode = e.target.value;
···
219
253
<option value="float-button">Floating button</option>
220
254
<option value="multi-column">Multi-column</option>
221
255
<option value="tab-menu-bar">Tab/Menu bar </option>
222
-
</select>
223
-
</label>
256
+
</select> */}
224
257
</p>
225
258
{/* <p>
226
259
<details>