From c6a17dc2d225842e259749dbd0542d3793da22ba Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Thu, 24 Oct 2019 11:22:10 +0300 Subject: [PATCH 01/42] feat(slider): poc ticks implementation Closes #4594 --- .../src/lib/slider/slider.component.html | 12 ++ .../src/lib/slider/slider.component.ts | 147 +++++++++++++++++- src/app/slider/slider.sample.html | 23 +-- src/app/slider/slider.sample.scss | 9 ++ src/app/slider/slider.sample.ts | 11 +- 5 files changed, 186 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 3e217a3ee44..238012f6d35 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -1,6 +1,18 @@
+ + + + + {{tickLabel(idx)}} + +
{ }; @@ -81,6 +90,8 @@ export class IgxSliderComponent implements private _continuous = false; private _disabled = false; private _step = 1; + private _primaryTicks = 0; + private _secondaryTicks = 0; private _labels = new Array(); private _type = SliderType.SLIDER; @@ -88,7 +99,8 @@ export class IgxSliderComponent implements private _destroyer$ = new Subject(); private _indicatorsDestroyer$ = new Subject(); private _indicatorsTimer: Observable; - + private _observer: ResizeObserver; + private _resizeNotify = new Subject(); private _onChangeCallback: (_: any) => void = noop; private _onTouchedCallback: () => void = noop; @@ -133,6 +145,11 @@ export class IgxSliderComponent implements return this.labelRefs.find(label => label.type === SliderHandle.TO); } + /** + * hidden + */ + public width: number; + /** * @hidden */ @@ -636,6 +653,45 @@ export class IgxSliderComponent implements } } + @Input() + public get primaryTicks() { + return this._primaryTicks; + } + + public set primaryTicks(val: number) { + if (val <= 0) { + return; + } + + this._primaryTicks = val; + } + + @Input() + public get secondaryTicks() { + return this._secondaryTicks; + } + + public set secondaryTicks(val: number) { + if (val <= 0 ) { + return; + } + + this._secondaryTicks = val; + } + + @Input() + public primaryTickLabels = true; + + @Input() + public secondaryTickLabels = false; + + @Input() + public tickLabelsOrientation = TickLabelsOrientation.horizontal; + + public get isVertical() { + return this.tickLabelsOrientation === TickLabelsOrientation.vertical; + } + /** * This event is emitted when user has stopped interacting the thumb and value is changed. * ```typescript @@ -651,7 +707,11 @@ export class IgxSliderComponent implements public onValueChange = new EventEmitter(); - constructor(private renderer: Renderer2, private _el: ElementRef, private _cdr: ChangeDetectorRef) { } + constructor( + private renderer: Renderer2, + private _el: ElementRef, + private _cdr: ChangeDetectorRef, + private _zone: NgZone) { } /** * @hidden @@ -835,12 +895,33 @@ export class IgxSliderComponent implements return !!(this.labels && this.labels.length > 1); } + /** + * @hidden + */ + public get ticksStep() { + return this.width ? (this.width / this.ticksLength) + + (this.width / this.ticksLength / (this.ticksLength - 1)) : 0; + } + + /** + * @hidden + */ + public get ticksLength() { + return this.primaryTicks > 0 ? (this.primaryTicks * this.secondaryTicks) + this.primaryTicks + 1 : + this.secondaryTicks > 0 ? this.secondaryTicks + 1 : 0; + } + /** * @hidden */ public ngOnInit() { this.sliderSetup(); - + this._resizeNotify.pipe(takeUntil(this._destroyer$)) + .subscribe(() => { + this._zone.run(() => { + this.notifyChanges(); + }); + }); // Set track travel zone this._pMin = this.valueToFraction(this.lowerBound) || 0; this._pMax = this.valueToFraction(this.upperBound) || 1; @@ -865,6 +946,11 @@ export class IgxSliderComponent implements this.subscribeTo(thumbFrom, this.thumbChanged.bind(this)); this.changeThumbFocusableState(this.disabled); }); + + this._zone.runOutsideAngular(() => { + this._observer = new ResizeObserver(() => this._resizeNotify.next()); + this._observer.observe(this._el.nativeElement); + }) } /** @@ -977,10 +1063,52 @@ export class IgxSliderComponent implements this.toggleSliderIndicators(); } + /** + * @hidden + */ public onHoverChange(state: boolean) { return state ? this.showSliderIndicators() : this.hideSliderIndicators(); } + /** + * @hidden + */ + public tickIndention(idx: number) { + let indention = idx * this.ticksStep; + if (indention === this.width) { + indention -= 1; + } + return this.ticksStep * idx === 0 ? 1 : indention; + } + + /** + * @hidden + */ + public tickPosition(idx: number) { + const primaryTicksPosition = 17.5; + const secondaryTicksPosition = 10; + return this.primaryTicks <= 0 ? secondaryTicksPosition : + idx % (this.secondaryTicks + 1) === 0 ? primaryTicksPosition : secondaryTicksPosition; + } + + /** + * @hidden + */ + public tickWidth(idx: number) { + const primaryTicksWidth = 25; + const secondaryTicksWidth = 10; + return this.primaryTicks <= 0 ? secondaryTicksWidth : + idx % (this.secondaryTicks + 1) === 0 ? primaryTicksWidth : secondaryTicksWidth; + } + + /** + * @hidden + */ + public tickLabel(idx: number) { + const labelStep = this.maxValue / (this.ticksLength - 1); + return (labelStep * idx).toFixed(2); + } + private swapThumb(value: IRangeSliderValue) { if (this.thumbFrom.isActive) { value.upper = this.upperValue; @@ -1109,7 +1237,7 @@ export class IgxSliderComponent implements this.renderer.setStyle(this.ticks.nativeElement, 'background', renderCallbackExecution); } -private showSliderIndicators() { + private showSliderIndicators() { if (this.disabled) { return; } @@ -1255,6 +1383,15 @@ private showSliderIndicators() { private emitValueChanged(oldValue: number | IRangeSliderValue) { this.onValueChange.emit({ oldValue, value: this.value }); } + + /** + * @hidden + * resizeObesrver callback + */ + private notifyChanges() { + this.width = this._el.nativeElement.getBoundingClientRect().width; + this._cdr.markForCheck(); + } } /** diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index e947ce981e8..a9c2dea4777 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -1,17 +1,20 @@ -
+

Slider

- +
+
+ +
-
+ + -
+ + diff --git a/src/app/slider/slider.sample.scss b/src/app/slider/slider.sample.scss index ea713698508..e8765a6e5ce 100644 --- a/src/app/slider/slider.sample.scss +++ b/src/app/slider/slider.sample.scss @@ -4,3 +4,12 @@ @include ellipsis(); max-width: 50px; } + +.sample-component { + position: relative; + width: 100%; +} + +igx-slider { + width: 50%; +} diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index e00a45ad087..7ab37b925e5 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { SliderType } from 'igniteui-angular'; +import { SliderType, TickLabelsOrientation } from 'igniteui-angular'; class Task { title: string; @@ -18,6 +18,7 @@ class Task { }) export class SliderSampleComponent { sliderType: SliderType = SliderType.RANGE; + labelOrientaion = TickLabelsOrientation.vertical; rangeValue = { lower: 30, @@ -29,5 +30,13 @@ export class SliderSampleComponent { upper: 5 }; + changeLabelOrientation() { + if (this.labelOrientaion === TickLabelsOrientation.vertical) { + this.labelOrientaion = TickLabelsOrientation.horizontal; + } else { + this.labelOrientaion = TickLabelsOrientation.vertical; + }; + } + task: Task = new Task('Implement new app', 30); } From e7dafcebf3a7938a9973956e34f6181f9da3cf3c Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 30 Oct 2019 17:01:58 +0200 Subject: [PATCH 02/42] feat(slider): set ticks and labels dimensions and indentions Closes #4594 --- .../src/lib/slider/slider.component.html | 30 ++++-- .../src/lib/slider/slider.component.ts | 99 ++++++++++++++----- src/app/slider/slider.sample.html | 8 +- src/app/slider/slider.sample.scss | 2 + src/app/slider/slider.sample.ts | 7 +- 5 files changed, 104 insertions(+), 42 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 29e74b41c86..9e544561188 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -1,15 +1,29 @@
-
-
- + +
+
+ + + + + {{tickLabel(idx)}} diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 115e5c5fbfa..0774a04837d 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -18,7 +18,7 @@ import { EditorProvider } from '../core/edit-provider'; import { DeprecateProperty } from '../core/deprecateDecorators'; import { IgxSliderThumbComponent } from './thumb/thumb-slider.component'; import { Subject, merge, Observable, timer } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { takeUntil, retry } from 'rxjs/operators'; import { SliderHandle, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, @@ -37,6 +37,15 @@ export enum TickLabelsOrientation { vertical } +/** + * Slider Ticks orientation + */ +export enum TicksOrientation { + top, + bottom, + mirror +} + const noop = () => { }; @@ -90,8 +99,14 @@ export class IgxSliderComponent implements private _continuous = false; private _disabled = false; private _step = 1; + + // ticks private _primaryTicks = 0; private _secondaryTicks = 0; + private _ticksContainer = 0; + private _primaryTicksWidth = 16; + private _secondaryTicksWidth = 8; + private _defaultTickYOffset = 4; private _labels = new Array(); private _type = SliderType.SLIDER; @@ -146,9 +161,11 @@ export class IgxSliderComponent implements } /** - * hidden + * @hidden */ - public width: number; + public get ticksContainer() { + return this._ticksContainer; + } /** * @hidden @@ -687,11 +704,24 @@ export class IgxSliderComponent implements @Input() public secondaryTickLabels = false; + @Input() + public ticksOrientation: TicksOrientation = TicksOrientation.bottom; + @Input() public tickLabelsOrientation = TickLabelsOrientation.horizontal; - public get isVertical() { - return this.tickLabelsOrientation === TickLabelsOrientation.vertical; + /** + * @hidden + */ + public get isHorizontal() { + return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; + } + + /** + * @hidden + */ + public get tickLabelOrientation() { + return this.isHorizontal ? 'rotate(0)' : 'rotate(90)'; } /** @@ -901,16 +931,20 @@ export class IgxSliderComponent implements * @hidden */ public get ticksStep() { - return this.width ? (this.width / this.ticksLength) + - (this.width / this.ticksLength / (this.ticksLength - 1)) : 0; + const ticksStep = this.ticksContainer / this.ticksLength; + const stepUnit = ticksStep / (this.ticksLength - 1); + return this.ticksContainer ? + ticksStep + stepUnit + : 0; } /** * @hidden */ public get ticksLength() { - return this.primaryTicks > 0 ? (this.primaryTicks * this.secondaryTicks) + this.primaryTicks + 1 : - this.secondaryTicks > 0 ? this.secondaryTicks + 1 : 0; + return this.primaryTicks > 0 ? + (this.primaryTicks * this.secondaryTicks) + this.primaryTicks + 1 : + this.secondaryTicks > 0 ? this.secondaryTicks + 1 : 0; } /** @@ -1075,32 +1109,27 @@ export class IgxSliderComponent implements /** * @hidden */ - public tickIndention(idx: number) { - let indention = idx * this.ticksStep; - if (indention === this.width) { - indention -= 1; - } - return this.ticksStep * idx === 0 ? 1 : indention; + public tickXOffset(idx: number) { + return idx * this.ticksStep - 1; } /** * @hidden */ - public tickPosition(idx: number) { - const primaryTicksPosition = 17.5; - const secondaryTicksPosition = 10; - return this.primaryTicks <= 0 ? secondaryTicksPosition : - idx % (this.secondaryTicks + 1) === 0 ? primaryTicksPosition : secondaryTicksPosition; + public tickYOffset(idx: number) { + const trackHeight = this.track.nativeElement.offsetHeight; + const primaryTickOffset = this._primaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; + const secondaryTickOffset = this._secondaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; + return this.primaryTicks <= 0 ? secondaryTickOffset : + idx % (this.secondaryTicks + 1) === 0 ? primaryTickOffset : secondaryTickOffset; } /** * @hidden */ - public tickWidth(idx: number) { - const primaryTicksWidth = 25; - const secondaryTicksWidth = 10; - return this.primaryTicks <= 0 ? secondaryTicksWidth : - idx % (this.secondaryTicks + 1) === 0 ? primaryTicksWidth : secondaryTicksWidth; + public strokeWidth(idx: number) { + return this.primaryTicks <= 0 ? `${this._secondaryTicksWidth}px` : + idx % (this.secondaryTicks + 1) === 0 ? `${this._primaryTicksWidth}px` : `${this._secondaryTicksWidth}px`; } /** @@ -1111,6 +1140,24 @@ export class IgxSliderComponent implements return (labelStep * idx).toFixed(2); } + /** + * @hidden + */ + public tickLabelXOffset(index: number) { + // return this.isHorizontal ? this.tickXOffset(index) : this.tickYOffset(index) * 3; + return this.tickXOffset(index); + } + + /** + * @hidden + */ + public tickLabelYOffset(index: number) { + // const labelOffset = index % (this.secondaryTicks + 1) === 0 ? 8 : 16; + // return this.isHorizontal ? this.tickYOffset(index) + this._primaryTicksWidth + labelOffset : - (this.tickXOffset(index) - 5); + const labelOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + return this.tickYOffset(index) + this._primaryTicksWidth + 8 + labelOffset; + } + private swapThumb(value: IRangeSliderValue) { if (this.thumbFrom.isActive) { value.upper = this.upperValue; @@ -1395,7 +1442,7 @@ export class IgxSliderComponent implements * resizeObesrver callback */ private notifyChanges() { - this.width = this._el.nativeElement.getBoundingClientRect().width; + this._ticksContainer = this._el.nativeElement.getBoundingClientRect().width; this._cdr.markForCheck(); } } diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index 574f1f40276..7534f3c7948 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -4,14 +4,14 @@
--> +

Slider

-

Slider

- +
-
+
- - - - - {{tickLabel(idx)}} - - +
{ }; @@ -104,9 +90,6 @@ export class IgxSliderComponent implements private _primaryTicks = 0; private _secondaryTicks = 0; private _ticksContainer = 0; - private _primaryTicksWidth = 16; - private _secondaryTicksWidth = 8; - private _defaultTickYOffset = 4; private _labels = new Array(); private _type = SliderType.SLIDER; @@ -120,12 +103,6 @@ export class IgxSliderComponent implements private _onChangeCallback: (_: any) => void = noop; private _onTouchedCallback: () => void = noop; - /** - * @hidden - */ - @ViewChild('track', { static: true }) - private track: ElementRef; - /** * @hidden */ @@ -160,6 +137,13 @@ export class IgxSliderComponent implements return this.labelRefs.find(label => label.type === SliderHandle.TO); } + /** + * @hidden + */ + @ViewChild('track', { static: true }) + public trackRef: ElementRef; + + /** * @hidden */ @@ -710,20 +694,6 @@ export class IgxSliderComponent implements @Input() public tickLabelsOrientation = TickLabelsOrientation.horizontal; - /** - * @hidden - */ - public get isHorizontal() { - return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; - } - - /** - * @hidden - */ - public get tickLabelOrientation() { - return this.isHorizontal ? 'rotate(0)' : 'rotate(90)'; - } - /** * This event is emitted when user has stopped interacting the thumb and value is changed. * ```typescript @@ -927,17 +897,6 @@ export class IgxSliderComponent implements return !!(this.labels && this.labels.length > 1); } - /** - * @hidden - */ - public get ticksStep() { - const ticksStep = this.ticksContainer / this.ticksLength; - const stepUnit = ticksStep / (this.ticksLength - 1); - return this.ticksContainer ? - ticksStep + stepUnit - : 0; - } - /** * @hidden */ @@ -1106,57 +1065,7 @@ export class IgxSliderComponent implements return state ? this.showSliderIndicators() : this.hideSliderIndicators(); } - /** - * @hidden - */ - public tickXOffset(idx: number) { - return idx * this.ticksStep - 1; - } - - /** - * @hidden - */ - public tickYOffset(idx: number) { - const trackHeight = this.track.nativeElement.offsetHeight; - const primaryTickOffset = this._primaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; - const secondaryTickOffset = this._secondaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; - return this.primaryTicks <= 0 ? secondaryTickOffset : - idx % (this.secondaryTicks + 1) === 0 ? primaryTickOffset : secondaryTickOffset; - } - /** - * @hidden - */ - public strokeWidth(idx: number) { - return this.primaryTicks <= 0 ? `${this._secondaryTicksWidth}px` : - idx % (this.secondaryTicks + 1) === 0 ? `${this._primaryTicksWidth}px` : `${this._secondaryTicksWidth}px`; - } - - /** - * @hidden - */ - public tickLabel(idx: number) { - const labelStep = this.maxValue / (this.ticksLength - 1); - return (labelStep * idx).toFixed(2); - } - - /** - * @hidden - */ - public tickLabelXOffset(index: number) { - // return this.isHorizontal ? this.tickXOffset(index) : this.tickYOffset(index) * 3; - return this.tickXOffset(index); - } - - /** - * @hidden - */ - public tickLabelYOffset(index: number) { - // const labelOffset = index % (this.secondaryTicks + 1) === 0 ? 8 : 16; - // return this.isHorizontal ? this.tickYOffset(index) + this._primaryTicksWidth + labelOffset : - (this.tickXOffset(index) - 5); - const labelOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - return this.tickYOffset(index) + this._primaryTicksWidth + 8 + labelOffset; - } private swapThumb(value: IRangeSliderValue) { if (this.thumbFrom.isActive) { @@ -1385,9 +1294,9 @@ export class IgxSliderComponent implements trackLeftIndention = Math.round((1 / positionGap * fromPosition) * 100); } - this.renderer.setStyle(this.track.nativeElement, 'transform', `scaleX(${positionGap}) translateX(${trackLeftIndention}%)`); + this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${positionGap}) translateX(${trackLeftIndention}%)`); } else { - this.renderer.setStyle(this.track.nativeElement, 'transform', `scaleX(${toPosition})`); + this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${toPosition})`); } } @@ -1456,13 +1365,15 @@ export class IgxSliderComponent implements IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxSliderThumbComponent, - IgxThumbLabelComponent], + IgxThumbLabelComponent, + IgxTicksComponent], exports: [ IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxSliderThumbComponent, - IgxThumbLabelComponent], + IgxThumbLabelComponent, + IgxTicksComponent], imports: [CommonModule] }) export class IgxSliderModule { diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html new file mode 100644 index 00000000000..8681eb70aef --- /dev/null +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -0,0 +1,15 @@ + + + + + {{tickLabel(idx)}} + + diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts new file mode 100644 index 00000000000..98d70ab415c --- /dev/null +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -0,0 +1,134 @@ +import { Component, Input, ElementRef, HostBinding } from '@angular/core'; +import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; + +@Component({ + selector: 'igx-ticks', + templateUrl: 'ticks.component.html', + styles: [` + :host { + position: absolute; + height: 100px; + } + }`] +}) +export class IgxTicksComponent { + private _primaryTicksWidth = 16; + private _secondaryTicksWidth = 8; + private _defaultTickYOffset = 4; + + @Input() + public primaryTicks: number; + + @Input() + public secondaryTicks: number; + + @Input() + public primaryTickLabels = true; + + @Input() + public secondaryTickLabels = false; + + @Input() + public ticksOrientation: TicksOrientation = TicksOrientation.bottom; + + @Input() + public tickLabelsOrientation = TickLabelsOrientation.horizontal; + + @Input() + public ticksContainer: number; + + @Input() + public track: ElementRef; + + @Input() + public maxValue: number; + + /** + * @hidden + */ + public get ticksStep() { + const ticksStep = this.ticksContainer / this.ticksLength; + const stepUnit = ticksStep / (this.ticksLength - 1); + return this.ticksContainer ? + ticksStep + stepUnit + : 0; + } + + /** + * @hidden + */ + public get isHorizontal() { + return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; + } + + /** + * @hidden + */ + public get tickLabelOrientation() { + return this.isHorizontal ? 'rotate(0)' : 'rotate(90)'; + } + + /** + * @hidden + */ + public get ticksLength() { + return this.primaryTicks > 0 ? + (this.primaryTicks * this.secondaryTicks) + this.primaryTicks + 1 : + this.secondaryTicks > 0 ? this.secondaryTicks + 1 : 0; + } + + /** + * @hidden + */ + public tickXOffset(idx: number) { + return idx * this.ticksStep - 1; + } + + /** + * @hidden + */ + public tickYOffset(idx: number) { + const trackHeight = this.track.nativeElement.offsetHeight; + const primaryTickOffset = this._primaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; + const secondaryTickOffset = this._secondaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; + return this.primaryTicks <= 0 ? secondaryTickOffset : + idx % (this.secondaryTicks + 1) === 0 ? primaryTickOffset : secondaryTickOffset; + } + + /** + * @hidden + */ + public strokeWidth(idx: number) { + return this.primaryTicks <= 0 ? `${this._secondaryTicksWidth}px` : + idx % (this.secondaryTicks + 1) === 0 ? `${this._primaryTicksWidth}px` : `${this._secondaryTicksWidth}px`; + } + + /** + * @hidden + */ + public tickLabel(idx: number) { + const labelStep = this.maxValue / (this.ticksLength - 1); + return (labelStep * idx).toFixed(2); + } + + /** + * @hidden + */ + public tickLabelXOffset(index: number) { + // return this.isHorizontal ? this.tickXOffset(index) : this.tickYOffset(index) * 3; + const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + return this.isHorizontal ? this.tickXOffset(index) : this.tickYOffset(index) + this._primaryTicksWidth + 8 + diffTicksOffset; + } + + /** + * @hidden + */ + public tickLabelYOffset(index: number) { + // const labelOffset = index % (this.secondaryTicks + 1) === 0 ? 8 : 16; + // return this.isHorizontal ? this.tickYOffset(index) + this._primaryTicksWidth + labelOffset : - (this.tickXOffset(index) - 5); + const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + // const direction = this.isHorizontal ? this.tickYOffset(index) : this.tickXOffset(index); + return this.isHorizontal ? this.tickYOffset(index) + this._primaryTicksWidth + 8 + diffTicksOffset : -this.tickXOffset(index); + } + +} diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index 7534f3c7948..4a754fd85cb 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -9,9 +9,9 @@

Slider

- +

Slider

- +
diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index 46e6d60a130..124c86713e6 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -57,10 +57,12 @@ export class SliderSampleComponent { this._upperValue = this.labels[(evt.value as IRangeSliderValue).upper]; } public changeLabelOrientation() { - if (this.labelOrientaion === TickLabelsOrientation.vertical) { - this.labelOrientaion = TickLabelsOrientation.horizontal; + if (this.labelOrientaion === TickLabelsOrientation.horizontal) { + this.labelOrientaion = TickLabelsOrientation.toptobottom; + } else if (this.labelOrientaion === TickLabelsOrientation.toptobottom) { + this.labelOrientaion = TickLabelsOrientation.bottomtotop; } else { - this.labelOrientaion = TickLabelsOrientation.vertical; + this.labelOrientaion = TickLabelsOrientation.horizontal; } } From ac86fbe495ce900bf2b4286e90f528ea622c79e0 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 6 Nov 2019 10:24:50 +0200 Subject: [PATCH 05/42] feat(slider): integrate tick labels with labels feat Closes #4594 --- .../src/lib/slider/slider.common.ts | 20 +++++----- .../src/lib/slider/slider.component.html | 37 ++++++++++++++----- .../src/lib/slider/slider.component.ts | 13 +++++-- .../src/lib/slider/ticks/tick.pipe.ts | 20 ++++++++++ .../src/lib/slider/ticks/ticks.component.ts | 34 +++++++++++++---- src/app/slider/slider.sample.html | 6 ++- src/app/slider/slider.sample.ts | 22 +++++++---- 7 files changed, 110 insertions(+), 42 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts diff --git a/projects/igniteui-angular/src/lib/slider/slider.common.ts b/projects/igniteui-angular/src/lib/slider/slider.common.ts index 8c74b2d1834..b7b14fff9cb 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.common.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.common.ts @@ -33,6 +33,16 @@ export class IgxThumbFromTemplateDirective {} }) export class IgxThumbToTemplateDirective {} +export interface IRangeSliderValue { + lower: number; + upper: number; +} + +export interface ISliderValueChangeEventArgs extends IBaseEventArgs { + oldValue: number | IRangeSliderValue; + value: number | IRangeSliderValue; +} + export enum SliderType { /** * Slider with single thumb. @@ -49,16 +59,6 @@ export enum SliderHandle { TO } -export interface IRangeSliderValue { - lower: number; - upper: number; -} - -export interface ISliderValueChangeEventArgs extends IBaseEventArgs { - oldValue: number | IRangeSliderValue; - value: number | IRangeSliderValue; -} - /** * Slider Tick labels Orientation */ diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 902d17ccfc1..fc86c8ec8b5 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -11,18 +11,35 @@ text-anchor="middle">{{tickLabel(idx)}} --> + + +
- + +
{ }; @@ -642,11 +643,11 @@ export class IgxSliderComponent implements @Input() public set value(value: number | IRangeSliderValue) { if (!this.isRange) { - this.upperValue = value as number; + this.upperValue = value as number - (value as number % this.step); } else { value = this.validateInitialValue(value as IRangeSliderValue); - this.upperValue = (value as IRangeSliderValue).upper; - this.lowerValue = (value as IRangeSliderValue).lower; + this.upperValue = (value as IRangeSliderValue).upper - ((value as IRangeSliderValue).upper % this.step); + this.lowerValue = (value as IRangeSliderValue).lower - ((value as IRangeSliderValue).lower % this.step); } this._onChangeCallback(this.value); @@ -658,6 +659,9 @@ export class IgxSliderComponent implements @Input() public get primaryTicks() { + if (this.labelsViewEnabled) { + return this._primaryTicks = this.labels.length - 1; + } return this._primaryTicks; } @@ -1366,7 +1370,8 @@ export class IgxSliderComponent implements IgxThumbToTemplateDirective, IgxSliderThumbComponent, IgxThumbLabelComponent, - IgxTicksComponent], + IgxTicksComponent, + IgxTickLabelsPipe], exports: [ IgxSliderComponent, IgxThumbFromTemplateDirective, diff --git a/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts b/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts new file mode 100644 index 00000000000..fe347e8cfc3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts @@ -0,0 +1,20 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'spreadTickLabels' +}) +export class IgxTickLabelsPipe implements PipeTransform { + + + public transform(labels: Array, secondaryTicks: number) { + let result = []; + labels.forEach(item => { + result.push(item); + for (let i = 0; i < secondaryTicks; i++) { + result.push(''); + } + }); + + return result; + } +} diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 99c8e224e6e..ec3e9c41452 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ElementRef, HostBinding } from '@angular/core'; +import { Component, Input, ElementRef, AfterViewInit } from '@angular/core'; import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; @Component({ @@ -11,7 +11,7 @@ import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; } }`] }) -export class IgxTicksComponent { +export class IgxTicksComponent implements AfterViewInit { private _primaryTicksWidth = 16; private _secondaryTicksWidth = 8; private _defaultTickYOffset = 4; @@ -43,6 +43,19 @@ export class IgxTicksComponent { @Input() public maxValue: number; + @Input() + public labelsViewEnabled: boolean; + + @Input() + public labels: Array; + + @Input() + public orientation: TicksOrientation; + + public ngAfterViewInit() { + + } + /** * @hidden */ @@ -96,10 +109,12 @@ export class IgxTicksComponent { */ public tickYOffset(idx: number) { const trackHeight = this.track.nativeElement.offsetHeight; - const primaryTickOffset = this._primaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; - const secondaryTickOffset = this._secondaryTicksWidth / 2 + trackHeight + this._defaultTickYOffset; - return this.primaryTicks <= 0 ? secondaryTickOffset : + const primaryTickOffset = this._primaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; + const secondaryTickOffset = this._secondaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; + const yOffset = this.primaryTicks <= 0 ? secondaryTickOffset : idx % (this.secondaryTicks + 1) === 0 ? primaryTickOffset : secondaryTickOffset; + + return this.orientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; } /** @@ -114,10 +129,14 @@ export class IgxTicksComponent { * @hidden */ public tickLabel(idx: number) { + if (this.labelsViewEnabled) { + return this.labels[idx]; + } + const labelStep = this.maxValue / (this.ticksLength - 1); const labelVal = labelStep * idx; - return labelVal % 10 === 0 ? labelVal : labelVal.toFixed(2); + return labelVal.toFixed(2); } /** @@ -138,7 +157,7 @@ export class IgxTicksComponent { const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; const verticalDir = this.toToBottomLabel ? -1 : 1; return this.horizontalLabel ? - this.tickYOffset(index) + this._primaryTicksWidth + diffTicksOffset : + Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset : (-this.tickXOffset(index)) * verticalDir; } @@ -155,5 +174,4 @@ export class IgxTicksComponent { public dominantBaseline() { return this.horizontalLabel ? 'hanging' : this.toToBottomLabel ? 'central' : 'middle'; } - } diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index 4505c7f4b7d..baa8c289f4b 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -6,14 +6,16 @@
-->

Slider

- + [secondaryTicks]="3">
+
diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index 124c86713e6..07a8c9f1d02 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -22,12 +22,13 @@ export class SliderSampleComponent { public labelOrientaion = TickLabelsOrientation.horizontal; public sliderType: SliderType = SliderType.RANGE; - public labels = new Array(); + public labelsDates = new Array(); public task: Task = new Task('Implement new app', 30); + public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; public rangeValue = { - lower: 30, - upper: 60 + lower: 34, + upper: 67 }; public rangeLabel = { @@ -37,11 +38,11 @@ export class SliderSampleComponent { constructor() { for (let i = 0; i <= 500; i++) { - this.labels.push(new Date(2019, 10, i)); + this.labelsDates.push(new Date(2019, 10, i)); } - this._lowerValue = this.labels[0]; - this._upperValue = this.labels[this.labels.length - 1]; + this._lowerValue = this.labelsDates[0]; + this._upperValue = this.labelsDates[this.labels.length - 1]; } public get getLowerVal() { @@ -53,9 +54,14 @@ export class SliderSampleComponent { } public valueChange(evt: ISliderValueChangeEventArgs) { - this._lowerValue = this.labels[(evt.value as IRangeSliderValue).lower]; - this._upperValue = this.labels[(evt.value as IRangeSliderValue).upper]; + this._lowerValue = this.labelsDates[(evt.value as IRangeSliderValue).lower]; + this._upperValue = this.labelsDates[(evt.value as IRangeSliderValue).upper]; } + + public changeLabels() { + this.labels = new Array('asd', 'bsd'); + } + public changeLabelOrientation() { if (this.labelOrientaion === TickLabelsOrientation.horizontal) { this.labelOrientaion = TickLabelsOrientation.toptobottom; From 7fe44cbf8831a80af609433042eb6b6c13470c08 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 6 Nov 2019 14:45:16 +0200 Subject: [PATCH 06/42] feat(slider): show/hide secondary/primary tick labels Closes #4594 --- .../src/lib/slider/slider.component.ts | 2 +- .../src/lib/slider/ticks/ticks.component.html | 1 + .../src/lib/slider/ticks/ticks.component.ts | 28 +++++++++++-------- src/app/slider/slider.sample.html | 5 ++-- 4 files changed, 21 insertions(+), 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 0dda1844c59..0836cb380df 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -690,7 +690,7 @@ export class IgxSliderComponent implements public primaryTickLabels = true; @Input() - public secondaryTickLabels = false; + public secondaryTickLabels = true; @Input() public ticksOrientation: TicksOrientation = TicksOrientation.bottom; diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index 3475eb3000b..150c5203ff5 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -8,6 +8,7 @@ [attr.y]="tickYOffset(idx)"> Slider
+ [primaryTicks]="3" + [secondaryTicks]="1">
From e3336a4ebeb6026363315a621cee073bae7e84c4 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Thu, 7 Nov 2019 15:29:22 +0200 Subject: [PATCH 07/42] feat(slider): top|bottom|mirror ticks orientation Closes #4594 --- .../src/lib/slider/slider.component.html | 23 ++------ .../src/lib/slider/slider.component.ts | 16 +++++ .../src/lib/slider/ticks/ticks.component.ts | 58 +++++++++++++------ src/app/slider/slider.sample.html | 2 + src/app/slider/slider.sample.ts | 13 ++++- 5 files changed, 76 insertions(+), 36 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index fc86c8ec8b5..8ce7de65186 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -1,19 +1,7 @@
- - - + [maxValue]="maxValue">
0 ? this.secondaryTicks + 1 : 0; } + /** + * @hidden + */ + public get showTopTicks() { + return this.ticksOrientation === TicksOrientation.top || + this.ticksOrientation === TicksOrientation.mirror; + } + + /** + * @hidden + */ + public get showBottomTicks() { + return this.ticksOrientation === TicksOrientation.bottom || + this.ticksOrientation === TicksOrientation.mirror; + } + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 15b1e52725d..fad3718d167 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -49,9 +49,6 @@ export class IgxTicksComponent { @Input() public labels: Array; - @Input() - public orientation: TicksOrientation; - /** * @hidden */ @@ -73,7 +70,7 @@ export class IgxTicksComponent { /** * @hidden */ - public get toToBottomLabel() { + public get topToBottomLabel() { return this.tickLabelsOrientation === TickLabelsOrientation.toptobottom; } @@ -81,7 +78,7 @@ export class IgxTicksComponent { * @hidden */ public get tickLabelOrientation() { - return `rotate(${this.horizontalLabel ? 0 : this.toToBottomLabel ? -90 : 90})`; + return `rotate(${this.horizontalLabel ? 0 : this.topToBottomLabel ? 90 : -90})`; } /** @@ -109,7 +106,7 @@ export class IgxTicksComponent { const secondaryTickOffset = this._secondaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; const yOffset = this.isPrimary(idx) ? primaryTickOffset : secondaryTickOffset; - return this.orientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; + return this.ticksOrientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; } public hiddenTickLabels(idx: number) { @@ -149,35 +146,60 @@ export class IgxTicksComponent { * @hidden */ public tickLabelXOffset(index: number) { - const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - const verticalDir = this.toToBottomLabel ? -1 : 1; - return this.horizontalLabel ? - this.tickXOffset(index) : - (this.tickYOffset(index) + this._primaryTicksWidth + diffTicksOffset) * verticalDir; + return this.ticksOrientation === TicksOrientation.top && !this.horizontalLabel ? + this.labelXOffset(index) * -1 : + this.labelXOffset(index); } /** * @hidden */ public tickLabelYOffset(index: number) { - const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - const verticalDir = this.toToBottomLabel ? -1 : 1; - return this.horizontalLabel ? - Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset : - (-this.tickXOffset(index)) * verticalDir; + const trackHeight = this.track.nativeElement.offsetHeight; + return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? + (this.labelYOffset(index) + trackHeight) * -1 : + this.labelYOffset(index); } /** * @hidden */ public textAnchor() { - return this.horizontalLabel ? 'middle' : this.toToBottomLabel ? 'end' : 'start'; + if (this.horizontalLabel) { + return 'middle'; + } + + if (this.ticksOrientation === TicksOrientation.top) { + return this.topToBottomLabel ? 'end' : 'start'; + } + + if (this.ticksOrientation === TicksOrientation.bottom) { + return this.topToBottomLabel ? 'start' : 'end'; + } } /** * @hidden */ public dominantBaseline() { - return this.horizontalLabel ? 'hanging' : this.toToBottomLabel ? 'central' : 'middle'; + return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? 'baseline' : + this.horizontalLabel ? 'hanging' : !this.topToBottomLabel ? 'central' : 'middle'; + } + + private labelXOffset(index: number) { + const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + const verticalDir = this.topToBottomLabel ? 1 : -1; + return this.horizontalLabel ? + this.tickXOffset(index) : + (Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset) * verticalDir; + } + + private labelYOffset(index: number) { + const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + const verticalDir = this.topToBottomLabel ? 1 : -1; + return this.horizontalLabel ? + Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset : + (-this.tickXOffset(index)) * verticalDir; + } } diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index 213ff9f7115..f02e344f22d 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -8,12 +8,14 @@

Slider

+
diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index 07a8c9f1d02..7c66ba1080f 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { SliderType, ISliderValueChangeEventArgs, IRangeSliderValue, TickLabelsOrientation } from 'igniteui-angular'; +import { SliderType, ISliderValueChangeEventArgs, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from 'igniteui-angular'; class Task { title: string; @@ -21,6 +21,7 @@ export class SliderSampleComponent { private _upperValue: Date; public labelOrientaion = TickLabelsOrientation.horizontal; + public ticksOrientation = TicksOrientation.mirror; public sliderType: SliderType = SliderType.RANGE; public labelsDates = new Array(); public task: Task = new Task('Implement new app', 30); @@ -72,4 +73,14 @@ export class SliderSampleComponent { } } + public changeTicksOrientation() { + if (this.ticksOrientation === TicksOrientation.mirror) { + this.ticksOrientation = TicksOrientation.top; + } else if (this.ticksOrientation === TicksOrientation.top) { + this.ticksOrientation = TicksOrientation.bottom; + } else { + this.ticksOrientation = TicksOrientation.mirror; + } + } + } From 6723a12f84d77bb0c0f11d74467caa0c9e977113 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Thu, 7 Nov 2019 15:34:57 +0200 Subject: [PATCH 08/42] fix(slider): top ticks integration with labels feat Closes #4594 --- projects/igniteui-angular/src/lib/slider/slider.component.html | 2 ++ src/app/slider/slider.sample.html | 1 + 2 files changed, 3 insertions(+) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 8ce7de65186..67dff0e585f 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -9,6 +9,8 @@ [ticksOrientation]="ticksOrientation" [tickLabelsOrientation]="tickLabelsOrientation" [ticksContainer]="ticksContainer" + [labelsViewEnabled]="labelsViewEnabled" + [labels]="labels | spreadTickLabels:secondaryTicks" [track]="trackRef" [maxValue]="maxValue"> diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index f02e344f22d..ad59fcdbce4 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -8,6 +8,7 @@

Slider

From cbd80c2b3b351f64447bdd366e72c41bf39346f0 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Fri, 8 Nov 2019 11:07:19 +0200 Subject: [PATCH 09/42] feat(slider): allow tick labels custom template Closes #4594 --- .../lib/slider/label/thumb-label.component.ts | 5 ++- .../src/lib/slider/slider.common.ts | 10 ++++++ .../src/lib/slider/slider.component.html | 10 ++++-- .../src/lib/slider/slider.component.ts | 21 ++++++++++-- .../slider/thumb/thumb-slider.component.ts | 9 ++++-- .../src/lib/slider/ticks/ticks.component.html | 8 ++++- .../src/lib/slider/ticks/ticks.component.ts | 32 +++++++++++++++++-- src/app/slider/slider.sample.html | 8 ++++- src/app/slider/slider.sample.ts | 10 ++++++ 9 files changed, 100 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts index c90ee59335d..743142ffbf4 100644 --- a/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts +++ b/projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts @@ -23,6 +23,9 @@ export class IgxThumbLabelComponent { @Input() public continuous: boolean; + @Input() + public deactiveState: boolean; + @HostBinding('class.igx-slider__label-from') public get thumbFromClass() { return this.type === SliderHandle.FROM; @@ -54,7 +57,7 @@ export class IgxThumbLabelComponent { } public set active(val: boolean) { - if (this.continuous) { + if (this.continuous || this.deactiveState) { return; } diff --git a/projects/igniteui-angular/src/lib/slider/slider.common.ts b/projects/igniteui-angular/src/lib/slider/slider.common.ts index b7b14fff9cb..f607451040b 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.common.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.common.ts @@ -33,6 +33,16 @@ export class IgxThumbFromTemplateDirective {} }) export class IgxThumbToTemplateDirective {} +/** + * Template directive allowing you to set a custom template represeting primary/secondary ticks of the {@link IgxSliderComponent} + * + * @context {@link IgxTicksComponent.context} + */ +@Directive({ + selector: '[igxSliderTickLabel]' +}) +export class IgxTickLabelTemplateDirective {} + export interface IRangeSliderValue { lower: number; upper: number; diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 67dff0e585f..57ab36aaf0d 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -11,6 +11,7 @@ [ticksContainer]="ticksContainer" [labelsViewEnabled]="labelsViewEnabled" [labels]="labels | spreadTickLabels:secondaryTicks" + [tickLabelTemplateRef]="tickLabelTemplateRef" [track]="trackRef" [maxValue]="maxValue"> @@ -29,6 +30,7 @@ [ticksContainer]="ticksContainer" [labelsViewEnabled]="labelsViewEnabled" [labels]="labels | spreadTickLabels:secondaryTicks" + [tickLabelTemplateRef]="tickLabelTemplateRef" [track]="trackRef" [maxValue]="maxValue">
@@ -39,7 +41,8 @@ [value]="lowerLabel" [templateRef]="thumbFromTemplateRef" [continuous]="continuous" - [context]="context"> + [context]="context" + [deactiveState]="deactivateThumbLabel"> + [context]="context" + [deactiveState]="deactivateThumbLabel">
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 3be54bfd9c1..aba92fa35a0 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -26,7 +26,8 @@ import { SliderHandle, SliderType, ISliderValueChangeEventArgs, TicksOrientation, - TickLabelsOrientation + TickLabelsOrientation, + IgxTickLabelTemplateDirective } from './slider.common'; import { IgxThumbLabelComponent } from './label/thumb-label.component'; import ResizeObserver from 'resize-observer-polyfill'; @@ -174,6 +175,12 @@ export class IgxSliderComponent implements @ContentChild(IgxThumbToTemplateDirective, { read: TemplateRef, static: false }) public thumbToTemplateRef: TemplateRef; + /** + * @hidden + */ + @ContentChild(IgxTickLabelTemplateDirective, { read: TemplateRef, static: false }) + public tickLabelTemplateRef: TemplateRef; + /** * @hidden */ @@ -305,9 +312,10 @@ export class IgxSliderComponent implements * Returns the template context corresponding * to {@link IgxThumbFromTemplateDirective} and {@link IgxThumbToTemplateDirective} templates. * + * ```typescript * return { - * $implicit: {@link value}, - * labels: {@link labels} + * $implicit // returns the value of the label, + * labels // returns the labels collection the user has passed. * } * ``` */ @@ -698,6 +706,11 @@ export class IgxSliderComponent implements @Input() public tickLabelsOrientation = TickLabelsOrientation.horizontal; + public get deactivateThumbLabel() { + return (this.primaryTickLabels || this.secondaryTickLabels) && + (this.ticksOrientation === TicksOrientation.top || this.ticksOrientation === TicksOrientation.mirror); + } + /** * This event is emitted when user has stopped interacting the thumb and value is changed. * ```typescript @@ -1384,6 +1397,7 @@ export class IgxSliderComponent implements IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, + IgxTickLabelTemplateDirective, IgxSliderThumbComponent, IgxThumbLabelComponent, IgxTicksComponent, @@ -1392,6 +1406,7 @@ export class IgxSliderComponent implements IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, + IgxTickLabelTemplateDirective, IgxSliderThumbComponent, IgxThumbLabelComponent, IgxTicksComponent], diff --git a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts index 4ded53b004a..cf1ef926362 100644 --- a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts @@ -65,6 +65,9 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy { @Input() public type: SliderHandle; + @Input() + public deactiveState: boolean; + @Output() public onThumbValueChange = new EventEmitter(); @@ -217,8 +220,10 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy { private toggleThumbIndicators(visible: boolean) { this._isPressed = visible; - if (!this.continuous) { - this._isActive = visible; + if (this.continuous || this.deactiveState) { + return; } + + this._isActive = visible; } } diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index 150c5203ff5..040e7abef1a 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -12,6 +12,12 @@ [attr.x]="tickLabelXOffset(idx)" [attr.y]="tickLabelYOffset(idx)" [attr.text-anchor]="textAnchor()" - [attr.dominant-baseline]="dominantBaseline()">{{tickLabel(idx)}} + [attr.dominant-baseline]="dominantBaseline()"> + + + + + {{ value }} + diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index fad3718d167..f6d215dd3ec 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ElementRef, AfterViewInit } from '@angular/core'; +import { Component, Input, ElementRef, AfterViewInit, TemplateRef } from '@angular/core'; import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; @Component({ @@ -49,6 +49,33 @@ export class IgxTicksComponent { @Input() public labels: Array; + @Input() + public tickLabelTemplateRef: TemplateRef; + + /** + * Returns the template context corresponding to + * {@link IgxTickLabelTemplateDirective} + * + * ```typescript + * return { + * $implicit //returns tick labels value + * isPrimery //returns if the tick is primary. + * labels // returns the labels collection. + * index // returns the index of every tick on the tick series. + * } + * ``` + * + * @param idx the index of the tick series that are rendered. + */ + public context(idx: number): any { + return { + $implicit: this.tickLabel(idx), + isPrimary: this.isPrimary(idx), + labels: this.labels, + index: idx + }; + } + /** * @hidden */ @@ -155,9 +182,8 @@ export class IgxTicksComponent { * @hidden */ public tickLabelYOffset(index: number) { - const trackHeight = this.track.nativeElement.offsetHeight; return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? - (this.labelYOffset(index) + trackHeight) * -1 : + this.labelYOffset(index) * -1 : this.labelYOffset(index); } diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index ad59fcdbce4..2e6070dba31 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -8,15 +8,21 @@

Slider

+ + {{ tickLabel(value, primary, idx, labels) }} +
+ +
diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index 7c66ba1080f..0fcb58d0b9f 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -22,6 +22,8 @@ export class SliderSampleComponent { public labelOrientaion = TickLabelsOrientation.horizontal; public ticksOrientation = TicksOrientation.mirror; + public primaryTickLabels = true; + public secondaryTickLabels = true; public sliderType: SliderType = SliderType.RANGE; public labelsDates = new Array(); public task: Task = new Task('Implement new app', 30); @@ -83,4 +85,12 @@ export class SliderSampleComponent { } } + public tickLabel(value, primary, index, labels) { + if (primary) { + return Math.round(value); + } + + return value; + } + } From a6f7af9f253372501f004b61c329228297063e74 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Mon, 11 Nov 2019 11:29:57 +0200 Subject: [PATCH 10/42] feat(slider): drop svg and change template structure Closes #4594 --- .../src/lib/slider/ticks/ticks.component.html | 11 +- .../src/lib/slider/ticks/ticks.component.ts | 254 ++++++++++-------- src/app/slider/slider.sample.html | 2 +- 3 files changed, 148 insertions(+), 119 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index 040e7abef1a..b1f7b52b27e 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -1,4 +1,4 @@ - + + +
+
+ + + +
{{ value }} diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index f6d215dd3ec..282137c6ae5 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ElementRef, AfterViewInit, TemplateRef } from '@angular/core'; +import { Component, Input, ElementRef, AfterViewInit, TemplateRef, HostBinding } from '@angular/core'; import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; @Component({ @@ -52,6 +52,28 @@ export class IgxTicksComponent { @Input() public tickLabelTemplateRef: TemplateRef; + /** + * @hidden + */ + @HostBinding('class.igx-ticks') + public ticksClass = true; + + /** + * @hidden + */ + @HostBinding('class.igx-ticks__top') + public get ticksTopClass() { + return this.ticksOrientation === TicksOrientation.top; + } + + /** + * @hidden + */ + @HostBinding('class.igx-ticks__has-primary') + public get hasPrimaryClass() { + return this.primaryTicks > 0; + } + /** * Returns the template context corresponding to * {@link IgxTickLabelTemplateDirective} @@ -76,37 +98,37 @@ export class IgxTicksComponent { }; } - /** - * @hidden - */ - public get ticksStep() { - const ticksStep = this.ticksContainer / this.ticksLength; - const stepUnit = ticksStep / (this.ticksLength - 1); - - return this.ticksContainer ? - ticksStep + stepUnit : 0; - } - - /** - * @hidden - */ - public get horizontalLabel() { - return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; - } - - /** - * @hidden - */ - public get topToBottomLabel() { - return this.tickLabelsOrientation === TickLabelsOrientation.toptobottom; - } - - /** - * @hidden - */ - public get tickLabelOrientation() { - return `rotate(${this.horizontalLabel ? 0 : this.topToBottomLabel ? 90 : -90})`; - } + // /** + // * @hidden + // */ + // public get ticksStep() { + // const ticksStep = this.ticksContainer / this.ticksLength; + // const stepUnit = ticksStep / (this.ticksLength - 1); + + // return this.ticksContainer ? + // ticksStep + stepUnit : 0; + // } + + // /** + // * @hidden + // */ + // public get horizontalLabel() { + // return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; + // } + + // /** + // * @hidden + // */ + // public get topToBottomLabel() { + // return this.tickLabelsOrientation === TickLabelsOrientation.toptobottom; + // } + + // /** + // * @hidden + // */ + // public get tickLabelOrientation() { + // return `rotate(${this.horizontalLabel ? 0 : this.topToBottomLabel ? 90 : -90})`; + // } /** * @hidden @@ -117,28 +139,28 @@ export class IgxTicksComponent { this.secondaryTicks > 0 ? this.secondaryTicks + 1 : 0; } - /** - * @hidden - */ - public tickXOffset(idx: number) { - return idx * this.ticksStep - 1; - } + // /** + // * @hidden + // */ + // public tickXOffset(idx: number) { + // return idx * this.ticksStep - 1; + // } - /** - * @hidden - */ - public tickYOffset(idx: number) { - const trackHeight = this.track.nativeElement.offsetHeight; - const primaryTickOffset = this._primaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; - const secondaryTickOffset = this._secondaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; - const yOffset = this.isPrimary(idx) ? primaryTickOffset : secondaryTickOffset; + // /** + // * @hidden + // */ + // public tickYOffset(idx: number) { + // const trackHeight = this.track.nativeElement.offsetHeight; + // const primaryTickOffset = this._primaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; + // const secondaryTickOffset = this._secondaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; + // const yOffset = this.isPrimary(idx) ? primaryTickOffset : secondaryTickOffset; - return this.ticksOrientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; - } + // return this.ticksOrientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; + // } - public hiddenTickLabels(idx: number) { - return this.isPrimary(idx) ? this.primaryTickLabels : this.secondaryTickLabels; - } + // public hiddenTickLabels(idx: number) { + // return this.isPrimary(idx) ? this.primaryTickLabels : this.secondaryTickLabels; + // } /** * @hidden @@ -148,12 +170,12 @@ export class IgxTicksComponent { idx % (this.secondaryTicks + 1) === 0; } - /** - * @hidden - */ - public strokeWidth(idx: number) { - return this.isPrimary(idx) ? this._primaryTicksWidth : this._secondaryTicksWidth; - } + // /** + // * @hidden + // */ + // public strokeWidth(idx: number) { + // return this.isPrimary(idx) ? this._primaryTicksWidth : this._secondaryTicksWidth; + // } /** * @hidden @@ -169,63 +191,63 @@ export class IgxTicksComponent { return labelVal.toFixed(2); } - /** - * @hidden - */ - public tickLabelXOffset(index: number) { - return this.ticksOrientation === TicksOrientation.top && !this.horizontalLabel ? - this.labelXOffset(index) * -1 : - this.labelXOffset(index); - } - - /** - * @hidden - */ - public tickLabelYOffset(index: number) { - return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? - this.labelYOffset(index) * -1 : - this.labelYOffset(index); - } - - /** - * @hidden - */ - public textAnchor() { - if (this.horizontalLabel) { - return 'middle'; - } - - if (this.ticksOrientation === TicksOrientation.top) { - return this.topToBottomLabel ? 'end' : 'start'; - } - - if (this.ticksOrientation === TicksOrientation.bottom) { - return this.topToBottomLabel ? 'start' : 'end'; - } - } - - /** - * @hidden - */ - public dominantBaseline() { - return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? 'baseline' : - this.horizontalLabel ? 'hanging' : !this.topToBottomLabel ? 'central' : 'middle'; - } - - private labelXOffset(index: number) { - const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - const verticalDir = this.topToBottomLabel ? 1 : -1; - return this.horizontalLabel ? - this.tickXOffset(index) : - (Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset) * verticalDir; - } - - private labelYOffset(index: number) { - const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - const verticalDir = this.topToBottomLabel ? 1 : -1; - return this.horizontalLabel ? - Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset : - (-this.tickXOffset(index)) * verticalDir; - - } + // /** + // * @hidden + // */ + // public tickLabelXOffset(index: number) { + // return this.ticksOrientation === TicksOrientation.top && !this.horizontalLabel ? + // this.labelXOffset(index) * -1 : + // this.labelXOffset(index); + // } + + // /** + // * @hidden + // */ + // public tickLabelYOffset(index: number) { + // return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? + // this.labelYOffset(index) * -1 : + // this.labelYOffset(index); + // } + + // /** + // * @hidden + // */ + // public textAnchor() { + // if (this.horizontalLabel) { + // return 'middle'; + // } + + // if (this.ticksOrientation === TicksOrientation.top) { + // return this.topToBottomLabel ? 'end' : 'start'; + // } + + // if (this.ticksOrientation === TicksOrientation.bottom) { + // return this.topToBottomLabel ? 'start' : 'end'; + // } + // } + + // /** + // * @hidden + // */ + // public dominantBaseline() { + // return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? 'baseline' : + // this.horizontalLabel ? 'hanging' : !this.topToBottomLabel ? 'central' : 'middle'; + // } + + // private labelXOffset(index: number) { + // const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + // const verticalDir = this.topToBottomLabel ? 1 : -1; + // return this.horizontalLabel ? + // this.tickXOffset(index) : + // (Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset) * verticalDir; + // } + + // private labelYOffset(index: number) { + // const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; + // const verticalDir = this.topToBottomLabel ? 1 : -1; + // return this.horizontalLabel ? + // Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset : + // (-this.tickXOffset(index)) * verticalDir; + + // } } diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index 2e6070dba31..c2dedc4eba3 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -12,7 +12,7 @@

Slider

[secondaryTickLabels]="secondaryTickLabels" [ticksOrientation]="ticksOrientation" [primaryTicks]="3" - [secondaryTicks]="1"> + [secondaryTicks]="3"> {{ tickLabel(value, primary, idx, labels) }} From 3f7a50a0de5cbae304797c28020f6e9224c264fa Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Mon, 11 Nov 2019 14:15:32 +0200 Subject: [PATCH 11/42] fix(slider): remove resizeObserver Closes #4594 --- .../src/lib/slider/slider.component.html | 4 --- .../src/lib/slider/slider.component.ts | 32 +------------------ .../src/lib/slider/ticks/ticks.component.ts | 10 ------ 3 files changed, 1 insertion(+), 45 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 57ab36aaf0d..005d5aeaeaf 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -8,11 +8,9 @@ [secondaryTickLabels]="secondaryTickLabels" [ticksOrientation]="ticksOrientation" [tickLabelsOrientation]="tickLabelsOrientation" - [ticksContainer]="ticksContainer" [labelsViewEnabled]="labelsViewEnabled" [labels]="labels | spreadTickLabels:secondaryTicks" [tickLabelTemplateRef]="tickLabelTemplateRef" - [track]="trackRef" [maxValue]="maxValue">
@@ -27,11 +25,9 @@ [secondaryTickLabels]="secondaryTickLabels" [ticksOrientation]="ticksOrientation" [tickLabelsOrientation]="tickLabelsOrientation" - [ticksContainer]="ticksContainer" [labelsViewEnabled]="labelsViewEnabled" [labels]="labels | spreadTickLabels:secondaryTicks" [tickLabelTemplateRef]="tickLabelTemplateRef" - [track]="trackRef" [maxValue]="maxValue">
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index aba92fa35a0..d54f9fffd43 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -91,7 +91,6 @@ export class IgxSliderComponent implements // ticks private _primaryTicks = 0; private _secondaryTicks = 0; - private _ticksContainer = 0; private _labels = new Array(); private _type = SliderType.SLIDER; @@ -99,8 +98,6 @@ export class IgxSliderComponent implements private _destroyer$ = new Subject(); private _indicatorsDestroyer$ = new Subject(); private _indicatorsTimer: Observable; - private _observer: ResizeObserver; - private _resizeNotify = new Subject(); private _onChangeCallback: (_: any) => void = noop; private _onTouchedCallback: () => void = noop; @@ -145,14 +142,6 @@ export class IgxSliderComponent implements @ViewChild('track', { static: true }) public trackRef: ElementRef; - - /** - * @hidden - */ - public get ticksContainer() { - return this._ticksContainer; - } - /** * @hidden */ @@ -944,12 +933,7 @@ export class IgxSliderComponent implements */ public ngOnInit() { this.sliderSetup(); - this._resizeNotify.pipe(takeUntil(this._destroyer$)) - .subscribe(() => { - this._zone.run(() => { - this.notifyChanges(); - }); - }); + // Set track travel zone this._pMin = this.valueToFraction(this.lowerBound) || 0; this._pMax = this.valueToFraction(this.upperBound) || 1; @@ -974,11 +958,6 @@ export class IgxSliderComponent implements this.subscribeTo(thumbFrom, this.thumbChanged.bind(this)); this.changeThumbFocusableState(this.disabled); }); - - this._zone.runOutsideAngular(() => { - this._observer = new ResizeObserver(() => this._resizeNotify.next()); - this._observer.observe(this._el.nativeElement); - }) } /** @@ -1378,15 +1357,6 @@ export class IgxSliderComponent implements private emitValueChanged(oldValue: number | IRangeSliderValue) { this.onValueChange.emit({ oldValue, value: this.value }); } - - /** - * @hidden - * resizeObesrver callback - */ - private notifyChanges() { - this._ticksContainer = this._el.nativeElement.getBoundingClientRect().width; - this._cdr.markForCheck(); - } } /** diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 282137c6ae5..1e540617ae7 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -12,10 +12,6 @@ import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; }`] }) export class IgxTicksComponent { - private _primaryTicksWidth = 16; - private _secondaryTicksWidth = 8; - private _defaultTickYOffset = 4; - @Input() public primaryTicks: number; @@ -34,12 +30,6 @@ export class IgxTicksComponent { @Input() public tickLabelsOrientation: TickLabelsOrientation; - @Input() - public ticksContainer: number; - - @Input() - public track: ElementRef; - @Input() public maxValue: number; From a0aa55b39b05f68a8fccc7d6de0cc8880901c76d Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 11 Nov 2019 15:50:53 +0200 Subject: [PATCH 12/42] fix(slider): Adding styles for slider ticks Signed-off-by: MPopov --- .../components/slider/_slider-component.scss | 34 ++- .../components/slider/_slider-theme.scss | 107 ++++++-- .../styles/themes/schemas/light/_slider.scss | 12 + .../src/lib/slider/slider.component.html | 2 +- .../src/lib/slider/slider.component.spec.ts | 8 +- .../src/lib/slider/ticks/ticks.component.html | 6 +- .../src/lib/slider/ticks/ticks.component.ts | 12 +- src/app/slider/slider.sample.scss | 3 +- src/styles/igniteui-theme.scss | 244 +++++++++--------- 9 files changed, 266 insertions(+), 162 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 12dad4a6091..4ef17c220fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -22,8 +22,32 @@ @extend %igx-slider-track-fill !optional; } - @include e(track-ticks) { - @extend %igx-slider-track-ticks !optional; + @include e(ticks) { + @extend %igx-slider__ticks !optional; + } + + @include e(ticks, $m: tall) { + @extend %igx-slider__ticks--tall !optional; + } + + @include e(ticks, $m: top) { + @extend %igx-slider__ticks--top !optional; + } + + @include e(ticks-group) { + @extend %igx-slider__ticks-group !optional; + } + + @include e(ticks-group, $m: tall) { + @extend %igx-slider__ticks-group--tall !optional; + } + + @include e(ticks-tick) { + @extend %igx-slider__ticks-tick !optional; + } + + @include e(ticks-label) { + @extend %igx-slider__ticks-label !optional; } @include e(thumbs) { @@ -89,9 +113,9 @@ @extend %igx-slider-track-fill--disabled !optional; } - @include e(track-ticks) { - @extend %igx-slider-track-ticks !optional; - @extend %igx-slider-track-ticks--disabled !optional; + @include e(ticks) { + @extend %igx-slider__ticks !optional; + @extend %igx-slider__ticks--disabled !optional; } @each $t in $thumbs { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 9f9fa0b98b2..b9a0bbea0d4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -44,7 +44,10 @@ $thumb-disabled-border-color: null, $track-hover-color: null, $thumb-hover-color: null, - $base-track-hover-color: null + $base-track-hover-color: null, + $tick-label-color: null, + $tick-label-color-tall: null, + $tick-color: null, ) { $name: 'igx-slider'; $slider-schema: (); @@ -75,7 +78,10 @@ disabled-base-track-color: $disabled-base-track-color, thumb-border-color: $thumb-border-color, thumb-disabled-border-color: $thumb-disabled-border-color, - base-track-hover-color: $base-track-hover-color + base-track-hover-color: $base-track-hover-color, + tick-label-color: $tick-label-color, + tick-label-color-tall: $tick-label-color-tall, + tick-color: $tick-color, )); } @@ -96,6 +102,13 @@ fluent: 4px ), map-get($theme, variant)); + // Slide ticks + $tick-push: rem(4px); + $base-tick-height: rem(8px); + $tick-height: $base-tick-height; + $tick-height--tall: $base-tick-height * 2; + $tick-width: rem(2px); + $thumb-border-width: map-get(( material: 0, fluent: 2px @@ -167,7 +180,7 @@ } %igx-slider-track { - position: absolute; + position: relative; width: 100%; height: rem($slider-track-height); background: --var($theme, 'base-track-color'); @@ -178,20 +191,6 @@ background: --var($theme, 'disabled-base-track-color'); } - %igx-slider-track-ticks { - position: absolute; - width: 100%; - height: rem($slider-track-height); - background-size: 100% em($slider-track-height); - opacity: .85; - transition: opacity .2s $ease-out-quad; - z-index: 1; - } - - %igx-slider-track-ticks--disabled { - visibility: hidden; - } - %igx-slider-track-fill { position: absolute; width: 100%; @@ -205,6 +204,80 @@ visibility: hidden; } + %igx-slider__ticks { + width: 100%; + display: flex; + position: absolute; + top: $tick-push; + justify-content: space-between; + z-index: 1; + + &%igx-slider__ticks--top { + bottom: $tick-push; + top: auto; + align-items: flex-end; + } + } + + %igx-slider__ticks-group { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + %igx-slider__ticks-label { + color: --var($theme, 'tick-label-color'); + position: absolute; + top: calc(#{$tick-height} + #{rem(2px)}); + } + + %igx-slider__ticks-tick { + background: --var($theme, 'tick-color'); + height: $tick-height; + width: $tick-width; + } + + %igx-slider__ticks--tall { + %igx-slider__ticks-label { + top: calc(#{$tick-height--tall} + #{rem(2px)}); + } + } + + %igx-slider__ticks-group--tall { + %igx-slider__ticks-tick { + height: $tick-height--tall; + } + + %igx-slider__ticks-label { + color: --var($theme, 'tick-label-color-tall'); + } + } + + + %igx-slider__ticks--top { + %igx-slider__ticks-label { + bottom: calc(#{$tick-height} + #{rem(2px)}); + top: auto; + } + + &%igx-slider__ticks--tall { + %igx-slider__ticks-label { + bottom: calc(#{$tick-height--tall} + #{rem(2px)}); + top: auto; + } + } + } + + %igx-slider__ticks--disabled { + visibility: hidden; + } + + + + + + %igx-thumb-display { position: absolute; display: flex; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss index 98d6ff3a683..2c017e2f332 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss @@ -27,6 +27,18 @@ $_light-slider: extend( ( variant: 'material', + tick-color: ( + igx-color: ('grays', 400) + ), + + tick-label-color: ( + igx-color: ('grays', 400) + ), + + tick-label-color-tall: ( + igx-color: ('grays', 800) + ), + track-color: ( igx-color: ('secondary', 500) ), diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 57ab36aaf0d..c9cd5b788f5 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -16,7 +16,7 @@ [maxValue]="maxValue">
-
+
{ }); it('tick marks(steps) should be shown equally spread based on labels length', () => { - const ticks = fixture.nativeElement.querySelector('.igx-slider__track-ticks'); + const ticks = fixture.nativeElement.querySelector('.igx-slider__ticks'); const sliderWidth = parseInt(fixture.nativeElement.querySelector('igx-slider').clientWidth, 10); expect(slider.type).toBe(SliderType.SLIDER); @@ -920,7 +920,7 @@ describe('IgxSlider', () => { }); it('tick marks(steps) should be shown equally spread based on labels length', () => { - const ticks = fixture.nativeElement.querySelector('.igx-slider__track-ticks'); + const ticks = fixture.nativeElement.querySelector('.igx-slider__ticks'); const sliderWidth = parseInt(fixture.nativeElement.querySelector('igx-slider').clientWidth, 10); expect(slider.type).toBe(SliderType.RANGE); @@ -1124,7 +1124,7 @@ describe('IgxSlider', () => { it('should draw tick marks', () => { const fixture = TestBed.createComponent(SliderInitializeTestComponent); - const ticks = fixture.nativeElement.querySelector('.igx-slider__track-ticks'); + const ticks = fixture.nativeElement.querySelector('.igx-slider__ticks'); // Slider steps <= 1. No marks should be drawn; expect(ticks.style.background).toBeFalsy(); @@ -1140,7 +1140,7 @@ describe('IgxSlider', () => { const fixture = TestBed.createComponent(SliderInitializeTestComponent); fixture.detectChanges(); - const ticks = fixture.nativeElement.querySelector('.igx-slider__track-ticks'); + const ticks = fixture.nativeElement.querySelector('.igx-slider__ticks'); const slider = fixture.componentInstance.slider; expect(ticks.style.background).toBeFalsy(); diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index b1f7b52b27e..e8b25f07f47 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -18,9 +18,9 @@ --> -
-
- +
+
+
diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 282137c6ae5..1540b5caaa7 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -4,12 +4,6 @@ import { TicksOrientation, TickLabelsOrientation } from '../slider.common'; @Component({ selector: 'igx-ticks', templateUrl: 'ticks.component.html', - styles: [` - :host { - position: absolute; - height: 100px; - } - }`] }) export class IgxTicksComponent { private _primaryTicksWidth = 16; @@ -55,13 +49,13 @@ export class IgxTicksComponent { /** * @hidden */ - @HostBinding('class.igx-ticks') + @HostBinding('class.igx-slider__ticks') public ticksClass = true; /** * @hidden */ - @HostBinding('class.igx-ticks__top') + @HostBinding('class.igx-slider__ticks--top') public get ticksTopClass() { return this.ticksOrientation === TicksOrientation.top; } @@ -69,7 +63,7 @@ export class IgxTicksComponent { /** * @hidden */ - @HostBinding('class.igx-ticks__has-primary') + @HostBinding('class.igx-slider__ticks--tall') public get hasPrimaryClass() { return this.primaryTicks > 0; } diff --git a/src/app/slider/slider.sample.scss b/src/app/slider/slider.sample.scss index aae2e9db8cd..f5390cd2e0c 100644 --- a/src/app/slider/slider.sample.scss +++ b/src/app/slider/slider.sample.scss @@ -24,5 +24,6 @@ } igx-slider { - width: 50%; + width: 80%; + margin: 50px auto; } diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index 8f71afd890d..018e481c84b 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -22,125 +22,125 @@ @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color); } } - -.dark-theme { - $igx-background-color: #333; - $igx-foreground-color: text-contrast($igx-background-color); - - background: $igx-background-color; - color: $igx-foreground-color; - - @include scrollbar-love(lighten($igx-background-color, 15%)); - @include igx-dark-theme($green-palette); - - .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color); - } -} - -.fluent-excel-theme { - $igx-background-color: #fff; - $igx-foreground-color: text-contrast($igx-background-color); - - background: $igx-background-color; - color: $igx-foreground-color; - - @include scrollbar-love(); - @include igx-fluent-theme($fluent-excel-palette); - - .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); - } -} - -.fluent-word-theme { - $igx-background-color: #fff; - $igx-foreground-color: text-contrast($igx-background-color); - - background: $igx-background-color; - color: $igx-foreground-color; - - @include scrollbar-love(); - @include igx-fluent-theme($fluent-word-palette); - - .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); - } -} - -.fluent-excel-dark-theme { - $igx-background-color: #333; - $igx-foreground-color: text-contrast($igx-background-color); - - background: $igx-background-color; - color: $igx-foreground-color; - - @include scrollbar-love(lighten($igx-background-color, 15%)); - @include igx-fluent-dark-theme($fluent-excel-palette); - - .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); - } -} - -.light-square-theme { - $igx-background-color: #fff; - $igx-foreground-color: text-contrast($igx-background-color); - - background: $igx-background-color; - color: $igx-foreground-color; - - @include scrollbar-love(); - @include igx-light-square-theme($purple-palette); - - .nav-header { - @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); - } -} - -.light-round-theme { - $igx-background-color: #fff; - $igx-foreground-color: text-contrast($igx-background-color); - - background: $igx-background-color; - color: $igx-foreground-color; - - @include scrollbar-love(); - @include igx-theme($palette: $purple-palette, $schema: $light-round-schema); -} - -@media print { - html, - body, - app-root { - min-height: 100vh; - min-width: 100vw; - margin: 0; - display: block; - background: transparent !important; - } - - .sample-content, - .sample-column, - .wrapper { - margin: 0; - padding: 0; - } - - .sample-header, - .sample-description, - .sample-title, - .no-print, - .igx-nav-drawer, - .form-title { - display: none !important; - } - - ::-webkit-scrollbar { - background-color: #fff !important; - } - - ::-webkit-scrollbar-thumb { - background-color: #fff !important; - } -} +// +//.dark-theme { +// $igx-background-color: #333; +// $igx-foreground-color: text-contrast($igx-background-color); +// +// background: $igx-background-color; +// color: $igx-foreground-color; +// +// @include scrollbar-love(lighten($igx-background-color, 15%)); +// @include igx-dark-theme($green-palette); +// +// .nav-header { +// @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color); +// } +//} +// +//.fluent-excel-theme { +// $igx-background-color: #fff; +// $igx-foreground-color: text-contrast($igx-background-color); +// +// background: $igx-background-color; +// color: $igx-foreground-color; +// +// @include scrollbar-love(); +// @include igx-fluent-theme($fluent-excel-palette); +// +// .nav-header { +// @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); +// } +//} +// +//.fluent-word-theme { +// $igx-background-color: #fff; +// $igx-foreground-color: text-contrast($igx-background-color); +// +// background: $igx-background-color; +// color: $igx-foreground-color; +// +// @include scrollbar-love(); +// @include igx-fluent-theme($fluent-word-palette); +// +// .nav-header { +// @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); +// } +//} +// +//.fluent-excel-dark-theme { +// $igx-background-color: #333; +// $igx-foreground-color: text-contrast($igx-background-color); +// +// background: $igx-background-color; +// color: $igx-foreground-color; +// +// @include scrollbar-love(lighten($igx-background-color, 15%)); +// @include igx-fluent-dark-theme($fluent-excel-palette); +// +// .nav-header { +// @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); +// } +//} +// +//.light-square-theme { +// $igx-background-color: #fff; +// $igx-foreground-color: text-contrast($igx-background-color); +// +// background: $igx-background-color; +// color: $igx-foreground-color; +// +// @include scrollbar-love(); +// @include igx-light-square-theme($purple-palette); +// +// .nav-header { +// @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-foreground-color); +// } +//} +// +//.light-round-theme { +// $igx-background-color: #fff; +// $igx-foreground-color: text-contrast($igx-background-color); +// +// background: $igx-background-color; +// color: $igx-foreground-color; +// +// @include scrollbar-love(); +// @include igx-theme($palette: $purple-palette, $schema: $light-round-schema); +//} +// +//@media print { +// html, +// body, +// app-root { +// min-height: 100vh; +// min-width: 100vw; +// margin: 0; +// display: block; +// background: transparent !important; +// } +// +// .sample-content, +// .sample-column, +// .wrapper { +// margin: 0; +// padding: 0; +// } +// +// .sample-header, +// .sample-description, +// .sample-title, +// .no-print, +// .igx-nav-drawer, +// .form-title { +// display: none !important; +// } +// +// ::-webkit-scrollbar { +// background-color: #fff !important; +// } +// +// ::-webkit-scrollbar-thumb { +// background-color: #fff !important; +// } +//} From a1c68ca598f71213efa8e6d567fe2d51d49648df Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Mon, 11 Nov 2019 16:32:52 +0200 Subject: [PATCH 13/42] feat(slider): expose classes for label hide/show and orientation Closes #4594 --- .../src/lib/slider/ticks/ticks.component.html | 2 +- .../src/lib/slider/ticks/ticks.component.ts | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index b1f7b52b27e..55c1f330c68 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -20,7 +20,7 @@
- +
diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 1e540617ae7..5695fab5b41 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -64,6 +64,14 @@ export class IgxTicksComponent { return this.primaryTicks > 0; } + /** + * @hidden + */ + @HostBinding('class') + public get labelsOrientationClass() { + return `igx-ticks__label--${TickLabelsOrientation[this.tickLabelsOrientation]}`; + } + /** * Returns the template context corresponding to * {@link IgxTickLabelTemplateDirective} @@ -148,9 +156,9 @@ export class IgxTicksComponent { // return this.ticksOrientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; // } - // public hiddenTickLabels(idx: number) { - // return this.isPrimary(idx) ? this.primaryTickLabels : this.secondaryTickLabels; - // } + public hiddenTickLabels(idx: number) { + return this.isPrimary(idx) ? this.primaryTickLabels : this.secondaryTickLabels; + } /** * @hidden From e9e2b62505e086c5d70be98281bb2f09a140cac6 Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 13 Nov 2019 11:34:20 +0200 Subject: [PATCH 14/42] feat(slider): Adding styling to ticks and labels of the slider component 1. Fix ie 11 positioning of the horizontal labels 2. Fix ie 11 positioning of the Thumbs 3. Fix miror view of the labesl on top 4. Fix wrong position of the thumb dot 5. Fix tick/label spacing 6. Adding colors for the theme Signed-off-by: MPopov --- .../components/slider/_slider-component.scss | 12 ++++ .../components/slider/_slider-theme.scss | 60 ++++++++++++++++++- .../styles/themes/schemas/light/_slider.scss | 9 +++ .../src/lib/slider/ticks/ticks.component.ts | 4 +- 4 files changed, 82 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 4ef17c220fc..67555a4486f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -34,6 +34,18 @@ @extend %igx-slider__ticks--top !optional; } + @include e(tick-labels, $m: horizontal) { + @extend %igx-slider__tick-labels--horizontal !optional; + } + + @include e(tick-labels, $m: top-bottom) { + @extend %igx-slider__tick-labels--top-bottom !optional; + } + + @include e(tick-labels, $m: bottom-top) { + @extend %igx-slider__tick-labels--bottom-top !optional; + } + @include e(ticks-group) { @extend %igx-slider__ticks-group !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index b9a0bbea0d4..103e77d2b98 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -17,6 +17,11 @@ /// @param {Color} $base-track-color [null] - The base background color of the track. /// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled. /// +/// @param {Color} $tick-label-color [null] - The color of the tick label. +/// @param {Color} $tick-label-color--tall [null] - The color of the tall tick label . +/// @param {Color} $tick-color [null] - The background-color of the tick. +/// @param {Color} $tick-color--tall [null] - The background-color of the tall tick. +/// /// @requires $default-palette /// @requires $light-schema /// @requires apply-palette @@ -48,6 +53,7 @@ $tick-label-color: null, $tick-label-color-tall: null, $tick-color: null, + $tick-color-tall: null, ) { $name: 'igx-slider'; $slider-schema: (); @@ -82,6 +88,7 @@ tick-label-color: $tick-label-color, tick-label-color-tall: $tick-label-color-tall, tick-color: $tick-color, + tick-color-tall: $tick-color-tall, )); } @@ -177,6 +184,7 @@ height: 0; cursor: default; z-index: 1; + left: 0; } %igx-slider-track { @@ -224,12 +232,21 @@ flex-direction: column; align-items: center; position: relative; + + &:first-of-type { + margin-left: rem(-1px); + } + + &:last-of-type { + margin-left: rem(-1px); + } } %igx-slider__ticks-label { color: --var($theme, 'tick-label-color'); position: absolute; top: calc(#{$tick-height} + #{rem(2px)}); + transform: translate(-50%); } %igx-slider__ticks-tick { @@ -247,6 +264,7 @@ %igx-slider__ticks-group--tall { %igx-slider__ticks-tick { height: $tick-height--tall; + background: --var($theme, 'tick-color-tall'); } %igx-slider__ticks-label { @@ -254,7 +272,6 @@ } } - %igx-slider__ticks--top { %igx-slider__ticks-label { bottom: calc(#{$tick-height} + #{rem(2px)}); @@ -273,10 +290,51 @@ visibility: hidden; } + %igx-slider__tick-labels--horizontal, + %igx-slider__tick-labels--top-bottom { + %igx-slider__ticks-group { + display: block; + } + &%igx-slider__ticks--top { + %igx-slider__ticks-label { + transform: rotate(-90deg); + transform-origin: 0 center; + bottom: calc(#{$tick-height} + #{rem(2px)}); + } + %igx-slider__ticks--tall { + %igx-slider__ticks-label { + bottom: calc(#{$tick-height--tall} + #{rem(2px)}); + } + } + } + + %igx-slider__ticks-label { + transform: rotate(90deg); + transform-origin: 0 center; + top: calc(#{$tick-height} + #{rem(2px)}); + left: rem(1px); + } + %igx-slider__ticks--tall { + %igx-slider__ticks-label { + top: calc(#{$tick-height--tall} + #{rem(2px)}); + } + } + } + //%igx-slider__tick-labels--bottom-top { + // &%igx-slider__ticks--top { + // %igx-slider__ticks-label { + // transform: rotate(90deg); + // } + // } + // + // %igx-slider__ticks-label { + // transform: rotate(-90deg); + // } + //} %igx-thumb-display { position: absolute; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss index 2c017e2f332..d0ce3fa8987 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss @@ -21,6 +21,11 @@ /// @property {map} base-track-hover-color [igx-color: ('secondary', 500), rgba: .24] - The base background color of the track on hover. /// @property {map} disabled-base-track-color [igx-color: ('grays', 400)] - The base background color of the track when is disabled. /// +/// @property {map} tick-label-color [igx-color: ('grays', 400)] - The color of the tick label. +/// @property {map} tick-label-color--tall [igx-color: ('grays', 800)] - The color of the tall tick label . +/// @property {map} tick-color [igx-color: ('grays', 400)] - The background-color of the tick. +/// @property {map} tick-color--tall [igx-color: ('grays', 400)] - The background-color of the tall tick. + /// @see $default-palette $_light-slider: extend( $_default-shape-slider, @@ -31,6 +36,10 @@ $_light-slider: extend( igx-color: ('grays', 400) ), + tick-color-tall: ( + igx-color: ('grays', 400) + ), + tick-label-color: ( igx-color: ('grays', 400) ), diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 5253e112fbd..a78d0c80f2a 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -69,7 +69,7 @@ export class IgxTicksComponent { /** * @hidden */ - @HostBinding('class.igx-slider__tick-labels--toptobottom') + @HostBinding('class.igx-slider__tick-labels--top-bottom') public get labelsTopToBottomClass() { return this.tickLabelsOrientation === TickLabelsOrientation.toptobottom; } @@ -77,7 +77,7 @@ export class IgxTicksComponent { /** * @hidden */ - @HostBinding('class.igx-slider__tick-labels--bottomtotop') + @HostBinding('class.igx-slider__tick-labels--bottom-top') public get labelsBottomToTopClass() { return this.tickLabelsOrientation === TickLabelsOrientation.bottomtotop; } From fc18430602c44a132bfbdb4efa2afa592460d5e5 Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 13 Nov 2019 11:51:22 +0200 Subject: [PATCH 15/42] feat(slider): Fix the template to work as expected in chrome and add styles fo hiding the labels Signed-off-by: MPopov --- .../core/styles/components/slider/_slider-component.scss | 4 ++++ .../lib/core/styles/components/slider/_slider-theme.scss | 6 ++++++ .../src/lib/slider/ticks/ticks.component.html | 9 +++++---- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 67555a4486f..eecdb75ac27 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -34,6 +34,10 @@ @extend %igx-slider__ticks--top !optional; } + @include e(tick-label, $m: hidden) { + @extend %igx-slider__tick-label--hidden !optional; + } + @include e(tick-labels, $m: horizontal) { @extend %igx-slider__tick-labels--horizontal !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 103e77d2b98..daad6d3d1ce 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -247,6 +247,7 @@ position: absolute; top: calc(#{$tick-height} + #{rem(2px)}); transform: translate(-50%); + opacity: 1; } %igx-slider__ticks-tick { @@ -290,6 +291,11 @@ visibility: hidden; } + %igx-slider__tick-label--hidden { + opacity: 0; + transition: opacity .2s $ease-in-out-quad; + } + %igx-slider__tick-labels--horizontal, %igx-slider__tick-labels--top-bottom { %igx-slider__ticks-group { diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index 1727f134fb9..d670a33fb70 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -19,10 +19,11 @@ -->
-
- - - +
+ + + +
From 96bfb4b8db1e00622dcafe79ea2638a3e8fb5e2f Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 13 Nov 2019 11:55:03 +0200 Subject: [PATCH 16/42] feat(slider): move the transition on the correct selector to work both ways Signed-off-by: MPopov --- .../src/lib/core/styles/components/slider/_slider-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index daad6d3d1ce..a157881324f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -248,6 +248,7 @@ top: calc(#{$tick-height} + #{rem(2px)}); transform: translate(-50%); opacity: 1; + transition: opacity .2s $ease-in-out-quad; } %igx-slider__ticks-tick { @@ -293,7 +294,6 @@ %igx-slider__tick-label--hidden { opacity: 0; - transition: opacity .2s $ease-in-out-quad; } %igx-slider__tick-labels--horizontal, From bdbe25faa8c36c8b56cc5c80a8a8915ee1ec624f Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 13 Nov 2019 14:39:29 +0200 Subject: [PATCH 17/42] fix(slider): remove default lebal horizontal class Closes #4594 --- .../src/lib/slider/ticks/ticks.component.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index a78d0c80f2a..5383dedf459 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -58,14 +58,6 @@ export class IgxTicksComponent { return this.primaryTicks > 0; } - /** - * @hidden - */ - @HostBinding('class.igx-slider__tick-labels--horizontal') - public get labelsHorizontalClass() { - return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; - } - /** * @hidden */ From 756437cf7bc6b8a355c2a02c73c83ba148fca2b1 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 13 Nov 2019 14:48:03 +0200 Subject: [PATCH 18/42] fix(slider): remove all comented code Closes #4594 --- .../src/lib/slider/ticks/ticks.component.html | 20 --- .../src/lib/slider/ticks/ticks.component.ts | 118 ------------------ 2 files changed, 138 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html index d670a33fb70..f43243e821b 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.html @@ -1,23 +1,3 @@ - -
diff --git a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts index 5383dedf459..f0ea2db645b 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/ticks.component.ts @@ -98,38 +98,6 @@ export class IgxTicksComponent { }; } - // /** - // * @hidden - // */ - // public get ticksStep() { - // const ticksStep = this.ticksContainer / this.ticksLength; - // const stepUnit = ticksStep / (this.ticksLength - 1); - - // return this.ticksContainer ? - // ticksStep + stepUnit : 0; - // } - - // /** - // * @hidden - // */ - // public get horizontalLabel() { - // return this.tickLabelsOrientation === TickLabelsOrientation.horizontal; - // } - - // /** - // * @hidden - // */ - // public get topToBottomLabel() { - // return this.tickLabelsOrientation === TickLabelsOrientation.toptobottom; - // } - - // /** - // * @hidden - // */ - // public get tickLabelOrientation() { - // return `rotate(${this.horizontalLabel ? 0 : this.topToBottomLabel ? 90 : -90})`; - // } - /** * @hidden */ @@ -139,25 +107,6 @@ export class IgxTicksComponent { this.secondaryTicks > 0 ? this.secondaryTicks + 1 : 0; } - // /** - // * @hidden - // */ - // public tickXOffset(idx: number) { - // return idx * this.ticksStep - 1; - // } - - // /** - // * @hidden - // */ - // public tickYOffset(idx: number) { - // const trackHeight = this.track.nativeElement.offsetHeight; - // const primaryTickOffset = this._primaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; - // const secondaryTickOffset = this._secondaryTicksWidth / 2 + this._defaultTickYOffset + trackHeight; - // const yOffset = this.isPrimary(idx) ? primaryTickOffset : secondaryTickOffset; - - // return this.ticksOrientation === TicksOrientation.top ? - (yOffset - trackHeight) : yOffset; - // } - public hiddenTickLabels(idx: number) { return this.isPrimary(idx) ? this.primaryTickLabels : this.secondaryTickLabels; } @@ -170,13 +119,6 @@ export class IgxTicksComponent { idx % (this.secondaryTicks + 1) === 0; } - // /** - // * @hidden - // */ - // public strokeWidth(idx: number) { - // return this.isPrimary(idx) ? this._primaryTicksWidth : this._secondaryTicksWidth; - // } - /** * @hidden */ @@ -190,64 +132,4 @@ export class IgxTicksComponent { return labelVal.toFixed(2); } - - // /** - // * @hidden - // */ - // public tickLabelXOffset(index: number) { - // return this.ticksOrientation === TicksOrientation.top && !this.horizontalLabel ? - // this.labelXOffset(index) * -1 : - // this.labelXOffset(index); - // } - - // /** - // * @hidden - // */ - // public tickLabelYOffset(index: number) { - // return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? - // this.labelYOffset(index) * -1 : - // this.labelYOffset(index); - // } - - // /** - // * @hidden - // */ - // public textAnchor() { - // if (this.horizontalLabel) { - // return 'middle'; - // } - - // if (this.ticksOrientation === TicksOrientation.top) { - // return this.topToBottomLabel ? 'end' : 'start'; - // } - - // if (this.ticksOrientation === TicksOrientation.bottom) { - // return this.topToBottomLabel ? 'start' : 'end'; - // } - // } - - // /** - // * @hidden - // */ - // public dominantBaseline() { - // return this.ticksOrientation === TicksOrientation.top && this.horizontalLabel ? 'baseline' : - // this.horizontalLabel ? 'hanging' : !this.topToBottomLabel ? 'central' : 'middle'; - // } - - // private labelXOffset(index: number) { - // const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - // const verticalDir = this.topToBottomLabel ? 1 : -1; - // return this.horizontalLabel ? - // this.tickXOffset(index) : - // (Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset) * verticalDir; - // } - - // private labelYOffset(index: number) { - // const diffTicksOffset = index % (this.secondaryTicks + 1) === 0 ? 0 : this._defaultTickYOffset; - // const verticalDir = this.topToBottomLabel ? 1 : -1; - // return this.horizontalLabel ? - // Math.abs(this.tickYOffset(index)) + this._primaryTicksWidth + diffTicksOffset : - // (-this.tickXOffset(index)) * verticalDir; - - // } } From 997a994c3974248a75f6989114eb79656ddd66e4 Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 13 Nov 2019 15:28:13 +0200 Subject: [PATCH 19/42] Fix some minor issues Signed-off-by: MPopov --- .../components/slider/_slider-component.scss | 15 +- .../components/slider/_slider-theme.scss | 16 +- .../src/lib/slider/slider.component.html | 2 +- src/app/slider/slider.sample.ts | 2 - src/styles/igniteui-theme.scss | 244 +++++++++--------- 5 files changed, 146 insertions(+), 133 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index eecdb75ac27..309eaaffc40 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -38,17 +38,14 @@ @extend %igx-slider__tick-label--hidden !optional; } - @include e(tick-labels, $m: horizontal) { - @extend %igx-slider__tick-labels--horizontal !optional; - } - @include e(tick-labels, $m: top-bottom) { @extend %igx-slider__tick-labels--top-bottom !optional; } - @include e(tick-labels, $m: bottom-top) { - @extend %igx-slider__tick-labels--bottom-top !optional; - } + // TODO find a way to flipt the direction + //@include e(tick-labels, $m: bottom-top) { + // @extend %igx-slider__tick-labels--bottom-top !optional; + //} @include e(ticks-group) { @extend %igx-slider__ticks-group !optional; @@ -124,6 +121,10 @@ @extend %igx-slider-track--disabled !optional; } + @include e(track-steps) { + @extend %igx-slider-track-steps !optional; + } + @include e(track-fill) { @extend %igx-slider-track-fill !optional; @extend %igx-slider-track-fill--disabled !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index a157881324f..cb101a06dc6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -296,7 +296,21 @@ opacity: 0; } - %igx-slider__tick-labels--horizontal, + %igx-slider-track-steps { + position: absolute; + width: 100%; + height: rem($slider-track-height); + background-size: 100% em($slider-track-height); + opacity: .85; + transition: opacity .2s $ease-out-quad; + z-index: 1; + } + + %igx-slider-track-steps--disabled { + visibility: hidden; + } + + %igx-slider__tick-labels--top-bottom { %igx-slider__ticks-group { display: block; diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index bd542b44ac4..005d5aeaeaf 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -14,7 +14,7 @@ [maxValue]="maxValue">
-
+
Date: Wed, 13 Nov 2019 15:45:16 +0200 Subject: [PATCH 20/42] fix steps Signed-off-by: MPopov --- .../core/styles/components/slider/_slider-component.scss | 6 +++++- .../igniteui-angular/src/lib/slider/slider.component.html | 2 +- src/app/slider/slider.sample.html | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 309eaaffc40..8fd2570a60c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -113,6 +113,10 @@ } } + @include e(track-steps) { + @extend %igx-slider-track-steps !optional; + } + @include m(disabled) { @extend %igx-slider-display !optional; @@ -122,7 +126,7 @@ } @include e(track-steps) { - @extend %igx-slider-track-steps !optional; + @extend %igx-slider-track-steps--disabled !optional; } @include e(track-fill) { diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 005d5aeaeaf..89b979b9aa7 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -14,7 +14,7 @@ [maxValue]="maxValue">
-
+
-->

Slider

- Date: Wed, 13 Nov 2019 17:08:50 +0200 Subject: [PATCH 21/42] fix(slider): workaround for querylist changes ovservable Closes #4594 --- .../src/lib/slider/slider.component.ts | 19 ++++++++++++++++--- .../src/lib/slider/ticks/tick.pipe.ts | 4 ++++ src/app/slider/slider.sample.html | 8 +++++--- src/app/slider/slider.sample.ts | 2 +- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index d54f9fffd43..117d653b385 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -98,6 +98,7 @@ export class IgxSliderComponent implements private _destroyer$ = new Subject(); private _indicatorsDestroyer$ = new Subject(); private _indicatorsTimer: Observable; + private _onTypeChanged: Subject = new Subject(); private _onChangeCallback: (_: any) => void = noop; private _onTouchedCallback: () => void = noop; @@ -262,6 +263,9 @@ export class IgxSliderComponent implements if (this._hasViewInit) { this.updateTrack(); } + + this._cdr.detectChanges(); + this._onTypeChanged.next(type); } /** @@ -951,13 +955,22 @@ export class IgxSliderComponent implements this.subscribeTo(this.thumbFrom, this.thumbChanged.bind(this)); this.subscribeTo(this.thumbTo, this.thumbChanged.bind(this)); - this.thumbs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => { - const thumbFrom = change.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM); + // Implementing a workaround in regards of the following bug: https://github.com/angular/angular/issues/30088 + // this.thumbs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => { + // const thumbFrom = change.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM); + // const labelFrom = this.labelRefs.find((label: IgxThumbLabelComponent) => label.type === SliderHandle.FROM); + // this.positionHandle(thumbFrom, labelFrom, this.lowerValue); + // // this.subscribeTo(thumbFrom, this.thumbChanged.bind(this)); + // this.changeThumbFocusableState(this.disabled); + // }); + + this._onTypeChanged.pipe(takeUntil(this._destroyer$)).subscribe((type: SliderType) => { + const thumbFrom = this.thumbs.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM); const labelFrom = this.labelRefs.find((label: IgxThumbLabelComponent) => label.type === SliderHandle.FROM); this.positionHandle(thumbFrom, labelFrom, this.lowerValue); this.subscribeTo(thumbFrom, this.thumbChanged.bind(this)); this.changeThumbFocusableState(this.disabled); - }); + }) } /** diff --git a/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts b/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts index fe347e8cfc3..68473703542 100644 --- a/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts +++ b/projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts @@ -7,6 +7,10 @@ export class IgxTickLabelsPipe implements PipeTransform { public transform(labels: Array, secondaryTicks: number) { + if (!labels) { + return; + } + let result = []; labels.forEach(item => { result.push(item); diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html index c5283f00464..847d3f63627 100644 --- a/src/app/slider/slider.sample.html +++ b/src/app/slider/slider.sample.html @@ -11,11 +11,12 @@

Slider

[primaryTickLabels]="primaryTickLabels" [secondaryTickLabels]="secondaryTickLabels" [ticksOrientation]="ticksOrientation" - [primaryTicks]="3" + [labels]="labels" + [primaryTicks]="0" [secondaryTicks]="3"> - +
@@ -24,6 +25,7 @@

Slider

+
diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index 5d5d1a9a9f5..d996feecca3 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -21,7 +21,7 @@ export class SliderSampleComponent { private _upperValue: Date; public labelOrientaion = TickLabelsOrientation.horizontal; - public ticksOrientation = TicksOrientation.mirror; + public ticksOrientation = TicksOrientation.bottom; public primaryTickLabels = true; public secondaryTickLabels = true; public sliderType: SliderType = SliderType.RANGE; From d547c46f3246f1a98c49b098a1e8aaffa626f61d Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 18 Nov 2019 11:42:29 +0200 Subject: [PATCH 22/42] feat(slider): Fix bottom to top and top to bottom orientation Signed-off-by: MPopov --- .../components/slider/_slider-component.scss | 7 +-- .../components/slider/_slider-theme.scss | 55 +++++++++++-------- src/app/slider/slider.sample.ts | 2 + 3 files changed, 38 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss index 8fd2570a60c..8cd717736ad 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss @@ -42,10 +42,9 @@ @extend %igx-slider__tick-labels--top-bottom !optional; } - // TODO find a way to flipt the direction - //@include e(tick-labels, $m: bottom-top) { - // @extend %igx-slider__tick-labels--bottom-top !optional; - //} + @include e(tick-labels, $m: bottom-top) { + @extend %igx-slider__tick-labels--bottom-top !optional; + } @include e(ticks-group) { @extend %igx-slider__ticks-group !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index cb101a06dc6..8c34b50b93c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -255,6 +255,7 @@ background: --var($theme, 'tick-color'); height: $tick-height; width: $tick-width; + position: relative; } %igx-slider__ticks--tall { @@ -310,17 +311,27 @@ visibility: hidden; } - %igx-slider__tick-labels--top-bottom { %igx-slider__ticks-group { display: block; } + %igx-slider__ticks-label { + writing-mode: vertical-rl; + transform: translate(-50%) rotate(0deg); + left: rem(1px); + } + + %igx-slider__ticks--tall { + %igx-slider__ticks-label { + top: calc(#{$tick-height--tall} + #{rem(2px)}); + } + } + &%igx-slider__ticks--top { %igx-slider__ticks-label { - transform: rotate(-90deg); - transform-origin: 0 center; - bottom: calc(#{$tick-height} + #{rem(2px)}); + writing-mode: vertical-rl; + transform: translate(-50%) rotate(0deg); } %igx-slider__ticks--tall { @@ -329,33 +340,33 @@ } } } + } + + %igx-slider__tick-labels--bottom-top { + %igx-slider__ticks-group { + display: block; + } + %igx-slider__ticks-label { - transform: rotate(90deg); - transform-origin: 0 center; - top: calc(#{$tick-height} + #{rem(2px)}); - left: rem(1px); + writing-mode: vertical-rl; + transform: translate(-50%) rotate(180deg); } - %igx-slider__ticks--tall { + &%igx-slider__ticks--top { %igx-slider__ticks-label { - top: calc(#{$tick-height--tall} + #{rem(2px)}); + writing-mode: vertical-rl; + transform: translate(-50%) rotate(180deg); + } + + %igx-slider__ticks--tall { + %igx-slider__ticks-label { + bottom: calc(#{$tick-height--tall} + #{rem(2px)}); + } } } } - //%igx-slider__tick-labels--bottom-top { - // &%igx-slider__ticks--top { - // %igx-slider__ticks-label { - // transform: rotate(90deg); - // } - // } - // - // %igx-slider__ticks-label { - // transform: rotate(-90deg); - // } - //} - %igx-thumb-display { position: absolute; display: flex; diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts index d996feecca3..71e59b1f319 100644 --- a/src/app/slider/slider.sample.ts +++ b/src/app/slider/slider.sample.ts @@ -68,6 +68,8 @@ export class SliderSampleComponent { public changeLabelOrientation() { if (this.labelOrientaion === TickLabelsOrientation.horizontal) { this.labelOrientaion = TickLabelsOrientation.toptobottom; + } else if(this.labelOrientaion === TickLabelsOrientation.toptobottom) { + this.labelOrientaion = TickLabelsOrientation.bottomtotop; } else { this.labelOrientaion = TickLabelsOrientation.horizontal; } From a2f567f513371f1b6196caa9a63bfe129eebe5db Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 18 Nov 2019 13:34:03 +0200 Subject: [PATCH 23/42] feat(slider): Fix label line height issue Signed-off-by: MPopov --- .../src/lib/core/styles/components/slider/_slider-theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 8c34b50b93c..9912f6fab08 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -247,6 +247,7 @@ position: absolute; top: calc(#{$tick-height} + #{rem(2px)}); transform: translate(-50%); + line-height: .7; opacity: 1; transition: opacity .2s $ease-in-out-quad; } @@ -255,7 +256,6 @@ background: --var($theme, 'tick-color'); height: $tick-height; width: $tick-width; - position: relative; } %igx-slider__ticks--tall { @@ -319,7 +319,6 @@ %igx-slider__ticks-label { writing-mode: vertical-rl; transform: translate(-50%) rotate(0deg); - left: rem(1px); } %igx-slider__ticks--tall { From b99f1c299eecec5934cfd1acb499f72a2362c2a6 Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 18 Nov 2019 13:45:43 +0200 Subject: [PATCH 24/42] feat(slider): Fix label top position Signed-off-by: MPopov --- .../src/lib/core/styles/components/slider/_slider-theme.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 9912f6fab08..cd3694dc98c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -245,7 +245,7 @@ %igx-slider__ticks-label { color: --var($theme, 'tick-label-color'); position: absolute; - top: calc(#{$tick-height} + #{rem(2px)}); + top: calc(#{$tick-height} + #{$tick-height}); transform: translate(-50%); line-height: .7; opacity: 1; @@ -271,6 +271,7 @@ } %igx-slider__ticks-label { + top: calc(#{$tick-height--tall} + #{$tick-height}); color: --var($theme, 'tick-label-color-tall'); } } From da5a721abe1579fcb5acb32c637be144bef66305 Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 18 Nov 2019 13:48:43 +0200 Subject: [PATCH 25/42] feat(slider): Fix label bottom position Signed-off-by: MPopov --- .../src/lib/core/styles/components/slider/_slider-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index cd3694dc98c..6566fb49c3d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -278,13 +278,13 @@ %igx-slider__ticks--top { %igx-slider__ticks-label { - bottom: calc(#{$tick-height} + #{rem(2px)}); + bottom: calc(#{$tick-height} + #{$tick-height}); top: auto; } &%igx-slider__ticks--tall { %igx-slider__ticks-label { - bottom: calc(#{$tick-height--tall} + #{rem(2px)}); + bottom: calc(#{$tick-height--tall} + #{$tick-height}); top: auto; } } From 6e0148ed7ea981749dc537bb5f7185d2ebf34edb Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Mon, 18 Nov 2019 14:52:39 +0200 Subject: [PATCH 26/42] fix(slider): snap to the lowerBound if value exceed it Closes #4594 --- .../igniteui-angular/src/lib/slider/slider.component.html | 3 ++- .../igniteui-angular/src/lib/slider/slider.component.ts | 4 ++-- .../src/lib/slider/ticks/ticks.component.ts | 3 +++ src/app/slider/slider.sample.html | 6 ++++-- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html index 89b979b9aa7..a648977a8c6 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.html +++ b/projects/igniteui-angular/src/lib/slider/slider.component.html @@ -40,7 +40,8 @@ [context]="context" [deactiveState]="deactivateThumbLabel"> - -->

Slider

-