Skip to content

Commit

Permalink
feat(search): add help in search-result
Browse files Browse the repository at this point in the history
  • Loading branch information
Marc-André Barbeau committed Oct 14, 2020
1 parent 227800f commit 666244d
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 7 deletions.
2 changes: 1 addition & 1 deletion packages/common/src/lib/custom-html/custom-html.component.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="custom-html" [innerHTML]="html | sanitizeHtml "></div>
<div class="custom-html" [innerHTML]="html | sanitizeHtml"></div>
5 changes: 3 additions & 2 deletions packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div *ngIf="!store || store.empty" style="margin: 10px;">
<section class="mat-typography">
<h4>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</h4>
<p>{{ 'igo.integration.searchResultsTool.doSearch' | translate }}</p>
<h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</strong></h4>
<p><strong>{{ 'igo.integration.searchResultsTool.doSearch' | translate }}</strong></p>
<div [innerHTML]="'igo.integration.searchResultsTool.examples' | translate | sanitizeHtml"></div>
</section>
</div>

Expand Down
5 changes: 3 additions & 2 deletions packages/integration/src/lib/search/search-results-tool/search-results-tool.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { IgoLanguageModule } from '@igo2/core';
import { IgoFlexibleModule, IgoPanelModule } from '@igo2/common';
import { IgoFlexibleModule, IgoCustomHtmlModule, IgoPanelModule } from '@igo2/common';
import {
IgoFeatureModule,
IgoSearchModule,
Expand All @@ -27,7 +27,8 @@ import { SearchResultsToolComponent } from './search-results-tool.component';
IgoSearchModule,
IgoFlexibleModule,
IgoPanelModule,
IgoFeatureDetailsModule
IgoFeatureDetailsModule,
IgoCustomHtmlModule
],
declarations: [SearchResultsToolComponent],
exports: [SearchResultsToolComponent],
Expand Down
3 changes: 2 additions & 1 deletion packages/integration/src/locale/en.integration.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
},
"searchResultsTool": {
"noResults": "No results",
"doSearch": "Do a search in the search bar"
"doSearch": "Do a search in the search bar.",
"examples": "You can use keywords to refine your search. Examples: <ul><li>#mun québec</li><li>#sante Lévis</li><li>#cpe joyeux</li></ul>"
},
"about.html": "<style>#about .bold_class{font-weight: bold;}#about .red{color: red;}#about .tool_name{border-top: 1px solid; padding-top: 10px;}#about .titre_outil{font-weight: bold; font-size: 18px; padding-bottom: 8px;}#about .subtitle{font-size: 20px; padding-bottom: 10px;}#about .align_right{text-align: right;}#about .describe{text-align: justify;}#about a img{color: black; text-decoration: none;}</style><body> <div id='about'> <div class='bold_class subtitle'>Features overview</div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon> Search Results </div><div class='describe'>Located in the upper left portion of the interface, the search bar allows you to locate yourself using an address, location or GPS coordinates. The tool can also be used to search for a layer. </div></div><br><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon> Contexts </div><div class='describe'> Visualize groupings of layers made by theme or by work context. When you select a <span class='bold_class'>Context</span>, you will find in <span class='bold_class'>Map</span> each of the layers it contains. You can add other layers to it from the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. <br><div class='red'> <span class='bold_class'>WARNING :</span> If you select another <span class='bold_class'>Context</span>, all the layers displayed in the <span class='bold_class'>Map</span> will be replaced. </div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z'> </path> </svg></mat-icon> Map </div><div class='describe'>Personalize your map using the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. This space allows you to add, delete and interrogate layers.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z'> </path> </svg></mat-icon> Measure </div><div class='describe'>Measure distances or areas on the map.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,14.5V12H10V15H8V11A1,1 0 0,1 9,10H14V7.5L17.5,11M21.71,11.29L12.71,2.29H12.7C12.31,1.9 11.68,1.9 11.29,2.29L2.29,11.29C1.9,11.68 1.9,12.32 2.29,12.71L11.29,21.71C11.68,22.09 12.31,22.1 12.71,21.71L21.71,12.71C22.1,12.32 22.1,11.68 21.71,11.29Z'> </path> </svg></mat-icon> Directions </div><div class='describe'> Build a route between two points (by placing the two points on the map or by looking for addresses). You can then add intermediate points, copy the description of the route to the clipboard or share the link.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon> Catalog </div><div class='describe'> Find all the layers that can be added to the <span class='bold_class'>Map</span>. Click on the desired layer to add it. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z'></path> </svg></mat-icon> Import & export </div><div class='describe'> Import or export a layer with a specific projection. You can also save or reload a context. It allows you to save contexts as anonymous. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z'></path> </svg></mat-icon> Print </div><div class='describe'>Print the map displayed on the screen. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'> </path> </svg></mat-icon> Share </div><div class='describe'> Create a URL that redirects to an exact representation of your map on the screen. This link can be shared or distributed in a document and allows you to \"save\" your map for later use. </div><br></div><div class='tool_name'> <p> <a href='http://igouverte.org/' target='_blank'><img src='./assets/igo2/core/logo.png' alt='IGO' height=32>IGO2</a> is a free web solution in geomatics, developed in collaborative mode by specialists from several departments and agencies of the government of Quebec. <p> Version :{{version.lib}}</p></div>",
"mapTool": {
Expand Down
3 changes: 2 additions & 1 deletion packages/integration/src/locale/fr.integration.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
},
"searchResultsTool": {
"noResults": "Aucun résultat",
"doSearch": "Veuillez effectuer une recherche"
"doSearch": "Veuillez effectuer une recherche dans la barre de recherche ci-dessus.",
"examples": "Vous pouvez utiliser des mots clés pour préciser votre recherche. Exemples: <ul><li>#mun québec</li><li>#sante Lévis</li><li>#cpe joyeux</li></ul>"
},
"about.html": "<style>#about .bold_class{font-weight: bold;}#about .red{color: red;}#about .tool_name{border-top: 1px solid; padding-top: 10px;}#about .titre_outil{font-weight: bold; font-size: 18px; padding-bottom: 8px;}#about .subtitle{font-size: 20px; padding-bottom: 10px;}#about .align_right{text-align: right;}#about .describe{text-align: justify;}#about a img{color: black; text-decoration: none;}</style><body> <div id='about'> <div class='bold_class subtitle'>Aperçu des fonctionnalités</div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon> Recherche </div><div class='describe'> Située dans la portion supérieure gauche de l’interface, la barre de recherche permet de vous positionner à l’aide d’une adresse, d’un lieu ou de coordonnées GPS et peut également servir à chercher une couche. Il est aussi possible de rechercher un élément par type de résultats en utilisant le hashtag « # » (par exemple, #municipalites québec). Les accents et les lettres majuscules n'importent pas lors de l'utilisation du hashtag.</div></div><br><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon> Contextes </div><div class='describe'> Visualisez des regroupements de couches faits par thème ou par contexte de travail. Lorsque vous sélectionnez un <span class='bold_class'>Contexte</span>, vous trouverez dans <span class='bold_class'>Carte</span> chacune des couches qu’il contient. Vous pouvez y ajouter d’autres couches à partir du <span class='bold_class'>Catalogue</span> ou de l’outil <span class='bold_class'>Recherche.</span> </div><br><div class='red'> <span class='bold_class'>ATTENTION :</span> Si vous sélectionnez un autre <span class='bold_class'>Contexte</span>, toutes les couches affichées dans <span class='bold_class'>Carte</span> seront remplacées. </div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z'> </path> </svg></mat-icon> Carte </div><div class='describe'> Personnalisez votre carte à partir du <span class='bold_class'>Catalogue</span> ou de l’outil <span class='bold_class'>Recherche.</span> Cet espace permet d’ajouter, de supprimer et d’interroger des couches. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z'> </path> </svg></mat-icon> Outil de mesure </div><div class='describe'> Mesurez des distances ou des superficies sur la carte. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,14.5V12H10V15H8V11A1,1 0 0,1 9,10H14V7.5L17.5,11M21.71,11.29L12.71,2.29H12.7C12.31,1.9 11.68,1.9 11.29,2.29L2.29,11.29C1.9,11.68 1.9,12.32 2.29,12.71L11.29,21.71C11.68,22.09 12.31,22.1 12.71,21.71L21.71,12.71C22.1,12.32 22.1,11.68 21.71,11.29Z'> </path> </svg></mat-icon> Itinéraire </div><div class='describe'> Construisez un itinéraire entre deux points (en placant les deux points dans la carte ou en cherchant des adresses). Vous pourrez ensuite ajouter des points intermédiaires, copier la description de l'itinéraire dans le presse papier ou partager le lien. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon> Catalogue </div><div class='describe'> Trouvez toutes les couches qui peuvent être ajoutées à la <span class='bold_class'>Carte.</span> Cliquez sur la couche désirée pour l’ajouter. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z'></path> </svg></mat-icon> Importer/Exporter </div><div class='describe'> Importez ou exportez un fichier vectoriel en spécifiant la projection. Vous pouvez aussi sauvegarder ou recharger un contexte localement. Cela vous permet de sauvegarder des contextes en mode non-authentifié ou anonyme. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z'></path> </svg></mat-icon> Imprimer </div><div class='describe'> Imprimez la carte affichée à l’écran. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'> </path> </svg></mat-icon> Partager </div><div class='describe'> Créez une adresse URL qui redirige vers une représentation exacte de votre carte qui se trouve à l’écran. Ce lien peut être partagé ou diffusé dans un document et permet de «&nbspsauvegarder » votre carte pour une utilisation ultérieure. </div><br></div><div class='tool_name'> <p> <a href='http://igouverte.org/' target='_blank'><img src='./assets/igo2/core/logo.png' alt='IGO' height=32>IGO2</a> est une solution Web libre en géomatique, développée en mode collaboratif par des spécialistes provenant de plusieurs ministères et organismes du gouvernement du Québec.</p><p>Version :{{version.lib}}</p></div>",
"mapTool": {
Expand Down

0 comments on commit 666244d

Please sign in to comment.