branch develop updated (cbd67201 -> a343353c)
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 cbd67201 Re-charger le sondage en cas de reconnexion. new a343353c Affichagez des commentaire dans un panneau latteral dépliable ref #73 The 1 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 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 Summary of changes: 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(-) create mode 100644 pollen-ui-riot-js/src/main/web/tag/components/LetterAvatar.tag.html -- 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 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>.
participants (1)
-
chorem.org scm