From 8da5934b5f664e6648656809562970d1650a6e5d Mon Sep 17 00:00:00 2001 From: keryan Date: Fri, 9 Dec 2022 19:17:16 +0100 Subject: [PATCH 1/7] feat: ajout bouton de suppression de prenom --- src/pattern/name/example/data/js/add-firstname.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pattern/name/example/data/js/add-firstname.js b/src/pattern/name/example/data/js/add-firstname.js index 3778a6249..26d576df3 100644 --- a/src/pattern/name/example/data/js/add-firstname.js +++ b/src/pattern/name/example/data/js/add-firstname.js @@ -12,6 +12,19 @@ const firstname = getFieldsetElement(document.getElementById('<%= id %>')); const reference = getFieldsetElement(this); const copy = firstname.cloneNode(true); +copy.classList.add('<%= prefix %>-fieldset__element--inline', '<%= prefix %>-fieldset__element--inline-grow'); copy.innerHTML = copy.innerHTML.replace(/<%= id %>/g, `<%= id %>-added-${this.firstnamesCount}`).replace('name="given-name"', `name="additional-name-${this.firstnamesCount}"`).replace('autocomplete="given-name"', 'autocomplete="additional-name"'); + +const removeField = reference.cloneNode(true); +removeField.classList.add('<%= prefix %>-fieldset__element--inline'); + +const removeButton = removeField.getElementsByTagName('button')[0]; +const labelRemoveButton = 'Supprimer le prénom'; +removeButton.classList = '<%= prefix %>-btn <%= prefix %>-btn--tertiary <%= prefix %>-icon-delete-line'; +removeButton.innerHTML = labelRemoveButton; +removeButton.title = labelRemoveButton; +removeButton.setAttribute('onclick', `document.getElementById('<%= id %>-added-${this.firstnamesCount}').closest('.<%= prefix %>-fieldset__element').remove(); this.closest('.<%= prefix %>-fieldset__element').remove()`); + const container = reference.parentNode; -container.insertBefore(copy, reference); +container.insertBefore(removeField, reference); +container.insertBefore(copy, removeField); From 3ee47fa5e08c948dabc432cf55de5c5175166720 Mon Sep 17 00:00:00 2001 From: keryan Date: Tue, 13 Dec 2022 18:20:27 +0100 Subject: [PATCH 2/7] fix(name): i18n bouton supprimer --- src/pattern/name/example/data/js/add-firstname.js | 2 +- src/pattern/name/i18n/fr.yml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pattern/name/example/data/js/add-firstname.js b/src/pattern/name/example/data/js/add-firstname.js index 26d576df3..f2345a8c4 100644 --- a/src/pattern/name/example/data/js/add-firstname.js +++ b/src/pattern/name/example/data/js/add-firstname.js @@ -19,7 +19,7 @@ const removeField = reference.cloneNode(true); removeField.classList.add('<%= prefix %>-fieldset__element--inline'); const removeButton = removeField.getElementsByTagName('button')[0]; -const labelRemoveButton = 'Supprimer le prénom'; +const labelRemoveButton = '<%= getText("label.remove-firstname", "name") %>'; removeButton.classList = '<%= prefix %>-btn <%= prefix %>-btn--tertiary <%= prefix %>-icon-delete-line'; removeButton.innerHTML = labelRemoveButton; removeButton.title = labelRemoveButton; diff --git a/src/pattern/name/i18n/fr.yml b/src/pattern/name/i18n/fr.yml index 931c467f1..740077983 100644 --- a/src/pattern/name/i18n/fr.yml +++ b/src/pattern/name/i18n/fr.yml @@ -7,6 +7,7 @@ hint: birth: Nom de famille non rectifié après décision du tribunal label: add-firstname: Ajouter un prénom + remove-firstname: Supprimer le prénom country: Pays family: Nom given: Prénom From c17d1ca9b7246f34dd7df1e9f773bba14781e5ff Mon Sep 17 00:00:00 2001 From: keryan Date: Wed, 14 Dec 2022 18:39:31 +0100 Subject: [PATCH 3/7] feat(input, name): input-action --- .../input/input-base/example/index.ejs | 2 + .../example/sample/input-action.ejs | 6 +++ src/component/input/input-base/i18n/fr.yml | 3 +- .../input/input-base/style/_module.scss | 44 +++++++++---------- .../input/input-base/style/_scheme.scss | 2 +- .../input/input-base/template/ejs/input.ejs | 36 +++++++-------- .../name/example/data/js/add-firstname.js | 16 +++---- 7 files changed, 57 insertions(+), 52 deletions(-) create mode 100755 src/component/input/input-base/example/sample/input-action.ejs diff --git a/src/component/input/input-base/example/index.ejs b/src/component/input/input-base/example/index.ejs index cce235595..033b0b25f 100755 --- a/src/component/input/input-base/example/index.ejs +++ b/src/component/input/input-base/example/index.ejs @@ -19,6 +19,8 @@ <%- sample(getText('sample.button', 'input-base'), './sample/input-button.ejs', {input: { id:'text-input-button' }}, true); %> +<%- sample(getText('sample.action', 'input-base'), './sample/input-action.ejs', {input: { id:'text-input-action' }}, true); %> + <%- sample(getText('sample.placeholder', 'input-base'), './sample/input-text.ejs', {input: { id:'text-input-placeholder', placeholder:'placeholder'}}, true); %> <%- sample(getText('sample.value', 'input-base'), './sample/input-text.ejs', {input: { id:'text-input-value', attributes: {value:'value'}}}, true); %> diff --git a/src/component/input/input-base/example/sample/input-action.ejs b/src/component/input/input-base/example/sample/input-action.ejs new file mode 100755 index 000000000..fa6e212aa --- /dev/null +++ b/src/component/input/input-base/example/sample/input-action.ejs @@ -0,0 +1,6 @@ +<% +const input = locals.input || {} +input.action = true; +input.button = input.button || {label:'Supprimer le champs', kind: 2, icon: 'delete-line', type: 'button'}; +%> +<%- include('input-text', { input: input }); %> diff --git a/src/component/input/input-base/i18n/fr.yml b/src/component/input/input-base/i18n/fr.yml index 3d8acddb7..f8f51066b 100644 --- a/src/component/input/input-base/i18n/fr.yml +++ b/src/component/input/input-base/i18n/fr.yml @@ -9,7 +9,8 @@ sample: date: Champs de type "date" textarea: Champs de type "textarea" password: Champs de type "password" - button: Combo champs + bouton + button: Combo champs + bouton d'envoi + action: Combo champs + bouton d'action placeholder: Champs avec placeholder value: Champs avec valeur initiale disabled: Champs désactivé diff --git a/src/component/input/input-base/style/_module.scss b/src/component/input/input-base/style/_module.scss index f2772ce1a..63a8d0294 100644 --- a/src/component/input/input-base/style/_module.scss +++ b/src/component/input/input-base/style/_module.scss @@ -12,9 +12,10 @@ @include text-style(md); @include padding(2v 4v); - /** - * Style du placeholder - */ + &:not(textarea) { + max-height: 2.5rem; + } + @include placeholder { opacity: 1; font-style: italic; @@ -24,9 +25,6 @@ cursor: pointer; } - /** - * On applique une hauteur maximale si l'élément n'est pas un textarea - */ &:not(textarea) { max-height: 2.5rem; } @@ -50,14 +48,15 @@ } } -/** - * Ajout d'un wrapper quand on a besoin de mettre une icône - */ #{ns(input-wrap)} { @include relative; display: block; @include has-icon { + #{ns(input)} { + @include padding-right(10v); + } + @include icon-size(sm, before) { @include absolute(3v, 3v, 3v); @include margin(auto); @@ -65,31 +64,30 @@ } } - &--addon { + &--addon, + &--action { @include display-flex; @include size(100%); } - #{ns(input)} { - @include padding-right(10v); - } - - > *:first-child:not(:last-child) { - &#{ns(input)} { - @include padding-right(4v); - } - - @include respond-from(md) { + &--addon { + > *:first-child:not(:last-child) { border-radius: spacing.space(1v 0 0 0); } - } - > *:last-child:not(:first-child) { - @include respond-from(md) { + > *:last-child:not(:first-child) { border-radius: spacing.space(0 1v 0 0); } } + &--action #{ns(btn)} { + @include margin-left(4v); + } + + &--action #{ns(btn)} { + @include margin-left(4v); + } + + #{ns(hint-text)} { @include margin-top(4v); } diff --git a/src/component/input/input-base/style/_scheme.scss b/src/component/input/input-base/style/_scheme.scss index 2fb3d1374..f2b8ee88b 100644 --- a/src/component/input/input-base/style/_scheme.scss +++ b/src/component/input/input-base/style/_scheme.scss @@ -50,7 +50,7 @@ } } - #{ns(input-wrap)} { + #{ns(input-wrap--addon)} { > *:not(:last-child) { &#{ns(input)}:not(#{ns(input--valid)}):not(#{ns(input--error)}) { @include color.box-shadow(action-high blue-france, (legacy:$legacy), bottom-2-in); diff --git a/src/component/input/input-base/template/ejs/input.ejs b/src/component/input/input-base/template/ejs/input.ejs index af80002f6..5943e2e4a 100644 --- a/src/component/input/input-base/template/ejs/input.ejs +++ b/src/component/input/input-base/template/ejs/input.ejs @@ -96,34 +96,32 @@ if (input.value) attributes.value = input.value; if (input.autocomplete) attributes.autocomplete = input.autocomplete; attributes.id = input.id; if (input.spellcheck === true || input.spellcheck === false) attributes.spellcheck = `${input.spellcheck}`; + +const inputWrapClass = []; +if (input.button || input.icon) inputWrapClass.push(`${prefix}-input-wrap`); +if (input.icon) inputWrapClass.push(`${prefix}-icon-${input.icon === true ? '' : input.icon}`); +if (input.addon) inputWrapClass.push(`${prefix}-input-wrap--addon`); +if (input.action) inputWrapClass.push(`${prefix}-input-wrap--action`); %> <%- include('../../../../form/template/ejs/label', { label: label }); %> -<% if (input.icon) { %> - <% let icon = prefix + '-icon-' + input.icon; %> - <% if (input.icon === true) icon = ''; - %> -
+<% if (input.icon || input.button) { %> +
> <% } %> -<% if (input.addon && input.button) { %> -
-<% } %> + <% if (input.type === 'textarea') { %> + + <% } + else {%> + <%- includeAttrs(attributes); %> type="<%= inputType %>"> + <% } %> -<% if (input.type === 'textarea') { %> - -<% } -else {%> - <%- includeAttrs(attributes); %> type="<%= inputType %>"> -<% } %> - -<% if (input.addon && input.button) { %> + <% if (input.button) { %> <%- include('../../../../button/template/ejs/button', { button:input.button }); %> -
-<% } %> + <% } %> -<% if (input.icon) { %> +<% if (input.icon || input.button) { %>
<% } %> diff --git a/src/pattern/name/example/data/js/add-firstname.js b/src/pattern/name/example/data/js/add-firstname.js index f2345a8c4..d6be22703 100644 --- a/src/pattern/name/example/data/js/add-firstname.js +++ b/src/pattern/name/example/data/js/add-firstname.js @@ -8,23 +8,23 @@ const getFieldsetElement = (node) => { }; const firstname = getFieldsetElement(document.getElementById('<%= id %>')); - const reference = getFieldsetElement(this); const copy = firstname.cloneNode(true); -copy.classList.add('<%= prefix %>-fieldset__element--inline', '<%= prefix %>-fieldset__element--inline-grow'); copy.innerHTML = copy.innerHTML.replace(/<%= id %>/g, `<%= id %>-added-${this.firstnamesCount}`).replace('name="given-name"', `name="additional-name-${this.firstnamesCount}"`).replace('autocomplete="given-name"', 'autocomplete="additional-name"'); -const removeField = reference.cloneNode(true); -removeField.classList.add('<%= prefix %>-fieldset__element--inline'); +const wrapper = document.createElement('div'); +wrapper.classList = '<%= prefix %>-input-wrap <%= prefix %>-input-wrap--action'; -const removeButton = removeField.getElementsByTagName('button')[0]; +const removeButton = document.createElement('button'); const labelRemoveButton = '<%= getText("label.remove-firstname", "name") %>'; removeButton.classList = '<%= prefix %>-btn <%= prefix %>-btn--tertiary <%= prefix %>-icon-delete-line'; removeButton.innerHTML = labelRemoveButton; removeButton.title = labelRemoveButton; removeButton.setAttribute('onclick', `document.getElementById('<%= id %>-added-${this.firstnamesCount}').closest('.<%= prefix %>-fieldset__element').remove(); this.closest('.<%= prefix %>-fieldset__element').remove()`); -const container = reference.parentNode; -container.insertBefore(removeField, reference); -container.insertBefore(copy, removeField); +wrapper.appendChild(copy.getElementsByTagName('input')[0]); +wrapper.appendChild(removeButton); +copy.getElementsByTagName('label')[0].after(wrapper); +reference.parentNode.insertBefore(copy, reference); +document.getElementById(`<%= id %>-added-${this.firstnamesCount}`).focus(); From d2b926d908608b8dcf400e49cb60dc931523aa21 Mon Sep 17 00:00:00 2001 From: keryan Date: Wed, 14 Dec 2022 18:40:07 +0100 Subject: [PATCH 4/7] fix(follow): fix button & spacing --- src/component/follow/style/_module.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/component/follow/style/_module.scss b/src/component/follow/style/_module.scss index 88b2398c5..f52f80ef7 100644 --- a/src/component/follow/style/_module.scss +++ b/src/component/follow/style/_module.scss @@ -13,6 +13,11 @@ &__newsletter { #{ns-group(input)} { + @include margin-bottom(4v); + @include margin-bottom(2v, sm); + } + + #{ns(hint-text)} { @include margin-bottom(0); } @@ -28,10 +33,14 @@ #{ns(input)} { @include margin-bottom(4v); @include margin-top(0); + border-radius: #{spacing.space(1v)} #{spacing.space(1v)} 0 0; } #{ns(btn)} { justify-content: center; + @include width(100%); + @include width(auto, sm); + border-radius: 0; } @include respond-from(sm) { From 74a6e2b10f59e8caedbf8537245324f40848181c Mon Sep 17 00:00:00 2001 From: lab9 Date: Mon, 22 May 2023 12:25:44 +0200 Subject: [PATCH 5/7] feat(input, name): input-action --- src/component/input/input-base/style/_module.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/component/input/input-base/style/_module.scss b/src/component/input/input-base/style/_module.scss index 63a8d0294..5f04a8672 100644 --- a/src/component/input/input-base/style/_module.scss +++ b/src/component/input/input-base/style/_module.scss @@ -25,10 +25,6 @@ cursor: pointer; } - &:not(textarea) { - max-height: 2.5rem; - } - &[type=date] { min-height: 2.5rem; From 5541bb2eb57013abdb4c3d0bfb9a57057e3ada46 Mon Sep 17 00:00:00 2001 From: keryan Date: Wed, 14 Jun 2023 16:10:56 +0200 Subject: [PATCH 6/7] fix(name): function remove-firstname --- src/pattern/name/example/data/js/add-firstname.js | 9 +++++++-- src/pattern/name/example/data/js/remove-firstname.js | 3 +++ 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 src/pattern/name/example/data/js/remove-firstname.js diff --git a/src/pattern/name/example/data/js/add-firstname.js b/src/pattern/name/example/data/js/add-firstname.js index d6be22703..d82d6dafb 100644 --- a/src/pattern/name/example/data/js/add-firstname.js +++ b/src/pattern/name/example/data/js/add-firstname.js @@ -11,7 +11,11 @@ const firstname = getFieldsetElement(document.getElementById('<%= id %>')); const reference = getFieldsetElement(this); const copy = firstname.cloneNode(true); -copy.innerHTML = copy.innerHTML.replace(/<%= id %>/g, `<%= id %>-added-${this.firstnamesCount}`).replace('name="given-name"', `name="additional-name-${this.firstnamesCount}"`).replace('autocomplete="given-name"', 'autocomplete="additional-name"'); +let html = copy.innerHTML; +html = html.replace(/<%= id %>/g, `<%= id %>-added-${this.firstnamesCount}`); +html = html.replace('name="given-name"', `name="additional-name-${this.firstnamesCount}"`); +html = html.replace('autocomplete="given-name"', 'autocomplete="additional-name"'); +copy.innerHTML = html; const wrapper = document.createElement('div'); wrapper.classList = '<%= prefix %>-input-wrap <%= prefix %>-input-wrap--action'; @@ -21,7 +25,8 @@ const labelRemoveButton = '<%= getText("label.remove-firstname", "name") %>'; removeButton.classList = '<%= prefix %>-btn <%= prefix %>-btn--tertiary <%= prefix %>-icon-delete-line'; removeButton.innerHTML = labelRemoveButton; removeButton.title = labelRemoveButton; -removeButton.setAttribute('onclick', `document.getElementById('<%= id %>-added-${this.firstnamesCount}').closest('.<%= prefix %>-fieldset__element').remove(); this.closest('.<%= prefix %>-fieldset__element').remove()`); + +removeButton.setAttribute('onclick', `<%- include('remove-firstname.js') %>`); wrapper.appendChild(copy.getElementsByTagName('input')[0]); wrapper.appendChild(removeButton); diff --git a/src/pattern/name/example/data/js/remove-firstname.js b/src/pattern/name/example/data/js/remove-firstname.js new file mode 100644 index 000000000..b4bf17aa7 --- /dev/null +++ b/src/pattern/name/example/data/js/remove-firstname.js @@ -0,0 +1,3 @@ +const input = document.getElementById('<%= id %>-added-${this.firstnamesCount}'); +input.closest('.<%= prefix %>-fieldset__element').remove(); +this.closest('.<%= prefix %>-fieldset__element').remove(); From 357daa0c077ca60fd4c48a0e68f23421e1dd641d Mon Sep 17 00:00:00 2001 From: keryan Date: Thu, 15 Jun 2023 18:35:05 +0200 Subject: [PATCH 7/7] fix(input-base): i18n label bouton supprimer --- src/component/input/input-base/example/sample/input-action.ejs | 2 +- src/component/input/input-base/i18n/fr.yml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/component/input/input-base/example/sample/input-action.ejs b/src/component/input/input-base/example/sample/input-action.ejs index fa6e212aa..7859d0e01 100755 --- a/src/component/input/input-base/example/sample/input-action.ejs +++ b/src/component/input/input-base/example/sample/input-action.ejs @@ -1,6 +1,6 @@ <% const input = locals.input || {} input.action = true; -input.button = input.button || {label:'Supprimer le champs', kind: 2, icon: 'delete-line', type: 'button'}; +input.button = input.button || {label: getText('remove-field', 'input-base'), kind: 2, icon: 'delete-line', type: 'button'}; %> <%- include('input-text', { input: input }); %> diff --git a/src/component/input/input-base/i18n/fr.yml b/src/component/input/input-base/i18n/fr.yml index f8f51066b..47e1e09e5 100644 --- a/src/component/input/input-base/i18n/fr.yml +++ b/src/component/input/input-base/i18n/fr.yml @@ -18,6 +18,7 @@ sample: icon: Champs avec icône personalisée valid: Champs valide avec texte de succès error: Champs en erreur avec texte d'erreur +remove-field: Supprimer le champ subdir: title: Autres versions deprecated: version dépréciée