From 6a65e5312b81c04bf0b7993c391a27ff8ca2d87e Mon Sep 17 00:00:00 2001 From: Jarek Radosz Date: Tue, 13 Aug 2019 15:49:40 +0200 Subject: [PATCH] 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 | 8 +- .../templates/modal/poll-ui-builder.hbs | 134 +++++++++--------- .../stylesheets/common/poll-ui-builder.scss | 14 +- .../poll/assets/stylesheets/common/poll.scss | 1 + .../stylesheets/mobile/poll-ui-builder.scss | 5 + plugins/poll/plugin.rb | 1 + .../poll-builder-enabled-test.js.es6 | 13 ++ 7 files changed, 107 insertions(+), 69 deletions(-) create mode 100644 plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index cd4218111bf..d03345f56d3 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 { + max-width: 420px; +} + .change-timestamp, .poll-ui-builder { - max-width: 420px; - #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 eced3d2ba13..a23eb84e32f 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"}}
-
- - {{combo-box content=pollTypes - value=pollType - allowInitialValueMutation=true - valueAttribute="value"}} -
- -
- - {{combo-box content=pollResults - value=pollResult - allowInitialValueMutation=true - valueAttribute="value"}} -
- - - {{#if showMinMax}} -
- - {{input type='number' - value=pollMin - valueAttribute="value" - class="poll-options-min"}} -
- {{input-tip validation=minMaxValueValidation}} - - -
- - {{input type='number' - value=pollMax - valueAttribute="value" - class="poll-options-max"}} +
+
+ + {{combo-box content=pollTypes + value=pollType + allowInitialValueMutation=true + valueAttribute="value"}}
- {{#if isNumber}} +
+ + {{combo-box content=pollResults + value=pollResult + allowInitialValueMutation=true + valueAttribute="value"}} +
+ + {{#if showMinMax}}
- + {{input type='number' - value=pollStep + value=pollMin valueAttribute="value" - min="1" - class="poll-options-step"}} + class="poll-options-min"}}
- {{input-tip validation=minStepValueValidation}} + {{input-tip validation=minMaxValueValidation}} + +
+ + {{input type='number' + value=pollMax + valueAttribute="value" + class="poll-options-max"}} +
+ + {{#if isNumber}} +
+ + {{input type='number' + value=pollStep + valueAttribute="value" + min="1" + class="poll-options-step"}} +
+ {{input-tip validation=minStepValueValidation}} + {{/if}} {{/if}} - {{/if}} - {{#unless isNumber}} -
- - {{textarea value=pollOptions autocomplete="discourse"}} + {{#unless isNumber}} +
+ + {{textarea value=pollOptions autocomplete="discourse"}} +
+ {{input-tip validation=minNumOfOptionsValidation}} + {{/unless}} + +
+
- {{input-tip validation=minNumOfOptionsValidation}} - {{/unless}} -
- +
+ +
+ + {{#if autoClose}} +
+ {{date-picker-future value=date containerId="date-container"}} + {{input type="time" value=time}} +
+
+ {{/if}}
-
- +
+ {{cook-text this.pollOutput}}
- - {{#if autoClose}} -
- {{date-picker-future value=date containerId="date-container"}} - {{input type="time" value=time}} -
-
- {{/if}} {{/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 e807a713342..55e05e4bad6 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 c66bb0f1d8a..dc13d99d5aa 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 new file mode 100644 index 00000000000..964cb6b8276 --- /dev/null +++ b/plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss @@ -0,0 +1,5 @@ +.poll-ui-builder-form { + .d-editor-preview { + display: none; + } +} diff --git a/plugins/poll/plugin.rb b/plugins/poll/plugin.rb index b9c554240a2..ca5948292dd 100644 --- a/plugins/poll/plugin.rb +++ b/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" diff --git a/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 b/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 index 853fd0d9a29..074550a2fef 100644 --- a/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 +++ b/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"); +});