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 4d3382952784cfc02d3784393c91065f76a01fe2 Author: Kevin Morin <morin@codelutin.com> Date: Tue Aug 1 17:09:11 2017 +0200 refs #74 ajout de l'entête de colonne sur le vote condensé. Il se cache quand il n'y a pas assez de place. Modification des tooltip pour prendre en compte les images et les dates --- pollen-ui-riot-js/src/main/web/css/custom.css | 3 + .../src/main/web/tag/poll/Votes.tag.html | 164 +++++++++++++++++---- 2 files changed, 135 insertions(+), 32 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/custom.css b/pollen-ui-riot-js/src/main/web/css/custom.css index 8d895817..5dd7b38c 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -90,4 +90,7 @@ --tooltip-background: #111; --tooltip-color: #FFF; + + --report: rgba(0,0,0,0.05); + --report-hover: #04c4bb; } 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 78c5d083..ca39f8d3 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 @@ -8,7 +8,7 @@ require("../components/HumanInput.tag.html"); <!-- Form to vote --> <div class="voter"> <form id="voteForm" ref="formAddVote" class="fix separator-top separator-left separator-bottom"> - <HumanInput onsubmit="{voteInEdition ? updateVote : addVote}"/> + <HumanInput onsubmit="{voteInEdition ? updateVote : addVote}"></HumanInput> <div class="current-voter"> <div class="o-field o-field--icon-left o-field--icon-right" if={poll.canVote} > @@ -27,7 +27,7 @@ require("../components/HumanInput.tag.html"); </div> <div each={choice in poll.choices} class="choice separator-top"> <div class="choice-value"> - <ChoiceView choice={choice} center="true"/> + <ChoiceView choice={choice} center="true"></ChoiceView> </div> <div class="current-choice" if={poll.canVote}> @@ -58,13 +58,13 @@ require("../components/HumanInput.tag.html"); class="c-button c-button--error" type="button" onclick="{cancelEditVote}"> - <i class="fa fa-remove"/> + <i class="fa fa-remove"></i> {__.cancelEdition} </button> <button if="{voteInEdition}" class="c-button c-button--success" type="submit"> - <i class="fa fa-check"/> + <i class="fa fa-check"></i> {__.validateEdition} </button> </div> @@ -101,11 +101,20 @@ require("../components/HumanInput.tag.html"); </div> <!-- Show votes --> - <div class="voters"> - <div each="{vote, index in poll.votes}" class="row"> - <div class="name {'separator-top' : index == 0}" title="{vote.voterName}"> - <div class="voter-name"> - <i class="fa fa-user-circle c-icon"/> + <div class="voters" if="{poll.resultIsVisible && poll.votes.length > 0}"> + <div class="row header separator-bottom"> + <div></div> + <div class="choices separator-left" if="{showChoiceHeader}"> + <div each="{choice in poll.choices}" class="choice separator-top separator-right" + onmouseenter="{parent.showTooltip(null, choice)}" onclick="{parent.showTooltip(null, choice)}" onmouseleave="{parent.hideTooltip}"> + <ChoiceView choice={choice} center="true" hideReport="true"></ChoiceView> + </div> + </div> + </div> + <div each="{vote, index in poll.votes}" class="row separator-bottom"> + <div class="name separator-right separator-left"> + <div class="voter-name" onmouseenter="{parent.showTooltip(vote)}" onclick="{parent.showTooltip(vote)}" onmouseleave="{parent.hideTooltip}"> + <i class="fa fa-user-circle c-icon"></i> <span if="{!vote.anonymous}">{vote.voterName}</span> <span if="{vote.anonymous}" class="anonymous-voter">{parent.__.anonymousVoter}</span> </div> @@ -114,30 +123,36 @@ require("../components/HumanInput.tag.html"); if="{!poll.isClosed && vote.permission}" disabled="{voteInEdition != null}" onclick="{parent.onEditVote(vote)}"> - <i class="fa fa-pencil-square-o"/> + <i class="fa fa-pencil-square-o"></i> </button> <button type="button" class="c-button c-button--rounded u-xsmall c-button--error" if="{poll.permission || !poll.isClosed && vote.permission}" disabled="{voteInEdition != null}" onclick="{parent.deleteVote(vote)}"> - <i class="fa fa-trash"/> + <i class="fa fa-trash"></i> </button> </div> - <div class="results"> + <div class="results" ref="results"> <div each="{choice in poll.choices}" - class="result {'separator-top' : index == 0} {'checkbox' : pollTypeCheckbox} {'selected' : pollTypeCheckbox && poll.getVoteValue(vote, choice) == 1}" - title="{choice.choiceValue}"> + class="result separator-right {'checkbox' : pollTypeCheckbox} {'selected' : pollTypeCheckbox && poll.getVoteValue(vote, choice) == 1}" + onmouseenter="{parent.showTooltip(vote, choice)}" onclick="{parent.showTooltip(vote, choice)}" onmouseleave="{parent.hideTooltip}"> <span if="{!pollTypeCheckbox}">{poll.getVoteValue(vote, choice)}</span> </div> </div> </div> + <div class="vote-tooltip" ref="voteTooltip" show="{voteTooltip.show}"> + <ChoiceView if="{voteTooltip.choice}" + choice="{voteTooltip.choice}" center="true" hideReport="true"></ChoiceView> + <div class="vote-value" if="{!pollTypeCheckbox && voteTooltip.vote && voteTooltip.choice}">{poll.getVoteValue(voteTooltip.vote, voteTooltip.choice)}</div> + <div if="{voteTooltip.vote && !voteTooltip.choice}">{voteTooltip.vote.voterName}</div> + </div> </div> <!-- Form to add a choice --> <form ref="formAddChoice" if={poll.status === "ADDING_CHOICES"}> - <HumanInput onsubmit="{addChoice}"/> + <HumanInput onsubmit="{addChoice}"></HumanInput> <div class="o-form-element"> <label class="c-label" for="choice">{__.addChoice}</label> <div class="c-input-group"> @@ -145,12 +160,12 @@ require("../components/HumanInput.tag.html"); <Choice ref="choice" class="choice c-field" name="choice" - choice="{choiceToAdd}"/> + choice="{choiceToAdd}"></Choice> </div> <button type="submit" class="c-button c-button--success" tooltips="{__.addChoice}"> - <i class="fa fa-plus"/> + <i class="fa fa-plus"></i> </button> </div> </div> @@ -159,16 +174,31 @@ require("../components/HumanInput.tag.html"); </div> <script type="es6"> + const MIN_CHOICE_COLUMN_WIDTH = 100; this.loaded = false; let session = require("../../js/Session"); let Choice = require("../../js/Choice"); this.installBundle(session, "poll_votes"); this.tooManyChoicesSelected = false; + this.showChoiceHeader = true; + this.voteTooltip = { + show: false, + choice: null, + vote: null + }; this.poll = require("../../js/Poll.js"); - this.poll.loadVotes(); + this.poll.loadVotes().then(() => { + this.updateShowChoiceContainer(); + this.update(); + }); this.choiceToAdd = this.poll.initChoice(); + this.updateShowChoiceContainer = () => { + this.showChoiceHeader = this.refs.results && this.refs.results.length > 0 + && this.refs.results[0].offsetWidth / this.poll.choices.length >= MIN_CHOICE_COLUMN_WIDTH; + }; + this.onPollChange = poll => { this.loaded = poll.choices !== undefined; this.poll = poll; @@ -270,6 +300,7 @@ require("../components/HumanInput.tag.html"); this.resetPoll(); if (this.poll.resultIsVisible) { this.poll.loadResults().then(() => { + this.updateShowChoiceContainer(); this.update(); }); } else { @@ -324,6 +355,7 @@ require("../components/HumanInput.tag.html"); if (confirm) { this.poll.deleteVote(vote).then(() => { this.selectedChoiceNb = 0; + this.updateShowChoiceContainer(); this.update(); }); } @@ -343,6 +375,38 @@ require("../components/HumanInput.tag.html"); }); }; + document.body.onresize = (e) => { + this.updateShowChoiceContainer(); + this.update(); + }; + + this.showTooltip = (vote, choice) => (e) => { + e.preventDefault(); + e.stopPropagation(); + this.voteTooltip = { + choice: choice, + vote: vote, + show: choice || !vote || !vote.anonymous + }; + this.update(); + if (this.voteTooltip.show) { + let voteTooltip = this.refs.voteTooltip; + voteTooltip.style.top = (e.target.offsetTop + e.target.offsetHeight + 10) + "px"; + voteTooltip.style.left = (e.target.offsetLeft + (e.target.offsetWidth - voteTooltip.offsetWidth) / 2) + "px"; + } + }; + + this.hideTooltip = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.voteTooltip = { + choice: null, + vote: null, + show: false + }; + this.update(); + } + </script> <style> @@ -458,14 +522,18 @@ require("../components/HumanInput.tag.html"); align-items: center; } - .voters .name { + .voters .row > :first-child { width: 250px; display: flex; height: 2em; padding: 0 5px; - border-bottom: 1px solid var(--separator); - border-left: 1px solid var(--separator); - border-right: 1px solid var(--separator); + } + + .voters .row:not(:first-child):hover { + border-bottom-color: var(--brand); + } + + .voters .name { overflow: hidden; } @@ -478,7 +546,7 @@ require("../components/HumanInput.tag.html"); } .voters .row:hover .name { - background-color: var(--focus); + background-color: var(--vote-hover); border-bottom-color: var(--brand); } @@ -487,32 +555,64 @@ require("../components/HumanInput.tag.html"); overflow: visible; } - .voters .result { + .voters .results, .voters .choices { + display: flex; + width: 100%; + } + + .voters .result, .voters .choice { min-width: 15px; width: 100%; height: 2em; padding: 5px; - border-right: 1px solid var(--separator); - border-bottom: 1px solid var(--separator); text-align: center; } + .voters .choice { + overflow: hidden; + white-space:nowrap; + text-overflow:ellipsis; + } + .voters .row:hover .result { background-color: var(--vote-hover); - border-bottom-color: var(--brand); } .voters .result.checkbox { background-color: var(--vote-not-selected); } - .voters .results { - display: flex; - width: 100%; - } - .voters .result.checkbox.selected { background-color: var(--vote-selected); } + + .voters .vote-tooltip { + position: absolute; + padding: 10px; + color: var(--tooltip-color); + background: var(--tooltip-background); + border-radius: 5px; + box-shadow: 0px 0px 10px var(--shadow); + opacity: 0.8; + text-align: center; + } + + .voters .vote-tooltip:after { + content: ''; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -8px; + width: 0; height: 0; + border-bottom: 8px solid var(--tooltip-background); + border-right: 8px solid transparent; + border-left: 8px solid transparent; + } + + .voters .vote-tooltip .vote-value { + margin-top: 5px; + font-weight: bold; + } + </style> </Votes> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.