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 c508eda4904c430f8ceddfe2267188240e6c971a 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 4443ca0a..bd06f05e 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>.