perf(button): update styles

A-l-y-l-e · Aug 18, 2018 · 8efee2b · 8efee2b
1 parent c3677ca
commit 8efee2b
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 171 deletions.
diff --git a/src/lib/button/button.style.ts b/src/lib/button/button.style.ts
@@ -26,13 +26,10 @@ export const styles = theme => {
       userSelect: 'none',
       textDecorationLine: 'none',
       '-webkit-text-decoration-line': 'none',
-      transition: 'all 375ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
+      transition: 'background 375ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, box-shadow 280ms cubic-bezier(.4,0,.2,1) 0ms',
       overflow: 'hidden',
       ...button
     },
-    outlined: {
-      border: '1px solid currentColor'
-    },
     content: {
       padding: 0,
       display: 'flex',

diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
@@ -1,12 +1,10 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   Input,
   Optional,
   Renderer2,
-  ViewChild,
   NgZone,
   OnDestroy,
   OnInit,
@@ -60,18 +58,17 @@ export class LyButton implements OnInit, OnDestroy {
   };
   public _disabled = false;
   private _rippleSensitive = false;
-  private _disabledClassName: string;
-  private _outlinedClassName: string;
+  // private _outlinedClassName: string;
   private _rippleContainer: Ripple;
   private _size: string;
   private _sizeClass: string;
 
-  @Input()
-  set outlined(val: boolean) {
-    const classname = toBoolean(val) === true ? this.classes.outlined : '';
-    this.theme.updateClassName(this.elementRef.nativeElement, this.renderer, classname, this._outlinedClassName);
-    this._outlinedClassName = classname;
-  }
+  // @Input()
+  // set outlined(val: boolean) {
+  //   const classname = toBoolean(val) === true ? this.classes.outlined : '';
+  //   this.theme.updateClassName(this.elementRef.nativeElement, this.renderer, classname, this._outlinedClassName);
+  //   this._outlinedClassName = classname;
+  // }
 
   @Input('sensitive')
   get rippleSensitive(): boolean {
@@ -97,16 +94,16 @@ export class LyButton implements OnInit, OnDestroy {
     return this._size;
   }
 
-  @Input()
-  set disabled(value: boolean) {
-    this._disabled = toBoolean(value);
-    if (this._disabled) {
-      const key = this.bgAndColor && (this.bgAndColor.raised || this.bgAndColor.bg) ? 'r' : 'f';
-      this._disabledClassName = this.theme.addStyle(`lyButton-disabled:${key}`, this.disableStyle.bind(this), this.elementRef.nativeElement, this._disabledClassName);
-    } else {
-      this.renderer.removeClass(this.elementRef.nativeElement, this._disabledClassName);
-    }
-  }
+  // @Input()
+  // set disabled(value: boolean) {
+  //   this._disabled = toBoolean(value);
+  //   if (this._disabled) {
+  //     const key = this.bgAndColor && (this.bgAndColor.raised || this.bgAndColor.bg) ? 'r' : 'f';
+  //     this._disabledClassName = this.theme.addStyle(`lyButton-disabled:${key}`, this.disableStyle.bind(this), this.elementRef.nativeElement, this._disabledClassName);
+  //   } else {
+  //     this.renderer.removeClass(this.elementRef.nativeElement, this._disabledClassName);
+  //   }
+  // }
   get disabled() {
     return this._disabled;
   }
@@ -140,17 +137,17 @@ export class LyButton implements OnInit, OnDestroy {
     this.elementRef.nativeElement.focus();
   }
 
-  private disableStyle() {
-    let style =
-    `box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;` +
-    `cursor: default;` +
-    `color: ${this.theme.config.text.disabled} !important;` +
-    `pointer-events: none;`;
-    if (this.bgAndColor && (this.bgAndColor.raised || this.bgAndColor.bg)) {
-      style += `background-color: ${this.theme.config.button.disabled} !important;`;
-    }
-    return style;
-  }
+  // private disableStyle() {
+  //   let style =
+  //   `box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;` +
+  //   `cursor: default;` +
+  //   `color: ${this.theme.config.text.disabled} !important;` +
+  //   `pointer-events: none;`;
+  //   if (this.bgAndColor && (this.bgAndColor.raised || this.bgAndColor.bg)) {
+  //     style += `background-color: ${this.theme.config.button.disabled} !important;`;
+  //   }
+  //   return style;
+  // }
 
   ngOnDestroy() {
     if (Platform.isBrowser) {

diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts
@@ -11,7 +11,7 @@ export * from './src/focus-state/focus-state.module';
 export * from './src/version';
 export * from './src/gesture/gesture-config';
 export * from './src/theme/contrast';
-export * from './src/theme/bg-color-and-raised.directive';
+export * from './src/theme/common.directive';
 export * from './src/theme/shadow.service';
 export * from './src/theme/core-theme.service';
 export * from './src/theme/theme-config';

diff --git a/src/lib/src/theme/bg-color-and-raised.directive.ts b/src/lib/src/theme/bg-color-and-raised.directive.ts