feat(badge): add variables for badge

A-l-y-l-e · Oct 29, 2018 · 0c82fc9 · 0c82fc9
1 parent 31e065a
commit 0c82fc9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 35 deletions.
diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts
@@ -1,25 +1,30 @@
-import { Directive, Input, ElementRef, Optional, Renderer2, OnInit, OnChanges } from '@angular/core';
-import { ThemeVariables, LyCommon, LyTheme2, Dir } from '@alyle/ui';
+import { Directive, Input, ElementRef, Optional, Renderer2, OnInit } from '@angular/core';
+import { ThemeVariables, LyCommon, LyTheme2 } from '@alyle/ui';
 
 const STYLE_PRIORITY = -2;
-const DEFAULT_POSITION = 'end top';
+const DEFAULT_POSITION = 'startTop';
 const DEFAULT_BG = 'primary';
-
+const DEFAULT_POSITION_VALUE = {
+  end: '-11px',
+  top: '-11px'
+};
 const styles = (theme: ThemeVariables) => ({
   root: {
     position: 'absolute',
+    display: 'flex',
     width: '22px',
     height: '22px',
     borderRadius: '100%',
-    lineHeight: '22px',
-    textAlign: 'center',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     pointerEvents: 'none',
     zIndex: 1,
     fontSize: theme.pxToRem(12),
-    fontFamily: theme.typography.fontFamily
+    fontFamily: theme.typography.fontFamily,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...theme.badge.root
   },
   relative: {
     position: 'relative'
@@ -35,7 +40,7 @@ export class LyBadge implements OnInit {
    */
   classes = this._theme.addStyleSheet(styles, STYLE_PRIORITY);
   private _content: string | number;
-  private _position: 'start top' | 'start bottom' | 'end top' | 'end bottom';
+  private _position: string;
   private _positionClass: string;
   private _elContainer: any;
   private _badgeElementRef: any;
@@ -55,32 +60,16 @@ export class LyBadge implements OnInit {
 
   /** The position for the badge */
   @Input('lyBadgePosition')
-  set position(val: 'start top' | 'start bottom' | 'end top' | 'end bottom') {
+  set position(val: string) {
     if (val !== this.position) {
       this._position = val;
       this._positionClass = this._theme.addStyle(`ly-badge.position:${val}`, (theme: ThemeVariables) => {
-        const positionStyles: {
-          top?: number
-          left?: number
-          right?: number
-          bottom?: number
-          transform?: string
-        } = {};
-        const dir = theme.getDirection(val.indexOf(Dir.start) !== -1 ? Dir.start : Dir.end);
-        positionStyles[dir] = 0;
-        if (dir === 'left') {
-          positionStyles.transform = 'translateX(-50%)';
+        const sty = theme.badge.position && theme.badge.position[val] || val === DEFAULT_POSITION ? DEFAULT_POSITION_VALUE : null;
+        if (sty) {
+          return sty;
         } else {
-          positionStyles.transform = 'translateX(50%)';
-        }
-        if (val.indexOf('top') !== -1) {
-          positionStyles.top = 0;
-          positionStyles.transform += 'translateY(-50%)';
-        } else if (val.indexOf('bottom') !== -1) {
-          positionStyles.bottom = 0;
-          positionStyles.transform += 'translateY(50%)';
+          throw new Error(`LyBadge.position \`${val}\` not found in \`ThemeVariables\``);
         }
-        return positionStyles;
       },
       this._badgeElementRef, this._positionClass, STYLE_PRIORITY);
     }

diff --git a/src/lib/themes/minima/base.ts b/src/lib/themes/minima/base.ts
@@ -1,7 +1,8 @@
 import {
   LyStyleUtils,
   TypographyConfig, // Do not delete this, this is necessary to generate the types correctly
-  IRippleVariables // Do not delete this, this is necessary to generate the types correctly
+  IRippleVariables, // Do not delete this, this is necessary to generate the types correctly
+  Dir
 } from '@alyle/ui';
 import { typography, iconButton, icon, zIndex, animations } from './variables';
 import { Breakpoints } from '@alyle/ui/responsive';
@@ -15,9 +16,5 @@ export class MinimaBase extends LyStyleUtils {
   zIndex = zIndex;
   ripple = RippleVariables;
   animations = animations;
-  badge = {
-    position: {
-      // code
-    }
-  };
+  direction = Dir.ltr;
 }