branch feature/display_nice_tooltips created (now 55ff3b3d)
This is an automated email from the git hooks/post-receive script. New change to branch feature/display_nice_tooltips in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git at 55ff3b3d Affichage des tooltip sur la gauche lors du vote This branch includes the following new commits: new 76b60c3b Ajout de la possibilité d'afficher des Tooltips sur le composant ChoiceView new 55ff3b3d Affichage des tooltip sur la gauche lors du vote The 2 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 55ff3b3db0ee106fdc0c4bab18b52570903ee3b9 Author: Arnaud Thimel <thimel@codelutin.com> Date: Tue Jan 2 17:58:04 2018 +0100 Affichage des tooltip sur la gauche lors du vote commit 76b60c3b89700a43cd8a3d54cf0e90a7f34b94c5 Author: Arnaud Thimel <thimel@codelutin.com> Date: Tue Jan 2 17:57:46 2018 +0100 Ajout de la possibilité d'afficher des Tooltips sur le composant ChoiceView -- 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/display_nice_tooltips in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 76b60c3b89700a43cd8a3d54cf0e90a7f34b94c5 Author: Arnaud Thimel <thimel@codelutin.com> Date: Tue Jan 2 17:57:46 2018 +0100 Ajout de la possibilité d'afficher des Tooltips sur le composant ChoiceView --- pollen-ui-riot-js/package.json | 3 +- pollen-ui-riot-js/src/main/web/css/main.css | 90 +++++++++++++++++++++- .../src/main/web/tag/poll/ChoiceView.tag.html | 9 +++ 3 files changed, 100 insertions(+), 2 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index de44ac51..797ba568 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -52,6 +52,7 @@ "qrcode-generator": "^1.3.0", "remarkable": "^1.7.1", "riot": "^3.6.1", - "riot-route": "^3.1.2" + "riot-route": "^3.1.2", + "tooltip.js":"^1.1.7" } } diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index 41769f89..8d7aefcc 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -490,4 +490,92 @@ pollenfooter a:hover { .u-highest { z-index: 100; -} \ No newline at end of file +} + +/* Tooltips */ + +.tooltip { + position: absolute; + background: #343A40; + color: #FFFFFF; + width: 300px; + border-radius: 4px; + box-shadow: 0 0 2px rgba(0,0,0,0.5); + padding: 10px; + text-align: center; + font-size: .9em; +} +.style5 .tooltip { + background: #1E252B; + color: #FFFFFF; + max-width: 200px; + width: auto; + font-size: .8rem; + padding: .5em 1em; +} +.tooltip .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; +} + +.tooltip .tooltip-arrow { + border-color: #343A40; +} +.style5 .tooltip .tooltip-arrow { + border-color: #1E252B; +} +.tooltip[x-placement^="top"] { + margin-bottom: 5px; +} +.tooltip[x-placement^="top"] .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="bottom"] { + margin-top: 5px; +} +.tooltip[x-placement^="bottom"] .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; +} +.tooltip[x-placement^="right"] { + margin-left: 5px; +} +.tooltip[x-placement^="right"] .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; +} +.tooltip[x-placement^="left"] { + margin-right: 5px; +} +.tooltip[x-placement^="left"] .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; +} 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 9cd1dfce..384fade0 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 @@ -94,6 +94,7 @@ require("../components/MultiLineLabel.tag.html"); <script type="es6"> this.session = require("../../js/Session"); this.resourceService = require("../../js/ResourceService"); + let Tooltip = require("tooltip.js"); this.installBundle(this.session, "choice"); this.showModalImage = false; @@ -125,6 +126,14 @@ require("../components/MultiLineLabel.tag.html"); } }; + if (this.opts.tooltipPlacement) { + this.on('mount', function(){ + // On a besoin du premier div (.choice-view) car ça ne fonctionne pas sur le composant directement + let elem = this.root.children[0]; + let tooltip = new Tooltip.default(elem, {placement: this.opts.tooltipPlacement}); + }); + } + this.listen("escape", this.onEscape); </script> -- 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/display_nice_tooltips in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 55ff3b3db0ee106fdc0c4bab18b52570903ee3b9 Author: Arnaud Thimel <thimel@codelutin.com> Date: Tue Jan 2 17:58:04 2018 +0100 Affichage des tooltip sur la gauche lors du vote --- pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html index 3f670177..06f17118 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html @@ -50,7 +50,7 @@ <div each={choice, index in poll.choices} class="choice separator-top"> <div class="choice-vote separator-right"> <div class="choice-value"> - <ChoiceView choice={choice} center="true"></ChoiceView> + <ChoiceView choice={choice} center="true" tooltip-placement="left"></ChoiceView> </div> <div class="current-choice" if={poll.canVote || voteInEdition}> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm