diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
index 23ce465077a6d19a538209ad06a4b43e160e8058..631bc52c62dfda8c7d100d92bef892e5411c081c 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
@@ -12,19 +12,12 @@
</span>
</div>
<div class="root-url-input">
- <div class="link-with-copy">
- <span class="parameters-url">
- <a [href]="resource.metadataLink.url" target="_blank">{{ resource.metadataLink.url }}</a>
- </span>
- <button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)" class="button is-medium"
- [attr.data-tooltip]="messageClipboardRoot">
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
- <path fill="#818080" fill-rule="evenodd"
- d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
- clip-rule="evenodd" />
- </svg>
- </button>
- </div>
+ <app-link-copy-icon
+ [linkUrl]="resource.metadataLink.url"
+ [isRoot]="true"
+ [fileName]="resource.metadataLink.name"
+ ></app-link-copy-icon>
+
</div>
</div>
@@ -192,27 +185,14 @@
URL personnalisée
</span>
</div>
- <div class="link-with-copy">
- <span class="parameters-url column is-12-mobile is-narrow-tablet">
- <a [href]="queryableUrl" target="_blank" [ngClass]="{'is-disabled': isAllFeaturesChecked}"
- [innerHtml]="queryableUrlToDisplay">
- </a>
- </span>
- <button type="button" (click)="copyToClipboard(queryableUrl)"
- class="column button is-narrow-tablet is-5-mobile is-medium" [attr.data-tooltip]="messageClipboard">
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
- <path fill="#818080" fill-rule="evenodd"
- d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
- clip-rule="evenodd" />
- </svg>
- </button>
- <div class="resource-download-icon">
- <app-download-button [url]="downloadUrl" [fileName]="getFileName()">
- </app-download-button>
- </div>
- </div>
+ <app-link-copy-icon [linkUrl]="queryableUrl" [linkToDisplay]="queryableUrlToDisplay" [fileName]="fileName">
+ <div class="resource-download-icon">
+ <app-download-button [url]="downloadUrl" [fileName]="fileName">
+ </app-download-button>
+ </div>
+ </app-link-copy-icon>
</div>
</ng-container>
- </div>
\ No newline at end of file
+ </div>
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
index 8460a792143c9bc218ed0250df2cb81bd0fe616e..3a5fd0588a9b57dc97819245cecd653b36064462 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
@@ -23,95 +23,9 @@
}
}
-.link-with-copy {
- display: flex;
-
- a,
- /* stylelint-disable-next-line */
- a span {
- color: $link-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- .parameters-url-icon {
- color: $brand-color;
-
- &:hover {
- cursor: pointer;
- }
- }
-
- .parameters-url {
- background-color: $grey-background-color;
- border: 1px solid $grey-super-light-color;
- transition: all 0.5s ease;
- word-break: break-all;
- flex-shrink: 1;
- padding: 0.7rem 0.5rem;
- min-height: 2.5rem;
-
- // ng-deep needed because of the innerHtml breaks the styling
- /* stylelint-disable-next-line */
- ::ng-deep .is-active-parameter {
- font-weight: bold;
- color: $link-color;
- }
-
- /* stylelint-disable-next-line */
- a.is-disabled ::ng-deep .is-active-parameter {
- font-weight: bold;
- color: $grey-dark-color;
- }
-
- a.is-disabled,
- a.is-disabled span {
- pointer-events: none;
- color: $grey-dark-color;
- }
- }
-
- .button {
- font-size: 0.875rem;
- margin-left: 0.5rem;
- position: relative;
- margin-right: 0.5rem;
- height: 2.75rem;
- width: 2.75rem;
- border-color: $grey-super-light-color;
-
- svg {
- position: absolute;
- width: 1.25rem;
- left: calc(50% - (1.25rem / 2));
- top: calc(50% - (1.25rem / 2));
- }
-
- svg path {
- fill: $grey-dark-color;
- }
- }
-
- .button:hover {
- svg {
- opacity: 0.7;
- }
- }
-}
-
.root-url {
border-bottom: 2px solid $grey-background-color;
padding-bottom: 1.5rem;
-
- a {
- pointer-events: none;
- cursor: default;
- text-decoration: none;
- color: $grey-dark-color;
- }
}
.root-url-label {
@@ -305,7 +219,7 @@ h3 {
}
-// Mobile: dropdown displays at 100%.
+// Mobile: dropdown displays at 100%.
.dropdown,
.dropdown-trigger,
.dropdown-trigger button,
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
index 20c396afdee7592e354361399989870ee1245fb3..541742cf48bbf42676c3782890e28b8ac0e48619 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
@@ -21,8 +21,6 @@ export class ResourceQueryableComponent implements OnInit {
downloadMessage = geosource.downloads.download;
- messageClipboard: string;
- messageClipboardRoot: string;
queryableUrl: string;
queryableUrlToDisplay: SafeHtml;
@@ -146,9 +144,6 @@ export class ResourceQueryableComponent implements OnInit {
}
ngOnInit() {
- this.messageClipboard = geosource.mapMessages.share;
- this.messageClipboardRoot = geosource.mapMessages.share;
-
this.initSettings();
}
@@ -195,6 +190,7 @@ export class ResourceQueryableComponent implements OnInit {
// Init the url query parameters that will not be changed by the user
this.queryableParameters.baseUrl = this.resource.metadataLink.url;
+
if (this.resource.type === linkFormats.ws) {
// Exception for this service, we modify the root URL
// this.resource.metadataLink.url += '/all.json';
@@ -240,9 +236,6 @@ export class ResourceQueryableComponent implements OnInit {
this.queryableParameters.insee +
this.queryableParameters.bbox
;
- console.log('before');
- console.log(this.queryableParameters);
- console.log(this.queryableUrl);
if (this.resource.type === linkFormats.wfs) {
this.queryableUrl += `&startIndex=${this.fromFeature}`;
@@ -253,8 +246,6 @@ export class ResourceQueryableComponent implements OnInit {
this.queryableUrl += `&maxfeatures=${this.numberFeatures}&start=${this.fromFeature}`;
}
}
- console.log('debug...');
- console.log(this.queryableUrl);
if (!this.isAllFeaturesChecked && this.resource.type === linkFormats.wfs) {
this.queryableUrl += `&count=${this.numberFeatures}`;
@@ -447,7 +438,7 @@ export class ResourceQueryableComponent implements OnInit {
checkAllFeatures() {
this.numberFeatures = this.isAllFeaturesChecked ?
- this._datasetDetailService.dataset.totalData : this.inputCountFeatures;
+ -1 : this.inputCountFeatures;
this.updateQueryableUrl();
this.updateQueryableurlToDisplay();
}
@@ -474,7 +465,7 @@ export class ResourceQueryableComponent implements OnInit {
return array;
}
- getFileName() {
+ get fileName() {
return `${this.resource.metadataLink.name}.${this.selectedFormat.fileExtension}`;
}
@@ -490,33 +481,6 @@ export class ResourceQueryableComponent implements OnInit {
return projection ? `${projection.commonName} (${projection.name})` : name;
}
- copyToClipboard(text, isRoot) {
- const selBox = document.createElement('textarea');
- selBox.style.position = 'fixed';
- selBox.style.height = '0';
- selBox.value = text;
- document.body.appendChild(selBox);
- selBox.focus();
- selBox.select();
- document.execCommand('copy');
- document.body.removeChild(selBox);
-
- if (isRoot) {
- this.messageClipboardRoot = geosource.mapMessages.copied;
- setTimeout(() => {
- this.messageClipboardRoot = geosource.mapMessages.share;
- // tslint:disable-next-line: align
- }, 2000);
- } else {
- this.messageClipboard = geosource.mapMessages.copied;
- setTimeout(() => {
- this.messageClipboard = geosource.mapMessages.share;
- // tslint:disable-next-line: align
- }, 2000);
- }
-
- }
-
get downloadUrl() {
return this.queryableUrl.replace(
'https://download.data.grandlyon.com',
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
index cea921bd676e4f651dcc0803e894c65d3e0de861..88d424fb4fc957ee62876e0e69be74f3d07ee330 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
@@ -54,8 +54,17 @@
<span class="sr-only">Options</span>
</button>
- <app-download-button [url]="queryableUrl" [fileName]="fileName">
- </app-download-button>
+
+ <app-link-copy-icon
+ [linkUrl]="queryableUrl"
+ [displayLink]="false"
+ [fileName]="fileName">
+
+ <div class="resource-download-icon">
+ <app-download-button [url]="queryableUrl" [fileName]="fileName">
+ </app-download-button>
+ </div>
+ </app-link-copy-icon>
</div>
</div>
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
index f03ab9f9230ef85b7bade01351acb808dbb357e5..cbf971326d26d90cb84c578c61703fbe50c08cfa 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
@@ -94,7 +94,6 @@
border-radius: 4px;
width: 2.75rem;
height: 2.75rem;
- margin-right: 0.5rem;
background-color: transparent;
padding: 0;
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
index 63420e73ef641219c1effac5a32891b221f5d32c..9ca821854a592ebe7a2e633c4802d20bf6081572 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
@@ -133,7 +133,6 @@ export class ResourceDownloadItemComponent implements OnInit {
get queryableUrl() {
let queryableUrl = '';
if (this.isQueryable) {
-
queryableUrl = this.resource.metadataLink.url;
let layer = '';
let outputFormat = '';
@@ -161,9 +160,11 @@ export class ResourceDownloadItemComponent implements OnInit {
}
} else if (this.resource.type === linkFormats.ws) {
if (this.format.name === 'JSON') {
- queryableUrl += `/${this.resource.metadataLink.name}/all.json`;
+ queryableUrl += `/${this.resource.metadataLink.name}/all.json?maxfeatures=-1`;
} else {
- queryableUrl += `/${this.resource.metadataLink.name}.shp?srsname=EPSG:3946`;
+ const projectionAndBbox = this.getProjectionAndBbox(this.format);
+
+ queryableUrl += `/${this.resource.metadataLink.name}.shp?${projectionAndBbox.projection}`;
}
} else if (this.resource.type === linkFormats.kml) {
queryableUrl += `?${this.resource.parametersUrl}` +
diff --git a/src/app/shared/components/download-button/download-button.component.ts b/src/app/shared/components/download-button/download-button.component.ts
index 0672bce39f2c8ab90f84473a3412cbf76f29dc25..0094a1f67e895ee6049bd268a5baca86f9abfec7 100644
--- a/src/app/shared/components/download-button/download-button.component.ts
+++ b/src/app/shared/components/download-button/download-button.component.ts
@@ -1,5 +1,5 @@
import { HttpClient, HttpResponse } from '@angular/common/http';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, OnChanges } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { geosource, notificationMessages } from '../../../../i18n/traductions';
@@ -10,14 +10,14 @@ import { NotificationService } from '../../../core/services';
templateUrl: './download-button.component.html',
styleUrls: ['./download-button.component.scss'],
})
-export class DownloadButtonComponent implements OnInit, OnDestroy {
+export class DownloadButtonComponent implements OnInit, OnDestroy, OnChanges {
@Input() url: string;
@Input() fileName: string;
loading: boolean = false;
abortMessage: string = geosource.downloads.abort;
- downloadMessage: string = geosource.downloads.download;
+ downloadMessage: string ;
// Use this subject in order to be able to cancel the http request at any time
private ngUnsubscribe: Subject<void> = new Subject<void>();
@@ -27,7 +27,12 @@ export class DownloadButtonComponent implements OnInit, OnDestroy {
private _http: HttpClient,
) { }
- ngOnInit() { }
+ ngOnInit() {
+ this.downloadMessage = `${geosource.downloads.download} "${this.fileName}"`;
+ }
+ ngOnChanges() {
+ this.downloadMessage = `${geosource.downloads.download} "${this.fileName}"`;
+ }
download() {
this.loading = true;
diff --git a/src/app/shared/components/link-copy-icon/link-copy-icon.component.html b/src/app/shared/components/link-copy-icon/link-copy-icon.component.html
index 2b4dcff1adab72bb8acf0aa937c821f624a02927..a21478492f490bd47c917c6251f0cabd2e092a62 100644
--- a/src/app/shared/components/link-copy-icon/link-copy-icon.component.html
+++ b/src/app/shared/components/link-copy-icon/link-copy-icon.component.html
@@ -1,18 +1,14 @@
<div class="link-with-copy">
- <a class="parameters-url" [href]="linkUrl" target="_blank">
- <span>{{ linkUrl }}</span>
- </a>
- <div class="parameters-url-icon">
- <button type="button" (click)="copyToClipboard(linkUrl)" class="button is-medium">
- <svg xmlns="http://www.w3.org/2000/svg" id="copy" viewBox="0 0 18 18">
- <path
- d="M11.1 7.1c.6.6 1 1.3 1.2 2.2s.2 1.6 0 2.4-.6 1.5-1.2 2.1L8.9 16c-.6.6-1.3 1-2.1 1.2-.8.2-1.6.2-2.4 0-.8-.2-1.5-.6-2.2-1.3-.6-.6-1-1.3-1.2-2.1-.2-.8-.2-1.6 0-2.4.2-.8.6-1.5 1.2-2.1l1.2-1.2c.2-.2.3-.2.5-.1s.3.2.3.4c0 .6.1 1.1.3 1.7.1.2 0 .4-.1.5L4 11c-.4.4-.7 1-.7 1.6 0 .6.2 1.1.7 1.6.4.4 1 .7 1.6.7s1.2-.2 1.6-.7l2.1-2.1c.4-.4.7-1 .7-1.6s-.3-1.1-.7-1.6c-.1-.1-.2-.2-.4-.3s-.1-.2-.1-.3c0-.4.1-.7.3-.9l.7-.7c.1-.1.2-.1.3-.1.1 0 .2 0 .3.1.2.1.5.2.7.4zm4.4-4.4c-.6-.6-1.3-1-2.2-1.2-.8-.2-1.6-.2-2.4 0-.8.2-1.5.6-2.1 1.2L6.6 4.9c-.6.6-1 1.3-1.2 2.1s-.2 1.6 0 2.4.6 1.5 1.2 2.2c.2.2.4.4.7.5.1.1.2.1.3.1.1 0 .2-.1.3-.2l.7-.7c.2-.2.4-.6.3-.9 0-.2-.1-.3-.2-.4s-.2-.1-.3-.2c-.4-.4-.6-1-.6-1.6S8 7 8.4 6.6l2.1-2.1c.4-.4 1-.7 1.6-.7s1.2.2 1.6.7c.4.4.6 1 .6 1.6 0 .6-.2 1.1-.7 1.6l-.4.4c-.1.1-.2.3-.1.5.2.5.3 1.1.3 1.7 0 .2.1.4.3.4.2.1.4.1.5-.1l1.2-1.2c.6-.6 1-1.3 1.2-2.1.2-.8.2-1.6 0-2.4-.1-.8-.5-1.5-1.1-2.2z"
- class="grey" />
- <path
- d="M11.1 7.1c.6.6 1 1.3 1.2 2.2s.2 1.6 0 2.4-.6 1.5-1.2 2.1L8.9 16c-.6.6-1.3 1-2.1 1.2-.8.2-1.6.2-2.4 0-.8-.2-1.5-.6-2.2-1.3-.6-.6-1-1.3-1.2-2.1-.2-.8-.2-1.6 0-2.4.2-.8.6-1.5 1.2-2.1l1.2-1.2c.2-.2.3-.2.5-.1s.3.2.3.4c0 .6.1 1.1.3 1.7.1.2 0 .4-.1.5L4 11c-.4.4-.7 1-.7 1.6 0 .6.2 1.1.7 1.6.4.4 1 .7 1.6.7s1.2-.2 1.6-.7l2.1-2.1c.4-.4.7-1 .7-1.6s-.3-1.1-.7-1.6c-.1-.1-.2-.2-.4-.3s-.1-.2-.1-.3c0-.4.1-.7.3-.9l.7-.7c.1-.1.2-.1.3-.1.1 0 .2 0 .3.1.2.1.5.2.7.4zm4.4-4.4c-.6-.6-1.3-1-2.2-1.2-.8-.2-1.6-.2-2.4 0-.8.2-1.5.6-2.1 1.2L6.6 4.9c-.6.6-1 1.3-1.2 2.1s-.2 1.6 0 2.4.6 1.5 1.2 2.2c.2.2.4.4.7.5.1.1.2.1.3.1.1 0 .2-.1.3-.2l.7-.7c.2-.2.4-.6.3-.9 0-.2-.1-.3-.2-.4s-.2-.1-.3-.2c-.4-.4-.6-1-.6-1.6S8 7 8.4 6.6l2.1-2.1c.4-.4 1-.7 1.6-.7s1.2.2 1.6.7c.4.4.6 1 .6 1.6 0 .6-.2 1.1-.7 1.6l-.4.4c-.1.1-.2.3-.1.5.2.5.3 1.1.3 1.7 0 .2.1.4.3.4.2.1.4.1.5-.1l1.2-1.2c.6-.6 1-1.3 1.2-2.1.2-.8.2-1.6 0-2.4-.1-.8-.5-1.5-1.1-2.2z"
- class="grey" />
- </svg>
- <span class="is-hidden-touch">{{ messageClipboard }}</span>
- </button>
- </div>
+ <span class="parameters-url" *ngIf="displayLink===true">
+ <a [href]="linkUrl" target="_blank" [innerHtml]="linkToDisplay" [ngClass]="{'root-url': isRoot}"></a>
+ </span>
+ <button type="button" (click)="copyToClipboard()" class="button is-medium"
+ [attr.data-tooltip]="messageClipboard">
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
+ <path fill="#818080" fill-rule="evenodd"
+ d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
+ clip-rule="evenodd" />
+ </svg>
+ </button>
+ <ng-content></ng-content>
</div>
diff --git a/src/app/shared/components/link-copy-icon/link-copy-icon.component.scss b/src/app/shared/components/link-copy-icon/link-copy-icon.component.scss
index 51e768c34ff7ae6a4daed4ee7556a89bdafea44a..168b524f6ce5ffaf70a18d997600fa1f20ff6848 100644
--- a/src/app/shared/components/link-copy-icon/link-copy-icon.component.scss
+++ b/src/app/shared/components/link-copy-icon/link-copy-icon.component.scss
@@ -3,45 +3,87 @@
.link-with-copy {
display: flex;
- justify-content: space-between;
-}
-.parameters-url-icon {
- color: $brand-color;
- &:hover {
- cursor: pointer;
+ a,
+ /* stylelint-disable-next-line */
+ a span {
+ color: $link-color;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
-}
-.parameters-url {
- background-color: $grey-background-color;
- border: 1px solid white;
- transition: all .5s ease;
+ .parameters-url-icon {
+ color: $brand-color;
- &:hover {
- border: 1px solid $tomato-color;
+ &:hover {
+ cursor: pointer;
+ }
}
-}
-.parameters-url {
- word-break: break-all;
- flex-grow: 1;
- display: flex;
- align-items: center;
- padding: 0.7rem 0.5rem;
-}
-.parameters-url-icon {
+ .parameters-url {
+ background-color: $grey-background-color;
+ border: 1px solid $grey-super-light-color;
+ transition: all 0.5s ease;
+ word-break: break-all;
+ flex-shrink: 1;
+ padding: 0.7rem 0.5rem;
+ min-height: 2.5rem;
+
+ // ng-deep needed because of the innerHtml breaks the styling
+ /* stylelint-disable-next-line */
+ ::ng-deep .is-active-parameter {
+ font-weight: bold;
+ color: $link-color;
+ }
+
+ /* stylelint-disable-next-line */
+ a.is-disabled ::ng-deep .is-active-parameter {
+ font-weight: bold;
+ color: $grey-dark-color;
+ }
+
+ a.is-disabled,
+ a.is-disabled span {
+ pointer-events: none;
+ color: $grey-dark-color;
+ }
+ }
.button {
- width: 100%;
font-size: 0.875rem;
- display: flex;
- justify-content: flex-start;
+ margin-left: 0.5rem;
+ position: relative;
+ margin-right: 0.5rem;
+ height: 2.75rem;
+ width: 2.75rem;
+ border-color: $grey-super-light-color;
svg {
- min-width: 1.25rem;
+ position: absolute;
+ width: 1.25rem;
+ left: calc(50% - (1.25rem / 2));
+ top: calc(50% - (1.25rem / 2));
+ }
+
+ svg path {
fill: $grey-dark-color;
- margin-right: 0.5rem
}
}
-}
\ No newline at end of file
+
+ .button:hover {
+ svg {
+ opacity: 0.7;
+ }
+ }
+
+ a.root-url {
+ pointer-events: none;
+ cursor: default;
+ text-decoration: none;
+ color: $grey-dark-color;
+
+ }
+}
diff --git a/src/app/shared/components/link-copy-icon/link-copy-icon.component.ts b/src/app/shared/components/link-copy-icon/link-copy-icon.component.ts
index df8217d3f2b7f821da2a15ac36384239cd33e8c9..7dedf61677f7047dbd63e61ef93bab2e4780be5f 100644
--- a/src/app/shared/components/link-copy-icon/link-copy-icon.component.ts
+++ b/src/app/shared/components/link-copy-icon/link-copy-icon.component.ts
@@ -1,37 +1,61 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
import { geosource } from '../../../../i18n/traductions';
+import { APP_CONFIG } from '../../../core/services/app-config.service';
@Component({
selector: 'app-link-copy-icon',
templateUrl: './link-copy-icon.component.html',
styleUrls: ['./link-copy-icon.component.scss'],
})
-export class LinkCopyIconComponent implements OnInit {
+export class LinkCopyIconComponent implements OnChanges {
@Input() linkUrl: string;
+ @Input() linkToDisplay: SafeHtml = false;
+ @Input() isRoot: boolean = false;
+ @Input() displayLink:boolean = true;
+ @Input() fileName: string;
+
messageClipboard: string;
constructor() { }
- ngOnInit() {
- this.messageClipboard = geosource.mapMessages.share;
+
+ ngOnChanges() {
+ this.messageClipboard = `${geosource.mapMessages.share} ${this.fileName}`;
+
+ this.linkUrl = this.linkUrl.replace(
+ `${APP_CONFIG.backendUrls.proxyQuery}/download`,
+ 'https://download.data.grandlyon.com',
+ );
+ if (this.linkToDisplay === false) {
+ this.linkToDisplay = this.linkUrl;
+ }
}
- copyToClipboard(text) {
+ copyToClipboard() {
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.height = '0';
- selBox.value = text;
+ selBox.value = this.linkUrl;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
- this.messageClipboard = geosource.mapMessages.copied;
- setTimeout(() => {
- this.messageClipboard = geosource.mapMessages.share;
- }, 2000);
+ if (this.isRoot) {
+ this.messageClipboard = geosource.mapMessages.copied;
+ setTimeout(() => {
+ this.messageClipboard = geosource.mapMessages.share;
+ // tslint:disable-next-line: align
+ }, 2000);
+ } else {
+ this.messageClipboard = geosource.mapMessages.copied;
+ setTimeout(() => {
+ this.messageClipboard = geosource.mapMessages.share;
+ // tslint:disable-next-line: align
+ }, 2000);
+ }
}
-
}
diff --git a/src/i18n/traductions.fr.ts b/src/i18n/traductions.fr.ts
index 11b081177131969b3fbf3c15c6a677219902c6ad..8c91e5b8a556df2da165005e64b310371526a8f4 100644
--- a/src/i18n/traductions.fr.ts
+++ b/src/i18n/traductions.fr.ts
@@ -202,7 +202,7 @@ export const geosource = {
},
mapMessages: {
copied: 'Copié !',
- share: 'Copier le lien',
+ share: 'Copier le lien pour',
},
downloads: {
abort: 'Annuler le téléchargement en cours',
@@ -323,7 +323,7 @@ export const reusesTypes = {
};
export const buttonCopyLinkToCliboardMessages = {
- hover: 'Copier le lien',
+ hover: 'Copier le lien pour',
copied: 'Copié !',
};
diff --git a/src/i18n/traductions.ts b/src/i18n/traductions.ts
index 41192a0ac079bb06a0da11a64701bfc8ed09fd49..857432af02c241fb8844443e44ecdc599c00f074 100644
--- a/src/i18n/traductions.ts
+++ b/src/i18n/traductions.ts
@@ -204,7 +204,7 @@ export const geosource = {
},
mapMessages: {
copied: 'Copied !',
- share: 'Copy the link',
+ share: 'Copy the link for',
},
downloads: {
abort: 'Cancel the download in progress',
@@ -325,7 +325,7 @@ export const reusesTypes = {
};
export const buttonCopyLinkToCliboardMessages = {
- hover: 'Copy the link',
+ hover: 'Copy the link for',
copied: 'Copied!',
};