From 2aa99b53cfe609ed894726c70804db449db0dfc0 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Tue, 1 Aug 2023 12:07:18 +0200 Subject: [PATCH 1/4] =?UTF-8?q?fix(header):=20utilisateur=20connecte=20mis?= =?UTF-8?q?e=20=C3=A0=20jour=20des=20exemples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/header/example/index.ejs | 4 ++-- src/component/header/example/sample/header.ejs | 18 ++++++++++-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/component/header/example/index.ejs b/src/component/header/example/index.ejs index 2df855463..04ba6b54a 100755 --- a/src/component/header/example/index.ejs +++ b/src/component/header/example/index.ejs @@ -8,14 +8,14 @@ } -<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> - <%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, navigation: 'min' }}, true, './layout'); %> <%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service: true }}, true, './layout'); %> <%- sample('Header sans navigation avec raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, service: true}}, true, './layout'); %> +<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> + <%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout'); %> <%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministère
de l’europe
et des affaires
étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout'); %> diff --git a/src/component/header/example/sample/header.ejs b/src/component/header/example/sample/header.ejs index 45c8fcbde..84557d455 100755 --- a/src/component/header/example/sample/header.ejs +++ b/src/component/header/example/sample/header.ejs @@ -16,7 +16,7 @@ if (header.links !== undefined || header.search) { if (header.translate !== undefined) { tools.translate = { collapseId: header.translate.collapseId || uniqueId('translate'), - button: header.translate.button || {kind: 3}, + button: header.translate.button || {kind: 1}, languages: header.translate.languages || eval(include('../../../translate/example/sample/get-translations'))(6) } } @@ -26,22 +26,24 @@ if (header.links !== undefined || header.search) { tools.links = { buttons: [ { - icon: 'add-circle-line', + icon: 'team-line', url: '#', - label: 'Créer un espace', + label: 'Contact', markup: 'a' }, { - icon: 'lock-line', + icon: 'briefcase-fill', url: '#', - label: 'Se connecter', + label: 'Espace recruteur', markup: 'a' + }, { - icon: 'account-line', + icon: 'account-fill', url: '#', - label: 'S’enregistrer', - markup: 'a' + label: 'Espace particulier', + markup: 'a', + classes: [`${prefix}-btn--tertiary`] } ] }; From dce67a63b0ab6ab414b75b5ae2817b765522e2c8 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Mon, 4 Sep 2023 15:36:25 +0200 Subject: [PATCH 2/4] fix(header): remplace la classe par le type de bouton --- src/component/header/example/sample/header.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/header/example/sample/header.ejs b/src/component/header/example/sample/header.ejs index 84557d455..d9d72cd5e 100755 --- a/src/component/header/example/sample/header.ejs +++ b/src/component/header/example/sample/header.ejs @@ -43,7 +43,7 @@ if (header.links !== undefined || header.search) { url: '#', label: 'Espace particulier', markup: 'a', - classes: [`${prefix}-btn--tertiary`] + kind: 3 } ] }; From 9e4927212d9b498e3a3105545931dcbd391d2da7 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Thu, 3 Aug 2023 16:44:03 +0200 Subject: [PATCH 3/4] feat(header): ajoute des exemples avec un seul raccourcis --- src/component/header/example/index.ejs | 8 +++++-- .../header/example/sample/header.ejs | 18 +++++++++------- src/component/header/style/module/_links.scss | 3 +-- src/component/header/template/ejs/tools.ejs | 21 +++++++++++-------- src/component/translate/style/_module.scss | 4 ---- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/component/header/example/index.ejs b/src/component/header/example/index.ejs index 04ba6b54a..9b152d128 100755 --- a/src/component/header/example/index.ejs +++ b/src/component/header/example/index.ejs @@ -12,11 +12,15 @@ <%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service: true }}, true, './layout'); %> -<%- sample('Header sans navigation avec raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, service: true}}, true, './layout'); %> +<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links: { buttons: [{ icon: 'account-fill', url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--icon-left`, `${prefix}-btn--sm`, `${prefix}-btn--tertiary`]}] }, service: true}}, true, './layout'); %> + +<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, service: true}}, true, './layout'); %> <%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %> -<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout'); %> +<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout'); %> + +<%- sample('Header avec selecteur de langues et raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout'); %> <%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministère
de l’europe
et des affaires
étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout'); %> diff --git a/src/component/header/example/sample/header.ejs b/src/component/header/example/sample/header.ejs index d9d72cd5e..5bd720ffb 100755 --- a/src/component/header/example/sample/header.ejs +++ b/src/component/header/example/sample/header.ejs @@ -13,14 +13,6 @@ if (header.links !== undefined || header.search) { const tools = {}; data.body.tools = tools; - if (header.translate !== undefined) { - tools.translate = { - collapseId: header.translate.collapseId || uniqueId('translate'), - button: header.translate.button || {kind: 1}, - languages: header.translate.languages || eval(include('../../../translate/example/sample/get-translations'))(6) - } - } - if (header.links === true) { hasMenu = true; tools.links = { @@ -53,6 +45,16 @@ if (header.links !== undefined || header.search) { tools.links = header.links; } + if (header.translate !== undefined) { + const translateKind = header.links && tools.links.buttons.length ? 1 : 3; + hasMenu = true; + tools.translate = { + collapseId: header.translate.collapseId || uniqueId('translate'), + button: header.translate.button || {kind: translateKind}, + languages: header.translate.languages || eval(include('../../../translate/example/sample/get-translations'))(6) + } + } + if (header.search) { tools.search = header.search === true ? { diff --git a/src/component/header/style/module/_links.scss b/src/component/header/style/module/_links.scss index bf8bbcd05..1a3629082 100644 --- a/src/component/header/style/module/_links.scss +++ b/src/component/header/style/module/_links.scss @@ -21,14 +21,13 @@ @include respond-from(lg) { @include display-flex(row, null, flex-end); gap: space(2v); - @include margin-bottom(-4v); } #{ns-group(btns)} { @include respond-from(lg) { @include horizontal-btns-group; justify-content: flex-end; - @include margin(0 -1v); + @include margin(0 -1v -4v); & > li { align-items: flex-start; diff --git a/src/component/header/template/ejs/tools.ejs b/src/component/header/template/ejs/tools.ejs index 1699b25dd..6acf58ca6 100644 --- a/src/component/header/template/ejs/tools.ejs +++ b/src/component/header/template/ejs/tools.ejs @@ -15,16 +15,19 @@
<% if (tools.links !== undefined || tools.translate !== undefined) { %>
-
    - <% if (tools.links.buttons) { %> - <% for (let i = 0; i < tools.links.buttons.length; i++) { %> -
  • - <%- include('../../../button/template/ejs/button', {button:tools.links.buttons[i]}); %> -
    • - <% } %> + <% if (tools.links.buttons.length) { %> + <% if (tools.links.buttons.length > 1) { %> +
      + <% for (let i = 0; i < tools.links.buttons.length; i++) { %> +
    • + <%- include('../../../button/template/ejs/button', {button:tools.links.buttons[i]}); %> +
      • + <% } %> +
    + <% } else { %> + <%- include('../../../button/template/ejs/button', {button:tools.links.buttons[0]}); %> <% } %> -
- + <% } %> <% if (tools.translate !== undefined) { %> <%- include('../../../translate/template/ejs/translate.ejs', { translate: tools.translate }); %> <% } %> diff --git a/src/component/translate/style/_module.scss b/src/component/translate/style/_module.scss index 997f1bdc7..4e3d32a4f 100644 --- a/src/component/translate/style/_module.scss +++ b/src/component/translate/style/_module.scss @@ -16,7 +16,6 @@ @include min-height(auto, lg); @include width(100%); @include width(auto, lg); - @include margin-bottom(4v, lg); @include animate.caret(); @include icon(arrow-down-s-line, sm, after) { @@ -47,9 +46,6 @@ &__menu { @include margin(0); @include margin(-1v -4v 0, lg); - @include respond-from(lg) { - @include top(calc(100% - 4v)); - } } #{ns(nav)} { From 435246dc76b8ac128598167203fc53c35a6de8c2 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Thu, 7 Sep 2023 12:10:30 +0200 Subject: [PATCH 4/4] feat(header): ajoute les modifier de bouton account briefcase et team --- src/component/button/style/_module.scss | 3 +++ src/component/button/style/_scheme.scss | 7 +++++-- .../button/style/module/_account.scss | 8 ++++++++ .../button/style/module/_briefcase.scss | 8 ++++++++ src/component/button/style/module/_team.scss | 8 ++++++++ src/component/header/example/index.ejs | 2 +- .../header/example/sample/header.ejs | 14 ++++++-------- src/component/header/style/_scheme.scss | 6 ++++++ src/component/header/style/module/_links.scss | 19 ++++++++++++++++++- 9 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 src/component/button/style/module/_account.scss create mode 100644 src/component/button/style/module/_briefcase.scss create mode 100644 src/component/button/style/module/_team.scss diff --git a/src/component/button/style/_module.scss b/src/component/button/style/_module.scss index aa0abeec7..8b5cca69c 100644 --- a/src/component/button/style/_module.scss +++ b/src/component/button/style/_module.scss @@ -9,3 +9,6 @@ @import 'module/tooltip'; @import 'module/fullscreen'; @import 'module/display'; +@import 'module/account'; +@import 'module/team'; +@import 'module/briefcase'; diff --git a/src/component/button/style/_scheme.scss b/src/component/button/style/_scheme.scss index 8e78934ac..fc077e551 100644 --- a/src/component/button/style/_scheme.scss +++ b/src/component/button/style/_scheme.scss @@ -19,7 +19,8 @@ } // Grey outline variant - &--tertiary { + &--tertiary, + &--account { @include btn-kind-scheme(3, $legacy); } @@ -28,7 +29,9 @@ &--close, &--display, &--fullscreen, - &--tooltip { + &--tooltip, + &--briefcase, + &--team { @include btn-kind-scheme(4, $legacy); } } diff --git a/src/component/button/style/module/_account.scss b/src/component/button/style/module/_account.scss new file mode 100644 index 000000000..15f79b37c --- /dev/null +++ b/src/component/button/style/module/_account.scss @@ -0,0 +1,8 @@ +//// +/// Button Module - Account +/// @group button +//// + +#{ns(btn--account)} { + @include nest-btn(sm, left, account-circle-fill, null, false); +} diff --git a/src/component/button/style/module/_briefcase.scss b/src/component/button/style/module/_briefcase.scss new file mode 100644 index 000000000..4fe7138ef --- /dev/null +++ b/src/component/button/style/module/_briefcase.scss @@ -0,0 +1,8 @@ +//// +/// Button Module - Briefcase +/// @group button +//// + +#{ns(btn--briefcase)} { + @include nest-btn(sm, left, briefcase-fill, null, false); +} diff --git a/src/component/button/style/module/_team.scss b/src/component/button/style/module/_team.scss new file mode 100644 index 000000000..0193b6eab --- /dev/null +++ b/src/component/button/style/module/_team.scss @@ -0,0 +1,8 @@ +//// +/// Button Module - Team +/// @group button +//// + +#{ns(btn--team)} { + @include nest-btn(sm, left, team-line, null, false); +} diff --git a/src/component/header/example/index.ejs b/src/component/header/example/index.ejs index 9b152d128..0e6c278a7 100755 --- a/src/component/header/example/index.ejs +++ b/src/component/header/example/index.ejs @@ -12,7 +12,7 @@ <%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service: true }}, true, './layout'); %> -<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links: { buttons: [{ icon: 'account-fill', url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--icon-left`, `${prefix}-btn--sm`, `${prefix}-btn--tertiary`]}] }, service: true}}, true, './layout'); %> +<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links: { buttons: [{ url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}] }, service: true}}, true, './layout'); %> <%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, service: true}}, true, './layout'); %> diff --git a/src/component/header/example/sample/header.ejs b/src/component/header/example/sample/header.ejs index 5bd720ffb..abec8df62 100755 --- a/src/component/header/example/sample/header.ejs +++ b/src/component/header/example/sample/header.ejs @@ -18,24 +18,23 @@ if (header.links !== undefined || header.search) { tools.links = { buttons: [ { - icon: 'team-line', url: '#', label: 'Contact', - markup: 'a' + markup: 'a', + classes: [`${prefix}-btn--team`] }, { - icon: 'briefcase-fill', url: '#', label: 'Espace recruteur', - markup: 'a' + markup: 'a', + classes: [`${prefix}-btn--briefcase`] }, { - icon: 'account-fill', url: '#', label: 'Espace particulier', markup: 'a', - kind: 3 + classes: [`${prefix}-btn--account`] } ] }; @@ -46,11 +45,10 @@ if (header.links !== undefined || header.search) { } if (header.translate !== undefined) { - const translateKind = header.links && tools.links.buttons.length ? 1 : 3; hasMenu = true; tools.translate = { collapseId: header.translate.collapseId || uniqueId('translate'), - button: header.translate.button || {kind: translateKind}, + button: header.translate.button, languages: header.translate.languages || eval(include('../../../translate/example/sample/get-translations'))(6) } } diff --git a/src/component/header/style/_scheme.scss b/src/component/header/style/_scheme.scss index 35ce98816..b5d5475c8 100644 --- a/src/component/header/style/_scheme.scss +++ b/src/component/header/style/_scheme.scss @@ -44,6 +44,12 @@ #{ns(btn)} { @include btn-kind-scheme(4, $legacy); } + + > #{ns(translate)}:first-child:last-child { + #{ns(btn)} { + @include btn-kind-scheme(3, $legacy); + } + } } &__navbar { diff --git a/src/component/header/style/module/_links.scss b/src/component/header/style/module/_links.scss index 1a3629082..f3b959eab 100644 --- a/src/component/header/style/module/_links.scss +++ b/src/component/header/style/module/_links.scss @@ -8,8 +8,15 @@ &:not(#{ns-group(btns)}--sm):not(#{ns-group(btns)}--lg) { @include class-not-start-with(#{ns(btns-group--icon-, '')}) { #{ns(btn)} { - @include nest-btn(sm, left, null, null, false); justify-content: flex-start; + + @include has-icon { + @include nest-btn(sm, left, null, null, false); + } + + @include has-not-icon { + @include nest-btn(sm, left, null, null, false); + } } } } @@ -23,6 +30,16 @@ gap: space(2v); } + > #{ns(btn)} { + @include has-icon { + @include nest-btn(sm, left, null, null, false); + } + + @include has-not-icon { + @include nest-btn(sm, left, null, null, false); + } + } + #{ns-group(btns)} { @include respond-from(lg) { @include horizontal-btns-group;