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 a343353c7da282730985cc06dc80daab39ab3610 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Mon Jun 19 11:04:22 2017 +0200 Affichagez des commentaire dans un panneau latteral dépliable ref #73 --- pollen-ui-riot-js/package.json | 2 +- pollen-ui-riot-js/src/main/web/conf.js | 2 +- pollen-ui-riot-js/src/main/web/css/custom.css | 4 +- pollen-ui-riot-js/src/main/web/i18n.json | 6 +- .../main/web/tag/components/LetterAvatar.tag.html | 42 ++ .../src/main/web/tag/poll/Comments.tag.html | 432 ++++++++++++--------- .../src/main/web/tag/poll/Poll.tag.html | 7 +- 7 files changed, 308 insertions(+), 187 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index ac02cda4..8fcb8ae2 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -24,7 +24,7 @@ } ], "scripts": { - "start": "./node_modules/.bin/webpack-dev-server --hot --inline --host 0.0.0.0 --public localhost:8080", + "start": "./node_modules/.bin/webpack-dev-server --hot --inline --host 0.0.0.0 --public felteu:8080", "package": "./node_modules/.bin/webpack --bail" }, "devDependencies": { diff --git a/pollen-ui-riot-js/src/main/web/conf.js b/pollen-ui-riot-js/src/main/web/conf.js index c0220f34..4c710cd8 100644 --- a/pollen-ui-riot-js/src/main/web/conf.js +++ b/pollen-ui-riot-js/src/main/web/conf.js @@ -1,5 +1,5 @@ window.pollenConf = { - endPoint: "http://localhost:8888/pollen-rest-api", + endPoint: "http://felteu:8888/pollen-rest-api", piwikUrl: "", // add the piwik url, eg: http://localhost/piwik<; piwikSiteId: "", // add the site id, eg: 3 defaultErrorTimeout: 15, 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 44074cc0..b810ad13 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -16,14 +16,14 @@ --dropdown: #f9f9f9; --dropdown-text: #96a8b2; - --dropdown-shadow: #00000004; + --dropdown-shadow: #aaa; --dropdown-hover: #f1f1f1; --footer: black; --footer-text: #ffffff; --footer-text-hover: blue; - --qrcode: #13a2ff; + --qrcode: #ffffff; --focus: #2196f3; --shadow: #4dabf5; diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 115077db..789c6a4b 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -69,7 +69,8 @@ "poll_results_unit_6_many": "votes", "poll_results_unit_7_one": "vote", "poll_results_unit_7_many": "votes", - "poll_comments": "Commentaires", + "poll_comments_one": "Commentaire", + "poll_comments_many": "Commentaires", "poll_comments_noComment": "Pas de commentaire.", "poll_comments_title": "Commentaires", "poll_comments_sendComment": "Envoyer", @@ -527,7 +528,8 @@ "poll_results_unit_6_many": "votes", "poll_results_unit_7_one": "vote", "poll_results_unit_7_many": "votes", - "poll_comments": "Comments", + "poll_comments_one": "Comment", + "poll_comments_many": "Comments", "poll_comments_noComment": "No comment.", "poll_comments_title": "Comments", "poll_comments_sendComment": "Send", diff --git a/pollen-ui-riot-js/src/main/web/tag/components/LetterAvatar.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/LetterAvatar.tag.html new file mode 100644 index 00000000..9a17d9a9 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/LetterAvatar.tag.html @@ -0,0 +1,42 @@ +<LetterAvatar onresize={redraw}> + <svg style="background: {backgroundColor}" class="svg {rounded: opts.rounded}"> + <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" class="letter"> + {avatarLetter} + </text> + </svg> + + <script type="es6"> + + this.redraw = () => { + this.avatarLetter = this.opts.name[0].toUpperCase(); + let letterIndex = this.avatarLetter.charCodeAt() - 64; + let hue = (360 / 26) * letterIndex; + this.backgroundColor = "hsl(" + hue + ", 68%, 48%)"; + }; + + this.on("update", this.redraw); + + </script> + + <style> + + .svg { + width: 2em; + height: 2em; + border-radius: 0; + } + + .svg.rounded { + border-radius: 100%; + } + + .letter { + fill: #fff; + fontFamily: 'Lucida Console', Monaco, monospace; + fontSize: 1.70em; + } + + + </style> + +</LetterAvatar> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html index 5f3873fb..6a47c2d4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html @@ -1,161 +1,178 @@ require("../Pagination.tag.html"); +require("../components/LetterAvatar.tag.html"); require("./Report.tag.html"); <Comments> - <form show="{loaded}" onsubmit="{addComment}" class="comment-form"> - <div class="comment"> - <div class="comment-user"> - <div class="o-form-element"> - <div class="o-field o-field--icon-left"> - <i class="fa fa-fw fa-user c-icon"></i> - <input class="c-field" - type="text" - name="author" - ref="author" - required - value={poll.authorName} - placeholder="{__.authorPlaceholder}"> - </div> - </div> - </div> - <div class="comment-text"> - <div class="o-form-element "> - <textarea class="c-field" - rows="5" - ref="text" - name="text" - required - placeholder="{__.textPlaceholder}"/> - </div> - </div> - </div> - <div class="c-hint--static c-hint--error" - if="{error}"> - {error} - </div> - <div class="actions"> - <div class="actions-left"> - </div> - <div class="actions-right"> - <button type="submit" - class="c-button c-button--info pull-right"> - <i class="fa fa-paper-plane"/> - {__.sendComment} - </button> - </div> - </div> - </form> - <div show="{loaded}" > - <div show="{poll.comments && poll.comments.length === 0}">{__.noComment}</div> - - <div class="actions" show="{poll.comments && poll.comments.length > 0}"> - <button type="button" - class="c-button c-button--info" - onclick="{toggleSort}"> - <i class="fa fa-sort-amount-{desc : orderDesc, asc : !orderDesc}"/> - </button> - <button type="button" - class="c-button c-button--info" - onclick="{scrollBottom}"> - <i class="fa fa-arrow-down"/> - </button> - </div> - <div class="comments {inverse : orderDesc}"> - <div each="{comment, index in poll.comments}"> - <div if={commentEditing !== comment} class="comment"> - <div class="comment-user"> - <div class="icon"> - <i class="fa fa-user"/> - </div> - <div class="user"> - {comment.authorName} - <Report target={comment}/> - <div class="comment-date"> - {formatDate(comment.postDate)} - </div> - </div> - <div class="actions" - if={comment.permission}> - <span class="c-input-group"> - <button type="button" - class="c-button c-button--ghost-error u-small" - onclick="{parent.deleteComment(comment)}"> - <i class="fa fa-trash"/> - </button> - <button type="button" - class="c-button c-button--ghost-brand u-small" - onclick="{parent.startEditComment(comment)}"> - <i class="fa fa-pencil-square-o"/> - </button> - </span> - </div> - </div> - <div class="comment-text"> - <div class="text"> - {comment.text} - </div> - </div> + <div class="comments {open : open}"> + <button type="button" + class="c-button c-button--error close-btn" + onclick="{closeComments}"> + <i class="fa fa-times"/> + </button> + + <div class="window colors-main" ref="window"> + <div class="frame"> + <div class="head"> + <h2 class="c-heading">{__.title}</h2> + <button type="button" + class="c-button c-button--error close-btn-inner" + onclick="{closeComments}"> + <i class="fa fa-times"/> + </button> </div> - <form if={commentEditing === comment} - onsubmit="{updateComment}" - class="comment-form"> - <div class="comment"> - <div class="comment-user"> - <div class="o-form-element"> - <div class="o-field o-field--icon-left"> - <i class="fa fa-fw fa-user c-icon"></i> - <input class="c-field" - type="text" - name="editAuthor" - ref="editAuthor" - required - value={commentEditing.authorName} - placeholder="{__.authorPlaceholder}"> - - </div> - </div> - </div> - <div class="comment-text"> - <div class="o-form-element "> - <textarea class="c-field" - rows="5" - ref="editText" - name="editText" - required - value={commentEditing.text} - placeholder="{__.textPlaceholder}"/> - </div> + <form onsubmit="{addComment}" class="comment-form"> + <div class="o-form-element"> + <div class="o-field o-field--icon-left"> + <i class="fa fa-fw fa-user c-icon"></i> + <input class="c-field" + type="text" + name="author" + ref="author" + required + value={poll.authorName} + placeholder="{__.authorPlaceholder}"> </div> </div> + <div class="o-form-element "> + <textarea class="c-field" + rows="5" + ref="text" + name="text" + required + placeholder="{__.textPlaceholder}"/> + </div> <div class="c-hint--static c-hint--error" if="{error}"> {error} </div> - <div class="actions"> - <button class="c-button c-button--error" - type="button" - onclick="{cancelEditComment}"> - <i class="fa fa-remove"/> - {parent.__.cancelEditComment} - </button> - <button class="c-button c-button--success pull-right" - type="submit"> - <i class="fa fa-check"/> - {parent.__.updateComment} + <div class="actions-right"> + <button type="submit" + class="c-button c-button--info pull-right"> + <i class="fa fa-paper-plane"/> + {__.sendComment} </button> </div> </form> + <div show="{loaded}"> + <h4 show="{poll.comments && poll.comments.length === 0}" + class="c-heading"> + {__.noComment} + </h4> + + <div class="actions" show="{poll.comments && poll.comments.length > 0}"> + <button type="button" + class="c-button c-button--info" + onclick="{toggleSort}"> + <i class="fa fa-sort-amount-{desc : orderDesc, asc : !orderDesc}"/> + </button> + <button type="button" + class="c-button c-button--info" + onclick="{scrollBottom}"> + <i class="fa fa-arrow-down"/> + </button> + </div> + <div class="comments-list {inverse : orderDesc}"> + <div each="{comment, index in poll.comments}" class="separator-bottom"> + + <div show={commentEditing !== comment} class="comment"> + <div class="comment-user"> + <LetterAvatar name={comment.authorName} rounded="true"/> + <div class="user"> + {comment.authorName} + <Report target={comment}/> + <div class="comment-date"> + {formatDate(comment.postDate)} + </div> + </div> + <span class="c-input-group comment-actions" + if={comment.permission}> + <button type="button" + class="c-button c-button--error u-small" + onclick="{parent.deleteComment(comment)}"> + <i class="fa fa-trash"/> + </button> + <button type="button" + class="c-button c-button--brand u-small" + onclick="{parent.startEditComment(comment)}"> + <i class="fa fa-pencil-square-o"/> + </button> + </span> + </div> + <div class="comment-text"> + <div class="text"> + {comment.text} + </div> + </div> + </div> + <form if={commentEditing === comment} + onsubmit="{updateComment}" + class="comment-form"> + <div class="comment"> + <div class="comment-user"> + <div class="o-form-element"> + <div class="o-field o-field--icon-left"> + <i class="fa fa-fw fa-user c-icon"></i> + <input class="c-field" + type="text" + name="editAuthor" + ref="editAuthor" + required + value={commentEditing.authorName} + placeholder="{__.authorPlaceholder}"> + + </div> + </div> + </div> + <div class="comment-text"> + <div class="o-form-element "> + <textarea class="c-field" + rows="5" + ref="editText" + name="editText" + required + value={commentEditing.text} + placeholder="{__.textPlaceholder}"/> + </div> + </div> + </div> + <div class="c-hint--static c-hint--error" + if="{error}"> + {error} + </div> + <div class="actions"> + <button class="c-button c-button--error" + type="button" + onclick="{cancelEditComment}"> + <i class="fa fa-remove"/> + {parent.__.cancelEditComment} + </button> + <button class="c-button c-button--success pull-right" + type="submit"> + <i class="fa fa-check"/> + {parent.__.updateComment} + </button> + </div> + </form> + </div> + </div> + <div class="actions-right" show="{poll.comments && poll.comments.length > 0}"> + <button type="button" + class="c-button c-button--info" + onclick="{scrollTop}"> + <i class="fa fa-arrow-up"/> + </button> + </div> + </div> </div> </div> - <div class="actions-right" show="{poll.comments && poll.comments.length > 0}"> - <button type="button" - class="c-button c-button--info" - onclick="{scrollTop}"> - <i class="fa fa-arrow-up"/> - </button> - </div> </div> + <button type="button" + class="c-button c-button--info open-btn {open : open}" + onclick="{openComments}"> + <i class="fa fa-comment"/> {poll.commentCount} {poll.commentCount <= 1 ? __.one : __.many} + </button> + <script type="es6"> this.loaded = false; let session = require("../../js/Session"); @@ -163,7 +180,6 @@ require("./Report.tag.html"); let moment = require("moment"); this.poll = require("../../js/Poll.js"); - this.poll.loadComments(); this.onPollChange = poll => { this.loaded = poll.comments !== undefined; @@ -173,10 +189,23 @@ require("./Report.tag.html"); this.listen("poll", this.onPollChange); this.listen("user", () => { - this.poll.loadComments(); - this.update(); + if (this.open) { + this.poll.loadComments(); + this.update(); + } }); + this.open = false; + + this.openComments = () => { + this.open = true; + this.poll.loadComments(); + }; + + this.closeComments = () => { + this.open = false; + }; + this.orderDesc = true; this.toggleSort = () => { @@ -221,78 +250,131 @@ require("./Report.tag.html"); }; this.scrollTop = () => { - window.scrollTo(0, 0); + this.refs.window.scrollTop = 0; }; this.scrollBottom = () => { - window.scrollTo(0, document.body.scrollHeight); + this.refs.window.scrollTop = this.refs.window.scrollHeight; }; </script> <style> - .actions-header { - margin: 3px 0; + .open-btn { + position: absolute; + bottom: 0; + right: 0; + transform: translate3d(0px, 0px, 0px); + transition: transform 1s; + } + + .open-btn.open { + transform: translate3d(0px, 38px, 0px); + transition: transform 1s; + } + + .close-btn { + flex-shrink: 0; + } + + .head { + display: flex; + } + + .head .c-heading { + flex-grow: 1; + } + + .close-btn-inner { + display: none; } .comments { + position: absolute; + width: 500px; + height: 100%; + right: 0px; + transform: translate3d(500px,0px,0px); + top: 0; + transition: transform 1s; + display: flex; + align-items: flex-start; + } + + .comments.open { + transform: translate3d(0px,0px,0px); + } + + .window { + overflow-x: hidden; + overflow-y: scroll; + width: 100%; + height: 100%; + box-shadow: 1px 1px 12px var(--dropdown-shadow); + } + + .window .frame { display: flex; flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: stretch; + padding: 10px; } - .comments.inverse { - flex-direction: column-reverse; + .c-heading { + padding-top: 0px; + text-align: center; } - .comment { - padding: 3px 0; + .actions-header { + margin: 3px 0; + } + + .comments-list { display: flex; - flex-direction: row; - justify-content: space-between; + flex-direction: column; } - .comments .comment { - border-top: 1px solid; + .comments-list.inverse { + flex-direction: column-reverse; } - .comment-form { - padding-bottom: 3px; + .comment-form .o-form-element { + padding: 5px 0; } - .comment .o-form-element { - padding: 0; + .comment { + padding-top: 10px; } .comment .comment-user { - flex-grow : 0; - min-width: 220px; padding: 0 3px 0 0; display: flex; flex-direction: row; justify-content: space-between; } - .comment .comment-user .icon { - font-size: 2em; - margin-right: 6px; - flex-grow : 0; + .comment .comment-user .o-form-element { + flex-grow : 1; } .comment .comment-user .user { flex-grow : 1; + padding: 0 10px; } - .comment .comment-user .action { + .comment .comment-user .comment-actions { flex-grow : 0; + padding: 0 } .comment .comment-text { flex-grow : 1; - padding: 0 0 0 3px; } .comment .comment-text .text { - margin: 5px; + margin: 10px; } @@ -301,17 +383,17 @@ require("./Report.tag.html"); } @media (max-width: 640px) { - .comment { - flex-direction: column; - align-items: stretch; + + .close-btn-inner { + display: block; } - .comment .comment-user { - padding: 0 0 2px 0; + .close-btn { + display: none; } - .comment .comment-text { - padding: 3px 0 0 0; + .comments { + width: 100%; } } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html index dfd83861..1252bc14 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html @@ -18,11 +18,6 @@ require("./Report.tag.html"); <i class="fa fa-trophy fa-15x"></i> {__.results} </a> </div> - <div class={tab : true, selected : selectedTab === "comments"}> - <a href="#poll/{poll.id}/comment{poll.getPermission()?'/' + poll.getPermission() : ''}"> - <i class="fa fa-comments-o fa-15x"></i> {__.comments} <span if={poll.commentIsVisible}>({poll.commentCount})</span> - </a> - </div> <div if="{poll.permission}" class="poll-options dropdown"> @@ -165,7 +160,7 @@ require("./Report.tag.html"); <Results if={selectedTab === "results"}/> - <Comments if={selectedTab === "comments"}/> + <Comments/> </div> <script type="es6"> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.