this repo has no description
0
fork

Configure Feed

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

Add (more visible) show/hide poll results

+ small UI polish and fixes

+40 -37
+39 -37
src/components/poll.jsx
··· 1 - import { useEffect, useRef, useState } from 'preact/hooks'; 1 + import { useState } from 'preact/hooks'; 2 2 3 3 import shortenNumber from '../utils/shorten-number'; 4 4 ··· 62 62 const [showResults, setShowResults] = useState(false); 63 63 const optionsHaveVoteCounts = options.every((o) => o.votesCount !== null); 64 64 65 - const pollRef = useRef(); 66 - useEffect(() => { 67 - const handleSwipe = () => { 68 - console.log('swiped left'); 69 - setShowResults(!showResults); 70 - }; 71 - pollRef.current?.addEventListener?.('swiped-left', handleSwipe); 72 - return () => { 73 - pollRef.current?.removeEventListener?.('swiped-left', handleSwipe); 74 - }; 75 - }, [showResults]); 76 - 77 65 return ( 78 66 <div 79 - ref={pollRef} 80 67 lang={lang} 81 68 dir="auto" 82 69 class={`poll ${readOnly ? 'read-only' : ''} ${ 83 70 uiState === 'loading' ? 'loading' : '' 84 71 }`} 85 - onDblClick={() => { 86 - setShowResults(!showResults); 87 - }} 88 72 > 89 73 {(showResults && optionsHaveVoteCounts) || voted || expired ? ( 90 74 <> ··· 138 122 <button 139 123 class="poll-vote-button plain2" 140 124 disabled={uiState === 'loading'} 141 - onClick={() => { 125 + onClick={(e) => { 126 + e.preventDefault(); 142 127 setShowResults(false); 143 128 }} 144 129 > 145 - <Icon icon="arrow-left" /> Hide results 130 + <Icon icon="arrow-left" size="s" /> Hide results 146 131 </button> 147 132 )} 148 133 </> ··· 198 183 )} 199 184 <p class="poll-meta"> 200 185 {!expired && !readOnly && ( 201 - <> 202 - <button 203 - type="button" 204 - class="textual" 205 - disabled={uiState === 'loading'} 206 - onClick={(e) => { 207 - e.preventDefault(); 208 - setUIState('loading'); 186 + <button 187 + type="button" 188 + class="plain small" 189 + disabled={uiState === 'loading'} 190 + style={{ 191 + marginLeft: -8, 192 + }} 193 + onClick={(e) => { 194 + e.preventDefault(); 195 + setUIState('loading'); 209 196 210 - (async () => { 211 - await refresh(); 212 - setUIState('default'); 213 - })(); 214 - }} 215 - > 216 - Refresh 217 - </button>{' '} 218 - &bull;{' '} 219 - </> 197 + (async () => { 198 + await refresh(); 199 + setUIState('default'); 200 + })(); 201 + }} 202 + > 203 + <Icon icon="refresh" alt="Refresh" /> 204 + </button> 220 205 )} 206 + {!voted && !expired && !readOnly && optionsHaveVoteCounts && ( 207 + <button 208 + type="button" 209 + class="plain small" 210 + disabled={uiState === 'loading'} 211 + onClick={(e) => { 212 + e.preventDefault(); 213 + setShowResults(!showResults); 214 + }} 215 + > 216 + <Icon 217 + icon={showResults ? 'eye-open' : 'eye-close'} 218 + alt={showResults ? 'Hide results' : 'Show results'} 219 + />{' '} 220 + </button> 221 + )} 222 + {!expired && !readOnly && ' '} 221 223 <span title={votesCount}>{shortenNumber(votesCount)}</span> vote 222 224 {votesCount === 1 ? '' : 's'} 223 225 {!!votersCount && votersCount !== votesCount && (
+1
src/components/status.css
··· 1138 1138 min-width: 160px; 1139 1139 } 1140 1140 .poll-meta { 1141 + color: var(--text-insignificant-color); 1141 1142 margin: 8px 16px; 1142 1143 font-size: 90%; 1143 1144 user-select: none;