branch feature/253-tuiles updated (b7af57b6 -> f8bc1a88)
This is an automated email from the git hooks/post-receive script. New change to branch feature/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from b7af57b6 ref #253 Menu 'Mes sondages' new 15484ee3 ref #253 Nouvelle modale pour lier un sondage + menu des cartes de sondage new 2558ad32 ref #253 Export des codes couleur dans des variables CSS new 62182ff5 ref #253 Suppression du bouton 'Nouveau sondage' dans le header (redondant) new f8bc1a88 ref #253 Ajout du menu accessible quand une carte a été cochée The 4 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 f8bc1a88d1eed02be9cd88b274413b01d1da1d39 Author: Cécilia Bossard <bossard@codelutin.com> Date: Thu Feb 27 17:26:00 2020 +0100 ref #253 Ajout du menu accessible quand une carte a été cochée commit 62182ff5b211c0f776ab2f85ff37ce08f420f780 Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 16:04:36 2020 +0100 ref #253 Suppression du bouton 'Nouveau sondage' dans le header (redondant) commit 2558ad32686ba896a78727534ee61b37832784fd Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 15:42:29 2020 +0100 ref #253 Export des codes couleur dans des variables CSS commit 15484ee37aa5d7b2cb6ad14abe997f9c826d5de8 Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 14:33:52 2020 +0100 ref #253 Nouvelle modale pour lier un sondage + menu des cartes de sondage Summary of changes: pollen-ui-riot-js/src/main/web/css/custom.css | 19 ++++ pollen-ui-riot-js/src/main/web/i18n/en.json | 9 +- pollen-ui-riot-js/src/main/web/i18n/fr.json | 7 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 1 + .../src/main/web/tag/PollenHeader.tag.html | 9 -- .../web/tag/components/CheckboxReboot.tag.html | 126 +++++++++++---------- .../main/web/tag/components/IconButton.tag.html | 6 +- .../src/main/web/tag/components/LazyLoad.tag.html | 7 +- .../src/main/web/tag/components/MenuItem.tag.html | 23 ++-- .../main/web/tag/components/PollenButton.tag.html | 33 ++++-- .../main/web/tag/components/PollenInput.tag.html | 79 +++++++++++++ .../src/main/web/tag/components/Popover.tag.html | 22 ++-- .../main/web/tag/components/SearchReboot.tag.html | 8 +- .../Separator.tag.html} | 55 +++++---- .../src/main/web/tag/components/Tooltip.tag.html | 16 +-- .../src/main/web/tag/poll/MyPollsHeader.tag.html | 63 +++++++---- .../tag/{Privacy.tag.html => poll/NoPoll.tag.html} | 43 ++++--- .../src/main/web/tag/poll/PollCardReboot.tag.html | 118 +++++++++++++------ .../src/main/web/tag/poll/Polls.tag.html | 32 +++++- .../src/main/web/tag/poll/Settings.tag.html | 4 +- .../popup/{Modal.tag.html => ModalReboot.tag.html} | 108 ++++++++++++------ pollen-ui-riot-js/stories/Card.stories.js | 1 + 22 files changed, 527 insertions(+), 262 deletions(-) create mode 100644 pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html copy pollen-ui-riot-js/src/main/web/tag/{Privacy.tag.html => components/Separator.tag.html} (55%) copy pollen-ui-riot-js/src/main/web/tag/{Privacy.tag.html => poll/NoPoll.tag.html} (57%) copy pollen-ui-riot-js/src/main/web/tag/popup/{Modal.tag.html => ModalReboot.tag.html} (55%) -- 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/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 15484ee37aa5d7b2cb6ad14abe997f9c826d5de8 Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 14:33:52 2020 +0100 ref #253 Nouvelle modale pour lier un sondage + menu des cartes de sondage --- pollen-ui-riot-js/src/main/web/i18n/en.json | 9 +- pollen-ui-riot-js/src/main/web/i18n/fr.json | 7 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 1 + .../src/main/web/tag/components/LazyLoad.tag.html | 7 +- .../src/main/web/tag/components/MenuItem.tag.html | 1 - .../main/web/tag/components/PollenButton.tag.html | 29 +++- .../main/web/tag/components/PollenInput.tag.html | 79 ++++++++++ .../src/main/web/tag/components/Popover.tag.html | 14 +- .../src/main/web/tag/components/Tooltip.tag.html | 4 +- .../src/main/web/tag/poll/MyPollsHeader.tag.html | 26 ++-- .../src/main/web/tag/poll/NoPoll.tag.html | 58 ++++++++ .../src/main/web/tag/poll/PollCardReboot.tag.html | 70 +++++++-- .../src/main/web/tag/poll/Polls.tag.html | 6 + .../src/main/web/tag/poll/Settings.tag.html | 4 +- .../src/main/web/tag/popup/ModalReboot.tag.html | 162 +++++++++++++++++++++ 15 files changed, 418 insertions(+), 59 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n/en.json b/pollen-ui-riot-js/src/main/web/i18n/en.json index ffa4ae4c..79bcd1c0 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/en.json +++ b/pollen-ui-riot-js/src/main/web/i18n/en.json @@ -46,9 +46,12 @@ "summary_clonePoll": "Clone poll", "poll_403": "Error : the poll is not available", "poll_newPoll": "New poll", - "poll_deletePoll": "Delete poll", + "poll_deletePoll": "Delete", + "poll_duplicatePoll": "Duplicate", + "poll_invitePoll": "Invite", + "poll_pollOptions": "Options", "poll_finished": "(Finished)", - "poll_editPoll": "Edit poll", + "poll_editPoll": "Edit", "poll_creationSuccess": "Your poll {0} has been successfully created.", "poll_saveSuccess": "Your poll {0} has been successfully saved.", "poll_tab_votes": "Votes", @@ -195,7 +198,7 @@ "poll_participants_download": "Download", "poll_participants_download_title": "Download voting list", "polls_createdPolls": "My polls", - "polls_assignPollToMe": "Link a poll to my account", + "polls_assignPollToMe": "Link it", "polls_assignPollToMe_title": "Link a poll", "polls_assignPollToMe_desc": "If you created a poll without being connected, you can link it to your account by fillin the form below with the administration url of the poll.", "polls_assignSuccessMessage": "The poll \"{0}\" has successfully been linked to your account:", diff --git a/pollen-ui-riot-js/src/main/web/i18n/fr.json b/pollen-ui-riot-js/src/main/web/i18n/fr.json index 5d4993cf..b97a1372 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/fr.json +++ b/pollen-ui-riot-js/src/main/web/i18n/fr.json @@ -46,9 +46,12 @@ "summary_clonePoll": "Cloner le sondage", "poll_403": "Erreur : le sondage n'est pas accessible", "poll_newPoll": "Nouveau sondage", - "poll_deletePoll": "Supprimer le sondage", + "poll_deletePoll": "Supprimer", + "poll_duplicatePoll": "Dupliquer", + "poll_invitePoll": "Inviter", + "poll_pollOptions": "Options", "poll_finished": "(Clos)", - "poll_editPoll": "Modifier le sondage", + "poll_editPoll": "Modifier", "poll_creationSuccess": "Votre sondage {0} a été créé avec succès.", "poll_saveSuccess": "Votre sondage {0} a été enregistré avec succès.", "poll_tab_votes": "Votes", diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index 9951d015..64ae8088 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -359,6 +359,7 @@ import "./popup/ShowReportsModal.tag.html"; <style> .body-content { position: relative; + background: #E5E5E5; } .body-content > div { diff --git a/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html index c42272aa..eedc3903 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html @@ -19,12 +19,15 @@ #L% --> <LazyLoad> - <virtual each={element, index in elements}> + <virtual each="{element, index in elements}"> <yield from="element"/> </virtual> - <div show={nbNext > 0} ref="loading" class="loading"> + <div if="{loading}" ref="loading" class="loading"> <yield from="loading"/> </div> + <div if="{elements && elements.length == 0}"> + <yield from="noResult"/> + </div> <script type="es6"> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html index 023189db..926068b8 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html @@ -60,7 +60,6 @@ padding-top: 30px; padding-left: 10px; padding-right: 10px; - text-decoration: none; } .active { diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html index fc320121..dce64335 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html @@ -36,6 +36,9 @@ if(this.opts.secondary) { this.className = "secondary"; } + if(this.opts.cancel) { + this.className = "cancel"; + } </script> @@ -63,22 +66,32 @@ } .btn.secondary { - font-weight: normal; - color: #14A39F; - border-color: #14A39F; + color: #29817E; + border: 1px solid #29817E; + } + + .btn.cancel { + color: #C0392B; + border: 1px solid #C0392B; } .btn.primary:hover, .btn.primary:focus { - color: #14A39F; - background: white; - border-color: #14A39F; + color: #FFFFFF; + background: #0E726F; + font-weight: bold; } .btn.secondary:hover, .btn.secondary:focus { - color: #FFFFFF; - background: #14A39F; + color: #1D5A58; + border: 1px solid #1D5A58; + } + + .btn.cancel:hover, + .btn.cancel:focus{ + color: #86271e; + border: 1px solid #86271e; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html new file mode 100644 index 00000000..91826f74 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html @@ -0,0 +1,79 @@ +<!-- + #%L + Pollen :: UI RiotJs + %% + Copyright (C) 2009 - 2017 CodeLutin + %% + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. + #L% + --> +<PollenInput> + <div class="input"> + <label class="input-label" for="{this.opts.ref}">{this.opts.label}</label> + <div class="input-field"> + <input class="input" + id="{this.opts.id}" + name="{this.opts.name}" + ref="{this.opts.ref}" + placeholder="{this.opts.placeholder}" + pattern="{this.opts.pattern}" + type="text" + required="{this.opts.required}"> + </div> + </div> + + <script type="es6"> + + </script> + + <style> + + .input-field { + border: 1px solid #636E72; + box-sizing: border-box; + border-radius: 4px; + display: flex; + + height: 38px; + width: 500px; + } + + .input { + font-style: italic; + font-weight: normal; + font-size: 12px; + line-height: 16px; + border: none; + /* Pale skye */ + color: #636E72; + padding-left: 10px; + width: 100%; + + display: flex; + flex-direction: column; + + } + + .input-label { + font-weight: bold; + font-size: 14px; + line-height: 19px; + padding-bottom: 10px; + /* Black Pearl */ + color: #1E272E; + } + + + </style> +</PollenInput> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html index de8063d9..1e072a33 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html @@ -22,8 +22,8 @@ <style> /* Tooltip container */ .popover-container { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } /* Tooltip text */ @@ -46,8 +46,8 @@ /*position bottom*/ position:absolute; - top: calc(100% + 10px); - transform : translateX(-50%); + top: calc(100% + 20px); + transform : translateX(-60%); /* fade in*/ opacity: 0; @@ -65,7 +65,7 @@ } /* arrow with shadow*/ - .popover-container .popover-content::before { + <!-- .popover-container .popover-content::before { content: " "; position: absolute; background-color: #ffffff; @@ -76,7 +76,7 @@ transform: rotate(45deg); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25); z-index:-1; - } + }--> /* arrow to mask popover-content shadow*/ .popover-container .popover-content::after { @@ -86,7 +86,7 @@ width: 20px; height: 20px; top:-10px; - right: 14.86px; + right: 32.72px; transform: rotate(45deg); -webkit-transition-property: none; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html index 813751b3..c9fddd7d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html @@ -11,8 +11,8 @@ <style> /* Tooltip container */ .tooltip-2 { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } /* Tooltip text */ diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html index 86adabcf..ea4c7af5 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html @@ -23,6 +23,8 @@ import "../components/SearchReboot.tag.html"; import "../components/PollenButton.tag.html"; import "../components/IconButton.tag.html"; import "../components/MenuItem.tag.html"; +import "../components/PollenInput.tag.html"; +import "../popup/ModalReboot.tag.html"; <MyPollsHeader> @@ -58,21 +60,13 @@ import "../components/MenuItem.tag.html"; </div> </div> - <Modal ref="assignModal" onsubmit={assign} header={_t.assignPollToMe_title} label={_t.assignPollToMe} type="success"> - <div class="o-form-element"> - <label class="c-label" for="pollToAssign">{parent._t.assignPollToMe_desc}</label> - <div class="o-field o-field--icon-left"> - <i class="fa fa-fw fa-link c-icon" aria-hidden="true"></i> - <input class="c-field" - type="text" - name="pollToAssign" - ref="pollToAssign" - placeholder={parent.pollToAssignPlaceholder} - pattern={parent.pollToAssignUrlPattern} - required> - </div> + <ModalReboot ref="assignModal" onsubmit={assign} header={_t.assignPollToMe_title} label={_t.assignPollToMe} type="success"> + <div class="modal-form"> + <span class="modal-description">{parent._t.assignPollToMe_desc}</span> + <PollenInput label="URL" name="pollToAssign" ref="pollToAssign" placeholder={parent.pollToAssignPlaceholder} + pattern={parent.pollToAssignUrlPattern} required="true" /> </div> - </Modal> + </ModalReboot> </div> @@ -93,7 +87,7 @@ import "../components/MenuItem.tag.html"; }; this.assign = () => { - var pollUrl = this.refs.assignModal.refs.pollToAssign.value; + var pollUrl = this.refs.assignModal.refs.pollToAssign.refs.pollToAssign.value; var regex = new RegExp(this.pollToAssignUrlPattern); var finds = regex.exec(pollUrl); @@ -159,7 +153,7 @@ import "../components/MenuItem.tag.html"; .submenu { padding: 0px 2%; display: flex; - margin-top: 30px; + margin-top: 20px; margin-bottom: 25px; width: 100%; line-height: 19px; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html new file mode 100644 index 00000000..77d6552a --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html @@ -0,0 +1,58 @@ +<!-- + #%L + Pollen :: UI RiotJs + %% + Copyright (C) 2009 - 2017 CodeLutin + %% + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. + #L% + --> + +<NoPoll> + + <div class="noResult"> + <div class="noResultIcon"> + <i class="icon icon-search"></i> + </div> + <div class="noResultFound">No poll found</div> + </div> + + <script type="es6"> + + </script> + + <style> + .noResult { + display: flex; + flex-direction: column; + align-items: center; + + /* Light Slate Grey */ + color: #808E9B; + font-size: 28px; + line-height: 38px; + } + + .noResultIcon { + + + } + + .noResultFound { + + + } + + </style> +</NoPoll> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html index ccac1a66..bba2e0cc 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html @@ -2,6 +2,7 @@ import "../components/Checkbox.tag.html"; import "../components/Tooltip.tag.html"; import "../components/Popover.tag.html"; import "../components/Avatar.tag.html"; + <PollCardReboot> <div class="pollcard {opts.poll.status.toLowerCase()}"> @@ -37,21 +38,32 @@ import "../components/Avatar.tag.html"; </yield> <yield to="content"> <ul> - <li if={parent.opts.poll.permission}><a title={parent._t.edit} - href="#poll/{parent.opts.poll.id}/edit/{parent.opts.poll.permission}">{parent._t.edit} - </a></li> - <li if={parent.opts.poll.permission}><a title={parent._t.delete} - onclick={deletePoll}>{parent._t.delete}</a> - </li> + <a if="{parent.opts.poll.permission}" title={parent._t.deletePoll} + onclick={parent.deletePoll} href="#"> <li>{parent._t.deletePoll} + </li></a> + <a if="{parent.opts.poll.permission}" title={parent._t.duplicatePoll} + onclick={parent.duplicatePoll}><li>{parent._t.duplicatePoll} (TODO) + </li></a> + <a if="{parent.opts.poll.permission}" title={parent._t.invitePoll} + onclick={parent.invitePoll}><li>{parent._t.invitePoll} (TODO) + </li></a> + <a if="{parent.opts.poll.permission}" title={parent._t.pollOptions} + onclick={parent.pollOptions}><li>{parent._t.pollOptions} (TODO) + </li></a> + <a if="{parent.opts.poll.permission}" title={parent._t.editPoll} + href="#poll/{parent.opts.poll.id}/edit/{parent.opts.poll.permission}"><li>{parent._t.editPoll} + </li></a> </ul> </yield> </Popover> </div> <div class="body"> - <div class="poll-title">{opts.poll.title}</div> - <div class="poll-description" if="{opts.poll.description}">{opts.poll.description}</div> - <div class="poll-no-description" if="{!opts.poll.description}">{_t.noDescription}</div> + <a href="{redirectToPoll}" > + <div class="poll-title">{opts.poll.title}</div> + <div class="poll-description" if="{opts.poll.description}">{opts.poll.description}</div> + <div class="poll-no-description" if="{!opts.poll.description}">{_t.noDescription}</div> + </a> </div> <div class ="footer"> @@ -68,11 +80,12 @@ import "../components/Avatar.tag.html"; <script type="es6"> import "../../css/icons.css"; import session from "../../js/Session"; + import pollService from "../../js/PollService"; this.installBundle(session, "poll"); var moment = require('moment'); - this.startDate = moment(this.opts.poll.startDate).format("DD MMM YYYY"); + this.startDate = moment(this.opts.poll.beginDate).format("DD MMM YYYY"); if (this.opts.poll.endDate) { this.endDate = moment(this.opts.poll.endDate).format("DD MMM YYYY"); } else { @@ -80,11 +93,19 @@ import "../components/Avatar.tag.html"; } var now = new Date(); - this.ended = this.opts.poll.endDate < now; + this.ended = this.opts.poll.endDate && this.opts.poll.endDate < now; this.running = this.opts.poll.beginDate < now && opts.poll.endDate>now; this.started = this.opts.poll.beginDate < now && !opts.poll.endDate; this.starting = this.opts.poll.beginDate > now; + // si le sondage est non terminé, on redirige vers la liste des votes + // si le sondage est terminé, on redirige vers les résultats + if(this.ended) { + this.redirectToPoll = "#poll/"+this.opts.poll.id+"/result/"+this.opts.poll.permission; + } else { + this.redirectToPoll = "#poll/"+this.opts.poll.id+"/vote/"+this.opts.poll.permission; + } + this.deletePoll = (e) => { e.preventDefault(); e.stopPropagation(); @@ -101,9 +122,11 @@ import "../components/Avatar.tag.html"; <style> - .tooltip-2 { - margin-left:10px; - } + + .tooltip-2 { + margin-left:10px; + } + .pollcard { width: 370px; height: 267px; @@ -136,7 +159,7 @@ import "../components/Avatar.tag.html"; .card-header { display:flex; flex-direction: line; - padding: 20px 30px 20px 30px; + padding: 20px 30px 20px 20px; border-width: 0px 0px 1px 0px; border-color: #D2DAE2; border-style: solid; @@ -229,7 +252,6 @@ import "../components/Avatar.tag.html"; display: flex; align-items:center; justify-content:center; - flex-shrink: 0; background: #FFFFFF; @@ -274,6 +296,22 @@ import "../components/Avatar.tag.html"; } + a { + font-family: Open Sans; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 16px; + + text-decoration: none; + + /* Black Pearl */ + color: #1E272E; + } + + li:hover { + background: #F7F7F7; + } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html index acac6fbd..998d3e7d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html @@ -23,6 +23,8 @@ import "./PollCardReboot.tag.html"; import "../components/LazyLoad.tag.html"; import "../components/LoadingCard.tag.html"; import "./MyPollsHeader.tag.html"; +import "./NoPoll.tag.html"; + <Polls> <div class="container" show="{loaded}"> @@ -40,6 +42,9 @@ import "./MyPollsHeader.tag.html"; {parent.parent._l("loading", nbNext)} </LoadingCard> </yield> + <yield to="noResult"> + <NoPoll method="{this.opts.method}"></NoPoll> + </yield> </LazyLoad> </div> @@ -115,6 +120,7 @@ import "./MyPollsHeader.tag.html"; display: flex; flex-wrap: wrap; justify-content: flex-start; + width: 100%; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html index e60d4494..87660fcc 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html @@ -518,7 +518,7 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; this.form.model.questions[0].beginChoiceDate = this.refs.addChoices.checked ? this.refs.beginChoiceDate.getValue() : undefined; this.form.model.questions[0].endChoiceDate = this.refs.addChoices.checked ? this.refs.endChoiceDate.getValue() : undefined; - this.form.model.beginDate = this.refs.votePeriod && this.refs.votePeriod.checked ? this.refs.beginDate.getValue() : undefined; + this.form.model.beginDate = this.refs.votePeriod && this.refs.votePeriod.checked ? this.refs.beginDate.date.date : undefined; this.form.model.voteVisibility = this.refs.voteVisibility ? this.refs.voteVisibility.value : "EVERYBODY"; this.form.model.anonymousVoteAllowed = this.refs.anonymousVote ? this.refs.anonymousVote.checked : false; this.form.model.resultVisibility = this.refs.resultVisibility ? this.refs.resultVisibility.value : "EVERYBODY"; @@ -526,7 +526,7 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; this.form.model.questions[0].voteCountingConfig = this.refs.config && typeof this.refs.config.getConfig === "function" ? this.refs.config.getConfig() : {}; } - this.form.model.endDate = this.refs.votePeriod.checked ? this.refs.endDate.getValue() : undefined; + this.form.model.endDate = this.refs.votePeriod.checked ? this.refs.endDate.date.date : undefined; this.form.model.continuousResults = this.refs.continuousResults.checked; this.form.model.voteNotification = this.refs.voteNotification.checked; diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html new file mode 100644 index 00000000..0b31a584 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html @@ -0,0 +1,162 @@ +<!-- + #%L + Pollen :: UI RiotJs + %% + Copyright (C) 2009 - 2017 CodeLutin + %% + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. + #L% + --> +import "../components/HumanInput.tag.html"; + +<ModalReboot show={openModal}> + <div class="c-overlay"></div> + <div class="modal"> + <form class="c-card c-card--higher"> + <HumanInput onsubmit={submit}/> + <header class="modal-header"> + <span> + {opts.header} + </span> + </header> + <div class="modal-body"> + <yield/> + </div> + <div class="modal-footer"> + <PollenButton cancel="true" label={_t.cancel} onclick={cancel} /> + <PollenButton primary="true" label={opts.label || _t.ok} onclick="{submit}" /> + </div> + </form> + </div> + + <script type="es6"> + + import session from "../../js/Session"; + + this.installBundle(session, "modal"); + this.openModal = false; + + this.open = () => { + this.openModal = true; + this.modalPromise = new Promise((resolve, reject) => { + this.modalResolve = resolve; + this.modalReject = reject; + }); + return this.modalPromise; + }; + + this.submit = e => { + e.preventDefault(); + e.stopPropagation(); + + let promise = this.opts.onsubmit ? this.opts.onsubmit() : Promise.resolve(); + + promise.then(() => { + this.close(); + }, (error) => { + this.logger.error(error); + }); + + }; + + this.close = () => { + this.openModal = false; + this.modalResolve(); + }; + + this.cancel = () => { + this.openModal = false; + this.modalReject(); + }; + + this.listen("escape", () => { + if (this.openModal) { + this.cancel(); + this.update(); + } + }); + + </script> + + <style> + + .modal { + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + display: block; + width: 700px; + border: 0 solid var(--default); + border-radius: 4px; + background-color: var(--background); + overflow: hidden; + z-index: 50; + position: fixed; + } + + .modal-header { + display: flex; + align-items: center; + + background: #FFFFFF; + /* Link Water */ + border: 1px solid #D2DAE2; + box-sizing: border-box; + + height: 70px; + font-weight: bold; + font-size: 18px; + line-height: 25px; + + padding-left: 30px; + } + + .modal-footer { + display: flex; + justify-content: space-between; + + padding-bottom: 50px; + padding-left: 30px; + padding-right: 50px; + } + + .modal-body { + padding: 50px 50px; + } + + + .modal-form { + display: flex; + align-items: center; + flex-direction: column; + } + + .modal-description { + /* Open sans - italic 12px */ + font-family: Open Sans; + font-style: italic; + font-weight: normal; + font-size: 12px; + line-height: 16px; + text-align: center; + + /* Fiord */ + color: #485460; + + padding-bottom: 40px; + } + + </style> + +</ModalReboot> -- 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/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 2558ad32686ba896a78727534ee61b37832784fd Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 15:42:29 2020 +0100 ref #253 Export des codes couleur dans des variables CSS --- pollen-ui-riot-js/src/main/web/css/custom.css | 19 ++++++++++++ .../main/web/tag/components/IconButton.tag.html | 6 ++-- .../src/main/web/tag/components/MenuItem.tag.html | 6 ++-- .../main/web/tag/components/PollenButton.tag.html | 20 ++++++------ .../main/web/tag/components/PollenInput.tag.html | 4 +-- .../src/main/web/tag/components/Popover.tag.html | 8 ++--- .../main/web/tag/components/SearchReboot.tag.html | 8 ++--- .../src/main/web/tag/components/Tooltip.tag.html | 12 ++++---- .../src/main/web/tag/poll/MyPollsHeader.tag.html | 4 +-- .../src/main/web/tag/poll/NoPoll.tag.html | 2 +- .../src/main/web/tag/poll/PollCardReboot.tag.html | 36 +++++++++++----------- .../src/main/web/tag/popup/ModalReboot.tag.html | 6 ++-- pollen-ui-riot-js/stories/Card.stories.js | 1 + 13 files changed, 76 insertions(+), 56 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 4b5153c2..632a5e98 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -125,4 +125,23 @@ --support-background: hsl(var(--supportH), 93%, 52%); --support-background-hover: hsl(var(--supportH), 93%, 73%); --support-color: #535353; + + + --Elm: #29817E; + --Elm-Dark: #1D5A58; + --Mountain-Meadow: #14A39F; + --Mountain-Meadow-Dark: #0E726F; + --Black: #000000; + --Black-Pearl: #1E272E; + --Fiord: #485460; + --Light-Slate-Grey: #808E9B; + --Link-Water: #D2DAE2; + --White-Smoke: #F7F7F7; + --White: #FFFFFF; + --Purple: #6F1E51; + --Pizazz: #E76B35; + --Jade: #05C46B; + --Alizarin: #E2241B; + --Persian-Red: #C0392B; + } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html index 9101598a..47106cba 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html @@ -49,7 +49,7 @@ } .icon { - color: #808E9B; + color: var(--Light-Slate-Grey); } a:hover { @@ -57,7 +57,7 @@ } .active i { - color: #14A39F; + color: var(--Mountain-Meadow); } .selector { @@ -65,7 +65,7 @@ height: 6px; top: 215px; - background: #14A39F; + background: var(--Mountain-Meadow); border-radius: 4px; margin-left: 4.5px; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html index 926068b8..89de70b4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html @@ -63,7 +63,7 @@ } .active { - color: #29817E; + color: var(--Elm); font-weight: bold; } @@ -72,7 +72,7 @@ left: 50px; top: 213px; - background: #29817E; + background: var(--Elm); border-radius: 2px; visibility: hidden; @@ -91,7 +91,7 @@ a:hover { font-family: Open Sans; font-style: normal; - color: #29817E; + color: var(--Elm); } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html index dce64335..cbf8a34c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html @@ -60,32 +60,32 @@ } .btn.primary { - color: #FFFFFF; - background: #14A39F; + color: var(--White); + background: var(--Mountain-Meadow); font-weight: bold; } .btn.secondary { - color: #29817E; - border: 1px solid #29817E; + color: var(--Elm); + border: 1px solid var(--Elm); } .btn.cancel { - color: #C0392B; - border: 1px solid #C0392B; + color: var(--Persian-Red); + border: 1px solid var(--Persian-Red); } .btn.primary:hover, .btn.primary:focus { - color: #FFFFFF; - background: #0E726F; + color: var(--White); + background: var(--Mountain-Meadow-Dark); font-weight: bold; } .btn.secondary:hover, .btn.secondary:focus { - color: #1D5A58; - border: 1px solid #1D5A58; + color: var(--Elm-Dark); + border: 1px solid var(--Elm-Dark); } .btn.cancel:hover, diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html index 91826f74..c63adb71 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html @@ -56,7 +56,7 @@ line-height: 16px; border: none; /* Pale skye */ - color: #636E72; + color: ; padding-left: 10px; width: 100%; @@ -71,7 +71,7 @@ line-height: 19px; padding-bottom: 10px; /* Black Pearl */ - color: #1E272E; + color: var(--Black-Pearl); } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html index 1e072a33..aafc6111 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html @@ -29,8 +29,8 @@ /* Tooltip text */ .popover-content { visibility: hidden; - background-color: #ffffff; - color: #1E272E; + background-color: var(--White); + color: var(--Black-Pearl); padding: 10px 0px; border-radius: 8px; min-width:170px; @@ -68,7 +68,7 @@ <!-- .popover-container .popover-content::before { content: " "; position: absolute; - background-color: #ffffff; + background-color: var(--White); width: 20px; height: 20px; top:-10px; @@ -82,7 +82,7 @@ .popover-container .popover-content::after { content: " "; position: absolute; - background-color: #ffffff; + background-color: var(--White); width: 20px; height: 20px; top:-10px; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html index d87fd495..a92ff39a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html @@ -64,8 +64,8 @@ width: 350px; height: 40px; - background: #FFFFFF; - border: 1px solid #D2DAE2; + background: var(--White); + border: 1px solid var(--Link-Water); box-sizing: border-box; border-radius: 31px; @@ -78,7 +78,7 @@ } .icon-search { - color: #14A39F; + color: var(--Mountain-Meadow); padding-left: 20px; } @@ -92,7 +92,7 @@ /* identical to box height */ - color: #1E272E; + color: var(--Black-Pearl); width: 280px; padding-left: 10px; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html index c9fddd7d..ddafe6e4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html @@ -18,8 +18,8 @@ /* Tooltip text */ .tooltip-2 .tooltiptext { visibility: hidden; - background-color: #1E272E; - color: #fff; + background-color: var(--Black-Pearl); + color: var(--White); text-align: center; padding: 12px 20px; border-radius: 4px; @@ -51,7 +51,7 @@ margin-top: -5px; border-width: 5px; border-style: solid; - border-color: transparent #1E272E transparent transparent; + border-color: transparent var(--Black-Pearl) transparent transparent; } /* Left tooltip and arrow */ @@ -69,7 +69,7 @@ margin-top: -5px; border-width: 5px; border-style: solid; - border-color: transparent transparent transparent #1E272E; + border-color: transparent transparent transparent var(--Black-Pearl); } /* Top tooltip and arrow*/ @@ -88,7 +88,7 @@ margin-left: -5px; border-width: 5px; border-style: solid; - border-color: #1E272E transparent transparent transparent; + border-color: var(--Black-Pearl) transparent transparent transparent; } /* Bottom tooltip and arrow */ @@ -107,7 +107,7 @@ margin-left: -5px; border-width: 5px; border-style: solid; - border-color: transparent transparent #1E272E transparent; + border-color: transparent transparent var(--Black-Pearl) transparent; } /* Show tooltip */ diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html index ea4c7af5..ea55db90 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html @@ -116,7 +116,7 @@ import "../popup/ModalReboot.tag.html"; font-size: 40px; line-height: 54px; - color: #14A39F; + color: var(--Mountain-Meadow); display: flex; width: 100%; @@ -173,7 +173,7 @@ import "../popup/ModalReboot.tag.html"; } .active span { - color: #29817E; + color: var(--Elm); font-weight: bold; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html index 77d6552a..f9615688 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html @@ -39,7 +39,7 @@ align-items: center; /* Light Slate Grey */ - color: #808E9B; + color: var(--Light-Slate-Grey); font-size: 28px; line-height: 38px; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html index bba2e0cc..457c5a41 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html @@ -130,8 +130,8 @@ import "../components/Avatar.tag.html"; .pollcard { width: 370px; height: 267px; - background: #F7F7F7; - border: 1px solid #D2DAE2; + background: var(--White-Smoke); + border: 1px solid var(--Link-Water); box-sizing: border-box; border-radius: 4px; display: flex; @@ -140,7 +140,7 @@ import "../components/Avatar.tag.html"; } .pollcard:hover { - background: #FFFFFF; + background: var(--White); } .pollcard .body { @@ -161,22 +161,22 @@ import "../components/Avatar.tag.html"; flex-direction: line; padding: 20px 30px 20px 20px; border-width: 0px 0px 1px 0px; - border-color: #D2DAE2; + border-color: var(--Link-Water); border-style: solid; flex-shrink: 0; - color: #14A39F; + color: var(--Mountain-Meadow); } .closed .card-header div { - color: #6F1E51; + color: var(--Purple); } .voting .card-header div { - color: #E76B35; + color: var(--Pizazz); } .card-header div .popover-content { - color: #1E272E; + color: var(--Black-Pearl); } .poll-title { @@ -185,7 +185,7 @@ import "../components/Avatar.tag.html"; font-weight: 600; font-size: 16px; line-height: 22px; - color: #1E272E; + color: var(--Black-Pearl); } .poll-description { @@ -197,7 +197,7 @@ import "../components/Avatar.tag.html"; font-weight: 300; font-size: 12px; line-height: 16px; - color: #1E272E; + color: var(--Black-Pearl); overflow: hidden; text-overflow: ellipsis; } @@ -214,14 +214,14 @@ import "../components/Avatar.tag.html"; font-weight: 300; font-size: 12px; line-height: 16px; - color: #1E272E; + color: var(--Black-Pearl); } .icon { display: flex; align-items:center; justify-content:center; - background: #FFFFFF; + background: var(--White); width : 30px; height : 30px; border-radius:15px; @@ -229,7 +229,7 @@ import "../components/Avatar.tag.html"; .voters { display: flex; - background: #FFFFFF; + background: var(--White); border-radius:15px; padding:4px 10px 4px 10px; @@ -242,7 +242,7 @@ import "../components/Avatar.tag.html"; .avatar { display: flex; - background: #FFFFFF; + background: var(--White); width : 30px; height : 30px; border-radius:15px; @@ -253,7 +253,7 @@ import "../components/Avatar.tag.html"; align-items:center; justify-content:center; - background: #FFFFFF; + background: var(--White); width : 30px; height : 30px; @@ -275,7 +275,7 @@ import "../components/Avatar.tag.html"; padding: 10px 30px 30px 30px; - color: #1E272E; + color: var(--Black-Pearl); flex-shrink: 0; display:flex; @@ -306,11 +306,11 @@ import "../components/Avatar.tag.html"; text-decoration: none; /* Black Pearl */ - color: #1E272E; + color: var(--Black-Pearl); } li:hover { - background: #F7F7F7; + background: var(--White-Smoke); } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html index 0b31a584..ac0e1eb8 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html @@ -109,9 +109,9 @@ import "../components/HumanInput.tag.html"; display: flex; align-items: center; - background: #FFFFFF; + background: var(--White); /* Link Water */ - border: 1px solid #D2DAE2; + border: 1px solid var(--Link-Water); box-sizing: border-box; height: 70px; @@ -152,7 +152,7 @@ import "../components/HumanInput.tag.html"; text-align: center; /* Fiord */ - color: #485460; + color: var(--Fiord); padding-bottom: 40px; } diff --git a/pollen-ui-riot-js/stories/Card.stories.js b/pollen-ui-riot-js/stories/Card.stories.js index 33703704..9bdb5dcf 100644 --- a/pollen-ui-riot-js/stories/Card.stories.js +++ b/pollen-ui-riot-js/stories/Card.stories.js @@ -4,6 +4,7 @@ import i18nHelper from "../src/main/web/js/I18nHelper"; import uiHelper from "../src/main/web/js/UIHelper"; import riot from "riot"; +import "../src/main/web/css/custom.css"; import "../src/main/web/tag/poll/PollCardReboot.tag.html"; export default {title: "PollCardReboot"}; -- 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/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 62182ff5b211c0f776ab2f85ff37ce08f420f780 Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 16:04:36 2020 +0100 ref #253 Suppression du bouton 'Nouveau sondage' dans le header (redondant) --- pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html | 9 --------- 1 file changed, 9 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html index 52c61993..d0b90b8f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html @@ -28,15 +28,6 @@ import "./components/Avatar.tag.html"; <a class="header-home instance-title" href="#" target="_top"></a> <div class="header-actions"> - <div if={canCreatePoll}> - <a class="header-link header-link--info" - href="#poll/new/text" - title="{_t.newPoll}"> - <i class="fa fa-plus" aria-hidden="true"></i> - <span class="action-label">{_t.newPoll}</span> - </a> - </div> - <a class="header-link header-link--support" href="https://{session.locale}.liberapay.com/pollen/donate"> <i class="fa fa-heart" aria-hidden="true"></i> <span class="action-label">{_t.supportUs}</span> -- 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/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit f8bc1a88d1eed02be9cd88b274413b01d1da1d39 Author: Cécilia Bossard <bossard@codelutin.com> Date: Thu Feb 27 17:26:00 2020 +0100 ref #253 Ajout du menu accessible quand une carte a été cochée --- .../web/tag/components/CheckboxReboot.tag.html | 126 +++++++++++---------- .../src/main/web/tag/components/MenuItem.tag.html | 16 ++- .../src/main/web/tag/components/Separator.tag.html | 66 +++++++++++ .../src/main/web/tag/poll/MyPollsHeader.tag.html | 33 ++++-- .../src/main/web/tag/poll/PollCardReboot.tag.html | 16 ++- .../src/main/web/tag/poll/Polls.tag.html | 26 ++++- 6 files changed, 204 insertions(+), 79 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html index 2a6e5af5..ee19dca3 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/CheckboxReboot.tag.html @@ -28,7 +28,7 @@ this.ontogglecheckbox = () => { this.checked = !this.checked; if (this.opts.ontogglecheckbox) { - this.opts.ontogglecheckbox(); + this.opts.ontogglecheckbox(this); } }; @@ -40,71 +40,75 @@ <style> /* Customize the label (the container) */ -.container { - display: block; - position: relative; - margin-bottom: 12px; - cursor: pointer; - font-size: 22px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.label { - padding-left:25px; -} + .container { + display: block; + position: relative; + margin-bottom: 12px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .label { + padding-left:25px; + } + + /* Hide the browser's default checkbox */ + .container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + /* Create a custom checkbox */ + .checkmark { + position: absolute; + height: 18px; + width: 18px; -/* Hide the browser's default checkbox */ -.container input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} + background-color: var(--White); + border: 1px solid var(--Elm); + box-sizing: border-box; + border-radius: 1px; + } -/* Create a custom checkbox */ -.checkmark { - position: absolute; - top: 0; - left: 0; - height: 18px; - width: 18px; - background-color: #ffffff; - border: 1px solid #000000; - box-sizing: border-box; - border-radius: 1px; -} + /* When the checkbox is checked, add a blue background */ + .container input:checked ~ .checkmark { + background: var(--Elm); -/* When the checkbox is checked, add a blue background */ -.container input:checked ~ .checkmark { - background-color: #000000; -} + /* Elm */ + border: 1px solid var(--Elm); + box-sizing: border-box; + border-radius: 1px; + } -/* Create the checkmark/indicator (hidden when not checked) */ -.checkmark:after { - content: ""; - position: absolute; - display: none; -} + /* Create the checkmark/indicator (hidden when not checked) */ + .checkmark:after { + content: ""; + position: absolute; + display: none; + } -/* Show the checkmark when checked */ -.container input:checked ~ .checkmark:after { - display: block; -} + /* Show the checkmark when checked */ + .container input:checked ~ .checkmark:after { + display: block; + } -/* Style the checkmark/indicator */ -.container .checkmark:after { - left: 4px; - top: 1px; - width: 4px; - height: 8px; - border: solid white; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} + /* Style the checkmark/indicator */ + .container .checkmark:after { + left: 4px; + top: 1px; + width: 4px; + height: 8px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } </style> </CheckboxReboot> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html index 89de70b4..1c78dfbb 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html @@ -21,9 +21,9 @@ <MenuItem> - <div> + <div class="{mainClassName}"> <a href="{opts.href}" class="{activeClassName}"> - <span >{opts.label}</span> + <span>{opts.label}</span> <div class="selector {visibleSelector}"/> </a> </div> @@ -41,6 +41,15 @@ this.visibleSelector = "visible"; } + this.mainClassName = "visible"; + if(this.opts.mainclassname) { + this.mainClassName = this.opts.mainclassname; + } + + this.display = (mustBeVisible) => { + this.mainClassName = mustBeVisible ? "visible" : "hidden"; + } + </script> <style> @@ -92,8 +101,9 @@ font-family: Open Sans; font-style: normal; color: var(--Elm); - } + + </style> </MenuItem> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Separator.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Separator.tag.html new file mode 100644 index 00000000..df6bb85b --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/components/Separator.tag.html @@ -0,0 +1,66 @@ +<!-- + #%L + Pollen :: UI RiotJs + %% + Copyright (C) 2009 - 2017 CodeLutin + %% + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. + #L% + --> + +<Separator> + + <div class="separator {visibility}"> + </div> + + <script type="es6"> + + + this.visibility = "visible"; + if(this.opts.isvisible) { + this.visibility = this.opts.isvisible; + } + + this.display = (mustBeVisible) => { + this.visibility = mustBeVisible ? "visible" : "hidden"; + } + + </script> + + <style> + + .separator { + width: 1px; + height: 12px; + background: var(--Light-Slate-Grey); + border-radius: 3px; + + display: block; + + margin-left: 10px; + margin-right: 10px; + } + + .hidden { + visibility: hidden; + opacity: 0; + } + + .visible { + visibility: visible; + opacity: 1; + } + + </style> +</Separator> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html index ea55db90..4c95e77c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html @@ -22,6 +22,7 @@ import "../components/SearchReboot.tag.html"; import "../components/PollenButton.tag.html"; import "../components/IconButton.tag.html"; +import "../components/Separator.tag.html"; import "../components/MenuItem.tag.html"; import "../components/PollenInput.tag.html"; import "../popup/ModalReboot.tag.html"; @@ -48,15 +49,17 @@ import "../popup/ModalReboot.tag.html"; <MenuItem href="#polls/created" label="{_t.myPolls}" ref="createdPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/invited" label="{_t.invitedPolls}" ref="invitedPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/participated" label="{_t.participatedPolls}" ref="participatedPolls" method="{this.parent.opts.method}"/> - <!-- TODO A remplacer par un separator --> - <MenuItem label="|" ref="none"/> + <Separator /> <MenuItem href="#polls/past" label="{_t.pastPolls}" ref="pastPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/current" label="{_t.currentPolls}" ref="currentPolls" method="{this.parent.opts.method}"/> <MenuItem href="#polls/upcomming" label="{_t.upcommingPolls}" ref="upcommingPolls" method="{this.parent.opts.method}"/> </div> <div class="rightSubMenu"> - <div><IconButton icon="icon-List" /></div> - <div><IconButton href="#" icon="icon-Mosaic" active="true"/></div> + <MenuItem href="#" label="Duplicate" ref="duplicatePolls" method="" mainclassname="hidden"/> + <MenuItem href="#" label="Delete" ref="deletePolls" method="" mainclassname="hidden"/> + <Separator isvisible="hidden" ref="rightSubMenuSeparator"/> + <IconButton icon="icon-List" /> + <IconButton href="#" icon="icon-Mosaic" active="true"/> </div> </div> @@ -105,6 +108,22 @@ import "../popup/ModalReboot.tag.html"; this.update(); }); }; + + this.boxChecked = (checkedValues) => { + + var isBoxChecked = false; + + if(checkedValues.length > 0) { + isBoxChecked = true; + } + + this.refs.duplicatePolls.display(isBoxChecked); + this.refs.deletePolls.display(isBoxChecked); + this.refs.rightSubMenuSeparator.display(isBoxChecked); + + this.update(); + } + </script> <style> @@ -122,7 +141,7 @@ import "../popup/ModalReboot.tag.html"; width: 100%; justify-content: space-between; - padding-top: 40px; + padding-top: 35px; padding-left: 2%; padding-right: 2%; } @@ -162,13 +181,13 @@ import "../popup/ModalReboot.tag.html"; .leftSubMenu { display: flex; justify-content: space-between; - align-items: center; + align-items: baseline; } .rightSubMenu { display: flex; justify-content: flex-end; - align-items: center; + align-items: baseline; flex-grow: 2; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html index 457c5a41..201bf9d9 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html @@ -1,4 +1,4 @@ -import "../components/Checkbox.tag.html"; +import "../components/CheckboxReboot.tag.html"; import "../components/Tooltip.tag.html"; import "../components/Popover.tag.html"; import "../components/Avatar.tag.html"; @@ -72,7 +72,7 @@ import "../components/Avatar.tag.html"; <i class="timing icon-arrow-right"></i> <span class="timing">{endDate}</span> <span class="growing"></span> - <CheckboxReboot class="checkbox-footer"></CheckboxReboot> + <CheckboxReboot class="checkbox-footer" ontogglecheckbox="{ontogglecheckbox}"></CheckboxReboot> </div> </div> @@ -118,6 +118,12 @@ import "../components/Avatar.tag.html"; }); }; + this.ontogglecheckbox = (checkbox) => { + if(this.opts.ontogglecheckbox) { + this.opts.ontogglecheckbox(checkbox); + } + } + </script> @@ -136,7 +142,7 @@ import "../components/Avatar.tag.html"; border-radius: 4px; display: flex; flex-direction: column; - margin: 0 55px 51px 0; + margin: 0 0 51px 0; } .pollcard:hover { @@ -273,7 +279,7 @@ import "../components/Avatar.tag.html"; font-size: 12px; line-height: 16px; - padding: 10px 30px 30px 30px; + padding: 10px 30px 40px 30px; color: var(--Black-Pearl); flex-shrink: 0; @@ -292,7 +298,7 @@ import "../components/Avatar.tag.html"; } .checkbox-footer { - margin-right:18px; + margin-right:20px; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html index 998d3e7d..0fc194ef 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html @@ -29,13 +29,13 @@ import "./NoPoll.tag.html"; <Polls> <div class="container" show="{loaded}"> - <MyPollsHeader search="{search}"/> + <MyPollsHeader search="{search}" ref="pollsHeader"/> <div class="main-content"> <LazyLoad pagination={pagination} onload={lazyLoad} load-size="20" ref="lazyLoad" class="elements"> <yield to="element"> - <PollCardReboot poll={element} on-poll-list-change={parent.parent.refresh}/> + <PollCardReboot poll={element} on-poll-list-change={parent.parent.refresh} ontogglecheckbox="{parent.parent.ontogglecheckbox}"/> </yield> <yield to="loading"> <LoadingCard loading={nbNextGroup}> @@ -68,6 +68,8 @@ import "./NoPoll.tag.html"; this.count = 0; this.filteredCount = 0; + this.boxChecked = []; + this.getCountLabel = () => { let label; if (this.count === 0) { @@ -107,6 +109,19 @@ import "./NoPoll.tag.html"; }); }; + this.ontogglecheckbox = (checkbox) => { + if(checkbox.checked) { + this.boxChecked.push(checkbox.parent); + } else { + var filtered = this.boxChecked.filter(function(value) { + return value.opts.poll.id != checkbox.parent.opts.poll.id; + }); + this.boxChecked = filtered; + } + + this.refs.pollsHeader.boxChecked(this.boxChecked); + } + </script> @@ -119,9 +134,14 @@ import "./NoPoll.tag.html"; .elements { display: flex; flex-wrap: wrap; - justify-content: flex-start; + justify-content: space-between; width: 100%; } + .main-content { + padding-right: 50px; + padding-left: 50px; + } + </style> </Polls> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm