From 1572fc0cb90ee2ccdc2fc8d1e7d0f08252c80bc6 Mon Sep 17 00:00:00 2001 From: lskramarov Date: Fri, 30 Aug 2019 15:43:24 +0300 Subject: [PATCH] fix(dropdown): mc-link and mc-dropdown-item do not work together (#UIM-139) (#221) BREAKING CHANGES --- packages/mosaic-dev/dropdown/module.ts | 3 +- packages/mosaic-dev/dropdown/template.html | 4 +- packages/mosaic-dev/link/template.html | 2 +- packages/mosaic/dropdown/_dropdown-theme.scss | 2 + packages/mosaic/link/_link-theme.scss | 21 +++++++++- packages/mosaic/link/link.component.ts | 40 ++++++++----------- packages/mosaic/link/link.scss | 24 ----------- 7 files changed, 45 insertions(+), 51 deletions(-) delete mode 100644 packages/mosaic/link/link.scss diff --git a/packages/mosaic-dev/dropdown/module.ts b/packages/mosaic-dev/dropdown/module.ts index 351411952..7d46f9f75 100644 --- a/packages/mosaic-dev/dropdown/module.ts +++ b/packages/mosaic-dev/dropdown/module.ts @@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - import { McButtonModule } from '@ptsecurity/mosaic/button'; import { McDropdownModule } from '@ptsecurity/mosaic/dropdown'; import { McIconModule } from '@ptsecurity/mosaic/icon'; +import { McLinkModule } from '@ptsecurity/mosaic/link'; @Component({ @@ -28,6 +28,7 @@ export class DemoComponent { BrowserAnimationsModule, BrowserModule, FormsModule, + McLinkModule, McIconModule, McButtonModule, McDropdownModule diff --git a/packages/mosaic-dev/dropdown/template.html b/packages/mosaic-dev/dropdown/template.html index ffebd7ac5..8c6b36658 100644 --- a/packages/mosaic-dev/dropdown/template.html +++ b/packages/mosaic-dev/dropdown/template.html @@ -29,7 +29,9 @@
Additional info
- Link + + Link + diff --git a/packages/mosaic-dev/link/template.html b/packages/mosaic-dev/link/template.html index 1edf17709..8af75a79f 100644 --- a/packages/mosaic-dev/link/template.html +++ b/packages/mosaic-dev/link/template.html @@ -4,7 +4,7 @@ Normal - Сохранить + Сохранить Сохранить diff --git a/packages/mosaic/dropdown/_dropdown-theme.scss b/packages/mosaic/dropdown/_dropdown-theme.scss index 2a2d446f0..f242246dc 100644 --- a/packages/mosaic/dropdown/_dropdown-theme.scss +++ b/packages/mosaic/dropdown/_dropdown-theme.scss @@ -45,6 +45,8 @@ &[disabled] { color: mc-color($foreground, disabled-text); + + background: transparent; } .mc-dropdown__item-caption { diff --git a/packages/mosaic/link/_link-theme.scss b/packages/mosaic/link/_link-theme.scss index 1a03fd1db..b339604ae 100644 --- a/packages/mosaic/link/_link-theme.scss +++ b/packages/mosaic/link/_link-theme.scss @@ -16,6 +16,10 @@ .mc-link { color: $color; + text-decoration: none; + + cursor: pointer; + &:focus { outline: none; } @@ -33,8 +37,20 @@ outline-offset: 2px; } + & > .mc-link__icon { + color: inherit; + } + + & .mc-link__text:not(:first-child) { + margin-left: 4px; + } + + & .mc-link__text:not(:last-child) { + margin-right: 4px; + } + &.mc-link_underlined .mc-link__text { - border-bottom-style: solid; + border-bottom-style: solid; border-bottom-color: rgba($color, .32); } @@ -71,6 +87,9 @@ &[disabled] { color: $color_disabled; + cursor: default; + pointer-events: none; + &.mc-link_underlined .mc-link__text { border-bottom-color: rgba($color_disabled, .64); } diff --git a/packages/mosaic/link/link.component.ts b/packages/mosaic/link/link.component.ts index d9ff4ad1e..7ae4e66c3 100644 --- a/packages/mosaic/link/link.component.ts +++ b/packages/mosaic/link/link.component.ts @@ -1,14 +1,11 @@ import { Input, - Attribute, - Component, ElementRef, OnDestroy, - ViewEncapsulation, - ChangeDetectionStrategy, - ChangeDetectorRef + ChangeDetectorRef, + Directive, + Attribute } from '@angular/core'; - import { FocusMonitor } from '@ptsecurity/cdk/a11y'; import { CanDisable, CanDisableCtor, @@ -20,20 +17,15 @@ import { export class McLinkBase { - constructor(public _elementRef: ElementRef) { - } + constructor(public elementRef: ElementRef) {} } export const _McLinkBase: HasTabIndexCtor & CanDisableCtor & typeof McLinkBase = mixinTabIndex(mixinDisabled(McLinkBase)); -@Component({ +@Directive({ selector: 'a.mc-link', - template: ``, - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, exportAs: 'mcLink', - styleUrls: ['./link.css'], inputs: ['disabled'], host: { '[attr.disabled]': 'disabled || null', @@ -53,32 +45,34 @@ export class McLink extends _McLinkBase implements OnDestroy, HasTabIndex, CanDi if (newValue !== this._disabled) { this._disabled = newValue; - this._changeDetector.markForCheck(); + this.changeDetector.markForCheck(); } } private _disabled = false; constructor( - @Attribute('tabindex') tabIndex: string, - public elementRef: ElementRef, - private _focusMonitor: FocusMonitor, - private _changeDetector: ChangeDetectorRef) { - + elementRef: ElementRef, + private focusMonitor: FocusMonitor, + private changeDetector: ChangeDetectorRef, + @Attribute('tabindex') tabIndex: string + ) { super(elementRef); - this._focusMonitor.monitor(elementRef.nativeElement, true); + this.tabIndex = parseInt(tabIndex) || 0; + + this.focusMonitor.monitor(elementRef.nativeElement, true); } ngOnDestroy() { - this._focusMonitor.stopMonitoring(this.elementRef.nativeElement); + this.focusMonitor.stopMonitoring(this.elementRef.nativeElement); } focus(): void { - this._getHostElement().focus(); + this.getHostElement().focus(); } - _getHostElement() { + getHostElement() { return this.elementRef.nativeElement; } } diff --git a/packages/mosaic/link/link.scss b/packages/mosaic/link/link.scss deleted file mode 100644 index 0e7ce6bb7..000000000 --- a/packages/mosaic/link/link.scss +++ /dev/null @@ -1,24 +0,0 @@ -.mc-link { - text-decoration: none; - - cursor: pointer; - - & > .mc-link__icon { - color: inherit; - } - - & > .mc-link__text:not(:first-child) { - margin-left: 4px; - } - - & > .mc-link__text:not(:last-child) { - margin-right: 4px; - } - - &[disabled] { - pointer-events: none; - cursor: default; - } -} - -