- add checboses for visibility in legend.entry.component
- add checkbox.scss - npm updates
This commit is contained in:
Arno Kaimbacher
parent
9579a23e8e
commit
d6abaa0d6d
12 changed files with 559 additions and 235 deletions
|
|
@ -2,11 +2,6 @@ import { Component, VERSION, AfterViewInit } from "@angular/core";
|
|||
import '../styles.scss';
|
||||
// import '../../node_modules/leaflet/dist/leaflet.css';
|
||||
|
||||
// import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
|
||||
// import { LayerOptions } from '@helgoland/map';
|
||||
// import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
|
||||
// // optional, to adapt leaflet markers
|
||||
|
||||
// Marker.prototype.options.icon = icon({
|
||||
// iconRetinaUrl: 'assets/img/marker-icon-2x.png',
|
||||
// iconUrl: 'assets/img/marker-icon.png',
|
||||
|
|
|
|||
|
|
@ -37,8 +37,18 @@
|
|||
</div>
|
||||
<div class="legendicons">
|
||||
<!-- <span class="fa" [ngClass]="{'fa-eye-slash': datasetOption?.visible, 'fa-eye': !datasetOption?.visible}" (click)="toggleVisibility(); $event.stopPropagation();"></span> -->
|
||||
<fa-icon [icon]="datasetOption?.visible ? faEye : faEyeSlash"
|
||||
(click)="toggleVisibility(); $event.stopPropagation();"></fa-icon>
|
||||
<!-- <fa-icon [icon]="datasetOption?.visible ? faEye : faEyeSlash"
|
||||
(click)="toggleVisibility(); $event.stopPropagation();"></fa-icon> -->
|
||||
|
||||
<label class="is-checkbox is-small is-info" (click)="$event.stopPropagation();">
|
||||
<input type="checkbox" [checked]="datasetOption.visible" (change)="toggleVisibility(); $event.stopPropagation();">
|
||||
<span>Visibility</span>
|
||||
|
||||
<span class="icon checkmark">
|
||||
<!-- <fa-icon [icon]="faCheck"></fa-icon> -->
|
||||
<fa-icon [icon]="datasetOption?.visible ? faCheck : faTimes"></fa-icon>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="collapseLegendEntry small-label">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ import { TimeInterval } from '../../../shared/models/timespan';
|
|||
import { DatasetApiService } from '../../services/dataset-api.service';
|
||||
import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
|
||||
import { DatasetOptions } from '../../../shared/models/options';
|
||||
import { faEye, faEyeSlash, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faEye, faEyeSlash, faCheck, faTimes, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FirstLastValue } from '../../../shared/models/dataset';
|
||||
import { GeoJSON } from 'leaflet';
|
||||
|
||||
@Component({
|
||||
selector: 'geomon-legend-entry',
|
||||
|
|
@ -24,6 +25,8 @@ export class LegendEntryComponent {
|
|||
faEye = faEye;
|
||||
faEyeSlash = faEyeSlash;
|
||||
faChevronRight = faChevronRight;
|
||||
faCheck = faCheck;
|
||||
faTimes = faTimes;
|
||||
|
||||
public firstValue: FirstLastValue;
|
||||
public lastValue: FirstLastValue;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { ParameterFilter } from '@helgoland/core';
|
||||
import { GeomonPlatform } from './../../../shared/models/platform';
|
||||
// import { LayerOptions } from '@helgoland/map';
|
||||
import { LayerOptions } from '../../map/map-options';
|
||||
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
|
||||
|
||||
|
|
@ -55,9 +53,9 @@ export class MapViewComponent implements OnInit {
|
|||
public layerControlOptions: Control.LayersOptions = { position: 'bottomleft' };
|
||||
public cluster = false;
|
||||
public loadingStations: boolean;
|
||||
public stationFilter: ParameterFilter = {
|
||||
// phenomenon: '8'
|
||||
};
|
||||
// public stationFilter: ParameterFilter = {
|
||||
// // phenomenon: '8'
|
||||
// };
|
||||
public statusIntervals = false;
|
||||
public mapOptions: MapOptions = {
|
||||
center: [48.208174, 16.373819],
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
// import { HelgolandCoreModule } from '@helgoland/core';
|
||||
// import { HelgolandMapModule } from '@helgoland/map';
|
||||
|
||||
import { LocateButtonComponent } from './locate-button/locate-button.component';
|
||||
import { ZoomControlComponent } from './zoom-control/zoom.component';
|
||||
// import { LocateService } from '@helgoland/map';
|
||||
// import { MapCache } from '@helgoland/map';
|
||||
import { MapService } from './services/map.service';
|
||||
import { LocateService } from './services/locate.service';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
|
|
|
|||
161
src/general/checkbox.scss
Normal file
161
src/general/checkbox.scss
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
// These are here just for codepen compatibility
|
||||
$primary: hsl(171, 100%, 41%);
|
||||
$link: hsl(217, 71%, 53%);
|
||||
$info: #47cf73; // hsl(120,73%,75%);
|
||||
|
||||
$success: hsl(141, 71%, 48%);
|
||||
$warning: hsl(48, 100%, 67%);
|
||||
$danger: hsl(348, 100%, 61%);
|
||||
$white: hsl(0, 0%, 100%);
|
||||
$black: hsl(0, 0%, 4%);
|
||||
$dark: hsl(0, 0%, 21%);
|
||||
$light: hsl(0, 0%, 96%);
|
||||
$text: $dark;
|
||||
$button-static-color: #7a7a7a !default;
|
||||
$button-static-background-color: #f5f5f5 !default;
|
||||
$button-static-border-color: #dbdbdb !default;
|
||||
$button-border-width: 1px !default;
|
||||
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
|
||||
$button-padding-horizontal: 0.75em !default;
|
||||
$radius-small: 3px;
|
||||
|
||||
$size-small: 0.75rem;
|
||||
$size-medium: 1.25rem;
|
||||
$size-large: 1.5rem;
|
||||
|
||||
@mixin button-small {
|
||||
font-size: $size-small;
|
||||
}
|
||||
@mixin button-medium {
|
||||
font-size: $size-medium;
|
||||
}
|
||||
@mixin button-large {
|
||||
font-size: $size-large;
|
||||
}
|
||||
|
||||
// Here starts the real code
|
||||
label.is-checkbox {
|
||||
background: $link;
|
||||
&.is-primary {
|
||||
background: $grey-light;
|
||||
}
|
||||
&.is-info {
|
||||
background: $info;
|
||||
}
|
||||
&.is-danger {
|
||||
background: $danger;
|
||||
}
|
||||
&.is-warning {
|
||||
background: $warning;
|
||||
color: $text;
|
||||
.checkmark:before {
|
||||
background: rgba($light, 0.8);
|
||||
}
|
||||
}
|
||||
&.is-success {
|
||||
background: $success;
|
||||
}
|
||||
&.is-static {
|
||||
background-color: $button-static-background-color;
|
||||
border-color: $button-static-border-color;
|
||||
color: $button-static-color;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
.checkmark:before {
|
||||
background: rgba($button-static-color, 0.3);
|
||||
}
|
||||
}
|
||||
border: $button-border-width solid transparent;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
// &.is-primary {
|
||||
// background: $primary;
|
||||
// }
|
||||
padding: $button-padding-vertical $button-padding-horizontal;
|
||||
border-radius: $radius-small;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
.checkmark {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
i {
|
||||
z-index: 1;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
border-radius: $radius-small;
|
||||
// background: rgba($dark, 0.3);
|
||||
// border: 1px solid rgba($dark, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
// &:checked ~ .checkmark {
|
||||
// color: inherit;
|
||||
// }
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
border-radius: 9999px;
|
||||
.checkmark:before {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0px 0px 9999px rgba(black, 0.05);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 0px 0px 9999px rgba(black, 0.1);
|
||||
}
|
||||
&.is-small {
|
||||
@include button-small;
|
||||
}
|
||||
&.is-medium {
|
||||
@include button-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include button-large;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&,
|
||||
&.is-small,
|
||||
&.is-medium,
|
||||
&.is-large {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
margin-left: -0.35em;
|
||||
margin-right: 0.35em;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
margin-right: 0.1875em;
|
||||
margin-left: calc(-01.375em - #{$button-border-width});
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
margin-left: 0.1875em;
|
||||
|
||||
margin-right: calc(-0.375em - #{$button-border-width});
|
||||
}
|
||||
&:first-child:last-child {
|
||||
margin-left: calc(-0.575em - #{$button-border-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { GeoJSON } from 'leaflet';
|
||||
|
||||
export class GeomonPlatform {
|
||||
|
||||
constructor(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
import { GeoJSON } from 'leaflet';
|
||||
|
||||
export interface Station {
|
||||
id: string;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
// 1. Import the initial variables
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
|
||||
|
||||
@import './general/checkbox.scss';
|
||||
|
||||
// 2. Set your own initial (brand) variables
|
||||
// Update the blue shade, used for links
|
||||
|
|
@ -36,12 +36,13 @@ $beige-lighter: #EFF0EB;
|
|||
$mouse-grey: #6c6e6b;
|
||||
$select-green: #03a678;
|
||||
|
||||
|
||||
// Update Bulma's global variables
|
||||
// Update the sans-serif font family
|
||||
$family-sans-serif: "Roboto", sans-serif;
|
||||
|
||||
// 3. Set the derived variables
|
||||
$grey-dark: $brown;
|
||||
// $grey-dark: $brown;
|
||||
$is-dark: $mouse-grey;
|
||||
// $grey-light: $beige-light;
|
||||
// $primary: $purple;
|
||||
|
|
@ -153,6 +154,7 @@ ul {
|
|||
@import "~bulma/sass/elements/box.sass";
|
||||
@import "~bulma/sass/elements/button.sass";
|
||||
@import "~bulma/sass/elements/container.sass";
|
||||
@import "~bulma/sass/elements/content.sass";
|
||||
@import "~bulma/sass/elements/title.sass";
|
||||
@import "~bulma/sass/elements/icon.sass";
|
||||
@import "~bulma/sass/form/_all.sass";
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue