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 386679b2e344ed309a8766621ea9f3f2a0c05766 Author: Cécilia Bossard <bossard@codelutin.com> Date: Mon Mar 9 18:22:20 2020 +0100 ref #253 Modification Radio button de la modale de feedback + correction formulation en anglais --- pollen-ui-riot-js/src/main/web/i18n/en.json | 16 +-- pollen-ui-riot-js/src/main/web/i18n/fr.json | 10 +- .../src/main/web/tag/PollenHeader.tag.html | 6 ++ .../web/tag/components/CheckboxReboot.tag.html | 20 ++++ .../main/web/tag/components/PollenInput.tag.html | 1 + .../web/tag/components/PollenRadioButton.tag.html | 107 +++++++++++++++++---- .../main/web/tag/components/ToggleButton.tag.html | 6 +- .../web/tag/popup/FeedbackModalReboot.tag.html | 51 +++------- pollen-ui-riot-js/stories/Components.stories.js | 12 +++ 9 files changed, 157 insertions(+), 72 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 6cea7041..02d32537 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/en.json +++ b/pollen-ui-riot-js/src/main/web/i18n/en.json @@ -625,10 +625,10 @@ "voterList_maxVotersAlert": "The number of voters exceeds the limit of the standard offer ({0} voters). Users can continue to vote but only the first {0} votes are taken into account in the calculation of the result. Read <a href=\"#home\">the offers page</a> to unlock this limit.", "voterList_member_invalidEmail": "invitation mail can't be delivered, thank to check email address.", "modal_cancel": "Cancel", - "modal_ok": "Ok", + "modal_ok": "OK", "confirm_cancel": "Cancel", "confirm_delete": "Delete", - "information_ok": "Ok", + "information_ok": "OK", "report_title": "Report !", "report_add_title": "Report as inappropriate !", "report_add_action": "Report", @@ -648,16 +648,16 @@ "report_toEnable": "Enable", "report_ignores": "Ignores", "feedback_title": "Send a bug, an observation", - "feedback_detail": "If you see a bug or if you want to make an observation, fill in this form and send us your opinon. Do not hesitate to abuse it !", + "feedback_detail": "If you see a bug or if you want to make an observation, fill in this form and send us your opinon. All suggestions are openly welcomed!", "feedback_category": "Category", - "feedback_category_bug": "Bug", - "feedback_category_ergonomics": "Ergonomics", - "feedback_category_other": "Others", - "feedback_description": "Please detail below your bug report or your observation", + "header_category_bug": "Bug", + "header_category_ergonomics": "Ergonomics", + "header_category_other": "Others", + "feedback_description": "Please detail your bug report or observation below", "feedback_descriptionNotBlank": "Observation must be not blank", "feedback_uploadScreenShot": "Screenshot", "feedback_create_success": "Thank you for helping us improve Pollen.", - "feedback_email": "Enter your email if you want to be kept informed about your feedback", + "feedback_email": "Optional email for follow up", "feedback_emailPlaceHolder": "Enter your email", "loginProviders_title": "Login provider", "loginProviders_name": "Name", 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 f416a71e..c62c0fb3 100644 --- a/pollen-ui-riot-js/src/main/web/i18n/fr.json +++ b/pollen-ui-riot-js/src/main/web/i18n/fr.json @@ -626,10 +626,10 @@ "voterList_maxVotersAlert_title": "Limitation du Nombre de votants", "voterList_maxVotersAlert": "Le nombre de participants dépasse la limite de l'offre standard ({0} votants). Tout les participants pourront voter mais seul les {0} premiers votes seront pris en compte dans le calcul du résultat. Consulter <a href=\"#home\">la page des nos offres</a> pour déverrouiller cette limite.", "modal_cancel": "Annuler", - "modal_ok": "Ok", + "modal_ok": "OK", "confirm_cancel": "Annuler", "confirm_delete": "Supprimer", - "information_ok": "Ok", + "information_ok": "OK", "report_title": "Signaler !", "report_add_title": "Signaler comme inapproprié !", "report_add_action": "Signaler", @@ -651,9 +651,9 @@ "feedback_title": "Envoyer un bug, une remarque", "feedback_detail": "Si vous voyez un bug ou si vous avez simplement une remarque à faire, remplissez ce formulaire pour nous faire parvenir votre avis. N'hésitez pas à en abuser !", "feedback_category": "Catégorie", - "feedback_category_bug": "Bug", - "feedback_category_ergonomics": "Ergonomie", - "feedback_category_other": "Autres", + "header_category_bug": "Bug", + "header_category_ergonomics": "Ergonomie", + "header_category_other": "Autres", "feedback_description": "Merci de détailler ci-dessous votre rapport de bug ou votre remarque", "feedback_descriptionNotBlank": "La description ne doit pas être blanc", "feedback_uploadScreenShot": "Copie d'écran", 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 05afa2c8..90e9d3e4 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 @@ -57,6 +57,12 @@ import "./components/MenuItem.tag.html"; this.installBundle(this.session, "header"); + this.feedback_categories = [ + {label: this._t.category_bug, value: "BUG"}, + {label: this._t.category_ergonomics, value: "ERGONOMICS"}, + {label: this._t.category_other, value: "OTHERS"}, + ]; + this.openFeedback = () => { this.refs.feedbackModal.open().then(() => { this.update(); 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 ee19dca3..5eba1f1b 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 @@ -1,3 +1,23 @@ +<!-- + #%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% + --> <CheckboxReboot> <label class="container"> <span if="{opts.label}" class="label">{opts.label}</span> 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 dfa5c451..47e8cbe4 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 @@ -52,6 +52,7 @@ display: flex; padding-top: 1px; height: 38px; + align-items: baseline; } .input { diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenRadioButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenRadioButton.tag.html index ca1fbf82..0857bf96 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenRadioButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenRadioButton.tag.html @@ -19,13 +19,22 @@ #L% --> <PollenRadioButton> - <div class="input"> - <legend class="input-label" for="{this.opts.ref}">{this.opts.label}</legend> - <div class="input-field"> - <yield/> + <label class="container"> + <span if="{opts.label}" class="label">{opts.label}</span> + + <div class="options"> + <label each="{item in this.opts.items}" class="item"> + <input type="radio" + name="{this.opts.name}" + ref="{this.opts.ref}" + required="{this.opts.required}" + value="{item.value}"> + <span class="radio"></span> + <span class="item_label">{item.label}</span> + </label> </div> - </div> + </label> <script type="es6"> @@ -33,16 +42,8 @@ <style> - pollenradiobutton { - width: 100%; - } - - .input-field { - display: flex; - width: 100%; - } - - .input { + /* Customize the label (the container) */ + .container { font-style: italic; font-weight: normal; font-size: 12px; @@ -53,11 +54,11 @@ width: 100%; display: flex; - flex-direction: column; - + flex-direction: row; + color: var(--Black-Pearl); } - .input-label { + .label { font-weight: bold; font-size: 14px; line-height: 19px; @@ -66,6 +67,76 @@ color: var(--Black-Pearl); } + .options { + display: flex; + flex-direction: row; + padding-left: 30px; + } + + .item { + padding-bottom: 10px; + padding-left: 30px; + } + + .item_label { + padding-left: 30px; + } + + /* Hide the browser's default radiobutton */ + .container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + /* Create a custom radiobutton */ + .radio { + position: absolute; + height: 18px; + width: 18px; + + background-color: var(--White); + border: 1px solid var(--Elm); + box-sizing: border-box; + border-radius: 15px; + } + + /* When the radiobutton is checked, add a blue background */ + .container input:checked ~ .radio { + background: var(--Elm); + + /* Elm */ + border: 1px solid var(--Elm); + box-sizing: border-box; + border-radius: 15px; + } + + /* Create the checkmark/indicator (hidden when not checked) */ + .radio:after { + content: ""; + position: absolute; + display: none; + } + + /* Show the checkmark when checked */ + .container input:checked ~ .radio:after { + display: block; + } + + /* Style the checkmark/indicator */ + .container .radio: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> </PollenRadioButton> diff --git a/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html index 53bd6128..c9a63f7f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/ToggleButton.tag.html @@ -86,7 +86,7 @@ /* Customize the label (the container) */ .container { - display: block; + display: flex; position: relative; margin-bottom: 12px; cursor: pointer; @@ -99,9 +99,11 @@ .label { font-weight: bold; font-size: 14px; - line-height: 19px; + line-height: 30px; padding-bottom: 10px; color: var(--Black-Pearl); + padding-right: 10px; + font-style: italic; } /* Hide the browser's default checkbox */ diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html index bf28d071..ea35502d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/FeedbackModalReboot.tag.html @@ -20,6 +20,7 @@ --> import "./Modal.tag.html"; import "../components/PollenInput.tag.html"; +import "../components/PollenInput.tag.html"; import "../components/PollenTextArea.tag.html"; import "../components/PollenRadioButton.tag.html"; import "../components/ToggleButton.tag.html"; @@ -30,29 +31,11 @@ import "../components/ToggleButton.tag.html"; <div class="modal-form"> <span class="modal-description">{parent._t.detail}</span> - <PollenRadioButton label="{parent._t.category}" ref="categories"> - <label class="c-field c-field--choice"> - <input type="radio" - name="category" - ref="category" - required - value="BUG"> - {parent.parent._t.category_bug} - </label> - <label class="c-field c-field--choice"> - <input type="radio" - name="category" - ref="category" - value="ERGONOMICS"> - {parent.parent._t.category_ergonomics} - </label> - <label class="c-field c-field--choice"> - <input type="radio" - name="category" - ref="category" - value="OTHER"> - {parent.parent._t.category_other} - </label> + <PollenRadioButton label="{parent._t.category}" + ref="categories" + name="categories" + items="{parent.parent.feedback_categories}" + required> </PollenRadioButton> <PollenInput label="{parent._t.email}" @@ -73,19 +56,10 @@ import "../components/ToggleButton.tag.html"; title={parent._t.descriptionNotBlank} required/> - <ToggleButton label="{parent._t.uploadScreenShot}" - name="uploadScreenShot" - ref="uploadScreenShot" - /> - <!-- <label class="c-toggle c-toggle--info screenshot"> - {parent._t.uploadScreenShot} - <input type="checkbox" - name="uploadScreenShot" - ref="uploadScreenShot"> - <div class="c-toggle__track"> - <div class="c-toggle__handle"></div> - </div> - </label>--> + <ToggleButton label="{parent._t.uploadScreenShot}" + name="uploadScreenShot" + ref="uploadScreenShot" + /> </div> </ModalReboot> @@ -101,8 +75,7 @@ import "../components/ToggleButton.tag.html"; this.userEmailAddresses = []; this.open = () => { - - this.refs.modal.refs.categories.refs.category.forEach(input => {input.checked = false;}); + this.refs.modal.refs.categories.refs.categories.forEach(input => {input.checked = false;}); this.refs.modal.refs.description.refs.description.value = ""; this.refs.modal.refs.uploadScreenShot.checked = true; this.refs.modal.refs.email.refs.email.value = this.session.getUser() && this.session.getUser().defaultEmailAddress.emailAddress; @@ -163,7 +136,7 @@ import "../components/ToggleButton.tag.html"; return promiseScreenshot.then(screenshotId => { let feedback = { description: this.refs.modal.refs.description.refs.description.value, - category: this.refs.modal.refs.categories.refs.category.find(radio => radio.checked).value, + category: this.refs.modal.refs.categories.refs.categories.find(radio => radio.checked).value, userEmail: this.refs.modal.refs.email.refs.email.value, browser: this.getBrowserNameAndVersion(), operatingSystem: this.getOperatingSystemNameAndVersion(), diff --git a/pollen-ui-riot-js/stories/Components.stories.js b/pollen-ui-riot-js/stories/Components.stories.js index aa724a03..73c224fc 100644 --- a/pollen-ui-riot-js/stories/Components.stories.js +++ b/pollen-ui-riot-js/stories/Components.stories.js @@ -21,6 +21,7 @@ import "../src/main/web/tag/components/PollenButton.tag.html"; import "../src/main/web/tag/components/SearchReboot.tag.html"; import "../src/main/web/tag/components/IconButton.tag.html"; import "../src/main/web/tag/components/ToggleButton.tag.html"; +import "../src/main/web/tag/components/PollenRadioButton.tag.html"; storiesOf("Components") .addDecorator(withKnobs) @@ -74,4 +75,15 @@ storiesOf("Components") return {tagName: "iconbutton", opts: {icon, active}}; }).add("Toggle button", () => { return {tagName: "togglebutton", opts: {}}; + }).add("Radio button", () => { + const label = text("Label", "Type"); + const name = text("Name", "type"); + + const values = array("values",[ + {label: "Bug", value: "BUG"}, + {label: "Ergonomics", value: "ERGONOMICS"}, + {label: "Others", value: "OTHERS"}, + ]); + + return {tagName: "pollenradiobutton", opts: {label, name, values}}; }); -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.