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>.