FEATURE: Add a preview to the poll builder (#7988)

* FEATURE: Add a preview to the poll builder

* Use selectKit helper in the poll preview test

* Extract the mobile-specific poll builder form CSS

app/assets/stylesheets/common/base/modal.scss

@@ -142,7 +142,7 @@
   overflow: auto;
 
   &:not(.history-modal) {
-    .modal-body:not(.reorder-categories) {
+    .modal-body:not(.reorder-categories):not(.poll-ui-builder) {
       max-height: none !important;
     }
   }
@@ -475,10 +475,12 @@
   }
 }
 
+.change-timestamp {
+  max-width: 420px;
+}
+
 .change-timestamp,
 .poll-ui-builder {
-  max-width: 420px;
-
   #date-container {
     .pika-single {
       position: relative !important; // overriding another important

plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs

@@ -1,83 +1,87 @@
 {{#d-modal-body title="poll.ui_builder.title" class="poll-ui-builder"}}
   <form class="poll-ui-builder-form form-horizontal">
-    <div class="input-group poll-select">
+    <div class="options">
-      <label class="input-group-label">{{i18n 'poll.ui_builder.poll_type.label'}}</label>
+      <div class="input-group poll-select">
-      {{combo-box content=pollTypes
+        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_type.label'}}</label>
-                  value=pollType
+        {{combo-box content=pollTypes
-                  allowInitialValueMutation=true
+                    value=pollType
-                  valueAttribute="value"}}
+                    allowInitialValueMutation=true
-    </div>
+                    valueAttribute="value"}}
-
-    <div class="input-group poll-select">
-      <label class="input-group-label">{{i18n 'poll.ui_builder.poll_result.label'}}</label>
-      {{combo-box content=pollResults
-                  value=pollResult
-                  allowInitialValueMutation=true
-                  valueAttribute="value"}}
-    </div>
-
-
-    {{#if showMinMax}}
-      <div class="input-group poll-number">
-        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
-        {{input type='number'
-                value=pollMin
-                valueAttribute="value"
-                class="poll-options-min"}}
-      </div>
-      {{input-tip validation=minMaxValueValidation}}
-
-
-      <div class="input-group poll-number">
-        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.max'}}</label>
-        {{input type='number'
-                value=pollMax
-                valueAttribute="value"
-                class="poll-options-max"}}
       </div>
 
-      {{#if isNumber}}
+      <div class="input-group poll-select">
+        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_result.label'}}</label>
+        {{combo-box content=pollResults
+                    value=pollResult
+                    allowInitialValueMutation=true
+                    valueAttribute="value"}}
+      </div>
+
+      {{#if showMinMax}}
         <div class="input-group poll-number">
-          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.step'}}</label>
+          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
           {{input type='number'
-                  value=pollStep
+                  value=pollMin
                   valueAttribute="value"
-                  min="1"
+                  class="poll-options-min"}}
-                  class="poll-options-step"}}
         </div>
-        {{input-tip validation=minStepValueValidation}}
+        {{input-tip validation=minMaxValueValidation}}
+
+        <div class="input-group poll-number">
+          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.max'}}</label>
+          {{input type='number'
+                  value=pollMax
+                  valueAttribute="value"
+                  class="poll-options-max"}}
+        </div>
+
+        {{#if isNumber}}
+          <div class="input-group poll-number">
+            <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.step'}}</label>
+            {{input type='number'
+                    value=pollStep
+                    valueAttribute="value"
+                    min="1"
+                    class="poll-options-step"}}
+          </div>
+          {{input-tip validation=minStepValueValidation}}
+        {{/if}}
       {{/if}}
-    {{/if}}
 
-    {{#unless isNumber}}
+      {{#unless isNumber}}
-      <div class="input-group poll-textarea">
+        <div class="input-group poll-textarea">
-        <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
+          <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
-        {{textarea value=pollOptions autocomplete="discourse"}}
+          {{textarea value=pollOptions autocomplete="discourse"}}
+        </div>
+        {{input-tip validation=minNumOfOptionsValidation}}
+      {{/unless}}
+
+      <div class="input-group poll-checkbox">
+        <label>
+          {{input type='checkbox' checked=publicPoll}}
+          {{i18n "poll.ui_builder.poll_public.label"}}
+        </label>
       </div>
-      {{input-tip validation=minNumOfOptionsValidation}}
-    {{/unless}}
 
-    <div class="input-group poll-checkbox">
+      <div class="input-group poll-checkbox">
-      <label>
+        <label>
-        {{input type='checkbox' checked=publicPoll}}
+          {{input type="checkbox" checked=autoClose}}
-        {{i18n "poll.ui_builder.poll_public.label"}}
+          {{i18n "poll.ui_builder.automatic_close.label"}}
-      </label>
+        </label>
+      </div>
+
+      {{#if autoClose}}
+        <div class="input-group poll-date">
+          {{date-picker-future value=date containerId="date-container"}}
+          {{input type="time" value=time}}
+          <div id="date-container"></div>
+        </div>
+      {{/if}}
     </div>
 
-    <div class="input-group poll-checkbox">
+    <div class="d-editor-preview">
-      <label>
+      {{cook-text this.pollOutput}}
-        {{input type="checkbox" checked=autoClose}}
-        {{i18n "poll.ui_builder.automatic_close.label"}}
-      </label>
     </div>
-
-    {{#if autoClose}}
-      <div class="input-group">
-        {{date-picker-future value=date containerId="date-container"}}
-        {{input type="time" value=time}}
-        <div id="date-container"></div>
-      </div>
-    {{/if}}
   </form>
 {{/d-modal-body}}
 

plugins/poll/assets/stylesheets/common/poll-ui-builder.scss

@@ -1,8 +1,19 @@
 $poll-margin: 10px;
 
 .poll-ui-builder-form {
+  display: flex;
   margin: 0;
 
+  .options {
+    flex-shrink: 0;
+    width: 280px;
+  }
+
+  .d-editor-preview {
+    margin-left: $poll-margin * 2;
+    width: 360px;
+  }
+
   label {
     font-weight: bold;
     display: inline;
@@ -45,7 +56,8 @@ $poll-margin: 10px;
     margin-top: $poll-margin;
   }
 
-  .poll-checkbox {
+  .poll-checkbox,
+  .poll-date {
     margin-top: $poll-margin / 2;
   }
 }

plugins/poll/assets/stylesheets/common/poll.scss

@@ -21,6 +21,7 @@ div.poll {
   li[data-poll-option-id] {
     color: $primary;
     padding: 0.5em 0;
+    word-break: break-word;
   }
 
   img {

plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss

@@ -0,0 +1,5 @@
+.poll-ui-builder-form {
+  .d-editor-preview {
+    display: none;
+  }
+}

plugins/poll/plugin.rb

@@ -10,6 +10,7 @@ register_asset "stylesheets/common/poll.scss"
 register_asset "stylesheets/common/poll-ui-builder.scss"
 register_asset "stylesheets/desktop/poll.scss", :desktop
 register_asset "stylesheets/mobile/poll.scss", :mobile
+register_asset "stylesheets/mobile/poll-ui-builder.scss", :mobile
 
 register_svg_icon "far fa-check-square"
 

plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6

@@ -1,3 +1,4 @@
+import selectKit from "helpers/select-kit-helper";
 import { acceptance, updateCurrentUser } from "helpers/qunit-helpers";
 import { displayPollBuilderButton } from "discourse/plugins/poll/helpers/display-poll-builder-button";
 import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
@@ -51,3 +52,15 @@ test("staff - with insufficient trust level", assert => {
     );
   });
 });
+
+test("poll preview", async assert => {
+  displayPollBuilderButton();
+  const popupMenu = selectKit(".toolbar-popup-menu-options");
+  await popupMenu.expand();
+  await popupMenu.selectRowByValue("showPollBuilder");
+
+  await fillIn(".poll-textarea textarea", "First option\nSecond option");
+
+  assert.equal(find(".d-editor-preview li:first-child").text(), "First option");
+  assert.equal(find(".d-editor-preview li:last-child").text(), "Second option");
+});