branch develop updated (c8d60d99 -> 4d338295)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from c8d60d99 correction style et qrcode new 92e7f4ef refs #74 ajout d'une option pour ne pas afficher l'icone de rapport dans le choix new 7f7dc9f5 style pour que les icones de rapport soient moins voyantes new 4d338295 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 The 3 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 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 commit 7f7dc9f564da309d394a37cefd1707576b3edd46 Author: Kevin Morin <morin@codelutin.com> Date: Tue Aug 1 17:07:54 2017 +0200 style pour que les icones de rapport soient moins voyantes commit 92e7f4ef4417282f4975f7bfec5482534d54bd7f Author: Kevin Morin <morin@codelutin.com> Date: Tue Aug 1 17:07:16 2017 +0200 refs #74 ajout d'une option pour ne pas afficher l'icone de rapport dans le choix Summary of changes: pollen-ui-riot-js/src/main/web/css/custom.css | 3 + .../src/main/web/tag/poll/ChoiceView.tag.html | 3 +- .../src/main/web/tag/poll/Report.tag.html | 11 +- .../src/main/web/tag/poll/Votes.tag.html | 164 +++++++++++++++++---- 4 files changed, 146 insertions(+), 35 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 develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 92e7f4ef4417282f4975f7bfec5482534d54bd7f Author: Kevin Morin <morin@codelutin.com> Date: Tue Aug 1 17:07:16 2017 +0200 refs #74 ajout d'une option pour ne pas afficher l'icone de rapport dans le choix --- pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html index c04378a9..cc49a692 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -29,7 +29,7 @@ require("./Report.tag.html"); </div> <span if="{opts.choice.description && opts.showdescription}"> : <em>{opts.choice.description}</em></span> </div> - <Report target={opts.choice}/> + <Report target="{opts.choice}" if="{!opts.hidereport}"/> <div if={showModalImage} onclick={closeModalImage}> <div class="c-overlay"></div> @@ -58,7 +58,6 @@ require("./Report.tag.html"); target="_blank"> <i class="fa fa-download"></i> {__.download} - </a> </div> </header> -- 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 develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 7f7dc9f564da309d394a37cefd1707576b3edd46 Author: Kevin Morin <morin@codelutin.com> Date: Tue Aug 1 17:07:54 2017 +0200 style pour que les icones de rapport soient moins voyantes --- pollen-ui-riot-js/src/main/web/tag/poll/Report.tag.html | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Report.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Report.tag.html index 40d237df..eeaa764c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Report.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Report.tag.html @@ -1,7 +1,7 @@ require("../popup/Modal.tag.html"); <Report> - <span class="label info-label not-printable" + <span class="label report-icon not-printable" show={!poll.permission} onclick={openModalAddReport} title={__.title}> <i class="fa fa-bell" aria-hidden="true"></i> @@ -154,6 +154,15 @@ require("../popup/Modal.tag.html"); vertical-align: text-top; } + .report-icon { + color: var(--report); + } + + .report-icon:hover { + color: var(--report-hover); + cursor: pointer; + } + td { padding-right: 10px; padding-left: 10px; -- 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 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>.
participants (1)
-
chorem.org scm