From dae42360323d36f68d66fe86a75ec0dedffc3274 Mon Sep 17 00:00:00 2001
From: = <lukas.haase@mni.thm.de>
Date: Mon, 4 Nov 2019 15:34:31 +0100
Subject: [PATCH] WIP set colors of Mat-Slider by Theme, ars-slider and
ars-slider-comb for extra icons
---
projects/ars/src/lib/ars.module.ts | 10 +++-
.../src/lib/components/io/slider/ArsSlider.ts | 54 ++++++++++++++++++-
.../ars-slider-comb.component.html | 7 +++
.../ars-slider-comb.component.scss | 23 ++++++++
.../ars-slider-comb.component.spec.ts | 25 +++++++++
.../ars-slider-comb.component.ts | 35 ++++++++++++
src/app/app.component.html | 5 ++
src/app/app.module.ts | 6 ++-
src/styles.scss | 10 ++++
9 files changed, 169 insertions(+), 6 deletions(-)
create mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html
create mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss
create mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts
create mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts
diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index 665c5758b..638e7649b 100644
--- a/projects/ars/src/lib/ars.module.ts
+++ b/projects/ars/src/lib/ars.module.ts
@@ -1,17 +1,23 @@
import { NgModule } from '@angular/core';
import { ArsComponent } from './ars.component';
import { ArsSlider } from './components/io/slider/ArsSlider';
+import { ArsSliderCombComponent } from './components/io/slider/ars-slider-comb/ars-slider-comb.component';
+import { MatButtonModule, MatIconModule } from '@angular/material';
@NgModule({
declarations: [
ArsComponent,
- ArsSlider
+ ArsSlider,
+ ArsSliderCombComponent
],
imports: [
+ MatIconModule,
+ MatButtonModule
],
exports: [
ArsComponent,
- ArsSlider
+ ArsSlider,
+ ArsSliderCombComponent
]
})
export class ArsModule { }
diff --git a/projects/ars/src/lib/components/io/slider/ArsSlider.ts b/projects/ars/src/lib/components/io/slider/ArsSlider.ts
index 94cc94b65..71c04a5d8 100644
--- a/projects/ars/src/lib/components/io/slider/ArsSlider.ts
+++ b/projects/ars/src/lib/components/io/slider/ArsSlider.ts
@@ -1,4 +1,5 @@
-import { Directive } from '@angular/core';
+import { AfterViewInit, Directive, Input, OnInit, Renderer2 } from '@angular/core';
+import { MatSlider } from '@angular/material';
@Directive({
@@ -6,6 +7,55 @@ import { Directive } from '@angular/core';
selector: '[ars-slider]'
})
// tslint:disable-next-line:directive-class-suffix
-export class ArsSlider {
+export class ArsSlider implements OnInit,AfterViewInit {
+
+ public static classes:Object={
+ 'mat-slider-wrapper':'',
+ 'mat-slider-track-wrapper':'rgba(127,127,127,0.5)',
+ 'mat-slider-track-background':'',
+ 'mat-slider-track-fill':'var(--on-surface)',
+ 'mat-slider-ticks-container':'',
+ 'mat-slider-ticks':'',
+ 'mat-slider-focus-ring':'var(--on-surface)',
+ 'mat-slider-thumb':'var(--on-surface)',
+ 'mat-slider-thumb-container':'var(--on-surface)',
+ 'mat-slider-thumb-label':'',
+ 'mat-slider-thumb-label-text':''
+ };
+
+ @Input() width:number;
+
+ private elem:HTMLInputElement;
+
+ constructor(private slider:MatSlider, private render:Renderer2) {
+ this.elem = slider._elementRef.nativeElement;
+ }
+
+ ngOnInit(){
+ }
+
+ ngAfterViewInit(){
+ Array.from(this.elem.getElementsByTagName('*')).forEach(e=>{
+ console.log(e.className);
+ if(ArsSlider.classes.hasOwnProperty(e.className)){
+ (<HTMLElement>e).style.background=ArsSlider.classes[e.className];
+ }
+ });
+ this.render.setStyle(this.elem,'height','48px');
+ this.render.setStyle(this.elem,'minHeight','48px');
+ this.render.setStyle(this.elem,'maxHeight','48px');
+ this.updateWidth();
+ }
+
+ public setWidth(width:number){
+ this.width=width;
+ this.updateWidth();
+ }
+
+ private updateWidth(){
+ this.render.setStyle(this.elem,'width',this.width+'px');
+ this.render.setStyle(this.elem,'minWidth',this.width+'px');
+ this.render.setStyle(this.elem,'maxWidth',this.width+'px');
+ }
}
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html
new file mode 100644
index 000000000..9d6b43141
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html
@@ -0,0 +1,7 @@
+
+<ng-container>
+ <mat-icon (click)="prev();">{{leftIcon}}</mat-icon>
+ <ng-content>
+ </ng-content>
+ <mat-icon (click)="next();">{{rightIcon}}</mat-icon>
+</ng-container>
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss
new file mode 100644
index 000000000..fb8fcc8c2
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss
@@ -0,0 +1,23 @@
+
+:host{
+ width:100%;
+ height:48px;
+ display:flex;
+ justify-content:space-between;
+ flex-direction:row;
+}
+
+mat-icon{
+ padding:12px 5px;
+ margin:0;
+ display:flex;
+ float:left;
+ flex-shrink:0;
+ -webkit-touch-callout:none;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none;
+}
+
+
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts
new file mode 100644
index 000000000..fdbb2555b
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArsSliderCombComponent } from './ars-slider-comb.component';
+
+describe('ArsSliderCombComponent', () => {
+ let component: ArsSliderCombComponent;
+ let fixture: ComponentFixture<ArsSliderCombComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ArsSliderCombComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ArsSliderCombComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts
new file mode 100644
index 000000000..3a11934b7
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts
@@ -0,0 +1,35 @@
+import { AfterViewInit, Component, ContentChild, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ArsSlider } from '../ArsSlider';
+import { MatIcon } from '@angular/material';
+
+@Component({
+ selector: 'ars-slider-comb',
+ templateUrl: './ars-slider-comb.component.html',
+ styleUrls: ['./ars-slider-comb.component.scss']
+})
+export class ArsSliderCombComponent implements OnInit,AfterViewInit {
+
+ @Input() width:number;
+ @Input() leftIcon:string='keyboard_arrow_left';
+ @Input() rightIcon:string='keyboard_arrow_right';
+ @ContentChild(ArsSlider) slider:ArsSlider;
+
+ constructor(private ref:ElementRef, private render:Renderer2) { }
+
+ ngOnInit() {
+ }
+
+ ngAfterViewInit(){
+ this.slider.setWidth(this.width-68);
+ if(this.width){
+ this.render.setStyle(this.ref.nativeElement,'width',this.width+'px');
+ }
+ }
+
+ private prev(){
+ }
+
+ private next(){
+ }
+
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c2246001e..147a782e0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -30,3 +30,8 @@
</button>
</div>
</div>
+<div class="testBox">
+ <ars-slider-comb [width]="150" [leftIcon]="'zoom_out'" [rightIcon]="'zoom_in'">
+ <mat-slider ars-slider [min]="0" [max]="100" [step]="1"></mat-slider>
+ </ars-slider-comb>
+</div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f8d6cfd94..4658e8da8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -58,6 +58,7 @@ import { HelpEnComponent } from '../assets/i18n/help/help-en';
import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.component';
import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
+import { ArsModule } from '../../projects/ars/src/lib/ars.module';
export function dialogClose(dialogResult: any) {
}
@@ -119,7 +120,7 @@ export function initializeApp(appConfig: AppConfig) {
sanitize: true
}
}),
- ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+ ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
@@ -127,7 +128,8 @@ export function initializeApp(appConfig: AppConfig) {
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ ArsModule
],
providers: [
/*AppConfig,
diff --git a/src/styles.scss b/src/styles.scss
index 938b1a88c..f13810a79 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -99,3 +99,13 @@ address {
height: 0px;
overflow: hidden;
}
+
+.testBox{
+ width:50%;
+ height:50%;
+ position: fixed;
+ left:0px;
+ top:25%;
+ z-index: 1000;
+ background-color: var(--surface);
+}
--
GitLab