diff --git a/packages/dev-app/button/button-demo.html b/packages/dev-app/button/button-demo.html index 5561181cd..37b9370b0 100644 --- a/packages/dev-app/button/button-demo.html +++ b/packages/dev-app/button/button-demo.html @@ -22,39 +22,39 @@

- - -   + + +  

- - - - - + + + + +

- - - - - + + + + +

- - - - - + + + + +
diff --git a/packages/mosaic-dev/all/template.html b/packages/mosaic-dev/all/template.html index 689d83f08..6da91d329 100644 --- a/packages/mosaic-dev/all/template.html +++ b/packages/mosaic-dev/all/template.html @@ -335,10 +335,10 @@

Checkbox

Dropdown

- - + + - @@ -1206,6 +1206,122 @@

Tree

+ +
+

Groups

+ +
+ + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + + + + +
+ +
+ +
+ + + Normal + Hovered + Selected + Selected1 + + + + +
+ +
+ +
+ + + + + Normal + Hovered + Selected + Selected1 + + +
+
diff --git a/packages/mosaic-dev/button/template.html b/packages/mosaic-dev/button/template.html index 5561181cd..b94abbcb9 100644 --- a/packages/mosaic-dev/button/template.html +++ b/packages/mosaic-dev/button/template.html @@ -22,7 +22,7 @@

- +   @@ -30,31 +30,31 @@

- - - - - + + + + +

- - - - - + + + + +

- - - - - + + + + +
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 0a7d5638b..8c6b36658 100644 --- a/packages/mosaic-dev/dropdown/template.html +++ b/packages/mosaic-dev/dropdown/template.html @@ -1,8 +1,8 @@
- - + + - @@ -29,7 +29,9 @@
Additional info
- Link + + Link + diff --git a/packages/mosaic-dev/input/template.html b/packages/mosaic-dev/input/template.html index f55c68753..cc290b42e 100644 --- a/packages/mosaic-dev/input/template.html +++ b/packages/mosaic-dev/input/template.html @@ -1,16 +1,10 @@
Number Value: {{ numberValue }}
-
- - -

- + 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/button-toggle/button-toggle.scss b/packages/mosaic/button-toggle/button-toggle.scss index 00ebcbfe5..f56c8f4ca 100644 --- a/packages/mosaic/button-toggle/button-toggle.scss +++ b/packages/mosaic/button-toggle/button-toggle.scss @@ -1,7 +1,7 @@ @import '../core/styles/common/vendor-prefixes'; @import '../core/styles/common/layout'; @import '../../cdk/a11y/a11y'; -@import '../core/styles/common/button'; +@import '../core/styles/common/groups'; $mc-button-toggle-standard-padding: 0 12px !default; $mc-button-toggle-standard-height: 20px !default; diff --git a/packages/mosaic/button/_button-base.scss b/packages/mosaic/button/_button-base.scss index d80ad71a4..ae52dcec8 100644 --- a/packages/mosaic/button/_button-base.scss +++ b/packages/mosaic/button/_button-base.scss @@ -1,9 +1,6 @@ @import '../core/styles/common/button'; -$mc-button-border-size: 1px; - $mc-button-margin: 0 !default; -$mc-button-border-radius: 3px; // TODO: convert it to common values from typography $mc-button-padding: 5px 15px; diff --git a/packages/mosaic/button/button.scss b/packages/mosaic/button/button.scss index b0779dcc3..25e926edf 100644 --- a/packages/mosaic/button/button.scss +++ b/packages/mosaic/button/button.scss @@ -55,69 +55,3 @@ pointer-events: none; border-radius: inherit; } - -.mc-button-group { - display: flex; - flex-direction: row; - - > .mc-button, - > .mc-icon-button { - - &:first-of-type:not(:last-of-type) { - @include border-right-radius(0); - } - - &:last-of-type:not(:first-of-type) { - @include border-left-radius(0); - } - - &:not(:first-of-type):not(:last-of-type) { - border-radius: 0; - } - } - - .mc-button + .mc-button, - .mc-button + .mc-icon-button, - .mc-icon-button + .mc-icon-button, - .mc-icon-button + .mc-button { - margin-left: -$mc-button-border-size; - } -} - -.mc-button-group_justified { - > .mc-button, - > .mc-icon-button { - width: 100%; - } -} - -.mc-button-group_vertical { - display: flex; - flex-direction: column; - - > .mc-button, - > .mc-icon-button { - &:first-child:not(:last-child) { - @include border-bottom-radius(0); - - border-top-right-radius: $mc-button-border-radius; - } - - &:last-child:not(:first-child) { - @include border-top-radius(0); - - border-bottom-left-radius: $mc-button-border-radius; - } - - &:not(:first-child):not(:last-child) { - border-radius: 0; - } - } - - .mc-button + .mc-button, - .mc-button + .mc-icon-button, - .mc-icon-button + .mc-icon-button, - .mc-icon-button + .mc-button { - margin-top: -$mc-button-border-size; - } -} diff --git a/packages/mosaic/core/_core.scss b/packages/mosaic/core/_core.scss index 38d3d1367..3ee7fd77d 100644 --- a/packages/mosaic/core/_core.scss +++ b/packages/mosaic/core/_core.scss @@ -1,4 +1,5 @@ @import 'styles/common/animation'; +@import 'styles/common/groups'; @import '../../cdk/a11y/a11y'; @import '../../../node_modules/@angular/cdk/overlay'; diff --git a/packages/mosaic/core/styles/common/_button.scss b/packages/mosaic/core/styles/common/_button.scss index 2d99584a9..9fb424813 100644 --- a/packages/mosaic/core/styles/common/_button.scss +++ b/packages/mosaic/core/styles/common/_button.scss @@ -1,5 +1,8 @@ @import 'vendor-prefixes'; +$mc-button-border-size: 1px; +$mc-button-border-radius: 3px; + @mixin mc-button-reset { @include user-select(none); @@ -8,31 +11,3 @@ border: none; } -@mixin border-top-radius($radius) { - border-top: { - right-radius: $radius; - left-radius: $radius; - } -} - -@mixin border-bottom-radius($radius) { - border-bottom: { - right-radius: $radius; - left-radius: $radius; - } -} - -@mixin border-right-radius($radius) { - border: { - bottom-right-radius: $radius; - top-right-radius: $radius; - } -} - -@mixin border-left-radius($radius) { - border: { - bottom-left-radius: $radius; - top-left-radius: $radius; - } -} - diff --git a/packages/mosaic/core/styles/common/_groups.scss b/packages/mosaic/core/styles/common/_groups.scss new file mode 100644 index 000000000..b61805f72 --- /dev/null +++ b/packages/mosaic/core/styles/common/_groups.scss @@ -0,0 +1,110 @@ +@import 'vendor-prefixes'; +@import 'button'; + + +@mixin border-top-radius($radius) { + border-top: { + right-radius: $radius; + left-radius: $radius; + } +} + +@mixin border-bottom-radius($radius) { + border-bottom: { + right-radius: $radius; + left-radius: $radius; + } +} + +@mixin border-right-radius($radius) { + border: { + bottom-right-radius: $radius; + top-right-radius: $radius; + } +} + +@mixin border-left-radius($radius) { + border: { + bottom-left-radius: $radius; + top-left-radius: $radius; + } +} + +.mc-group { + display: flex; + flex-direction: row; + + & > .mc-group-item:first-child:not(:last-child) { + @include border-right-radius(0); + + > .mc-form-field__container { + @include border-right-radius(0); + } + } + + & > .mc-group-item:last-child:not(:first-child) { + @include border-left-radius(0); + + > .mc-form-field__container { + @include border-left-radius(0); + } + } + + & > .mc-group-item:not(:first-child):not(:last-child) { + border-radius: 0; + + > .mc-form-field__container { + border-radius: 0; + } + } + + .mc-group-item + .mc-group-item { + margin-left: -$mc-button-border-size; + } +} + +.mc-group_justified { + > .mc-group-item { + width: 100%; + } +} + +.mc-vertical-group { + display: flex; + flex-direction: column; + + > .mc-group-item { + &:first-child:not(:last-child) { + @include border-bottom-radius(0); + + border-top-right-radius: $mc-button-border-radius; + + > .mc-form-field__container { + @include border-bottom-radius(0); + } + } + + &:last-child:not(:first-child) { + @include border-top-radius(0); + + border-bottom-left-radius: $mc-button-border-radius; + + > .mc-form-field__container { + @include border-top-radius(0); + } + } + + &:not(:first-child):not(:last-child) { + border-radius: 0; + + > .mc-form-field__container { + border-radius: 0; + } + } + } + + .mc-group-item + .mc-group-item { + margin-top: -$mc-button-border-size; + } +} + 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/form-field/form-field.scss b/packages/mosaic/form-field/form-field.scss index f26d49b5a..f8c6700e0 100644 --- a/packages/mosaic/form-field/form-field.scss +++ b/packages/mosaic/form-field/form-field.scss @@ -6,6 +6,14 @@ $mc-form-field-border-size: 1px; display: inline-block; width: 100%; border-radius: $mc-form-field-border-radius; + + &:hover { + z-index: 1; + } + + &.mc-focused { + z-index: 2; + } } .mc-form-field__hint { 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; - } -} - -