branch feature/253-tuiles updated (b9c61f71 -> 386679b2)
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 b9c61f71 ref #253 ToggleButton pour le feedback new 386679b2 ref #253 Modification Radio button de la modale de feedback + correction formulation en anglais 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 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 Summary of changes: 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(-) -- 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 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>.
participants (1)
-
chorem.org scm