branch feature/pollen-riot-js updated (d653e81 -> 086d54f)
This is an automated email from the git hooks/post-receive script. New change to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from d653e81 Suppression EmitterService (tout est dans la session), enfin on peut créer un sondage new 086d54f Add help mecanism on settings The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 086d54f69a491a6419a7686c7932fb9662f1e4cc Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Jan 18 12:06:14 2017 +0100 Add help mecanism on settings Summary of changes: 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(-) -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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>.
participants (1)
-
chorem.org scm