Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FEATURE: Add a preview to the poll builder #7988

Merged
merged 3 commits into from Aug 13, 2019
Merged

FEATURE: Add a preview to the poll builder #7988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e06a46b
FEATURE: Add a preview to the poll builder
CvX Aug 8, 2019
3fd9bdc
Use selectKit helper in the poll preview test
CvX Aug 13, 2019
b96727e
Extract the mobile-specific poll builder form CSS
CvX Aug 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions app/assets/stylesheets/common/base/modal.scss
View file
Open in desktop
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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
Expand Down
130 changes: 67 additions & 63 deletions plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
View file
Open in desktop
@@ -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}}

Expand Down
14 changes: 13 additions & 1 deletion plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
View file
Open in desktop
@@ -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;
Expand Down Expand Up @@ -45,7 +56,8 @@ $poll-margin: 10px;
margin-top: $poll-margin;
}

.poll-checkbox {
.poll-checkbox,
.poll-date {
margin-top: $poll-margin / 2;
}
}
1 change: 1 addition & 0 deletions plugins/poll/assets/stylesheets/common/poll.scss
View file
Open in desktop
Expand Up @@ -21,6 +21,7 @@ div.poll {
li[data-poll-option-id] {
color: $primary;
padding: 0.5em 0;
word-break: break-word;
}

img {
Expand Down
5 changes: 5 additions & 0 deletions plugins/poll/assets/stylesheets/mobile/poll-ui-builder.scss
View file
Open in desktop
@@ -0,0 +1,5 @@
.poll-ui-builder-form {
.d-editor-preview {
display: none;
}
}
1 change: 1 addition & 0 deletions plugins/poll/plugin.rb
View file
Open in desktop
Expand Up @@ -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"

Expand Down
13 changes: 13 additions & 0 deletions plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6
View file
Open in desktop
@@ -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";
Expand Down Expand Up @@ -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");
});