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

diff --git a/app/javascript/mastodon/components/poll.js b/app/javascript/mastodon/components/poll.js
index c18ee1505b04ee824f53b24424406212c3c13068..45ce107aaa186859c19e07bb4beead27e19c4f49 100644 (file)
--- 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 b93d36e9284399adc4791caa235bb695543a702e..f42496559456fdd175075af5787db35b93b86e37 100644 (file)
--- 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;