From da2492e01787abcaeb6a47e7282cb6c64735cbfc Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 6 Oct 2020 08:22:10 +0200 Subject: [PATCH] Add fm-gradient-select --- projects/common/src/fm/common.module.ts | 14 +++-- .../gradient-select.component.html | 16 ++++++ .../gradient-select.component.scss | 55 +++++++++++++++++++ .../gradient-select.component.spec.ts | 25 +++++++++ .../gradient-select.component.ts | 54 ++++++++++++++++++ .../gradient/gradient.component.html | 0 .../gradient/gradient.component.scss | 0 .../gradient/gradient.component.spec.ts | 0 .../components/gradient/gradient.component.ts | 53 ++++++++++++++++++ .../src/fm/gradient/gradient.component.ts | 53 ------------------ projects/common/src/fm/models/gradient.ts | 11 ++++ 11 files changed, 224 insertions(+), 57 deletions(-) create mode 100644 projects/common/src/fm/components/gradient-select/gradient-select.component.html create mode 100644 projects/common/src/fm/components/gradient-select/gradient-select.component.scss create mode 100644 projects/common/src/fm/components/gradient-select/gradient-select.component.spec.ts create mode 100644 projects/common/src/fm/components/gradient-select/gradient-select.component.ts rename projects/common/src/fm/{ => components}/gradient/gradient.component.html (100%) rename projects/common/src/fm/{ => components}/gradient/gradient.component.scss (100%) rename projects/common/src/fm/{ => components}/gradient/gradient.component.spec.ts (100%) create mode 100644 projects/common/src/fm/components/gradient/gradient.component.ts delete mode 100644 projects/common/src/fm/gradient/gradient.component.ts create mode 100644 projects/common/src/fm/models/gradient.ts diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index 5f25f4b..56cb8d2 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -49,11 +49,13 @@ import { IUser } from './models/user'; import { IQueryState } from './models/query.state'; import { ICodeListItem } from './models/code.list.item'; import { IDataLayer } from './models/data.layer'; +import { IColor,IGradientstop} from './models/gradient'; import * as commonActions from './actions/app-common.actions'; import * as commonReducers from './reducers/app-common.reducer'; import * as commonEffects from './effects/app-common.effects'; import { SecureOAuthStorage} from './shared/secureOAuthStorage'; -import { GradientComponent } from './gradient/gradient.component'; +import { GradientComponent } from './components/gradient/gradient.component'; +import { GradientSelectComponent } from './components/gradient-select/gradient-select.component'; export { SafePipe, @@ -93,7 +95,9 @@ export { WeatherCurrentObservation, IJsonline, ISenMLItem, - IDataLayer + IDataLayer, + IColor, + IGradientstop }; @NgModule({ @@ -123,7 +127,8 @@ export { HasPackageDirective, HasClaimDirective, UserMenuComponent, - GradientComponent + GradientComponent, + GradientSelectComponent ], exports: [ NgbModule, @@ -144,7 +149,8 @@ export { HasPackageDirective, HasClaimDirective, UserMenuComponent, - GradientComponent + GradientComponent, + GradientSelectComponent ] }) export class AppCommonModule { diff --git a/projects/common/src/fm/components/gradient-select/gradient-select.component.html b/projects/common/src/fm/components/gradient-select/gradient-select.component.html new file mode 100644 index 0000000..edbad05 --- /dev/null +++ b/projects/common/src/fm/components/gradient-select/gradient-select.component.html @@ -0,0 +1,16 @@ +
+
+
{{selectedItem?.name}}
+ +
+
+
    +
  • +
    {{item?.name}}
    +
    +
    • +
+
Add gradient
+
+
+ diff --git a/projects/common/src/fm/components/gradient-select/gradient-select.component.scss b/projects/common/src/fm/components/gradient-select/gradient-select.component.scss new file mode 100644 index 0000000..f04a8c4 --- /dev/null +++ b/projects/common/src/fm/components/gradient-select/gradient-select.component.scss @@ -0,0 +1,55 @@ +.gradient-select { + position: relative; + width:30rem; + height: auto; +} + +.gradient-list { + position: absolute; + top:100%; + left:-0.15rem; + width:100%; + display: none; + + margin-left: 1px; + border-radius: 0.25rem; + border: 1px solid #ced4da; +} + +.gradient-list.visible { + display: block; + background-color: white; + +} + +li { + display: block; + overflow: hidden; + padding: 0.375rem .75rem; + border-bottom: 1px solid #ced4da; +} + +li:hover { + background-color: #ced4da; + //color:white; +} + +ul { + list-style: none; + padding: 0; + overflow: hidden; + overflow-y: auto; + max-height: 20rem; +} + +fm-gradient { + display: block; + height: 1.5rem; + position: relative; + border:1px solid white; +} + +.addGradient { + padding: 0.375rem .75rem; + border-top: 1px solid #ced4da; +} \ No newline at end of file diff --git a/projects/common/src/fm/components/gradient-select/gradient-select.component.spec.ts b/projects/common/src/fm/components/gradient-select/gradient-select.component.spec.ts new file mode 100644 index 0000000..3fc1cb5 --- /dev/null +++ b/projects/common/src/fm/components/gradient-select/gradient-select.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GradientSelectComponent } from './gradient-select.component'; + +describe('GradientSelectComponent', () => { + let component: GradientSelectComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GradientSelectComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GradientSelectComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/gradient-select/gradient-select.component.ts b/projects/common/src/fm/components/gradient-select/gradient-select.component.ts new file mode 100644 index 0000000..239b232 --- /dev/null +++ b/projects/common/src/fm/components/gradient-select/gradient-select.component.ts @@ -0,0 +1,54 @@ +import { Component, ChangeDetectorRef, Input,SimpleChanges,OnChanges, Output,EventEmitter } from '@angular/core'; +import { IItem } from '../../models/item'; + +@Component({ + selector: 'fm-gradient-select', + templateUrl: './gradient-select.component.html', + styleUrls: ['./gradient-select.component.scss'] +}) +export class GradientSelectComponent implements OnChanges { + + public listVisible:boolean = false; + @Input() showLabel:boolean = true; + @Input() gradientItems:IItem[]; + @Input() showAdd:boolean = false; + @Input() selectedItem:IItem; + @Output() onSelect:EventEmitter = new EventEmitter(); + @Output() onAdd:EventEmitter = new EventEmitter(); + + + constructor(private ref:ChangeDetectorRef) { + } + + ngOnChanges(changes:SimpleChanges) { + if(changes["gradientItems"]) { + this.gradientItems=changes["gradientItems"].currentValue; + this.selectedItem=this.selectedItem == null && this.gradientItems && this.gradientItems.length>0?this.gradientItems[0]:null; + this.ref.detectChanges(); + } + } + + handleToggleList() { + this.listVisible=!this.listVisible; + } + + handleSelect(item:IItem) { + this.selectedItem=item; + this.onSelect.emit(item); + } + + handleAdd(event:MouseEvent) { + event.preventDefault(); + this.onAdd.emit(event); + } + + isSelected(item:IItem):boolean { + if(this.selectedItem && this.selectedItem.data && this.selectedItem.data.gradient && item && item.data && item.data.gradient) { + let sid = JSON.stringify(this.selectedItem.data.gradient)+this.selectedItem.name; + let id = JSON.stringify( item.data.gradient) + item.name; + return sid == id; + } + return false; + } + +} diff --git a/projects/common/src/fm/gradient/gradient.component.html b/projects/common/src/fm/components/gradient/gradient.component.html similarity index 100% rename from projects/common/src/fm/gradient/gradient.component.html rename to projects/common/src/fm/components/gradient/gradient.component.html diff --git a/projects/common/src/fm/gradient/gradient.component.scss b/projects/common/src/fm/components/gradient/gradient.component.scss similarity index 100% rename from projects/common/src/fm/gradient/gradient.component.scss rename to projects/common/src/fm/components/gradient/gradient.component.scss diff --git a/projects/common/src/fm/gradient/gradient.component.spec.ts b/projects/common/src/fm/components/gradient/gradient.component.spec.ts similarity index 100% rename from projects/common/src/fm/gradient/gradient.component.spec.ts rename to projects/common/src/fm/components/gradient/gradient.component.spec.ts diff --git a/projects/common/src/fm/components/gradient/gradient.component.ts b/projects/common/src/fm/components/gradient/gradient.component.ts new file mode 100644 index 0000000..986f326 --- /dev/null +++ b/projects/common/src/fm/components/gradient/gradient.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core'; +import { IItem} from '../../models/item' +import { IGradientstop } from '../../models/gradient'; + + + +@Component({ + selector: 'fm-gradient', + templateUrl: './gradient.component.html', + styleUrls: ['./gradient.component.scss'] +}) +export class GradientComponent implements OnInit,OnChanges { + + @Input() gradientItem:IItem; + public gradientStyle:any = {}; + + constructor(private ref: ChangeDetectorRef) { } + + getGradientStyle(item:IItem):any { + if(item.data && item.data.gradient) { + let gradient = item.data.gradient as IGradientstop[]; + let gd = '{ "background": "linear-gradient(to right,'; + for(var i=0;i0) gd+=","; + gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`; + gd +=` ${gs.relativestop*100}%` + } + gradient.forEach((gs) => { + }); + gd+=')"}'; + + return JSON.parse(gd); + } + } + + ngOnInit(): void { + if(this.gradientItem && this.gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") { + this.gradientStyle = this.getGradientStyle(this.gradientItem); + } + } + + ngOnChanges(changes: SimpleChanges) { + if(changes['gradientItem']) { + let gradientItem = changes['gradientItem'].currentValue; + if(gradientItem && gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") { + this.gradientStyle = this.getGradientStyle(changes['gradientItem'].currentValue); + this.ref.markForCheck(); + } + } + } + +} diff --git a/projects/common/src/fm/gradient/gradient.component.ts b/projects/common/src/fm/gradient/gradient.component.ts deleted file mode 100644 index c8bd266..0000000 --- a/projects/common/src/fm/gradient/gradient.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { IItem} from '../models/item' - -interface IColor { - red: number, - green: number, - blue: number, - alpha: number, -} - -interface IGradientstop { - relativestop: number, - color: IColor -} - -@Component({ - selector: 'fm-gradient', - templateUrl: './gradient.component.html', - styleUrls: ['./gradient.component.scss'] -}) -export class GradientComponent implements OnInit { - - @Input() item:IItem; - public gradientStyle:any = {}; - - constructor() { } - - getGradientStyle(item:IItem):any { - if(item.data && item.data.gradient) { - let gradient = item.data.gradient as IGradientstop[]; - let gd = '{ "background": "linear-gradient(to right,'; - for(var i=0;i0) gd+=","; - gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`; - gd +=` ${gs.relativestop*100}%` - } - gradient.forEach((gs) => { - }); - gd+=')"}'; - - return JSON.parse(gd); - } - } - - ngOnInit(): void { - if(this.item.itemType == "vnd.farmmaps.itemtype.gradient") { - if(this.item) { - this.gradientStyle = this.getGradientStyle(this.item); - } - } - } -} diff --git a/projects/common/src/fm/models/gradient.ts b/projects/common/src/fm/models/gradient.ts new file mode 100644 index 0000000..09db811 --- /dev/null +++ b/projects/common/src/fm/models/gradient.ts @@ -0,0 +1,11 @@ +export interface IColor { + red: number, + green: number, + blue: number, + alpha: number, + } + +export interface IGradientstop { + relativestop: number, + color: IColor + } \ No newline at end of file