This is an automated email from the git hooks/post-receive script. New commit to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 086d54f69a491a6419a7686c7932fb9662f1e4cc Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Jan 18 12:06:14 2017 +0100 Add help mecanism on settings --- pollen-ui-riot-js/src/main/web/i18n.json | 10 +- pollen-ui-riot-js/src/main/web/js/PollForm.js | 3 +- .../src/main/web/tag/poll/PollSettings.tag | 427 +++++++++++++-------- 3 files changed, 267 insertions(+), 173 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index c999419..5a7e1aa 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -85,7 +85,7 @@ "poll_settings_nav_voteBeginDate": "Date de début", "poll_settings_nav_voteEndDate": "Date de fin", "poll_settings_nav_resultVisibility": "Visibilité des résultats", - "poll_settings_nav_continiousResult": "Résultats continus", + "poll_settings_nav_continuousResult": "Résultats continus", "poll_settings_nav_choices": "Choix", "poll_settings_nav_addChoices": "Ajouter des choix", "poll_settings_nav_limitChoices": "Limiter les choix", @@ -96,7 +96,7 @@ "poll_settings_nav_comments": "Commentaires", "poll_settings_nav_commentVisibility": "Visiblité", "poll_settings_poll_configuration": "Configuration du sondage", - "poll_settings_continiousResult": "Voir les résultats en continue", + "poll_settings_continuousResult": "Voir les résultats en continue", "poll_settings_choicesConfiguration": "Configuration des choix", "poll_settings_addChoices": "Est-ce que les participants peuvent ajouter des choix ?", "poll_settings_limitChoices": "Limiter le nombre de choix par vote", @@ -109,6 +109,7 @@ "poll_settings_commentsConfiguration": "Configuration des commentaires", "poll_settings_voteBeginDate": "Quand les participants peuvent commencer à voter ?", "poll_settings_voteEndDate": "Date de fin des votes", + "poll_settings_help": "Aide", "poll_choices_label": "Choix", "poll_choices_description": "Description", "poll_choices_previous": "Précédent", @@ -216,7 +217,7 @@ "poll_settings_nav_voteBeginDate": "Begin date", "poll_settings_nav_voteEndDate": "End date", "poll_settings_nav_resultVisibility": "Results visibility", - "poll_settings_nav_continiousResult": "Continious results", + "poll_settings_nav_continuousResult": "Continuous results", "poll_settings_nav_choices": "Choices", "poll_settings_nav_addChoices": "Add choices", "poll_settings_nav_limitChoices": "Limit choices", @@ -227,7 +228,7 @@ "poll_settings_nav_comments": "Comments", "poll_settings_nav_commentVisibility": "Visibility", "poll_settings_poll_configuration": "Poll configuration", - "poll_settings_continiousResult": "Use continious results", + "poll_settings_continuousResult": "Use continuous results", "poll_settings_choicesConfiguration": "Choices configuration", "poll_settings_addChoices": "Can user add choices?", "poll_settings_limitChoices": "Limit number of choices to use on a vote", @@ -240,6 +241,7 @@ "poll_settings_commentsConfiguration": "Comments configuration", "poll_settings_voteBeginDate": "When users can start to vote?", "poll_settings_voteEndDate": "When poll is ending?", + "poll_settings_help": "Help", "poll_choices_label": "Choice", "poll_choices_description": "Description", "poll_choices_previous": "Previous", diff --git a/pollen-ui-riot-js/src/main/web/js/PollForm.js b/pollen-ui-riot-js/src/main/web/js/PollForm.js index 52934b8..a8ebdc8 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -9,7 +9,7 @@ class PollForm { this.step = 0; this.isInit = false; this.type = null; - this.showOptions = true; + this.showOptions = false; this.model = null; this.choices = []; } @@ -28,6 +28,7 @@ class PollForm { this.model.description = "Premier sondage!"; this.model.name = "Dick Laurent"; this.model.email = "user@pollen.org"; + this.model.voteCountingType= "1"; this.model.participant = []; this.choices = [ new ChoiceText("Mozart", "Requiem is so powerfull"), diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag index a1a40ce..8aeb055 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag @@ -2,7 +2,7 @@ <div class="legend"> {__.basic_usage} - <a class="button skip mainColorBackground" onclick="{nextStep}">{__.skip}</a> + <a class="button skip mainColorBackground" onclick="{skip}">{__.skip}</a> </div> <div class="actions"> @@ -11,203 +11,260 @@ <a if="{showOptions}" class="button wide" onclick="{toggleShowOptions}">{__.hideOptions}</a> </div> - <div if="{showOptions}" id="navigation"> - <nav class="bs-docs-sidebar"> - <ul id="sidebar" class="nav nav-stacked"> - <li> - <a onclick="{scrollTo}" href="#Poll">{__.nav_poll}</a> - <ul class="nav nav-stacked"> - <li> - <a onclick="{scrollTo}" href="#Poll_beginDate">{__.nav_voteBeginDate}</a> - </li> - <li> - <a onclick="{scrollTo}" href="#Poll_endDate">{__.nav_voteEndDate}</a> - </li> - <li> - <a onclick="{scrollTo}" href="#Poll_resultVisibility">{__.nav_resultVisibility}</a> - </li> - <li> - <a onclick="{scrollTo}" href="#Poll_continiousVisibility">{__.nav_continiousResult}</a> - </li> - </ul> - </li> - <li> - <a onclick="{scrollTo}" href="#Choice">{__.nav_choices}</a> - <ul class="nav nav-stacked"> - <li> - <a onclick="{scrollTo}" href="#ChoiceaddChoices">{__.nav_addChoices}</a> - </li> - <li> - <a onclick="{scrollTo}" href="#Choice_limitChoices">{__.nav_limitChoices}</a> - </li> - </ul> - </li> - <li> - <a onclick="{scrollTo}" href="#Vote">{__.nav_votes}</a> - <ul class="nav nav-stacked"> - <li> - <a onclick="{scrollTo}" href="#Vote_countingType">{__.nav_voteCountingType}</a> - </li> - <li> - <a onclick="{scrollTo}" href="#Vote_visibility">{__.nav_voteVisibility}</a> - </li> - <li> - <a onclick="{scrollTo}" href="#Vote_anonymous">{__.nav_anonymousVote}</a> - </li> - </ul> - </li> - <li> - <a onclick="{scrollTo}" href="#Comment">{__.nav_comments}</a> - <ul class="nav nav-stacked"> - <li> - <a onclick="{scrollTo}" href="#Comment_visibility">{__.nav_commentVisibility}</a> - </li> - </ul> - </li> - </ul> - </nav> - <div ref="content" class="content"> - <div class="config-group" id="Poll"> - <div class="config-header">{__.poll_configuration}</div> - <div id="Poll_beginDate"> - <div class="config-subheader">{__.nav_voteBeginDate}</div> - <div class="config-description">{__.voteBeginDate} - </div> - </div> - <div id="Poll_endDate"> - <div class="config-subheader">{__.nav_voteEndDate}</div> - <div class="config-description">{__.voteEndDate}</div> - </div> - <div id="Poll_resultVisibility"> - <div class="config-subheader">{__.nav_resultVisibility}</div> - <div class="config-description"> - {__.resultVisibility} - </div> - <div class="config-form"> - <ul> + <form if="{showOptions}" ref="form" onsubmit="{action}"> + <div id="navigation"> + <nav class="bs-docs-sidebar"> + <ul id="sidebar" class="nav nav-stacked"> + <li> + <a onclick="{scrollTo}" href="#Poll">{__.nav_poll}</a> + <ul class="nav nav-stacked"> <li> - <input type="radio" name="resultVisibility">{__.resultVisibility_creator} + <a onclick="{scrollTo}" href="#Poll_beginDate">{__.nav_voteBeginDate}</a> </li> <li> - <input type="radio" name="resultVisibility">{__.resultVisibility_voter} + <a onclick="{scrollTo}" href="#Poll_endDate">{__.nav_voteEndDate}</a> </li> <li> - <input type="radio" name="resultVisibility">{__.resultVisibility_everybody} + <a onclick="{scrollTo}" href="#Poll_resultVisibility">{__.nav_resultVisibility}</a> </li> - </ul> - </div> - </div> - <div id="Poll_continiousVisibility"> - <div class="config-subheader">{__.nav_continiousResult}</div> - <div class="config-description"> {__.continiousResult}</div> - <div class="config-form"> - <input type="checkbox" name="continiousResult" ref="continiousResult">{__.continiousResult} - </div> - </div> - </div> - - <div id="Choice" class="config-group"> - <div class="config-header">{__.choicesConfiguration}</div> - <div id="Choice_addChoices"> - <div class="config-subheader">{__.nav_addChoices}</div> - <div class="config-description">{__.addChoices}</div> - <div class="config-form"> - <input type="checkbox" name="addChoices" ref="addChoices">{__.addChoices} - </div> - </div> - <div id="Choice_limitChoices"> - <div class="config-subheader">{__.nav_limitChoices}</div> - <div class="config-description">{__.limitChoices}</div> - <div class="config-form"> - <input type="checkbox" name="limitChoices" ref="limitChoices">{__.limitChoices} - </div> - </div> - </div> - <div id="Vote" class="config-group"> - <div class="config-header">{__.votesConfiguration}</div> - <div id="Vote_countingType"> - <div class="config-subheader">{__.nav_voteCountingType}</div> - <div class="config-description">{__.voteCountingType}</div> - <div class="config-form"> - <ul> <li> - <input type="radio" name="voteCountingType">{__.voteCountingType_normal} + <a onclick="{scrollTo}" href="#Poll_continuousVisibility">{__.nav_continuousResult}</a> </li> + </ul> + </li> + <li> + <a onclick="{scrollTo}" href="#Choice">{__.nav_choices}</a> + <ul class="nav nav-stacked"> <li> - <input type="radio" name="voteCountingType">{__.voteCountingType_pourcentage} + <a onclick="{scrollTo}" href="#ChoiceaddChoices">{__.nav_addChoices}</a> </li> <li> - <input type="radio" name="voteCountingType">{__.voteCountingType_condorcet} + <a onclick="{scrollTo}" href="#Choice_limitChoices">{__.nav_limitChoices}</a> </li> </ul> - </div> - </div> - <div id="Vote_visibility"> - <div class="config-subheader">{__.nav_voteVisibility}</div> - <div class="config-description">{__.voteVisibility}</div> - <div class="config-form"> - <ul> + </li> + <li> + <a onclick="{scrollTo}" href="#Vote">{__.nav_votes}</a> + <ul class="nav nav-stacked"> <li> - <input type="radio" name="voteVisibility" ref="voteVisibilityNobody">{__.voteVisibility_creator} + <a onclick="{scrollTo}" href="#Vote_countingType">{__.nav_voteCountingType}</a> </li> <li> - <input type="radio" name="voteVisibility" ref="voteVisibilityVoter">{__.voteVisibility_voter} + <a onclick="{scrollTo}" href="#Vote_visibility">{__.nav_voteVisibility}</a> </li> <li> - <input type="radio" name="voteVisibility" ref="voteVisibilityEverybody">{__.voteVisibility_everybody} + <a onclick="{scrollTo}" href="#Vote_anonymous">{__.nav_anonymousVote}</a> </li> </ul> - </div> - </div> - <div id="Vote_anonymous"> - <div class="config-subheader">{__.nav_anonymousVote}</div> - <div class="config-description">{__.anonoymousVote}</div> - <div class="config-form"> - <input type="checkbox" name="anonymousVote" ref="anonymousVote">{__.anonymousVote} - </div> - </div> - </div> - <div id="Comment" class="config-group"> - <div class="config-header">{__.commentsConfiguration}</div> - <div id="Comment_visibility"> - <div class="config-subheader">{__.nav_commentVisibility}</div> - <div class="config-description">{__.commentVisibility}</div> - <div class="config-form"> - <ul> - <li> - <input type="radio" name="commentVisibility" ref="commentVisibilityCreator">{__.commentVisibility_creator} - </li> - <li> - <input type="radio" name="commentVisibility" ref="commentVisibilityVoter">{__.commentVisibility_voter} - </li> + </li> + <li> + <a onclick="{scrollTo}" href="#Comment">{__.nav_comments}</a> + <ul class="nav nav-stacked"> <li> - <input type="radio" name="commentVisibility" ref="commentVisibilityEverybody">{__.commentVisibility_everybody} + <a onclick="{scrollTo}" href="#Comment_visibility">{__.nav_commentVisibility}</a> </li> </ul> + </li> + </ul> + </nav> + <div class="contentAndHelp"> + <div ref="content" class="content" onsubmit="{action}"> + <div class="config-group" id="Poll"> + <div class="config-header">{__.poll_configuration}</div> + <div id="Poll_beginDate"> + <div class="config-subheader">{__.nav_voteBeginDate}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.voteBeginDate} + </div> + </div> + <div id="Poll_endDate"> + <div class="config-subheader">{__.nav_voteEndDate}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.voteEndDate}</div> + </div> + <div id="Poll_resultVisibility"> + <div class="config-subheader">{__.nav_resultVisibility}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description"> + {__.resultVisibility} + </div> + <div class="config-form"> + <ul> + <li> + <input type="radio" name="resultVisibility" value="CREATOR">{__.resultVisibility_creator} + </li> + <li> + <input type="radio" name="resultVisibility" value="VOTER">{__.resultVisibility_voter} + </li> + <li> + <input type="radio" name="resultVisibility" value="EVERYBODY">{__.resultVisibility_everybody} + </li> + </ul> + </div> + </div> + <div id="Poll_continuousVisibility"> + <div class="config-subheader">{__.nav_continuousResult}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description"> {__.continuousResult}</div> + <div class="config-form"> + <input type="checkbox" name="continuousResult" ref="continuousResult">{__.continuousResult} + </div> + </div> + </div> + + <div id="Choice" class="config-group"> + <div class="config-header">{__.choicesConfiguration}</div> + <div id="Choice_addChoices"> + <div class="config-subheader">{__.nav_addChoices}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.addChoices}</div> + <div class="config-form"> + <input type="checkbox" name="choicesAddAllowed" ref="addChoices">{__.addChoices} + </div> + </div> + <div id="Choice_limitChoices"> + <div class="config-subheader">{__.nav_limitChoices}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.limitChoices}</div> + <div class="config-form"> + <input type="checkbox" name="limitChoices" ref="limitChoices">{__.limitChoices} + </div> + </div> + </div> + <div id="Vote" class="config-group"> + <div class="config-header">{__.votesConfiguration}</div> + <div id="Vote_countingType"> + <div class="config-subheader">{__.nav_voteCountingType}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.voteCountingType}</div> + <div class="config-form"> + <ul> + <li> + <input type="radio" name="voteCountingType" VALUE="1">{__.voteCountingType_normal} + </li> + <li> + <input type="radio" name="voteCountingType" VALUE="2">{__.voteCountingType_pourcentage} + </li> + <li> + <input type="radio" name="voteCountingType" VALUE="3">{__.voteCountingType_condorcet} + </li> + </ul> + </div> + </div> + <div id="Vote_visibility"> + <div class="config-subheader">{__.nav_voteVisibility}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.voteVisibility}</div> + <div class="config-form"> + <ul> + <li> + <input type="radio" name="voteVisibility" ref="voteVisibilityNobody" + VALUE="NOBODY">{__.voteVisibility_creator} + </li> + <li> + <input type="radio" name="voteVisibility" ref="voteVisibilityVoter" + VALUE="VOTER">{__.voteVisibility_voter} + </li> + <li> + <input type="radio" name="voteVisibility" ref="voteVisibilityEverybody" + VALUE="EVERYBODY">{__.voteVisibility_everybody} + </li> + </ul> + </div> + </div> + <div id="Vote_anonymous"> + <div class="config-subheader">{__.nav_anonymousVote}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.anonoymousVote}</div> + <div class="config-form"> + <input type="checkbox" name="anonymousVoteAllowed" ref="anonymousVote">{__.anonymousVote} + </div> + </div> + </div> + <div id="Comment" class="config-group"> + <div class="config-header">{__.commentsConfiguration}</div> + <div id="Comment_visibility"> + <div class="config-subheader">{__.nav_commentVisibility}<i class="fa fa-info-circle" + onclick="{help}"></i></div> + <div class="config-description">{__.commentVisibility}</div> + <div class="config-form"> + <ul> + <li> + <input type="radio" name="commentVisibility" ref="commentVisibilityCreator" + VALUE="CREATOR">{__.commentVisibility_creator} + </li> + <li> + <input type="radio" name="commentVisibility" ref="commentVisibilityVoter" + VALUE="VOTER">{__.commentVisibility_voter} + </li> + <li> + <input type="radio" name="commentVisibility" ref="commentVisibilityEverybody" + VALUE="EVERYBODY">{__.commentVisibility_everybody} + </li> + </ul> + </div> + </div> </div> </div> + <div show="{showHelp}" ref="help" class="help"> + <div class="config-header">{__.help} + <i class="fa fa-close" onclick="{closeHelp}"></i> + </div> + <div class="content">TODO</div> + </div> </div> </div> - </div> - <div if="{showOptions}" class="actions"> - <a class="button" onclick="{previousStep}">{__.previous}</a> - <a class="button mainColorBackground" onclick="{nextStep}">{__.next}</a> - </div> + <div class="actions"> + <a class="button" onclick="{previousStep}">{__.previous}</a> + <input type="submit" class="button mainColorBackground" value="{__.next}"> + </div> + </form> <script> this.form = opts.form; this.showOptions = this.form.showOptions; this.installBundle(opts.session, "poll_settings"); + this.showHelp = false; + + this.help = (e) => { + let target = e.target; + let helpId = 'Help_' + target.parentNode.parentNode.id; + console.info(helpId); + this.showHelp = true; + this.update({showHelp:this.showHelp}); + }; + + this.closeHelp = (e) => { + this.showHelp = false; + this.update({showHelp:this.showHelp}); + }; + + this.action = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.form.nextStep(); + }; + + this.on('mount', () => { + + let model = this.form.model; + let form = this.refs.form; + let FormHelper = require('../../js/FormHelper'); + FormHelper.fillForm(form, model); + + }); this.previousStep = (e) => { this.form.previousStep(); }; - this.nextStep = (e) => { + + this.skip = (e) => { this.form.nextStep(); }; this.scrollTo = (e) => { e.preventDefault(); e.stopPropagation(); + this.closeHelp(e); let id = e.currentTarget.href.substring(e.currentTarget.href.indexOf('#') + 1); if (id.indexOf('_') > -1) { id = id.substring(0, id.indexOf('_')); @@ -217,11 +274,22 @@ this.toggleShowOptions = () => { this.showOptions = this.form.showOptions = !this.showOptions; - } + }; </script> <style> + .fa-info-circle { + margin-left: 5px; + cursor: help; + } + + + .fa-close { + float: right; + cursor: hand; + color: red; + } .config-form > ul > li > input, .config-form > input { display: inline; width: 50px; @@ -252,9 +320,9 @@ .config-group { height: 100%; - border: solid 2px #c8ccca; - padding: 10px; - border-radius: 10px; + /*border: solid 2px #c8ccca;*/ + /*padding: 10px;*/ + /*border-radius: 10px;*/ } ul { @@ -266,10 +334,6 @@ margin-top: 5px; } - fieldset { - padding: 10px; - } - .legend { width: 100%; border-bottom: 1px solid #b2c7d3; @@ -292,7 +356,7 @@ width: 100px; } - .actions > a, .skip { + .actions > a, .actions > input, .skip { margin: 5px; } @@ -364,6 +428,18 @@ margin-left: 10px; } + .contentAndHelp { + display: flex; + flex-direction: row; + justify-content: space-around; + height: 100%; + width: 80%; + max-width: 900px; + border: solid 2px #c8ccca; + padding: 10px; + border-radius: 10px; + } + .content { /*display: flex;*/ /*flex-direction: column;*/ @@ -374,14 +450,29 @@ /*border-radius: 10px;*/ /*text-align: center;*/ /*align-items: flex-start;*/ - width: 99%; + width: 400px; height: 450px; overflow-y: hidden; - padding-right: 20px; + /*padding-right: 20px;*/ align-self: flex-start; flex-grow: 2; } + .help { + margin-left: 10px; + padding-left: 10px; + height: 450px; + border-left: solid 2px #c8ccca; + } + + .show { + display: flex; + } + + .hide { + display: none; + } + #navigation { overflow: hidden; width: 100%; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.