Skip to content

GitLab

Commit 570beda7 authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

Add translation, click to the wheel, and hide/show the options.

parent 12594150
Hide whitespace changes
Inline Side-by-side
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
View file @ 570beda7
<div class="resource-download">
<div class="first-line">
<div class="resource-left">
<app-format-icon [formatName]="getFormatName()">
</app-format-icon>
<div class="resource-main">
<div class="resource-main-name">
<span>{{isQueryable ? resource.metadataLink.name + '.' + format.fileExtension : link.name }}
</span>
<div class="first-line">
<div class="resource-left">
<app-format-icon [formatName]="getFormatName()">
</app-format-icon>
<div class="resource-main">
<div class="resource-main-name">
<span>{{isQueryable ? resource.metadataLink.name + '.' + format.fileExtension : link.name }}
</span>
</div>
<div class="resource-options">
<div>
<span *ngIf="this.selectedProjection"> {{this.selectedProjection.name}}
</span>
</div>
<div *ngIf="this.selectedInsee">
<span>&nbsp;-&nbsp;</span>
<span>{{ this.selectedInsee.commune }}</span>
</div>
<div *ngIf="! this.selectedInsee && format.isCuttable">
<span>&nbsp;-&nbsp;</span>
<span i18n="@@dataset.resources.divisionbycommune">
All the municipalities
</span>
</div>
</div>
</div>
</div>
</div>
<div class="right-buttons">
<div class="options-icon" *ngIf="(format.isCuttable && inseeLabel) || format.isProjectable">
<div class="right-buttons">
<div *ngIf="(format.isCuttable && inseeLabel) || format.isProjectable"
class="options-icon is-hidden-mobile" [ngClass]="{'is-open': isOptionOpen}"
(click)="isOptionOpen = !isOptionOpen">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #818080;
stroke-width: 1.5;
}
</style>
<path class="st0" d="M22,26c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S24.2,26,22,26z" />
<path class="st0" d="M33,23.4v-2.7l-0.1-0.2c-0.2-0.3-0.6-1.1-1.5-1.1h-0.8c-0.2-0.5-0.4-1-0.6-1.5l0.8-0.8c0.1-0.1,0.3-0.3,0.3-0.5
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #818080;
stroke-width: 1.5;
}
</style>
<path class="st0" d="M22,26c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S24.2,26,22,26z" />
<path class="st0" d="M33,23.4v-2.7l-0.1-0.2c-0.2-0.3-0.6-1.1-1.5-1.1h-0.8c-0.2-0.5-0.4-1-0.6-1.5l0.8-0.8c0.1-0.1,0.3-0.3,0.3-0.5
c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.8-0.5-1.1l-1.8-1.8c-0.6-0.6-1.5-0.6-2.1,0L26,13.9c-0.4-0.2-0.8-0.4-1.2-0.5v-0.9
c0-0.8-0.7-1.5-1.5-1.5h-2.5c-0.9,0-1.5,0.7-1.5,1.5v0.9c-0.5,0.1-0.9,0.3-1.3,0.5l-0.9-0.9c-0.6-0.6-1.5-0.6-2.1,0l-1.8,1.8
c-0.1,0.1-0.3,0.3-0.3,0.5c-0.1,0.2-0.1,0.4-0.1,0.6c0,0.2,0,0.8,0.5,1.1l0.8,0.8c-0.3,0.5-0.5,1-0.6,1.5h-0.8
......@@ -34,17 +54,17 @@
l0.6-0.6c0.5,0.3,1,0.5,1.6,0.7v0.6c0,0.8,0.7,1.5,1.5,1.5h2.5c0.9,0,1.5-0.7,1.5-1.5v-0.7c0.5-0.2,1-0.4,1.4-0.6l0.5,0.5
c0.1,0.1,0.3,0.3,0.5,0.3c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.8,0,1.1-0.5l1.7-1.7c0.1-0.1,0.3-0.3,0.3-0.5c0.1-0.2,0.1-0.4,0.1-0.6
c0-0.2,0-0.8-0.5-1.1l-0.5-0.5c0.2-0.4,0.4-0.9,0.5-1.3h0.8C32.3,24.9,33,24.2,33,23.4z" />
</svg>
</div>
</svg>
</div>
<app-download-button [url]="queryableUrl" [fileName]="fileName">
</app-download-button>
<app-download-button [url]="queryableUrl" [fileName]="fileName">
</app-download-button>
</div>
</div>
</div>
<div class="filter-items">
<div class="filter-items is-hidden-mobile" *ngIf="isOptionOpen">
<div class="division-item" *ngIf="format.isCuttable && inseeLabel">
<div class="label-dropdown title-label">
......
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
View file @ 570beda7
......@@ -5,8 +5,8 @@
background-color: white;
align-items: center;
border-bottom: 1px solid #f2f2f2;
margin-top: 0.5rem;
padding-bottom: 0.5rem;
margin-top: 1rem;
padding-bottom: 1rem;
}
.first-line {
......@@ -24,6 +24,7 @@
}
.resource-main-name span {
font-weight: 600;
font-size: 0.875rem;
word-break: break-all;
......@@ -32,19 +33,36 @@
}
}
.filter-items {
.resource-options {
display: flex;
span {
font-size: 0.875rem;
word-break: break-all;
}
}
}
.right-buttons {
.filter-items {
display: flex;
margin-left: calc(2rem + 48px);
margin-top: 0.75rem;
.division-item {
margin-right: 2rem;
}
.title-label {
margin-bottom: 0.5rem;
}
}
.dropdown-menu {
height: 2.5rem;
.right-buttons {
display: flex;
}
.dropdown-insee {
.dropdown-menu {
height: 200px;
......@@ -57,6 +75,8 @@
/* stylelint-disable-next-line */
.dropdown-trigger .button {
justify-content: space-between;
height: 2.625rem;
overflow: hidden;
svg {
width: 1rem;
......@@ -69,6 +89,19 @@
border-radius: 4px;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.5rem;
&:hover {
cursor: pointer;
}
&.is-open {
background-color: #818080;
svg path {
stroke: white;
}
}
svg {
height: 2.5rem;
......@@ -85,8 +118,19 @@
width: 100%;
}
@media screen and (min-width: $desktop) {
.dropdown-trigger button {
width: 8rem;
}
}
// Remove Bulma default 100% width for tablet and desktop
@media screen and (min-width: $tablet) {
@media screen and (min-width: $desktop) {
.dropdown-trigger button {
width: 12rem;
}
.dropdown,
.dropdown-trigger,
......@@ -96,4 +140,4 @@
// width: unset;
max-width: 350px;
}
}
\ No newline at end of file
}
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
View file @ 570beda7
......@@ -27,6 +27,8 @@ export class ResourceDownloadItemComponent implements OnInit {
_queryableUrl = '';
isOptionOpen = false;
projectionList;
// Dropdown projection
dropDownProjectionToggle: false;
......@@ -178,20 +180,6 @@ export class ResourceDownloadItemComponent implements OnInit {
// depending on the resource
setProjection(projection) {
this.selectedProjection = projection;
// if (this.resource.type === linkFormats.wfs) {
// this.queryableParameters.projection = `&SRSNAME=${projection.name}`;
// } else if (this.resource.type === linkFormats.wms || this.resource.type === linkFormats.wcs) {
// this.queryableParameters.projection = `&CRS=${projection.name}`;
// this.queryableParameters.bbox = `&BBOX=${projection.bbox.minx},` +
// `${projection.bbox.miny},` +
// `${projection.bbox.maxx},` +
// `${projection.bbox.maxy}`;
// } else if (this.resource.type === linkFormats.ws) {
// if (this.format.name !== 'JSON') {
// this.queryableParameters.projection = `srsname=${projection.name}`;
// }
// }
this.queryableParameters.projectionActive = true;
// this.updateQueryableUrl();
}
......
src/i18n/messages.en.xlf
View file @ 570beda7
......@@ -331,6 +331,10 @@
<source>All</source>
<target>All</target>
</trans-unit>
<trans-unit id="dataset.resources.allcommune" datatype="html">
<source>All the municipalities</source>
<target>All the municipalities</target>
</trans-unit>
<trans-unit id="dataset.resources.projectionsystem" datatype="html">
<source>Projection system</source>
<target>Projection system</target>
......
src/i18n/messages.fr.xlf
View file @ 570beda7
......@@ -342,6 +342,10 @@
<trans-unit id="dataset.resources.commune" datatype="html">
<source>All</source>
<target>Toutes</target>
<trans-unit id="dataset.resources.allcommune" datatype="html">
<source>All the municipalities</source>
<target>Toutes les communes</target>
</trans-unit>
</trans-unit>
<trans-unit id="dataset.resources.url.root" datatype="html">
<source>Resource root URL</source>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment