Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Jarek Radosz 2019-08-13 15:49:40 +02:00 committed by Robin Ward
parent 6374dc7d51
commit 6a65e5312b
7 changed files with 107 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/common/base/modal.scss
View File

@ -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

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

@ -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>
{{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="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>
{{#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-step"}}
class="poll-options-min"}}
</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}}
<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 class="input-group poll-checkbox">
<label>
{{input type="checkbox" checked=autoClose}}
{{i18n "poll.ui_builder.automatic_close.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">
<label>
{{input type="checkbox" checked=autoClose}}
{{i18n "poll.ui_builder.automatic_close.label"}}
</label>
<div class="d-editor-preview">
{{cook-text this.pollOutput}}
</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}}

14
plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
View File

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

1
plugins/poll/assets/stylesheets/common/poll.scss
View File

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

5
plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss Normal file
View File

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

1
plugins/poll/plugin.rb
View File

@ -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"

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

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