From 39becdac01bf4d47bf34874377ac2f3e13ed4ce1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eduardo=20Amador=20Pato=CC=81n?= Date: Tue, 18 Apr 2017 12:47:39 +0200 Subject: [PATCH] 6 - Get WMS button working with modal, copy to clipboard function - Missing fonts added, less mixings for font types - Font fixes --- src/css/shared/elements/info/styles.less | 106 +++++++++++++----- src/css/shared/elements/paragraph/styles.less | 6 +- src/css/shared/modal/modal.less | 91 +++++++++++++++ src/css/shared/shared.less | 1 + src/css/shared/steps/conclusion/styles.less | 15 +-- src/css/shared/steps/cover/styles.less | 6 +- src/css/shared/steps/home/styles.less | 23 ++-- src/css/shared/steps/intro/styles.less | 2 +- src/css/shared/steps/skip/styles.less | 27 ++--- src/css/variables.less | 55 ++++++++- src/shared/elements/info/Info.ts | 32 ++++++ src/shared/elements/modal/CustomModal.ts | 12 ++ src/shared/steps/map/MapStep.ts | 6 +- src/templates/shared/elements/info/view.html | 47 ++++++-- 14 files changed, 341 insertions(+), 88 deletions(-) create mode 100644 src/css/shared/modal/modal.less create mode 100644 src/shared/elements/modal/CustomModal.ts diff --git a/src/css/shared/elements/info/styles.less b/src/css/shared/elements/info/styles.less index 76c006c..3bdf4a4 100644 --- a/src/css/shared/elements/info/styles.less +++ b/src/css/shared/elements/info/styles.less @@ -38,27 +38,37 @@ info { .fadeIn(); .btn-row { + &:not(.hidden) { + padding-top: 36px; + } .btn.download { opacity: 1; + visibility: visible; .animated(0.3s, 0.2s); .fadeIn(); position: relative; - width: 120px; + width: auto; height: 32px; + padding: 0 10px; border-radius: 16px; - .bg_azul_iucn(); - border:2px solid @azul_iucn; + border: 2px solid @azul_iucn; line-height: 30px; text-align: center; - .fira_sans(); - .color_blanco(); - font-weight: 500; font-size: 12px; + text-transform: uppercase; + display: table; + letter-spacing: 1px; + margin: 0 0 16px 0; + .bg_azul_iucn(); + .font(semibold); + .color_blanco(); } &.hidden { .btn.download { opacity: 0; + visibility: hidden; .fadeOut(); + display: none; } } } @@ -73,7 +83,6 @@ info { .color_blanco(); font-size: 14px; line-height: 18px; - font-weight: normal; margin-bottom: 10px; } > paragraph, @@ -113,15 +122,55 @@ info { } } - .title{ - .fira_sans(); - .color_blanco(); - font-size:24px; - line-height:32px; - font-weight: 800; - font-style: italic; - margin-bottom:8px; + .allMapLayers { + max-height: 92%; + overflow-y: auto; + .mapLayerWrapper { + width: 320px; + &:not(:last-child) { + border-bottom: 2px solid @azul_iucn; + margin-bottom: 10px; + padding-bottom: 22px; + } + } } + + .titleWrapper { + display: flex; + align-items: center; + margin-bottom: 8px; + .btn { + background-color: white; + color: @azul_iucn; + border: 2px solid @azul_iucn; + background-image: none; + display: inline-flex; + align-items: center; + justify-content: center; + .font(bold); + margin-right: 8px; + &.selected { + border: 2px solid transparent; + } + } + .title { + .font(semibolditalic); + .color_blanco(); + font-size: 14px; + line-height: 18px; + font-weight: 800; + font-style: italic; + display: inline-flex; + max-width: 279px; + cursor: pointer; + + &.selected { + font-size:24px; + line-height:32px; + } + } + } + .credit { display: block; width: 320px; @@ -131,17 +180,22 @@ info { .color_blanco(); font-size: 14px; line-height: 18px; - font-weight: normal; - position: relative; - &:before{ - content: ""; - position: absolute; - top: -6px; - left: 0px; - width: 8px; - display: block; - border-bottom: 1.5px solid #fff; + + &(:empty) { + display: none; + } + + &:not(:empty) { + &:before { + content: ""; + position: absolute; + top: -6px; + left: 0px; + width: 8px; + display: block; + border-bottom: 1.5px solid #fff; + } } &.hidden { display: none; @@ -172,8 +226,8 @@ info { .summary { display: block; .btn { + .font(bold); color: @azul_iucn; - font-weight: bold; background-image: none; display: flex; align-items: center; diff --git a/src/css/shared/elements/paragraph/styles.less b/src/css/shared/elements/paragraph/styles.less index f7a0c72..08acdc1 100644 --- a/src/css/shared/elements/paragraph/styles.less +++ b/src/css/shared/elements/paragraph/styles.less @@ -12,8 +12,7 @@ paragraph { .animated(0.6s, 0.1s); &.highlight{ - .fira_sans(); - font-weight:300; + .font(light); font-size:24px; line-height:32px; } @@ -25,12 +24,11 @@ paragraph { float: left; position: relative; font-size: 156px; - font-weight: 900; .color_azul_profundo(); padding-top: 52px; padding-bottom: 30px; padding-right: 10px; - .fira_sans(); + .font(ultrabold); } } clear: both; diff --git a/src/css/shared/modal/modal.less b/src/css/shared/modal/modal.less new file mode 100644 index 0000000..2cfae55 --- /dev/null +++ b/src/css/shared/modal/modal.less @@ -0,0 +1,91 @@ + +.modalOverlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: fade(#000000, 50%); + opacity: 0; + visibility: hidden; + z-index: -1; + + display: flex; + align-items: center; + justify-content: center; + + .modal { + width: 400px; + min-height: 120px; + max-height: 400px; + overflow-y: auto; + opacity: 0; + visibility: hidden; + background-color: white; + border-radius: 10px; + border: 1px solid rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + background-clip: padding-box; + + .fira_sans(); + font-size: 14px; + + .modal-header { + margin: 15px; + text-align: center; + cursor: pointer; + font-size: 16px; + .close { + position: absolute; + right: 10px; + top: 10px; + color: #999; + line-height: 10px; + cursor: pointer; + } + } + + .modal-body { + margin: 5px 15px 5px 15px; + display: flex; + align-items: center; + justify-content: center; + } + + .modal-footer { + margin: 15px; + text-align: center; + height: 19px; + } + } + + &.open { + .animated(0.8s, 0.3s); + .fadeInDown(); + opacity: 1; + visibility: visible; + z-index: 101; + + .modal { + .animated(0.8s, 0.3s); + .fadeInDown(); + opacity: 1; + visibility: visible; + + input.wmsInput { + width: 100%; + padding: 8px; + border-radius: 4px; + border: 1px solid fade(@azul_iucn, 40%); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + .fira_sans(); + font-size: 14px; + } + input.wmsInput::-moz-focus-inner { + border: 0; + } + } + } +} diff --git a/src/css/shared/shared.less b/src/css/shared/shared.less index 91e7458..5f2832e 100644 --- a/src/css/shared/shared.less +++ b/src/css/shared/shared.less @@ -9,3 +9,4 @@ @import 'steps/map/styles'; @import 'steps/conclusion/styles'; @import 'steps/skip/styles'; +@import 'modal/modal'; diff --git a/src/css/shared/steps/conclusion/styles.less b/src/css/shared/steps/conclusion/styles.less index 83a20f5..b109cfa 100644 --- a/src/css/shared/steps/conclusion/styles.less +++ b/src/css/shared/steps/conclusion/styles.less @@ -7,17 +7,16 @@ conclusion { padding-bottom: 64px; } - h2{ + h2 { text-align: center; - .fira_sans(); + .font(extrabold); .color_azul_claro_iucn(); - font-size:24px; + font-size: 24px; line-height: 32px; - margin-bottom:25px; - font-weight: 800; + margin-bottom: 25px; } paragraph { - .fira_sans(); + .font(light); font-size: 16px; line-height: 24px; .color_blanco(); @@ -25,19 +24,17 @@ conclusion { width:95%; display: block; margin:0 auto 24px auto; - font-weight: 300; .capitalized{ span{ &:first-of-type{ float:left; position: relative; font-size:156px; - font-weight: 900; .color_blanco(); padding-top:54px; padding-bottom:30px; padding-right:10px; - .fira_sans(); + .font(ultrabold); } } clear:both; diff --git a/src/css/shared/steps/cover/styles.less b/src/css/shared/steps/cover/styles.less index 3a4d081..5332335 100644 --- a/src/css/shared/steps/cover/styles.less +++ b/src/css/shared/steps/cover/styles.less @@ -58,7 +58,7 @@ cover { vertical-align: middle; } span { - font-weight: 500; + .font(medium); text-transform: uppercase; letter-spacing: 1px; } @@ -88,7 +88,7 @@ cover { bottom: 58px; top: auto; span { - font-weight: 500; + .font(medium); text-transform: uppercase; letter-spacing: 1px; display: block; @@ -121,7 +121,7 @@ cover { font-weight:normal; padding-top:13px; .author{ - font-weight:700; + .font(bold); padding-left:5px; } } diff --git a/src/css/shared/steps/home/styles.less b/src/css/shared/steps/home/styles.less index 815c170..7c15ec2 100644 --- a/src/css/shared/steps/home/styles.less +++ b/src/css/shared/steps/home/styles.less @@ -17,7 +17,7 @@ home { vertical-align: middle; } span { - font-weight: 500; + .font(medium); text-transform: uppercase; letter-spacing: 1px; } @@ -68,13 +68,12 @@ home { text-transform: uppercase; .animated(0.8s, 0.3s); .fadeInDown(); - .fira_sans(); + .font(light); .color_blanco(); max-width: 540px; width: 75%; font-size: 64px; line-height: 64px; - font-weight: 300; position: relative; margin: 0 auto; text-align: center; @@ -84,11 +83,10 @@ home { position: relative; margin: 0 auto; text-align: center; - .fira_sans(); + .font(medium); .color_blanco(); font-size: 24px; line-height: 32px; - font-weight: 500; margin-bottom: 48px; .animated(0.6s, 0.5s); .fadeInUp(); @@ -99,12 +97,11 @@ home { position: relative; margin: 0 auto; text-align: center; - .fira_sans(); + .font(medium); .color_blanco(); font-size: 32px; line-height: 32px; text-transform: uppercase; - font-weight: 500; margin-bottom: 48px; .animated(0.6s, 0.5s); .fadeInUp(); @@ -167,9 +164,8 @@ home { border:2px solid @azul_iucn; line-height: 30px; text-align: center; - .fira_sans(); + .font(medium); .color_blanco(); - font-weight: 500; font-size: 12px; text-transform: uppercase; } @@ -183,10 +179,9 @@ home { border-radius: 16px; line-height: 30px; text-align: center; - .fira_sans(); + .font(medium); .color_blanco(); border:2px solid @blanco; - font-weight: 500; font-size: 12px; text-transform: uppercase; } @@ -199,13 +194,12 @@ home { > .title { .animated(0.6s, 0.5s); .fadeIn(); - .fira_sans(); + .font(light); .color_blanco(); max-width: 540px; width: 100%; font-size: 32px; line-height: 64px; - font-weight: 300; letter-spacing: 2px; position: relative; margin: 0 auto; @@ -314,11 +308,10 @@ home { &.title { opacity: 0.75; text-align: center; - .fira_sans(); + .font(ultrabold); .color_blanco(); font-size: 32px; line-height: 32px; - font-weight: 900; max-width: 340px; z-index: -1; } diff --git a/src/css/shared/steps/intro/styles.less b/src/css/shared/steps/intro/styles.less index 3bec7e4..222979a 100644 --- a/src/css/shared/steps/intro/styles.less +++ b/src/css/shared/steps/intro/styles.less @@ -25,7 +25,7 @@ intro { bottom: 45px; top: auto; span { - font-weight: 500; + .font(medium); text-transform: uppercase; letter-spacing: 1px; display: block; diff --git a/src/css/shared/steps/skip/styles.less b/src/css/shared/steps/skip/styles.less index d8e8a83..d175fed 100644 --- a/src/css/shared/steps/skip/styles.less +++ b/src/css/shared/steps/skip/styles.less @@ -4,7 +4,7 @@ skip { } .credit-full { .bg_blanco(); - .fira_sans(); + .font(); .color_oscuro(); display: block; height: 40px; @@ -14,10 +14,9 @@ skip { background-position: 15px center; font-size: 14px; line-height: 18px; - font-weight: normal; padding-top: 13px; .author { - font-weight: 700; + .font(bold); padding-left: 5px; } } @@ -44,9 +43,8 @@ skip { } h2 { .animated(0.6s); - .fira_sans(); + .font(ultrabold); .color_azul_profundo(); - font-weight: 900; font-size: 64px; line-height: 64px; display: block; @@ -73,9 +71,8 @@ skip { span { font-size: 14px; letter-spacing: 1px; - font-weight: 500; text-transform: uppercase; - .fira_sans(); + .font(medium); } } } @@ -91,7 +88,7 @@ skip { .animated(0.8s); .bounceInDownLittle(); z-index: 0; - .fira_sans(); + .font(); .color_azul_iucn(); font-size: 14px; display: table; @@ -101,7 +98,7 @@ skip { vertical-align: middle; } span { - font-weight: 500; + .font(medium); text-transform: uppercase; letter-spacing: 1px; } @@ -122,20 +119,19 @@ skip { .pre-author{ text-align: center; .color_mbl6(); - .fira_sans(); + .font(); font-size: 14px; letter-spacing: 2px; line-height: 16px; - margin-bottom:10px; + margin-bottom: 10px; } .author { .name, .departament { text-align: center; .color_oscuro(); - .fira_sans(); + .font(light); font-size: 24px; - font-weight: 300; line-height: 24px; text-align: center; } @@ -167,16 +163,15 @@ skip { .center-name { .color_oscuro(); - .fira_sans(); + .font(medium); font-size: 16px; - font-weight: 500; line-height: 24px; text-align: center; margin-bottom:10px; } .center-address{ .color_mbl6(); - .fira_sans(); + .font(); font-size: 12px; line-height: 16px; text-align: center; diff --git a/src/css/variables.less b/src/css/variables.less index b788d36..f743f49 100644 --- a/src/css/variables.less +++ b/src/css/variables.less @@ -1,10 +1,57 @@ -@import url('https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,500,600,700,800,900|Merriweather:300,400,400i,700,700i,900,900i'); +@import url('https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,400i,500,600,600i,700,800,900|Merriweather:300,400,400i,700,700i,900,900i'); -.fira_sans{ - font-family: 'Fira Sans', sans-serif; +@font-regular: 'Fira Sans', sans-serif; +@font: @font-regular; + +.fontweight(@fweight, @ffamily: @font) { + font-weight: @fweight; + font-family: @ffamily; +} + + +.font(@style) when(@style=light) { + .fontweight(300); +} + +.font() { + .fontweight(400); +} + +.font(@style) when(@style=medium) { + .fontweight(500); +} + +.font(@style) when(@style=semibold) { + .fontweight(600); +} + +.font(@style) when(@style=bold) { + .fontweight(700); +} + +.font(@style) when(@style=extrabold) { + .fontweight(800); +} + +.font(@style) when(@style=ultrabold) { + .fontweight(900); +} + +.font(@style) when(@style=italic) { + .fontweight(400); + font-style: italic; +} + +.font(@style) when(@style=semibolditalic) { + .fontweight(600); + font-style: italic; +} + +.fira_sans { + .font(); } -.merriweather{ +.merriweather { font-family: 'Merriweather', sans-serif; } diff --git a/src/shared/elements/info/Info.ts b/src/shared/elements/info/Info.ts index 583eb8b..d0882b7 100644 --- a/src/shared/elements/info/Info.ts +++ b/src/shared/elements/info/Info.ts @@ -6,8 +6,13 @@ import {BaseElementComponent} from "../base-element/BaseElement"; templateUrl: '/templates/shared/elements/info/view.html', }) export class InfoComponent extends BaseElementComponent { + @HostBinding('class.collapsed') + @Input() collapsed: boolean = true; + @Input() modalOpen: boolean = false; + @Input() wmsValue: string = ''; + @Input() wmsCopied: boolean = null; @Output() manageLayers: EventEmitter = new EventEmitter(); @Output() downloadShp: EventEmitter = new EventEmitter(); @@ -43,4 +48,31 @@ export class InfoComponent extends BaseElementComponent { downloadFile(info: any = {}) { this.downloadShp.emit(info); } + + toggleModal() { + this.modalOpen = !this.modalOpen; + } + + openModal(info: any = {}) { + this.wmsValue = info.shp; + this.modalOpen = true; + this.wmsCopied = null; + } + + copyWmsValue() { + let copyTextarea = document.querySelector('.wmsInput.active'); + copyTextarea.select(); + + try { + let successful = document.execCommand('copy'); + if (successful) { + this.wmsCopied = true; + } else { + this.wmsCopied = false; + } + } catch (err) { + console.log('Oops, unable to copy'); + this.wmsCopied = false; + } + } } diff --git a/src/shared/elements/modal/CustomModal.ts b/src/shared/elements/modal/CustomModal.ts new file mode 100644 index 0000000..dae632b --- /dev/null +++ b/src/shared/elements/modal/CustomModal.ts @@ -0,0 +1,12 @@ +import {Component, Input, HostBinding, Output, EventEmitter} from "@angular/core"; +import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; + +@Component({ + selector: 'modal', + template: ` + + ...xxxxxxxxxx + + ` +}) +export class CustomModalComponent extends ModalComponent {} \ No newline at end of file diff --git a/src/shared/steps/map/MapStep.ts b/src/shared/steps/map/MapStep.ts index a7c5a1b..4714ba2 100644 --- a/src/shared/steps/map/MapStep.ts +++ b/src/shared/steps/map/MapStep.ts @@ -1,6 +1,6 @@ import {Component, Inject, Renderer, ElementRef, AfterViewInit, HostBinding, Input} from "@angular/core"; import {BaseStepComponent} from "../base/BaseStep"; -import {Map} from 'mapbox-gl'; +import {Map, NavigationControl} from 'mapbox-gl'; import {MapService} from "../../../services/MapService"; import {DOCUMENT} from "@angular/platform-browser"; import {WindowService} from "../../../services/WindowService"; @@ -80,7 +80,7 @@ export class MapStepComponent extends BaseStepComponent { } toggleActiveLayer() { - if (!this.activeLayer.layer.subLayers.length) return; + if (!this.activeLayer.layer.subLayers.length || !this.mapService.map) return; for (let sublayer of this.activeLayer.layer.subLayers) { let visibility = this.mapService.map.getLayoutProperty(sublayer, 'visibility'); @@ -101,6 +101,8 @@ export class MapStepComponent extends BaseStepComponent { } resetBbox() { + if (!this.mapService.map) return; + this.mapService.map.flyTo({ center: this.center, zoom: this.zoom, diff --git a/src/templates/shared/elements/info/view.html b/src/templates/shared/elements/info/view.html index b41388c..7f70fca 100644 --- a/src/templates/shared/elements/info/view.html +++ b/src/templates/shared/elements/info/view.html @@ -11,20 +11,28 @@ +
-
-
-
{{info.title}}
+
+
+
+
+ {{ i + 1 }} +
+
{{info.title}}
+
-
Download .SHP
-
Get WMS
-
-
- {{info.credit}} +
Download spatial data [.SHP]
+
Get WMS URL
+
{{info.credit}}
@@ -36,4 +44,27 @@ {{item.credit}}
+
+ +
+
+
+ Copy WMS +
X
+
+
+ +
+
+
+
+ WMS copied to the clipboard successfully. +
+ +
+ WMS could not be copied to the clipboard, please try it with "Ctrl + C". +
+
+
+
\ No newline at end of file