This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 67ec3091642fe2b736f1fbe7816ebccf6fcd95f6 Author: Kevin Morin <morin@codelutin.com> Date: Mon Sep 18 12:00:48 2017 +0200 fixes #98 naivgation au clavier dans le formulaire de création de sondage --- pollen-ui-riot-js/src/main/web/i18n/fr.json | 2 +- .../src/main/web/tag/components/Checkbox.tag.html | 45 ++++ .../main/web/tag/components/time-picker.tag.html | 4 +- .../src/main/web/tag/poll/Choice.tag.html | 1 + .../src/main/web/tag/poll/Choices.tag.html | 1 + .../src/main/web/tag/poll/Description.tag.html | 4 + .../src/main/web/tag/poll/EditPoll.tag.html | 4 + .../src/main/web/tag/poll/Settings.tag.html | 235 +++++++++------------ 8 files changed, 158 insertions(+), 138 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n/fr.json b/pollen-ui-riot-js/src/main/web/i18n/fr.json index e096ac1d..578c0cb3 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/fr.json +++ b/pollen-ui-riot-js/src/main/web/i18n/fr.json @@ -248,7 +248,7 @@ "poll_description_email": "Votre courriel", "poll_description_emailPlaceHolder": "Renseignez votre courriel", "poll_settings_restricted": "Sondage restreint ?", - "poll_settings_restricted_yes": "Seul les personnes invité à l'etape suivante peuvent voter. Un courriel leur sera envoyé avec un lien personnel.", + "poll_settings_restricted_yes": "Seules les personnes invitées à l'etape suivante peuvent voter. Un courriel leur sera envoyé avec un lien personnel.", "poll_settings_restricted_no": "Toutes les personnes ayant le lien du sondage peuvent voter.", "poll_settings_basic_usage": "Options par défaut", "poll_settings_use_basic_usage": "Utiliser les options par défaut", diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Checkbox.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Checkbox.tag.html new file mode 100644 index 00000000..a78a3417 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/Checkbox.tag.html @@ -0,0 +1,45 @@ +<Checkbox> + <label class="{opts.labelclass ? opts.labelclass : ''} c-toggle c-toggle--info" + onkeypress="{keyPressed}"> + {opts.label} + <input type="checkbox" + disabled={opts.disabled} + checked={opts.checkboxchecked} + onclick={ontogglecheckbox} + tabindex="1"> + <div class="c-toggle__track"> + <div class="c-toggle__handle" + ref="togglehandle" + tabindex="1"> + </div> + </div> + <yield/> + </label> + + <script> + this.checked = this.opts.checkboxchecked; + + if (this.opts.i18nprefix) { + this.session = require("../../js/Session"); + this.installBundle(this.session, this.opts.i18nprefix); + } + + this.keyPressed = e => { + if (!this.opts.disabled && e.keyCode === 13) { + this.ontogglecheckbox(); + } + }; + + this.ontogglecheckbox = e => { + this.checked = !this.checked; + if (this.opts.ontogglecheckbox) { + this.opts.ontogglecheckbox(); + } + }; + + this.focus = () => { + this.refs.togglehandle.focus(); + }; + + </script> +</Checkbox> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html index 0d58eaf1..367e56b0 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html @@ -15,7 +15,7 @@ type="number" max="23" min="0" - required + required="{opts.required}" disabled={opts.disabled} value="{opts.time.time ? opts.time.time.format('HH') : null}" onchange="{hourChanged}"/> @@ -25,7 +25,7 @@ type="number" max="59" min="0" - required + required="{opts.required}" disabled={opts.disabled} value="{opts.time.time ? opts.time.time.format('mm') : null}" onchange="{minuteChanged}"/> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html index 03f482f9..0472f396 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html @@ -12,6 +12,7 @@ require("../components/time-picker.tag.html"); </button> <input type="text" ref="choiceText" + tabindex="1" class={opts.choice.choiceType === 'TEXT' ? 'selected' : 'hidden'} placeholder="{__.text_placeholder}" disabled={opts.disabled} diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html index 04ffe3d5..a348cd14 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html @@ -23,6 +23,7 @@ require("./Choice.tag.html"); <div class="choices-actions"> <button type="button" + tabindex="1" class="c-button c-button--brand u-small" show={!form.hasVotes} disabled={form.hasVotes || form.model.closed} diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html index f67c8e8b..bef3e86a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html @@ -26,6 +26,7 @@ <div class="o-form-element"> <label class="c-label" for="title">{__.title}</label> <input ref="title" + tabindex="1" type="text" class="c-field c-field--label" required @@ -40,6 +41,7 @@ <div class="o-form-element"> <label class="c-label" for="description">{__.description}</label> <textarea ref="description" + tabindex="1" class="c-field c-field--label" name="description" disabled={opts.form.model.closed} @@ -53,6 +55,7 @@ <div class="o-form-element"> <label class="c-label" for="name">{__.name}</label> <input ref="name" + tabindex="1" type="text" class="c-field c-field--label" required @@ -67,6 +70,7 @@ <div class="o-form-element"> <label class="c-label" for="email">{__.email}</label> <input ref="email" + tabindex="1" type="email" class="c-field c-field--label" name="email" diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html index 57dfa0e1..4a7f2142 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html @@ -66,11 +66,13 @@ require("../components/HumanInput.tag.html"); <div class="actions" if={!showSummary}> <a class="c-button c-button--ghost" + tabindex="3" href={form.creation ? "#/home" : ("#/poll/" + form.model.id + "/vote/" + form.model.permission)}> <i class="fa fa-undo" aria-hidden="true"></i> {__.cancel} </a> <button type={form.creation || form.model.closed ? "button" : "submit"} if={form.step > 0} + tabindex="2" class="c-button c-button--ghost" onclick={previousStep}> <i class="fa fa-chevron-left" aria-hidden="true"></i> @@ -79,12 +81,14 @@ require("../components/HumanInput.tag.html"); <button if={form.step < form.steps.length - 1} type="submit" class="c-button c-button--info" + tabindex="1" onclick={nextStep}> {__.next} <i class="fa fa-chevron-right " aria-hidden="true"></i> </button> <button type="submit" + tabindex="1" if={!form.creation || form.step === form.steps.length - 1} class="c-button c-button--info" show={!form.model.closed} diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html index edcabb66..7f9c84c6 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html @@ -19,38 +19,28 @@ * #L% */ require("../components/date-time-picker.tag.html"); +require("../components/Checkbox.tag.html"); <Settings> <div class="form-section" show={form.creation}> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.restricted} - <input type="checkbox" - name="pollType" - ref="pollType" - disabled={opts.form.hasVotes} - checked={opts.form.model.pollType === "RESTRICTED"} - onclick={togglePollType}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - {opts.form.model.pollType === "RESTRICTED" ? __.restricted_yes : __.restricted_no} - </label> - + <Checkbox label="{__.restricted}" + name="pollType" + ref="pollType" + i18nprefix="{i18nprefix}" + disabled={opts.form.hasVotes} + checkboxchecked={opts.form.model.pollType === "RESTRICTED"} + ontogglecheckbox={togglePollType}> + {checked ? __.restricted_yes : __.restricted_no} + </Checkbox> </div> <h4><i class="fa fa-cogs"></i> {__.basic_usage}</h4> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.use_basic_usage} - <input type="checkbox" - checked={!showOptions} - onclick={toggleShowOptions} - disabled={opts.form.model.closed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.use_basic_usage}" + disabled={opts.form.model.closed} + checkboxchecked={!showOptions} + ontogglecheckbox={toggleShowOptions}/> </div> <div class="c-alert c-alert--info" if={!showOptions}> {__.basic_usage_detail} @@ -82,6 +72,7 @@ require("../components/date-time-picker.tag.html"); class="c-field c-field--choice" title="{type.shortHelper}"> <input type="radio" + tabindex="1" name="voteCountingTypeRadios" ref="voteCountingType{type.id}" checked="{type && type.id.toString() === form.model.voteCountingType}" @@ -91,6 +82,7 @@ require("../components/date-time-picker.tag.html"); </fieldset> <select class="c-field choice-select" + tabindex="1" ref="voteCountingType" value={form.model.voteCountingType} disabled={form.hasVotes || opts.form.model.closed} @@ -111,19 +103,13 @@ require("../components/date-time-picker.tag.html"); <div class="form-section"> <h4><i class="fa fa-check-square"></i> {__.nav_choices}</h4> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.addChoices} - <input type="checkbox" - name="choiceAddAllowed" - id="choiceAddAllowed" - ref="addChoices" - checked={form.model.choiceAddAllowed} - disabled={form.hasVotes || opts.form.model.closed} - onclick="{toggleChoiceAddAllowed}"> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.addChoices}" + name="choiceAddAllowed" + id="choiceAddAllowed" + ref="addChoices" + disabled={form.hasVotes || opts.form.model.closed} + checkboxchecked={form.model.choiceAddAllowed} + ontogglecheckbox={toggleChoiceAddAllowed}/> </div> <div show="{form.model.choiceAddAllowed}" class="config-period"> <div class="o-form-element"> @@ -131,6 +117,7 @@ require("../components/date-time-picker.tag.html"); {__.beginChoiceDate} </label> <date-time-picker ref="beginChoiceDate" + tabindex="1" name="beginChoiceDate" id="beginChoiceDate" datetime={form.model.beginChoiceDate} @@ -141,6 +128,7 @@ require("../components/date-time-picker.tag.html"); {__.endChoiceDate} </label> <date-time-picker ref="endChoiceDate" + tabindex="1" name="endChoiceDate" id="endChoiceDate" datetime={form.model.endChoiceDate} @@ -148,25 +136,20 @@ require("../components/date-time-picker.tag.html"); </div> </div> <div show="{canLimitNumberOfChoices}" class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.limitChoices} - <input type="checkbox" - name="limitChoices" - id="limitChoices" - ref="limitChoices" - disabled={form.hasVotes || opts.form.model.closed} - checked={form.model.limitChoices} - onclick="{toggleLimitChoices}"> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.limitChoices}" + name="limitChoices" + id="limitChoices" + ref="limitChoices" + disabled={form.hasVotes || opts.form.model.closed} + checkboxchecked={form.model.limitChoices} + ontogglecheckbox={toggleLimitChoices}/> </div> <div show="{form.model.limitChoices}" class="o-form-element"> <label class="c-label" for="maxChoiceNumber"> {__.maxChoiceNumber} </label> <input name="maxChoiceNumber" + tabindex="1" id="maxChoiceNumber" ref="maxChoiceNumber" class="c-field c-field--label" @@ -182,19 +165,13 @@ require("../components/date-time-picker.tag.html"); <div class="form-section"> <h4><i class="fa fa-envelope"></i> {__.nav_votes}</h4> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.votePeriod} - <input type="checkbox" - name="votePeriod" - id="votePeriod" - ref="votePeriod" - checked={form.model.votePeriod} - disabled={opts.form.model.closed} - onclick="{toggleVotePeriod}"> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.votePeriod}" + name="votePeriod" + id="votePeriod" + ref="votePeriod" + disabled={opts.form.model.closed} + checkboxchecked={form.model.votePeriod} + ontogglecheckbox={toggleVotePeriod}/> </div> <div show="{form.model.votePeriod}" class="config-period"> <div class="o-form-element"> @@ -202,16 +179,18 @@ require("../components/date-time-picker.tag.html"); {__.beginDate} </label> <date-time-picker ref="beginDate" - name="beginDate" - id="beginDate" - disabled={form.hasVotes || opts.form.model.closed} - datetime={form.model.beginDate}/> + tabindex="1" + name="beginDate" + id="beginDate" + disabled={form.hasVotes || opts.form.model.closed} + datetime={form.model.beginDate}/> </div> <div class="o-form-element"> <label class="c-label" for="endDate"> {__.endDate} </label> <date-time-picker ref="endDate" + tabindex="1" name="endDate" id="endDate" datetime={form.model.endDate} @@ -225,6 +204,7 @@ require("../components/date-time-picker.tag.html"); {__.voteVisibility} </label> <select class="c-field c-field--label" + tabindex="1" ref="voteVisibility" disabled={form.hasVotes || opts.form.model.closed} value={form.model.voteVisibility}> @@ -235,19 +215,13 @@ require("../components/date-time-picker.tag.html"); </select> </div> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.nav_anonymousVote} - <input type="checkbox" - name="anonymousVote" - id="anonymousVote" - ref="anonymousVote" - disabled={form.hasVotes || opts.form.model.closed} - checked={form.model.anonymousVoteAllowed} - onclick="{toggleAnonymousVote}"> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.nav_anonymousVote}" + name="anonymousVote" + id="anonymousVote" + ref="anonymousVote" + disabled={form.hasVotes || opts.form.model.closed} + checkboxchecked={form.model.anonymousVoteAllowed} + ontogglecheckbox={toggleAnonymousVote}/> </div> </div> <div class="form-section"> @@ -257,6 +231,7 @@ require("../components/date-time-picker.tag.html"); {__.resultVisibility} </label> <select class="c-field c-field--label" + tabindex="1" ref="resultVisibility" disabled={form.hasVotes || opts.form.model.closed} value={form.model.resultVisibility}> @@ -266,19 +241,13 @@ require("../components/date-time-picker.tag.html"); </select> </div> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.continuousResult} - <input type="checkbox" - name="continuousResults" - id="continuousResults" - ref="continuousResults" - checked={form.model.continuousResults} - disabled={opts.form.model.closed} - onclick="{toggleContinuousResults}"> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.continuousResult}" + name="continuousResults" + id="continuousResults" + ref="continuousResults" + disabled={opts.form.model.closed} + checkboxchecked={form.model.continuousResults} + ontogglecheckbox={toggleContinuousResults}/> </div> </div> </div> @@ -291,6 +260,7 @@ require("../components/date-time-picker.tag.html"); {__.commentVisibility} </label> <select class="c-field c-field--label" + tabindex="1" ref="commentVisibility" disabled={form.hasVotes || opts.form.model.closed} value={form.model.commentVisibility}> @@ -308,54 +278,39 @@ require("../components/date-time-picker.tag.html"); {__.notification} <i class="fa fa-question-circle cursor-help warning" if="{!form.model.creatorEmail}" title="{__.notification_disabled}"></i> </legend> - <label class="c-field c-field--choice c-toggle c-toggle--info"> - {__.voteNotification} - <input type="checkbox" - ref="voteNotification" - checked={form.model.voteNotification} - disabled={!form.model.creatorEmail || opts.form.model.closed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> - <label class="c-field c-field--choice c-toggle c-toggle--info"> - {__.commentNotification} - <input type="checkbox" - ref="commentNotification" - checked={form.model.commentNotification} - disabled={!form.model.creatorEmail || opts.form.model.closed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> - <label class="c-field c-field--choice c-toggle c-toggle--info"> - {__.newChoiceNotification} - <input type="checkbox" - ref="newChoiceNotification" - checked={form.model.newChoiceNotification} - disabled={!form.model.creatorEmail || opts.form.model.closed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label> + <Checkbox label="{__.voteNotification}" + labelclass="c-field c-field--choice" + ref="voteNotification" + disabled={!form.model.creatorEmail || opts.form.model.closed} + checkboxchecked={form.model.voteNotification}/> + <Checkbox label="{__.commentNotification}" + labelclass="c-field c-field--choice" + ref="commentNotification" + disabled={!form.model.creatorEmail || opts.form.model.closed} + checkboxchecked={form.model.commentNotification}/> + <Checkbox label="{__.newChoiceNotification}" + labelclass="c-field c-field--choice" + ref="newChoiceNotification" + disabled={!form.model.creatorEmail || opts.form.model.closed} + checkboxchecked={form.model.newChoiceNotification}/> </fieldset> <div class="o-form-element"> - <label class="c-toggle c-toggle--info"> - {__.notifyMeBeforePollEnds} - <input type="checkbox" - checked={notifyMeBeforePollEnds} - onclick={toggleNotifyMeBeforePollEnds} - disabled={disableNotifyMeBeforePollEnds || opts.form.model.closed}> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - <i class="fa fa-question-circle cursor-help warning" if="{disableNotifyMeBeforePollEnds}" title="{__.notifyMeBeforePollEnds_disabled}"></i> - </label> + <Checkbox label="{__.notifyMeBeforePollEnds}" + labelclass="c-field c-field--choice" + i18nprefix="{i18nprefix}" + disabled={disableNotifyMeBeforePollEnds || opts.form.model.closed} + checkboxchecked={notifyMeBeforePollEnds} + ontogglecheckbox={toggleNotifyMeBeforePollEnds}> + <i class="fa fa-question-circle cursor-help warning" + if="{checked}" + title="{__.notifyMeBeforePollEnds_disabled}"></i> + </Checkbox> <div if={notifyMeBeforePollEnds}> <label class="c-label"> {__.notifyMeHoursBeforePollEnds} </label> <input type="number" + tabindex="1" class="c-field c-field--label" ref="notifyMeHoursBeforePollEnds" value={form.model.notifyMeHoursBeforePollEnds} @@ -368,8 +323,9 @@ require("../components/date-time-picker.tag.html"); </div> <script type="es6"> + this.i18nprefix = "poll_settings"; this.session = require("../../js/Session"); - this.installBundle(this.session, "poll_settings"); + this.installBundle(this.session, this.i18nprefix); this.form = this.opts.form; if (!this.form.model.voteCountingType) { @@ -388,6 +344,7 @@ require("../components/date-time-picker.tag.html"); this.refs["voteCountingType" + this.form.model.voteCountingType].checked = true; this.refs.voteCountingType.value = this.form.model.voteCountingType; this.updateVoteCountingTypeHelp(); + this.refs.pollType.focus(); }); this.toggleVoteCountingTypeHelp = () => { @@ -426,6 +383,7 @@ require("../components/date-time-picker.tag.html"); this.toggleChoiceAddAllowed = () => { this.form.model.choiceAddAllowed = !this.form.model.choiceAddAllowed; + this.update(); }; this.toggleLimitChoices = () => { @@ -433,11 +391,13 @@ require("../components/date-time-picker.tag.html"); if (this.form.model.limitChoices && !this.form.model.maxChoiceNumber) { this.form.model.maxChoiceNumber = 1; } + this.update(); }; this.toggleVotePeriod = () => { this.form.model.votePeriod = !this.form.model.votePeriod; this.updateDisableNotifyMeBeforePollEnds(); + this.update(); }; this.onEndDateChanged = () => { @@ -446,14 +406,17 @@ require("../components/date-time-picker.tag.html"); this.toggleAnonymousVote = () => { this.form.model.anonymousVoteAllowed = !this.form.model.anonymousVoteAllowed; + this.update(); }; this.toggleShowOptions = () => { this.showOptions = this.form.showOptions = !this.showOptions; + this.update(); }; this.toggleContinuousResults = () => { this.form.model.continuousResults = !this.form.model.continuousResults; + this.update(); }; this.showVoteCountingTypeHelp = e => { @@ -476,10 +439,12 @@ require("../components/date-time-picker.tag.html"); this.refs.notifyMeHoursBeforePollEnds = undefined; } this.notifyMeBeforePollEnds = !this.notifyMeBeforePollEnds; + this.update(); }; this.togglePollType = () => { this.opts.form.togglePollType(); + this.update(); }; this.submit = () => { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.