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,5 +1,6 @@
 {{#d-modal-body title="poll.ui_builder.title" class="poll-ui-builder"}}
   <form class="poll-ui-builder-form form-horizontal">
+    <div class="options">
       <div class="input-group poll-select">
         <label class="input-group-label">{{i18n 'poll.ui_builder.poll_type.label'}}</label>
         {{combo-box content=pollTypes
@@ -16,7 +17,6 @@
                     valueAttribute="value"}}
       </div>
 
-
       {{#if showMinMax}}
         <div class="input-group poll-number">
           <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
@@ -27,7 +27,6 @@
         </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'
@@ -72,12 +71,17 @@
       </div>
 
       {{#if autoClose}}
-      <div class="input-group">
+        <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="d-editor-preview">
+      {{cook-text this.pollOutput}}
+    </div>
   </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");
+});