Use `SearchComponent` on bouquets & données page #584

at-github · 2024-11-15T12:57:00Z

netlify · 2024-11-15T12:58:02Z

✅ Deploy Preview for ecospheres ready!

Name	Link
🔨 Latest commit	`59df6b9`
🔍 Latest deploy log	https://app.netlify.com/sites/ecospheres/deploys/67489f5d3b5dc7000716afd5
😎 Deploy Preview	https://deploy-preview-584--ecospheres.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-11-15T12:59:05Z

✅ Deploy Preview for meteo-france ready!

Name	Link
🔨 Latest commit	`59df6b9`
🔍 Latest deploy log	https://app.netlify.com/sites/meteo-france/deploys/67489f5da038fc000818fb3f
😎 Deploy Preview	https://deploy-preview-584--meteo-france.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

streino · 2024-11-15T13:05:45Z

@at-github Le contenu de PR a l'air beaucoup plus conséquent que sa description. Tu es sûr que c'est bon ?

abulte · 2024-11-18T07:43:30Z

J'ai l'impression que la base branch devrait être celle de la home.

at-github · 2024-11-18T08:11:30Z

@at-github Le contenu de PR a l'air beaucoup plus conséquent que sa description. Tu es sûr que c'est bon ?

Elle comprend toute la branche de la home, je mets en draft

abulte · 2024-11-18T08:23:43Z

@at-github tu peux juste switcher la base branch de la PR, non ?

at-github · 2024-11-18T10:07:03Z

@at-github tu peux juste switcher la base branch de la PR, non ?

J'ai rebase sur main après merge de la home

src/views/datasets/DatasetsListView.vue

src/views/bouquets/BouquetsListView.vue

src/components/SearchComponent.vue

abulte · 2024-11-19T08:31:20Z

Problème de focus natif navigateur (Safari et Chrome)

abulte · 2024-11-19T08:35:18Z

Comportement quand on appuie sur Entrée dans le champ de recherche :

Avant

On vidait le champ en lançant la recherche en appuyant sur Entrée dans le header (relativement satisfaisant car on navigue potentiellement vers une nouvelle page et on n'a pas envie de gérer la synchro entre le header et les autres champs de recherche)
Dans les autres champs de recherche, Entrée n'avait pas d'effet

Maintenant

Sur Ecosphères, on vide le champ à l'appui sur Entrée pour tous les champs : perturbant quand on est pas dans le header
Sur Météo, on vide tous les champs sauf le header 🤔

=> revenir au comportement existant me parait le mieux, sauf si meilleure idée.

at-github · 2024-11-20T14:11:26Z

Problème de focus natif navigateur (Safari et Chrome)

Je n'arrive pas à reproduire sur chrome (linux), j'espère qu'il ne me faut pas un mac quand même

abulte · 2024-11-20T14:20:37Z

Problème de focus natif navigateur (Safari et Chrome)

Je n'arrive pas à reproduire sur chrome (linux), j'espère qu'il ne me faut pas un mac quand même

Ca suit l'input

narduin · 2024-11-20T16:09:57Z

Problème de focus natif navigateur (Safari et Chrome)

Je n'arrive pas à reproduire sur chrome (linux), j'espère qu'il ne me faut pas un mac quand même

Ca suit l'input

Ça vient de DsfrSearchBar qui met le focus sur l'input comme prévu.
Sauf qu'avec le comportement actuel, le bouton ne sert à rien. D'où son positionnement anormal à gauche.

Pour harmoniser le focus:

.fr-search-bar:focus-within {
  outline: 2px solid #0a76f6;
  outline-offset: -2px;
}

.fr-search-bar input:focus {
  outline: none;
}

Il y a un autre problème: avec DsfrSearchBar, impossible de se passer du bouton ou de le déplacer dans le DOM. Ainsi, quand on navigue au clavier, on a un ordre de tabulation incohérent.

Si on garde le comportement actuel (recherche à la volée sans attendre de submit), il ne faut pas utiliser DsfrSearchBar mais un DsfrInput classique.

at-github · 2024-11-21T09:44:09Z

Problème de focus natif navigateur (Safari et Chrome)

Je n'arrive pas à reproduire sur chrome (linux), j'espère qu'il ne me faut pas un mac quand même

Ca suit l'input

Ça vient de DsfrSearchBar qui met le focus sur l'input comme prévu. Sauf qu'avec le comportement actuel, le bouton ne sert à rien. D'où son positionnement anormal à gauche.

Pour harmoniser le focus:
.fr-search-bar:focus-within {
  outline: 2px solid #0a76f6;
  outline-offset: -2px;
}

.fr-search-bar input:focus {
  outline: none;
}
Il y a un autre problème: avec DsfrSearchBar, impossible de se passer du bouton ou de le déplacer dans le DOM. Ainsi, quand on navigue au clavier, on a un ordre de tabulation incohérent.

Si on garde le comportement actuel (recherche à la volée sans attendre de submit), il ne faut pas utiliser DsfrSearchBar mais un DsfrInput classique.

Petite galère avec DsfrInput, je n'arrive pas à changer son style pour l'instant (mes sélecteurs n'ont aucun effet). Y compris avec :deep(.fr-input) ou même :deep(input) (juste pour l'investigation). Un retour d'expérience ?

narduin · 2024-11-21T09:33:11Z

src/views/bouquets/BouquetsListView.vue

@@ -149,11 +149,12 @@ watch(
      </div>
    </div>
    <div class="fr-col-md-12 fr-mb-2w">
-      <DsfrSearchBar
+      <SearchComponent


Comme commenté, pas certain que la DsfrSearchBar soit adaptée ici.

Désolé @narduin je suis peut être à côté des mes pompes. Mais j'ai remplacé justement DsfrSearchBar par un autre composant. Est-ce que j’interprète mal ton retour ?

narduin · 2024-11-21T09:33:23Z

src/views/datasets/DatasetsListView.vue

@@ -254,11 +254,12 @@ onMounted(() => {
    </p>

    <div class="fr-col-md-12 fr-mb-2w">
-      <DsfrSearchBar
+      <SearchComponent


idem: pas certain que la DsfrSearchBar soit adaptée ici.

narduin · 2024-11-21T12:18:53Z

Petite galère avec DsfrInput, je n'arrive pas à changer son style pour l'instant (mes sélecteurs n'ont aucun effet). Y compris avec :deep(.fr-input) ou même :deep(input) (juste pour l'investigation). Un retour d'expérience ?

Tu peux ajouter une surcharge directement dans le main.css en rajoutant une classe devant pour 'scoper' la surcharge uniquement sur les pages concernées.

Par exemple:

:where(.dataset-list-page, .bouquet-list-page) .fr-search-bar:focus-within {
  outline: 2px solid #0a76f6;
  outline-offset: -2px;
}

:where(.dataset-list-page, .bouquet-list-page) .fr-search-bar input:focus {
  outline: none;
}

at-github · 2024-11-21T14:01:34Z

Petite galère avec DsfrInput, je n'arrive pas à changer son style pour l'instant (mes sélecteurs n'ont aucun effet). Y compris avec :deep(.fr-input) ou même :deep(input) (juste pour l'investigation). Un retour d'expérience ?

Tu peux ajouter une surcharge directement dans le main.css en rajoutant une classe devant pour 'scoper' la surcharge uniquement sur les pages concernées.

Par exemple:
:where(.dataset-list-page, .bouquet-list-page) .fr-search-bar:focus-within {
  outline: 2px solid #0a76f6;
  outline-offset: -2px;
}

:where(.dataset-list-page, .bouquet-list-page) .fr-search-bar input:focus {
  outline: none;
}

Idem, ça n'a pas l'air d'être pris en compte. Je cherche déjà à changer la couleur de bordure qui est noire (quasiment) par défaut. Et mes selecteurs font défaut…

update relevant components

abulte

J'ai encore la régression sur météo : le champ input dans le header ne se vide pas après la recherche.

Also le focus est encore un peu étrange, mais nitpick, ça passe.

at-github requested review from abulte and narduin November 15, 2024 12:57

at-github marked this pull request as draft November 18, 2024 08:12

at-github force-pushed the feat/search-component-replace branch from ae67067 to 118493a Compare November 18, 2024 09:28

at-github marked this pull request as ready for review November 18, 2024 10:07

abulte reviewed Nov 19, 2024

View reviewed changes

src/views/datasets/DatasetsListView.vue Outdated Show resolved Hide resolved

src/views/bouquets/BouquetsListView.vue Outdated Show resolved Hide resolved

src/components/SearchComponent.vue Outdated Show resolved Hide resolved

src/components/SearchComponent.vue Outdated Show resolved Hide resolved

at-github added 3 commits November 19, 2024 10:10

Adapt component to simple search too

7cfb99a

Remove unnecessary duplicated ids

424432b

Remove css tests

a544d4e

at-github force-pushed the feat/search-component-replace branch from adbcf30 to a544d4e Compare November 19, 2024 09:10

Tarik Amar added 2 commits November 19, 2024 10:19

Add forgotten props

8f96baf

Reviews

798a75b

Fix - Keep query in url

c419561

Review - Label

4f48873

narduin reviewed Nov 21, 2024

View reviewed changes

add a simple input option for filter use cases

59df6b9

update relevant components

narduin requested a review from abulte November 28, 2024 16:50

abulte reviewed Nov 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use `SearchComponent` on bouquets & données page #584

Use `SearchComponent` on bouquets & données page #584

at-github commented Nov 15, 2024

netlify bot commented Nov 15, 2024 •

edited

Loading

netlify bot commented Nov 15, 2024 •

edited

Loading

streino commented Nov 15, 2024

abulte commented Nov 18, 2024

at-github commented Nov 18, 2024 •

edited

Loading

abulte commented Nov 18, 2024

at-github commented Nov 18, 2024

abulte commented Nov 19, 2024

abulte commented Nov 19, 2024

at-github commented Nov 20, 2024 •

edited by abulte

Loading

abulte commented Nov 20, 2024

narduin commented Nov 20, 2024

at-github commented Nov 21, 2024

narduin Nov 21, 2024

at-github Nov 21, 2024

narduin Nov 21, 2024

narduin commented Nov 21, 2024 •

edited

Loading

at-github commented Nov 21, 2024

abulte left a comment

Use SearchComponent on bouquets & données page #584

Are you sure you want to change the base?

Use SearchComponent on bouquets & données page #584

Conversation

at-github commented Nov 15, 2024

netlify bot commented Nov 15, 2024 • edited Loading

✅ Deploy Preview for ecospheres ready!

netlify bot commented Nov 15, 2024 • edited Loading

✅ Deploy Preview for meteo-france ready!

streino commented Nov 15, 2024

abulte commented Nov 18, 2024

at-github commented Nov 18, 2024 • edited Loading

abulte commented Nov 18, 2024

at-github commented Nov 18, 2024

abulte commented Nov 19, 2024

abulte commented Nov 19, 2024

at-github commented Nov 20, 2024 • edited by abulte Loading

abulte commented Nov 20, 2024

narduin commented Nov 20, 2024

at-github commented Nov 21, 2024

narduin Nov 21, 2024

Choose a reason for hiding this comment

at-github Nov 21, 2024

Choose a reason for hiding this comment

narduin Nov 21, 2024

Choose a reason for hiding this comment

narduin commented Nov 21, 2024 • edited Loading

at-github commented Nov 21, 2024

abulte left a comment

Choose a reason for hiding this comment

Use `SearchComponent` on bouquets & données page #584

Use `SearchComponent` on bouquets & données page #584

netlify bot commented Nov 15, 2024 •

edited

Loading

netlify bot commented Nov 15, 2024 •

edited

Loading

at-github commented Nov 18, 2024 •

edited

Loading

at-github commented Nov 20, 2024 •

edited by abulte

Loading

narduin commented Nov 21, 2024 •

edited

Loading