this repo has no description
0
fork

Configure Feed

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

Restyle settings sheet

+223 -184
+24 -1
src/pages/settings.css
··· 1 + #settings-container { 2 + background-color: var(--bg-faded-color); 3 + } 4 + 1 5 #settings-container h2 { 2 - font-size: 0.9em; 6 + font-size: 85%; 3 7 text-transform: uppercase; 4 8 color: var(--text-insignificant-color); 9 + font-weight: normal; 5 10 } 6 11 #settings-container h2 ~ h2 { 7 12 margin-top: 2em; 13 + } 14 + 15 + #settings-container :is(section, .section) { 16 + background-color: var(--bg-color); 17 + margin: 0 -16px; 18 + padding: 8px 16px; 19 + border-top: var(--hairline-width) solid var(--outline-color); 20 + border-bottom: var(--hairline-width) solid var(--outline-color); 21 + } 22 + #settings-container :is(section, .section) > li + li { 23 + border-top: var(--hairline-width) solid var(--outline-color); 8 24 } 9 25 10 26 #settings-container ul { ··· 82 98 #settings-container .radio-group label:has(input:checked) input:checked + span { 83 99 color: inherit; 84 100 } 101 + 102 + @media (min-width: 40em) { 103 + #settings-container :is(section, .section) { 104 + margin-inline: 0; 105 + border-radius: 8px; 106 + } 107 + }
+199 -183
src/pages/settings.jsx
··· 33 33 <Icon icon="x" alt="Close" /> 34 34 </button> */} 35 35 <h2>Accounts</h2> 36 - <ul class="accounts-list"> 37 - {accounts.map((account, i) => { 38 - const isCurrent = account.info.id === currentAccount; 39 - const isDefault = i === (currentDefault || 0); 40 - return ( 41 - <li> 42 - <div> 43 - {moreThanOneAccount && ( 44 - <span class={`current ${isCurrent ? 'is-current' : ''}`}> 45 - <Icon icon="check-circle" alt="Current" /> 46 - </span> 47 - )} 48 - <Avatar url={account.info.avatarStatic} size="xxl" /> 49 - <NameText 50 - account={account.info} 51 - showAcct 52 - onClick={() => { 53 - states.showAccount = `${account.info.username}@${account.instanceURL}`; 54 - }} 55 - /> 56 - </div> 57 - <div class="actions"> 58 - {isDefault && moreThanOneAccount && ( 59 - <> 60 - <span class="tag">Default</span>{' '} 61 - </> 62 - )} 63 - {!isCurrent && ( 64 - <button 65 - type="button" 66 - class="light" 36 + <section> 37 + <ul class="accounts-list"> 38 + {accounts.map((account, i) => { 39 + const isCurrent = account.info.id === currentAccount; 40 + const isDefault = i === (currentDefault || 0); 41 + return ( 42 + <li> 43 + <div> 44 + {moreThanOneAccount && ( 45 + <span class={`current ${isCurrent ? 'is-current' : ''}`}> 46 + <Icon icon="check-circle" alt="Current" /> 47 + </span> 48 + )} 49 + <Avatar url={account.info.avatarStatic} size="xxl" /> 50 + <NameText 51 + account={account.info} 52 + showAcct 67 53 onClick={() => { 68 - store.session.set('currentAccount', account.info.id); 69 - location.reload(); 54 + states.showAccount = `${account.info.username}@${account.instanceURL}`; 70 55 }} 71 - > 72 - <Icon icon="transfer" /> Switch 73 - </button> 74 - )} 75 - <div> 76 - {!isDefault && moreThanOneAccount && ( 56 + /> 57 + </div> 58 + <div class="actions"> 59 + {isDefault && moreThanOneAccount && ( 60 + <> 61 + <span class="tag">Default</span>{' '} 62 + </> 63 + )} 64 + {!isCurrent && ( 77 65 <button 78 66 type="button" 79 - class="plain small" 67 + class="light" 80 68 onClick={() => { 81 - // Move account to the top of the list 82 - accounts.splice(i, 1); 83 - accounts.unshift(account); 84 - store.local.setJSON('accounts', accounts); 85 - setCurrentDefault(i); 69 + store.session.set('currentAccount', account.info.id); 70 + location.reload(); 86 71 }} 87 72 > 88 - Set as default 73 + <Icon icon="transfer" /> Switch 89 74 </button> 90 75 )} 91 - {isCurrent && ( 92 - <> 93 - {' '} 76 + <div> 77 + {!isDefault && moreThanOneAccount && ( 94 78 <button 95 79 type="button" 96 80 class="plain small" 97 81 onClick={() => { 98 - const yes = confirm( 99 - 'Are you sure you want to log out?', 100 - ); 101 - if (!yes) return; 82 + // Move account to the top of the list 102 83 accounts.splice(i, 1); 84 + accounts.unshift(account); 103 85 store.local.setJSON('accounts', accounts); 104 - location.reload(); 86 + setCurrentDefault(i); 105 87 }} 106 88 > 107 - Log out 89 + Set as default 108 90 </button> 109 - </> 110 - )} 91 + )} 92 + {isCurrent && ( 93 + <> 94 + {' '} 95 + <button 96 + type="button" 97 + class="plain small" 98 + onClick={() => { 99 + const yes = confirm( 100 + 'Are you sure you want to log out?', 101 + ); 102 + if (!yes) return; 103 + accounts.splice(i, 1); 104 + store.local.setJSON('accounts', accounts); 105 + location.reload(); 106 + }} 107 + > 108 + Log out 109 + </button> 110 + </> 111 + )} 112 + </div> 111 113 </div> 112 - </div> 113 - </li> 114 - ); 115 - })} 116 - </ul> 117 - {moreThanOneAccount && ( 118 - <p> 119 - <small> 120 - Note: <i>Default</i> account will always be used for first load. 121 - Switched accounts will persist during the session. 122 - </small> 114 + </li> 115 + ); 116 + })} 117 + </ul> 118 + {moreThanOneAccount && ( 119 + <p> 120 + <small> 121 + Note: <i>Default</i> account will always be used for first load. 122 + Switched accounts will persist during the session. 123 + </small> 124 + </p> 125 + )} 126 + <p style={{ textAlign: 'end' }}> 127 + <a href="/#/login" class="button" onClick={onClose}> 128 + Add new account 129 + </a> 123 130 </p> 124 - )} 125 - <p style={{ textAlign: 'end' }}> 126 - <a href="/#/login" class="button" onClick={onClose}> 127 - Add new account 128 - </a> 129 - </p> 130 - <h2>Theme</h2> 131 - <form 132 - ref={themeFormRef} 133 - onInput={(e) => { 134 - console.log(e); 135 - e.preventDefault(); 136 - const formData = new FormData(themeFormRef.current); 137 - const theme = formData.get('theme'); 138 - const html = document.documentElement; 131 + </section> 132 + <h2>Settings</h2> 133 + <ul class="section"> 134 + <li> 135 + <div> 136 + <label>Appearance</label> 137 + </div> 138 + <div> 139 + <form 140 + ref={themeFormRef} 141 + onInput={(e) => { 142 + console.log(e); 143 + e.preventDefault(); 144 + const formData = new FormData(themeFormRef.current); 145 + const theme = formData.get('theme'); 146 + const html = document.documentElement; 139 147 140 - if (theme === 'auto') { 141 - html.classList.remove('is-light', 'is-dark'); 142 - } else { 143 - html.classList.toggle('is-light', theme === 'light'); 144 - html.classList.toggle('is-dark', theme === 'dark'); 145 - } 146 - document 147 - .querySelector('meta[name="color-scheme"]') 148 - .setAttribute('content', theme); 148 + if (theme === 'auto') { 149 + html.classList.remove('is-light', 'is-dark'); 150 + } else { 151 + html.classList.toggle('is-light', theme === 'light'); 152 + html.classList.toggle('is-dark', theme === 'dark'); 153 + } 154 + document 155 + .querySelector('meta[name="color-scheme"]') 156 + .setAttribute('content', theme); 149 157 150 - if (theme === 'auto') { 151 - store.local.del('theme'); 152 - } else { 153 - store.local.set('theme', theme); 154 - } 155 - }} 156 - > 157 - <div class="radio-group"> 158 - <label> 159 - <input 160 - type="radio" 161 - name="theme" 162 - value="light" 163 - defaultChecked={currentTheme === 'light'} 164 - /> 165 - <span>Light</span> 166 - </label> 158 + if (theme === 'auto') { 159 + store.local.del('theme'); 160 + } else { 161 + store.local.set('theme', theme); 162 + } 163 + }} 164 + > 165 + <div class="radio-group"> 166 + <label> 167 + <input 168 + type="radio" 169 + name="theme" 170 + value="light" 171 + defaultChecked={currentTheme === 'light'} 172 + /> 173 + <span>Light</span> 174 + </label> 175 + <label> 176 + <input 177 + type="radio" 178 + name="theme" 179 + value="dark" 180 + defaultChecked={currentTheme === 'dark'} 181 + /> 182 + <span>Dark</span> 183 + </label> 184 + <label> 185 + <input 186 + type="radio" 187 + name="theme" 188 + value="auto" 189 + defaultChecked={ 190 + currentTheme !== 'light' && currentTheme !== 'dark' 191 + } 192 + /> 193 + <span>Auto</span> 194 + </label> 195 + </div> 196 + </form> 197 + </div> 198 + </li> 199 + <li> 167 200 <label> 168 201 <input 169 - type="radio" 170 - name="theme" 171 - value="dark" 172 - defaultChecked={currentTheme === 'dark'} 173 - /> 174 - <span>Dark</span> 202 + type="checkbox" 203 + checked={snapStates.settings.boostsCarousel} 204 + onChange={(e) => { 205 + states.settings.boostsCarousel = e.target.checked; 206 + }} 207 + />{' '} 208 + Boosts carousel (experimental) 175 209 </label> 176 - <label> 177 - <input 178 - type="radio" 179 - name="theme" 180 - value="auto" 181 - defaultChecked={ 182 - currentTheme !== 'light' && currentTheme !== 'dark' 183 - } 184 - /> 185 - <span>Auto</span> 186 - </label> 210 + </li> 211 + </ul> 212 + <h2>Hidden features</h2> 213 + <section> 214 + <div> 215 + <button 216 + type="button" 217 + class="light" 218 + onClick={() => { 219 + states.showDrafts = true; 220 + states.showSettings = false; 221 + }} 222 + > 223 + Unsent drafts 224 + </button> 187 225 </div> 188 - </form> 189 - <h2>Settings</h2> 190 - <label> 191 - <input 192 - type="checkbox" 193 - checked={snapStates.settings.boostsCarousel} 194 - onChange={(e) => { 195 - states.settings.boostsCarousel = e.target.checked; 196 - }} 197 - />{' '} 198 - Boosts carousel (experimental) 199 - </label> 200 - <h2>Hidden features</h2> 201 - <p> 202 - <button 203 - type="button" 204 - class="light" 205 - onClick={() => { 206 - states.showDrafts = true; 207 - states.showSettings = false; 208 - }} 209 - > 210 - Unsent drafts 211 - </button> 212 - </p> 226 + </section> 213 227 <h2>About</h2> 214 - <p> 215 - <a href="https://github.com/cheeaun/phanpy" target="_blank"> 216 - Built 217 - </a>{' '} 218 - by{' '} 219 - <a 220 - href="https://mastodon.social/@cheeaun" 221 - // target="_blank" 222 - onClick={(e) => { 223 - e.preventDefault(); 224 - states.showAccount = 'cheeaun@mastodon.social'; 225 - }} 226 - > 227 - @cheeaun 228 - </a> 229 - . 230 - </p> 231 - {__BUILD_TIME__ && ( 228 + <section> 232 229 <p> 233 - Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '} 234 - {__COMMIT_HASH__ && ( 235 - <> 236 - ( 237 - <a 238 - href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`} 239 - target="_blank" 240 - > 241 - <code>{__COMMIT_HASH__}</code> 242 - </a> 243 - ) 244 - </> 245 - )} 230 + <a href="https://github.com/cheeaun/phanpy" target="_blank"> 231 + Built 232 + </a>{' '} 233 + by{' '} 234 + <a 235 + href="https://mastodon.social/@cheeaun" 236 + // target="_blank" 237 + onClick={(e) => { 238 + e.preventDefault(); 239 + states.showAccount = 'cheeaun@mastodon.social'; 240 + }} 241 + > 242 + @cheeaun 243 + </a> 244 + . 246 245 </p> 247 - )} 246 + {__BUILD_TIME__ && ( 247 + <p> 248 + Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '} 249 + {__COMMIT_HASH__ && ( 250 + <> 251 + ( 252 + <a 253 + href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`} 254 + target="_blank" 255 + > 256 + <code>{__COMMIT_HASH__}</code> 257 + </a> 258 + ) 259 + </> 260 + )} 261 + </p> 262 + )} 263 + </section> 248 264 </main> 249 265 </div> 250 266 );