Skip to content
Permalink
Browse files

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
  • Loading branch information...
CvX authored and eviltrout committed Aug 13, 2019
1 parent 6374dc7 commit 6a65e5312b81c04bf0b7993c391a27ff8ca2d87e
@@ -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
@@ -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}}

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

img {
@@ -0,0 +1,5 @@
.poll-ui-builder-form {
.d-editor-preview {
display: none;
}
}
@@ -10,6 +10,7 @@
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"

@@ -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");
});

0 comments on commit 6a65e53

Please sign in to comment.
You can’t perform that action at this time.