this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Beautify shortcuts settings

+107 -5
+5
src/assets/floating-button.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62"> 2 + <rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/> 3 + <rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/> 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"/> 5 + </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>
+10
src/assets/tab-menu-bar.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62"> 2 + <rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/> 3 + <path fill="#999" fill-opacity=".3" d="M19 3h62v10H19z"/> 4 + <path stroke="#4169E1" stroke-width="2" d="M43 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/> 5 + <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"/> 6 + <rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/> 7 + <path fill="#999" fill-opacity=".3" d="M3 49h30v10H3z"/> 8 + <path stroke="#4169E1" stroke-width="2" d="M11 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/> 9 + <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"/> 10 + </svg>
+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
··· 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&nbsp;as: 213 - <select 214 + Specify a list of shortcuts that'll appear&nbsp;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>