this repo has no description
Add (more visible) show/hide poll results
+ small UI polish and fixes
+40
-37
+39
-37
src/components/poll.jsx
+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
-
•{' '}
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 && (