Fixes to the polls UI (#10150)

* Allow unselecting choices in multiple choice polls

* Properly disable checkboxes/radio buttons for polls in public pages

* Visually differentiate checkboxes and radio buttons

2 files changed, 17 insertions, 8 deletions

diff --git a/app/javascript/mastodon/components/poll.js b/app/javascript/mastodon/components/poll.js
index c18ee1505..45ce107aa 100644
--- a/app/javascript/mastodon/components/poll.js
+++ b/app/javascript/mastodon/components/poll.js
@@ -60,7 +60,11 @@ class Poll extends ImmutablePureComponent {
 
     if (this.props.poll.get('multiple')) {
       const tmp = { ...this.state.selected };
-      tmp[value] = true;
+      if (tmp[value]) {
+        delete tmp[value];
+      } else {
+        tmp[value] = true;
+      }
       this.setState({ selected: tmp });
     } else {
       const tmp = {};
@@ -86,11 +90,11 @@ class Poll extends ImmutablePureComponent {
   };
 
   renderOption (option, optionIndex) {
-    const { poll }    = this.props;
-    const percent     = (option.get('votes_count') / poll.get('votes_count')) * 100;
-    const leading     = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') > other.get('votes_count'));
-    const active      = !!this.state.selected[`${optionIndex}`];
-    const showResults = poll.get('voted') || poll.get('expired');
+    const { poll, disabled } = this.props;
+    const percent            = (option.get('votes_count') / poll.get('votes_count')) * 100;
+    const leading            = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') > other.get('votes_count'));
+    const active             = !!this.state.selected[`${optionIndex}`];
+    const showResults        = poll.get('voted') || poll.get('expired');
 
     return (
       <li key={option.get('title')}>
@@ -109,9 +113,10 @@ class Poll extends ImmutablePureComponent {
             value={optionIndex}
             checked={active}
             onChange={this.handleOptionChange}
+            disabled={disabled}
           />
 
-          {!showResults && <span className={classNames('poll__input', { active })} />}
+          {!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />}
           {showResults && <span className='poll__number'>{Math.floor(percent)}%</span>}
 
           {option.get('title')}
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index b93d36e92..f42496559 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -47,9 +47,13 @@
     height: 18px;
     margin-right: 10px;
     top: -1px;
-    border-radius: 4px;
+    border-radius: 50%;
     vertical-align: middle;
 
+    &.checkbox {
+      border-radius: 4px;
+    }
+
     &.active {
       border-color: $valid-value-color;
       background: $valid-value-color;