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 fc9686f520e6deff3a25d9a8f9abd474c42964e9 Author: Kevin Morin <morin@codelutin.com> Date: Tue Jul 18 09:40:52 2017 +0200 Début des votes condensés --- .../src/main/web/tag/poll/Votes.tag.html | 309 ++++++++++++--------- 1 file changed, 171 insertions(+), 138 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index 51bd3f8c..7917c63b 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -4,7 +4,7 @@ require("./Podium.tag.html"); require("../components/HumanInput.tag.html"); <Votes> <div class="container" show="{loaded}"> - <div class="voters"> + <div class="voter"> <form ref="formAddVote" class="fix separator-top separator-left separator-bottom"> <HumanInput onsubmit="{addVote}"/> <div class="current-voter"> @@ -85,123 +85,127 @@ require("../components/HumanInput.tag.html"); </div> </div> - <button type="button" - if={poll.votes && poll.votes.length && !showVotes} - class="expand c-button c-button--info" - onclick="{onShowVotes}"> - <i class="fa fa-caret-right"/> - </button> - <button type="button" - if={poll.votes && poll.votes.length && showVotes} - class="collapse c-button c-button--info" - onclick="{onHideVotes}"> - <i class="fa fa-caret-left"/> - </button> - - <form if={showVotes} each={vote, index in poll.votes} class="vote separator-right"> - <HumanInput onsubmit="{updateVote(vote)}"/> - <div class="voter"> - <span class="voter-name" - if="{vote.id !== voteId}"> - <i class="fa fa-user"/> - <span if="{!vote.anonymous}">{vote.voterName}</span> - <span if="{vote.anonymous}" class="anonymous-voter">{parent.__.anonymousVoter}</span> - </span> - <div class="o-field o-field--icon-left" - if={vote.id === voteId}> - <i class="fa fa-fw fa-user c-icon"></i> - <input ref="vote_{vote.id}_voter" - name="vote_{vote.id}_voter" - type="text" - class="c-field {c-field--error: error && error['voter.name']}" - value="{vote.voterName}" - required={vote.id === voteId} - disabled={vote.id !== voteId} - placeholder="{__.authorPlaceHolder}"> - </div> - </div> - <div each={choice in poll.choices} class="vote-choice separator-top" > - <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} - ref="vote_{vote.id}_{choice.id}" - name="vote_{vote.id}_{choice.id}" - class="check {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" - type="checkbox" - checked={poll.getVoteValue(vote, choice) == 1} - disabled={voteId !== vote.id}> - <input if={poll.voteCountingTypeValue.renderType === 'text' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} - ref="vote_{vote.id}_{choice.id}" - class="text c-field {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" - name="vote_{vote.id}_{choice.id}" - type="number" - min="{poll.voteCountingTypeValue.minimumValue}" - max="{poll.voteCountingTypeValue.maximumValue}" - required={vote.id === voteId} - disabled={voteId !== vote.id} - value={poll.getVoteValue(vote, choice)}> - </div> - <div class="vote-actions separator-top"> - <span class="c-input-group"> - <button type="button" - class="c-button c-button--error" - if="{(poll.permission || !poll.isClosed && vote.permission) && (!voteId || voteId != vote.id)}" - onclick="{parent.deleteVote(vote)}"> - <i class="fa fa-trash"/> - </button> - <button type="button" - class="c-button c-button--brand" - if="{!poll.isClosed && vote.permission && (!voteId || voteId != vote.id)}" - onclick="{parent.onEditVote(vote)}"> - <i class="fa fa-pencil-square-o"/> - </button> - </span> - <span class="c-input-group" - if={vote.id === voteId}> - <button class="c-button c-button--error" - type="button" - onclick="{cancelEditVote(vote)}"> - <i class="fa fa-remove"/> - </button> - <button class="c-button c-button--success" - ref="vote_{vote.id}_vote" - type="submit"> - <i class="fa fa-check"/> - </button> - </span> - </div> - <div class="c-hint--static c-hint--error" if="{vote.id === voteId && tooManyChoicesSelected}"> - {__.tooManyChoicesSelected} {poll.maxChoiceNumber} - </div> - <div class="c-hint--static c-hint--error" if="{vote.id === voteId && error}"> - <div each={fields in error}> - {fields} - </div> - </div> - </form> </div> </div> </div> - <form ref="formAddChoice" - if={poll.status === "ADDING_CHOICES"}> - <HumanInput onsubmit="{addChoice}"/> - <div class="o-form-element"> - <label class="c-label" for="choice">{__.addChoice}</label> - <div class="c-input-group"> - <div class="o-field"> - <Choice ref="choice" - class="choice c-field" - name="choice" - choice="{choiceToAdd}"/> - </div> - <button type="submit" - class="c-button c-button--success" - tooltips="{__.addChoice}"> - <i class="fa fa-plus"/> - </button> + <div class="voters"> + <div each="{vote, index in poll.votes}" class="row"> + <div class="name"> + <i class="fa fa-user"/> + <span if="{!vote.anonymous}">{vote.voterName}</span> + <span if="{vote.anonymous}" class="anonymous-voter">{parent.__.anonymousVoter}</span> </div> + <div class="results"> + <div each="{choice in poll.choices}" + class="result c-tooltip c-tooltip--bottom {'selected' : poll.getVoteValue(vote, choice) == 1}" + aria-label="{choice.choiceValue}"> + </div> + </div> + </div> + </div> + + <form each={vote, index in poll.votes} class="vote separator-right"> + <HumanInput onsubmit="{updateVote(vote)}"/> + <div class="voter"> + <span class="voter-name" + if="{vote.id !== voteId}"> + <i class="fa fa-user"/> + <span if="{!vote.anonymous}">{vote.voterName}</span> + <span if="{vote.anonymous}" class="anonymous-voter">{parent.__.anonymousVoter}</span> + </span> + <div class="o-field o-field--icon-left" + if={vote.id === voteId}> + <i class="fa fa-fw fa-user c-icon"></i> + <input ref="vote_{vote.id}_voter" + name="vote_{vote.id}_voter" + type="text" + class="c-field {c-field--error: error && error['voter.name']}" + value="{vote.voterName}" + required={vote.id === voteId} + disabled={vote.id !== voteId} + placeholder="{__.authorPlaceHolder}"> + </div> + </div> + <div each={choice in choices} class="vote-choice separator-top" > + <input if={poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} + ref="vote_{vote.id}_{choice.id}" + name="vote_{vote.id}_{choice.id}" + class="check {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" + type="checkbox" + checked={poll.getVoteValue(vote, choice) == 1} + disabled={voteId !== vote.id}> + <input if={poll.voteCountingTypeValue.renderType === 'text' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} + ref="vote_{vote.id}_{choice.id}" + class="text c-field {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" + name="vote_{vote.id}_{choice.id}" + type="number" + min="{poll.voteCountingTypeValue.minimumValue}" + max="{poll.voteCountingTypeValue.maximumValue}" + required={vote.id === voteId} + disabled={voteId !== vote.id} + value={poll.getVoteValue(vote, choice)}> + </div> + <div class="vote-actions separator-top"> + <span class="c-input-group"> + <button type="button" + class="c-button c-button--error" + if="{(poll.permission || !poll.isClosed && vote.permission) && (!voteId || voteId != vote.id)}" + onclick="{parent.deleteVote(vote)}"> + <i class="fa fa-trash"/> + </button> + <button type="button" + class="c-button c-button--brand" + if="{!poll.isClosed && vote.permission && (!voteId || voteId != vote.id)}" + onclick="{parent.onEditVote(vote)}"> + <i class="fa fa-pencil-square-o"/> + </button> + </span> + <span class="c-input-group" + if={vote.id === voteId}> + <button class="c-button c-button--error" + type="button" + onclick="{cancelEditVote(vote)}"> + <i class="fa fa-remove"/> + </button> + <button class="c-button c-button--success" + ref="vote_{vote.id}_vote" + type="submit"> + <i class="fa fa-check"/> + </button> + </span> + </div> + <div class="c-hint--static c-hint--error" if="{vote.id === voteId && tooManyChoicesSelected}"> + {__.tooManyChoicesSelected} {poll.maxChoiceNumber} </div> + <div class="c-hint--static c-hint--error" if="{vote.id === voteId && error}"> + <div each={fields in error}> + {fields} + </div> + </div> + </form> + + <form ref="formAddChoice" + if={poll.status === "ADDING_CHOICES"}> + <HumanInput onsubmit="{addChoice}"/> + <div class="o-form-element"> + <label class="c-label" for="choice">{__.addChoice}</label> + <div class="c-input-group"> + <div class="o-field"> + <Choice ref="choice" + class="choice c-field" + name="choice" + choice="{choiceToAdd}"/> + </div> + <button type="submit" + class="c-button c-button--success" + tooltips="{__.addChoice}"> + <i class="fa fa-plus"/> + </button> + </div> + </div> - </form> + </form> </div> <script type="es6"> @@ -229,8 +233,6 @@ require("../components/HumanInput.tag.html"); this.update(); }); - this.showVotes = false; - this.voteId = null; this.error = null; @@ -381,18 +383,10 @@ require("../components/HumanInput.tag.html"); }); }; - this.onShowVotes = () => { - this.showVotes = true; - }; - - this.onHideVotes = () => { - this.showVotes = false; - }; - </script> <style> - .voters { + .voter { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -401,12 +395,12 @@ require("../components/HumanInput.tag.html"); margin-top: 20px; } - .voters .fix { + .voter .fix { flex-grow: 0; min-width: 200px; } - .voters .fix .choice { + .voter .fix .choice { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -414,25 +408,25 @@ require("../components/HumanInput.tag.html"); align-items: stretch; } - .voters .fix .choice .choice-value { + .voter .fix .choice .choice-value { flex-grow: 1; font-size: 1.5em; min-width: 0; } - .voters .fix .choice .current-choice { + .voter .fix .choice .current-choice { flex-grow: 0; display: flex; justify-content: center; min-width: 50px; } - .voters .window { + .voter .window { overflow-x: auto; overflow-y: hidden; } - .voters .window .frame { + .voter .window .frame { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -441,16 +435,16 @@ require("../components/HumanInput.tag.html"); height: 100%; } - .voters .window .frame .results { + .voter .window .frame .results { min-width: 100px; } - .voters .window .frame .vote { + .voter .window .frame .vote { min-width: 100px; } - .voters .window .frame .expand, - .voters .window .frame .collapse { + .voter .window .frame .expand, + .voter .window .frame .collapse { padding: 0; min-width: 6px; } @@ -462,12 +456,12 @@ require("../components/HumanInput.tag.html"); text-align: center; } - .voters .fix .choice, - .voters .fix .current-voter-actions, - .voters .window .frame .vote .vote-choice, - .voters .window .frame .vote .vote-actions, - .voters .window .frame .results .score-choice, - .voters .window .frame .results .results-actions { + .voter .fix .choice, + .voter .fix .current-voter-actions, + .voter .window .frame .vote .vote-choice, + .voter .window .frame .vote .vote-actions, + .voter .window .frame .results .score-choice, + .voter .window .frame .results .results-actions { height: 40px; display: flex; align-items: center; @@ -489,5 +483,44 @@ require("../components/HumanInput.tag.html"); padding: 0 0 0 1px; } + .voters { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .voters .row { + display: flex; + width: 70%; + align-items: center; + } + + .voters .name { + width: 200px; + text-align: right; + margin-right: 10px; + } + + .voters .result { + background-color: rgb(237, 237, 237); + min-width: 15px; + height: 15px; + margin: 2px; + width: 100%; + } + + .voters .results { + display: flex; + width: 100%; + } + + .voters .result:hover { + border: 1px solid #000; + } + + .voters .selected { + background-color: #13a2ff; + } </style> </Votes> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.