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

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

diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index cd42181..d03345f 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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,
-.poll-ui-builder {
+.change-timestamp {
   max-width: 420px;
+}
 
+.change-timestamp,
+.poll-ui-builder {
   #date-container {
     .pika-single {
       position: relative !important; // overriding another important
diff --git a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
index eced3d2..a23eb84 100644
--- a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
+++ b/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">
-      <label class="input-group-label">{{i18n 'poll.ui_builder.poll_type.label'}}</label>
-      {{combo-box content=pollTypes
-                  value=pollType
-                  allowInitialValueMutation=true
-                  valueAttribute="value"}}
-    </div>
-
-    <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 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
+                    value=pollType
+                    allowInitialValueMutation=true
+                    valueAttribute="value"}}
       </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 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 isNumber}}
+      {{#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.step'}}</label>
+          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.max'}}</label>
           {{input type='number'
-                  value=pollStep
+                  value=pollMax
                   valueAttribute="value"
-                  min="1"
-                  class="poll-options-step"}}
+                  class="poll-options-max"}}
         </div>
-        {{input-tip validation=minStepValueValidation}}
+
+        {{#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}}
-      <div class="input-group poll-textarea">
-        <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
-        {{textarea value=pollOptions autocomplete="discourse"}}
+      {{#unless isNumber}}
+        <div class="input-group poll-textarea">
+          <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
+          {{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">
-      <label>
-        {{input type='checkbox' checked=publicPoll}}
-        {{i18n "poll.ui_builder.poll_public.label"}}
-      </label>
-    </div>
+      <div class="input-group poll-checkbox">
+        <label>
+          {{input type="checkbox" checked=autoClose}}
+          {{i18n "poll.ui_builder.automatic_close.label"}}
+        </label>
+      </div>
 
-    <div class="input-group poll-checkbox">
-      <label>
-        {{input type="checkbox" checked=autoClose}}
-        {{i18n "poll.ui_builder.automatic_close.label"}}
-      </label>
+      {{#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>
 
-    {{#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}}
+    <div class="d-editor-preview">
+      {{cook-text this.pollOutput}}
+    </div>
   </form>
 {{/d-modal-body}}
 
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index e807a71..55e05e4 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/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;
   }
 }
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index c66bb0f..dc13d99 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/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 {
diff --git a/plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss

[... diff too long, it was truncated ...]

GitHub sha: 6a65e531