branch develop updated (b171268 -> 5c3fb9a)
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 b171268 création d'un utilitaire de log pour le JS new 5c3fb9a création et utilisation des composants : Modal, confirmation et information. 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 5c3fb9ad858e4832fc143f116be2dad0d14c091e Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Wed May 24 09:48:01 2017 +0200 création et utilisation des composants : Modal, confirmation et information. Summary of changes: pollen-ui-riot-js/src/main/web/i18n.json | 28 ++++-- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 4 + pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 2 +- pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html | 4 +- .../src/main/web/tag/UserCard.tag.html | 24 ++--- .../web/tag/favoriteList/ChildListCard.tag.html | 16 ++-- .../web/tag/favoriteList/FavoriteList.tag.html | 10 ++- .../web/tag/favoriteList/FavoriteListCard.tag.html | 12 +-- .../main/web/tag/favoriteList/MemberCard.tag.html | 16 ++-- .../src/main/web/tag/poll/Comments.tag.html | 10 ++- .../src/main/web/tag/poll/Poll.tag.html | 15 ++-- .../src/main/web/tag/poll/Votes.tag.html | 10 +-- .../src/main/web/tag/popup/AccountCreated.tag.html | 82 ----------------- .../{Modal.tag.html => ConfirmPopup.tag.html} | 43 +++++---- .../{Modal.tag.html => InformationPopup.tag.html} | 40 +++++---- .../src/main/web/tag/popup/Modal.tag.html | 28 ++++-- .../src/main/web/tag/popup/NewPassword.tag.html | 98 ++++++-------------- .../main/web/tag/popup/ResendValidation.tag.html | 100 ++++++--------------- .../web/tag/voterList/VoterListActions.tag.html | 15 ++-- .../web/tag/voterList/VoterListMember.tag.html | 15 ++-- 20 files changed, 226 insertions(+), 346 deletions(-) delete mode 100644 pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html copy pollen-ui-riot-js/src/main/web/tag/popup/{Modal.tag.html => ConfirmPopup.tag.html} (61%) copy pollen-ui-riot-js/src/main/web/tag/popup/{Modal.tag.html => InformationPopup.tag.html} (63%) -- 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 5c3fb9ad858e4832fc143f116be2dad0d14c091e Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Wed May 24 09:48:01 2017 +0200 création et utilisation des composants : Modal, confirmation et information. --- pollen-ui-riot-js/src/main/web/i18n.json | 28 ++++-- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 4 + pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html | 2 +- pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html | 4 +- .../src/main/web/tag/UserCard.tag.html | 24 ++--- .../web/tag/favoriteList/ChildListCard.tag.html | 16 ++-- .../web/tag/favoriteList/FavoriteList.tag.html | 10 ++- .../web/tag/favoriteList/FavoriteListCard.tag.html | 12 +-- .../main/web/tag/favoriteList/MemberCard.tag.html | 16 ++-- .../src/main/web/tag/poll/Comments.tag.html | 10 ++- .../src/main/web/tag/poll/Poll.tag.html | 15 ++-- .../src/main/web/tag/poll/Votes.tag.html | 10 +-- .../src/main/web/tag/popup/AccountCreated.tag.html | 82 ----------------- .../{Modal.tag.html => ConfirmPopup.tag.html} | 43 +++++---- .../{Modal.tag.html => InformationPopup.tag.html} | 40 +++++---- .../src/main/web/tag/popup/Modal.tag.html | 28 ++++-- .../src/main/web/tag/popup/NewPassword.tag.html | 98 ++++++-------------- .../main/web/tag/popup/ResendValidation.tag.html | 100 ++++++--------------- .../web/tag/voterList/VoterListActions.tag.html | 15 ++-- .../web/tag/voterList/VoterListMember.tag.html | 15 ++-- 20 files changed, 226 insertions(+), 346 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 2b57c10..31a6a82 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -128,10 +128,11 @@ "signup_resendValidation": "Déja inscrit, mais compte non validé ?", "signup_error": "Impossible d'enregister le compte.", "signup_error_email": "L'adresse email est déjà utilisé pour un autre compte.", - "createaccount_title": "Votre compte a bien été créé", - "createaccount_description": "Un courriel vous a été envoyé avec l'url de validation de votre compte.", - "createaccount_action": "Continuer", + "signup_createAccount_title": "Votre compte a bien été créé", + "signup_createAccount_message": "Un courriel vous a été envoyé avec l'url de validation de votre compte.", + "signup_createAccount_action": "Continuer", "resendvalidation_title": "Renvoyer un courriel de validation de compte", + "resendvalidation_cancel": "Annuler", "resendvalidation_action": "Envoyer", "resendvalidation_placeholder": "Entrer votre courriel", "resendvalidation_sent": "Un nouveau courriel d'invitation a été envoyé", @@ -305,6 +306,7 @@ "user_emailValidate": "En cours de validation", "user_administrator": "Administrateur", "user_edit": "Modifier l'utilisateur", + "user_ban": "Désactiver", "user_banUser": "Désactiver l'utilisateur", "user_banUserMessage": "Désactiver l'utilisateur ?", "user_deleteUser": "Supprimer l'utilisateur", @@ -414,7 +416,10 @@ "voterList_member_delete": "Supprimer le participant", "voterList_member_deleteMessage": "Supprimer le participant ?", "modal_cancel": "Annuler", - "modal_ok": "Ok" + "modal_ok": "Ok", + "confirm_cancel": "Annuler", + "confirm_delete": "Supprimer", + "information_ok": "Ok" }, "en": { "main_pollen_title": "Pollen - ", @@ -545,6 +550,9 @@ "signup_resendValidation": "Already member, but account never validated ?", "signup_error": "Could not register account.", "signup_error_email": "This email is already used.", + "signup_createAccount_title": "Your account was created", + "signup_createAccount_message": "We sent you an email with the account validation process.", + "signup_createAccount_action": "Continue", "signcheck_title": "Validate your account", "signcheck_signin": "Sign in", "signcheck_resendValidation": "Send a new invitation", @@ -552,10 +560,8 @@ "signcheck_validating": "Your account is validating...", "signcheck_validating_error": "Your account could not be validated, try to send a new invitation.", "signcheck_validating_success": "Your account was validated! You can now sign in. Enjoy!", - "createaccount_title": "Your account was created", - "createaccount_description": "We sent you an email with the account validation process.", - "createaccount_action": "Continue", "resendvalidation_title": "Send another validation email", + "resendvalidation_cancel": "Cancel", "resendvalidation_action": "Send again", "resendvalidation_sent": "A new invitation email was sent", "resendvalidation_placeholder": "Fill your email", @@ -712,6 +718,7 @@ "user_emailValidate": "email validation waiting", "user_administrator": "Administrator", "user_edit": "Edit user", + "user_ban": "Ban", "user_banUser": "Ban user", "user_banUserMessage": "Ban user ?", "user_deleteUser": "Delete user", @@ -818,7 +825,10 @@ "voterList_member_weight": "Weight", "voterList_member_delete": "Delete member", "voterList_member_deleteMessage": "Delete member ?", - "modal_cancel": "Annuler", - "modal_ok": "Ok" + "modal_cancel": "Cancel", + "modal_ok": "Ok", + "confirm_cancel": "Cancel", + "confirm_delete": "Delete", + "information_ok": "Ok" } } 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 bc6aade..6dcf8e2 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 @@ -33,8 +33,12 @@ require("./Users.tag.html"); require("./UserProfile.tag.html"); require("./favoriteList/FavoriteLists.tag.html"); require("./favoriteList/FavoriteList.tag.html"); +require("./popup/ConfirmPopup.tag.html"); +require("./popup/InformationPopup.tag.html"); <Pollen class="body-wrapper"> <div id="infoMessages"></div> + <ConfirmPopup/> + <InformationPopup/> <PollenHeader/> <PollenWaiter parent-id="body-content"/> <div id="body-content" class="body-content"> diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html index 569579c..2127f7f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html @@ -83,7 +83,7 @@ require("./SignUp.tag.html"); }; this.close = () => { - this.logger.log("close !"); + this.logger.log("close !"); this.openSignIn = false; this.update(); }; diff --git a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html index d614cb3..622875c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/SignUp.tag.html @@ -20,7 +20,6 @@ */ let route = require("riot-route"); require("./popup/ResendValidation.tag.html"); -require("./popup/AccountCreated.tag.html"); <SignUp class="body-content"> <div class="container"> @@ -99,7 +98,6 @@ require("./popup/AccountCreated.tag.html"); </div> <ResendValidation ref="resendValidation"/> - <AccountCreated ref="accountCreated"/> <script type="es6"> let authService = require("../js/AuthService"); @@ -129,7 +127,7 @@ require("./popup/AccountCreated.tag.html"); }; authService.signUp(user).then(() => { - this.refs.accountCreated.open(); + this.info(this.__.createAccount_title, this.__.createAccount_message, this.__.createAccount_action); this.update(); }) .catch((errors) => { diff --git a/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html index 41a8e30..2c5946b 100644 --- a/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/UserCard.tag.html @@ -95,19 +95,23 @@ }; this.banUser = () => { - if (confirm(this.__.banUserMessage)) { - userService.banUser(this.opts.user.id).then(() => { - this.opts.onUserChange(); - }); - } + this.confirm(this.__.banUserMessage, this.__.ban, "warning").then((confirm) => { + if (confirm) { + userService.banUser(this.opts.user.id).then(() => { + this.opts.onUserChange(); + }); + } + }); }; this.deleteUser = () => { - if (confirm(this.__.deleteUserMessage)) { - userService.deleteUser(this.opts.user.id).then(() => { - this.opts.onUserChange(); - }); - } + this.confirm(this.__.deleteUserMessage).then((confirm) => { + if (confirm) { + userService.deleteUser(this.opts.user.id).then(() => { + this.opts.onUserChange(); + }); + } + }); }; this.saveUser = e => { diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html index bff81db..eca806d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/ChildListCard.tag.html @@ -75,13 +75,15 @@ }; this.delete = () => { - if (confirm(this.__.deleteMessage)) { - favoriteListService.deleteChildList(this.opts.favoriteList.id, this.opts.childList.id).then(() => { - if (this.opts.onChildListChange) { - this.opts.onChildListChange(); - } - }); - } + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteChildList(this.opts.favoriteList.id, this.opts.childList.id).then(() => { + if (this.opts.onChildListChange) { + this.opts.onChildListChange(); + } + }); + } + }); }; this.save = e => { diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html index 3b778b3..2118852 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteList.tag.html @@ -284,9 +284,13 @@ require("./ChildListCard.tag.html"); this.favoriteLists = []; this.delete = () => { - if (this.favoriteList.id && confirm(this.__.deleteMessage)) { - favoriteListService.deleteFavoriteList(this.favoriteList.id).then(() => { - route("/favoriteLists") + if (this.favoriteList.id) { + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteFavoriteList(this.favoriteList.id).then(() => { + route("/favoriteLists"); + }); + } }); } }; diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html index 30f845c..ef2e222 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/FavoriteListCard.tag.html @@ -23,11 +23,13 @@ require("./MemberCard.tag.html"); let favoriteListService = require("../../js/FavoriteListService"); this.delete = () => { - if (confirm(this.__.deleteMessage)) { - favoriteListService.deleteFavoriteList(this.opts.favoriteList.id).then(() => { - this.opts.onFavoriteListChange(); - }); - } + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteFavoriteList(this.opts.favoriteList.id).then(() => { + this.opts.onFavoriteListChange(); + }); + } + }); }; </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html index a5aa5c2..f17fb4a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/favoriteList/MemberCard.tag.html @@ -84,13 +84,15 @@ }; this.delete = () => { - if (confirm(this.__.deleteMessage)) { - favoriteListService.deleteMember(this.opts.favoriteList.id, this.opts.member.id).then(() => { - if (this.opts.onMemberChange) { - this.opts.onMemberChange(); - } - }); - } + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + favoriteListService.deleteMember(this.opts.favoriteList.id, this.opts.member.id).then(() => { + if (this.opts.onMemberChange) { + this.opts.onMemberChange(); + } + }); + } + }); }; this.save = e => { 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 688da5b..16b9b03 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 @@ -211,10 +211,12 @@ require("./CommentPopup.tag.html"); }; this.deleteComment = (comment) => () => { - let response = confirm(this.__.deleteComment); - if (response) { - this.poll.deleteComment(comment); - } + this.confirm(this.__.deleteComment).then((confirm) => { + if (confirm) { + this.poll.deleteComment(comment); + this.update(); + } + }); }; this.scrollTop = () => { 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 000f4ac..4bbcdb2 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 @@ -219,13 +219,14 @@ require("../popup/QrCodeButton.tag.html"); this.deletePoll = (e) => { e.preventDefault(); e.stopPropagation(); - let response = confirm(this.__.deletePoll); - if (response) { - this.poll.delete().then(() => { - let route = require("riot-route"); - route("/home"); - }); - } + this.confirm(this.__.deletePoll).then((confirm) => { + if (confirm) { + this.poll.delete().then(() => { + let route = require("riot-route"); + route("/home"); + }); + } + }); }; this.copyUrl = (refInputUrl) => () => { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index d5e23dc..0c669fb 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -354,14 +354,14 @@ require("./Podium.tag.html"); this.deleteVote = (vote) => (e) => { e.preventDefault(); e.stopPropagation(); - let response = confirm(this.__.delete); - if (response) { - this.poll.deleteVote(vote) - .then(() => { + this.confirm(this.__.delete).then((confirm) => { + if (confirm) { + this.poll.deleteVote(vote).then(() => { this.selectedChoiceNb = 0; this.update(); }); - } + } + }); }; this.addChoice = (e) => { diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html deleted file mode 100644 index f184914..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/popup/AccountCreated.tag.html +++ /dev/null @@ -1,82 +0,0 @@ -/*- - * #%L - * Pollen :: UI (Riot Js) - * %% - * 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% - */ -<AccountCreated show={openModal}> - <div class="c-overlay"></div> - <div class="o-modal"> - <form class="c-card" - onsubmit={action}> - <header class="c-card__header"> - <button type="button" - onclick={close} - class="c-button c-button--close"> - × - </button> - <h2 class="c-heading"> - {__.title} - </h2> - </header> - <div class="c-card__body"> - {__.description} - </div> - - <footer class="c-card__footer"> - <button type="submit" - class="c-button c-button--brand"> - {__.action} - </button> - </footer> - </form> - </div> - - <script type="es6"> - let session = require("../../js/Session"); - let route = require("riot-route"); - - this.installBundle(session, "createaccount"); - this.openModal = false; - - this.oldParent = this.parent.root; - - this.open = () => { - this.openModal = true; - }; - - this.close = () => { - this.openModal = false; - }; - - this.action = () => { - this.close(); - route("home", null, true); - this.bus.trigger("closeSignIn"); - }; - - </script> - - <style> - @media (min-width: 640px) { - .o-modal { - width: 400px; - } - } - </style> - -</AccountCreated> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ConfirmPopup.tag.html similarity index 61% copy from pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html copy to pollen-ui-riot-js/src/main/web/tag/popup/ConfirmPopup.tag.html index 9eedabe..0da776f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ConfirmPopup.tag.html @@ -1,16 +1,13 @@ -<modal show={openModal}> +<ConfirmPopup show={openModal}> <div class="c-overlay"></div> <div class="o-modal u-highest"> <div class="c-card c-card--higher"> <header class="c-card__header"> <h2 class="c-heading"> - {opts.title} + {message} </h2> </header> - <div class="c-card__body"> - <yield/> - </div> <footer class="c-card__footer c-card__footer--block"> <div class="c-input-group"> <button type="button" @@ -19,9 +16,9 @@ {__.cancel} </button> <button type="button" - class="c-button c-button--block c-button--info" - onclick={close}> - {__.ok} + class="c-button c-button--block c-button--{type}" + onclick={confirm}> + {label} </button> </div> </footer> @@ -32,28 +29,42 @@ let session = require("../../js/Session"); - this.installBundle(session, "modal"); + this.installBundle(session, "confirm"); this.openModal = false; - this.open = () => { + this.open = (message, label, type) => { + this.message = message; + this.label = label || this.__.delete; + this.type = type || "error"; this.openModal = true; this.modalPromise = new Promise((resolve, reject) => { this.modalResolve = resolve; this.modalReject = reject; }); + this.update(); return this.modalPromise; }; - this.close = () => { - this.openModal = false; - this.modalResolve(); + this.close = (value) => { + if (this.openModal) { + this.openModal = false; + this.modalResolve(value); + this.update(); + } + }; + + this.confirm = () => { + this.close(true); }; this.cancel = () => { - this.openModal = false; - this.modalReject(); + this.close(false); }; + this.listen("escape", this.cancel); + + riot.mixin({confirm: this.open}); + </script> <style> @@ -62,4 +73,4 @@ } </style> -</modal> +</ConfirmPopup> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html similarity index 63% copy from pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html copy to pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html index 9eedabe..0f7c437 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/InformationPopup.tag.html @@ -1,27 +1,22 @@ -<modal show={openModal}> +<InformationPopup show={openModal}> <div class="c-overlay"></div> <div class="o-modal u-highest"> <div class="c-card c-card--higher"> <header class="c-card__header"> <h2 class="c-heading"> - {opts.title} + {title} </h2> </header> <div class="c-card__body"> - <yield/> + {message} </div> <footer class="c-card__footer c-card__footer--block"> <div class="c-input-group"> <button type="button" - class="c-button c-button--block c-button--brand" - onclick={cancel}> - {__.cancel} - </button> - <button type="button" - class="c-button c-button--block c-button--info" + class="c-button c-button--block c-button--{type}" onclick={close}> - {__.ok} + {label} </button> </div> </footer> @@ -32,27 +27,34 @@ let session = require("../../js/Session"); - this.installBundle(session, "modal"); + this.installBundle(session, "information"); this.openModal = false; - this.open = () => { + this.open = (title, message, label, type) => { + this.title = title; + this.message = message; + this.label = label || this.__.ok; + this.type = type || "brand"; this.openModal = true; this.modalPromise = new Promise((resolve, reject) => { this.modalResolve = resolve; this.modalReject = reject; }); + this.update(); return this.modalPromise; }; this.close = () => { - this.openModal = false; - this.modalResolve(); + if (this.openModal) { + this.openModal = false; + this.modalResolve(); + this.update(); + } }; - this.cancel = () => { - this.openModal = false; - this.modalReject(); - }; + this.listen("escape", this.close); + + riot.mixin({info: this.open}); </script> @@ -62,4 +64,4 @@ } </style> -</modal> +</InformationPopup> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html index 9eedabe..ce3e435 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html @@ -2,7 +2,7 @@ <modal show={openModal}> <div class="c-overlay"></div> <div class="o-modal u-highest"> - <div class="c-card c-card--higher"> + <form class="c-card c-card--higher" onsubmit={submit}> <header class="c-card__header"> <h2 class="c-heading"> {opts.title} @@ -18,14 +18,13 @@ onclick={cancel}> {__.cancel} </button> - <button type="button" - class="c-button c-button--block c-button--info" - onclick={close}> - {__.ok} + <button type="submit" + class="c-button c-button--block c-button--{opts.type || 'info'}" > + {opts.label || __.ok} </button> </div> </footer> - </div> + </form> </div> <script type="es6"> @@ -44,6 +43,16 @@ return this.modalPromise; }; + this.submit = e => { + e.preventDefault(); + e.stopPropagation(); + + let promise = this.opts.onsubmit ? this.opts.onsubmit() : Promise.resolve(); + + promise.then(() => {this.close();}, () => {}); + + }; + this.close = () => { this.openModal = false; this.modalResolve(); @@ -54,6 +63,13 @@ this.modalReject(); }; + this.listen("escape", () => { + if (this.openModal) { + this.cancel(); + this.update(); + } + }); + </script> <style> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html index 727944f..af23b65 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/NewPassword.tag.html @@ -18,94 +18,52 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -<NewPassword show={openModal}> - <div class="c-overlay"></div> - <div class="o-modal"> - <form class="c-card" - onsubmit={action}> - <header class="c-card__header"> - <button type="button" - onclick={close} - class="c-button c-button--close"> - × - </button> - <h2 class="c-heading"> - {__.title} - </h2> - </header> - <div class="c-card__body"> - <input class="c-field {c-field--error : error}" - ref="email" - type="email" - required - placeholder="{__.placeholder}"> - <div if="{error}" - class="c-hint--static c-hint--error"> - {error} - </div> - <div if="{sent}" - class="c-hint--static c-hint--success"> - <i class="fa fa-envelope"></i> {__.sent} - </div> - </div> - - <footer class="c-card__footer"> - <button type="submit" - class="c-button c-button--brand"> - {__.action} - </button> - </footer> - </form> - </div> - +<NewPassword> + <Modal ref="modal" title={__.title} onsubmit={submit} label={__.action}> + <input class="c-field {c-field--error : parent.error}" + ref="email" + type="email" + required + placeholder="{parent.__.placeholder}"> + <div if="{parent.error}" + class="c-hint--static c-hint--error"> + {parent.error} + </div> + <div if="{parent.sent}" + class="c-hint--static c-hint--success"> + <i class="fa fa-envelope"></i> {parent.__.sent} + </div> + </Modal> + <script type="es6"> let session = require("../../js/Session"); let authService = require("../../js/AuthService"); this.installBundle(session, "newpassword"); this.sent = false; - this.openModal = false; this.error = ""; this.oldParent = this.parent.root; this.open = (email) => { - this.refs.email.value = email; + this.refs.modal.refs.email.value = email; this.error = ""; this.sent = false; - this.openModal = true; + this.refs.modal.open().then(() => {}, () => {}); }; - this.close = () => { - this.openModal = false; - }; - - this.action = (e) => { - e.preventDefault(); - e.stopPropagation(); + this.submit = () => { this.error = ""; this.sent = false; - let email = this.refs.email.value; - if (email) { - authService.newPassword(email) - .then(() => { - this.sent = true; - this.update(); - }) - .catch(() => { - this.error = this.__.error_emailNotFound; - this.update(); - }); - } + let email = this.refs.modal.refs.email.value; + return authService.newPassword(email).then(() => { + this.sent = true; + this.update(); + }, () => { + this.error = this.__.error_emailNotFound; + this.update(); + }); }; </script> - <style> - @media (min-width: 640px) { - .o-modal { - width: 400px; - } - } - </style> - </NewPassword> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html index 2137e44..341dda4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ResendValidation.tag.html @@ -18,45 +18,22 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -<ResendValidation show={openModal}> - <div class="c-overlay"></div> - <div class="o-modal"> - <form class="c-card" - onsubmit={action}> - <header class="c-card__header"> - <button type="button" - onclick={close} - class="c-button c-button--close"> - × - </button> - <h2 class="c-heading"> - {__.title} - </h2> - </header> - <div class="c-card__body"> - <input class="c-field {c-field--error : error}" - ref="email" - type="email" - required - placeholder="{__.placeholder}"> - <div if="{error}" - class="c-hint--static c-hint--error"> - {error} - </div> - <div if="{sent}" - class="c-hint--static c-hint--success"> - <i class="fa fa-envelope"></i> {__.sent} - </div> - </div> - - <footer class="c-card__footer"> - <button type="submit" - class="c-button c-button--brand"> - {__.action} - </button> - </footer> - </form> - </div> +<ResendValidation> + <Modal ref="modal" title={__.title} onsubmit={submit} label={__.action}> + <input class="c-field {c-field--error : parent.error}" + ref="email" + type="email" + required + placeholder="{parent.__.placeholder}"> + <div if="{parent.error}" + class="c-hint--static c-hint--error"> + {parent.error} + </div> + <div if="{parent.sent}" + class="c-hint--static c-hint--success"> + <i class="fa fa-envelope"></i> {parent.__.sent} + </div> + </Modal> <script type="es6"> @@ -65,49 +42,24 @@ this.installBundle(session, "resendvalidation"); - this.openModal = false; - this.open = () => { - this.refs.email.value = ""; - this.sent = false; - this.error = ""; - this.openModal = true; - this.update(); + this.refs.modal.open().then(() => {}, () => {}); }; - this.close = () => { - this.openModal = false; - }; - this.action = (e) => { - - e.preventDefault(); - e.stopPropagation(); + this.submit = () => { this.error = ""; this.sent = false; - let email = this.refs.email.value; - if (email) { - authService.resendValidation(email) - .then(() => { - this.sent = true; - this.update(); - }) - .catch(() => { - this.error = this.__.error_emailNotFound; - this.update(); - }); - } + let email = this.refs.modal.refs.email.value; + return authService.resendValidation(email).then(() => { + this.sent = true; + this.update(); + }, () => { + this.error = this.__.error_emailNotFound; + this.update(); + }); }; </script> - <style> - @media (min-width: 640px) { - .o-modal { - width: 400px; - } - } - - </style> - </ResendValidation> diff --git a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html index 37a3015..923d3f2 100644 --- a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListActions.tag.html @@ -63,11 +63,6 @@ </select> </modal> - <modal title={__.delete} - ref="deleteConfirm"> - {parent.__.deleteMessage} - </modal> - <script type="es6"> let session = require("../../js/Session"); this.installBundle(session, "voterList"); @@ -101,10 +96,12 @@ this.delete = () => { if (this.opts.voterList.parentId) { - this.refs.deleteConfirm.open().then(() => { - voterListService.deleteVoterList(this.opts.voterList); - this.parent.parent.update(); - }, () => {}); + this.confirm(this.__.deleteMessage).then((confirm) => { + if (confirm) { + voterListService.deleteVoterList(this.opts.voterList); + this.parent.parent.update(); + } + }); } }; diff --git a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html index 795afcf..a072a30 100644 --- a/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/voterList/VoterListMember.tag.html @@ -42,11 +42,6 @@ </button> </div> - <modal title={__.delete} - ref="deleteConfirm"> - {parent.__.deleteMessage} - </modal> - <script type="es6"> let session = require("../../js/Session"); this.installBundle(session, "voterList_member"); @@ -54,10 +49,12 @@ this.delete = () => { - this.refs.deleteConfirm.open().then(() => { - voterListService.deleteMember(this.opts.member); - this.parent.update(); - }, () => {}); + this.confirm(this.__.deleteMessage).then((result) => { + if (result) { + voterListService.deleteMember(this.opts.member); + this.parent.update(); + } + }); }; this.submit = () => { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm