Skip to content

Commit

Permalink
feat(field): add outlined type
Browse files Browse the repository at this point in the history
  • Loading branch information
@alyleui
alyleui committed Oct 13, 2018
1 parent b37f2a5 commit ad3feee
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 42 deletions.
8 changes: 8 additions & 0 deletions src/app/docs/components/field-demo/basic-field/basic-field.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,14 @@
<ly-placeholder>ly-placeholder</ly-placeholder>
<input value="value">
</ly-field>
<ly-field appearance="outlined">
<ly-label>outlined</ly-label>
<input value="value">
</ly-field>
<ly-field appearance="outlined">
<ly-label>outlined</ly-label>
<textarea>value</textarea>
</ly-field>

<ly-field>
<input value="disabled" [disabled]="true">
Expand Down
12 changes: 2 additions & 10 deletions src/lib/field/field.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
<div [className]="classes.container">
<ng-content></ng-content>
<div [className]="classes.fakeContainer">
<div [className]="classes.labelSpacingStart"></div>
<div [className]="classes.labelCenter" *ngIf="_isLabel()" #_labelCenter>

</div>
<div [className]="classes.labelSpacingEnd"></div>
</div>
<div [className]="classes.labelContainer">
<div [className]="classes.labelSpacingStart"></div>
<div [className]="classes.labelCenter" *ngIf="_isLabel()" #_labelCenter>
<div [className]="classes.label" #_labelContainer *ngIf="_isLabel()">
<div [className]="classes.labelCenter" #_labelContainer>
<div [className]="classes.label" *ngIf="_isLabel()">
<ng-container *ngTemplateOutlet="_labelTemplate"></ng-container>
</div>
</div>
Expand All @@ -19,7 +12,6 @@
<div [className]="classes.placeholder" *ngIf="_isPlaceholder() && _isEmpty() && _input.focused">
<ng-container *ngTemplateOutlet="_placeholderTemplate"></ng-container>
</div>
<div [className]="classes.underline"></div>
<div [className]="classes.hint"></div>
</div>

Expand Down
54 changes: 34 additions & 20 deletions src/lib/field/field.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ const styles = (theme: ThemeVariables) => {
return {
root: {
display: 'inline-block',
position: 'relative'
position: 'relative',
marginBottom: '1em'
},
container: {
paddingTop: '1em',
Expand All @@ -40,7 +41,6 @@ const styles = (theme: ThemeVariables) => {
},
labelContainer: {
...LY_COMMON_STYLES.fill,
paddingTop: '1em',
pointerEvents: 'none',
display: 'flex'
},
Expand All @@ -52,8 +52,6 @@ const styles = (theme: ThemeVariables) => {
flex: 1
},
label: {
// ...LY_COMMON_STYLES.fill,
// bottom: null,
pointerEvents: 'none',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
Expand Down Expand Up @@ -104,7 +102,6 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit {
protected _withColor: string;
protected _withColorClass: string;
protected _isFloating: boolean;
@ViewChild('_labelCenter') _labelCenter: ElementRef<HTMLDivElement>;
@ViewChild('_labelContainer') _labelContainer: ElementRef<HTMLDivElement>;
@ContentChild(LyInputNative) _input: LyInputNative;
@ContentChild(LyPlaceholder) _placeholderChild: LyPlaceholder;
Expand All @@ -116,14 +113,17 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit {
this._withColorClass = this._theme.addStyle(`ly-field.withColor:${val}`, (theme: ThemeVariables) => {
const color = theme.colorOf(val);
return {
[`&.${this.classes.focused} .${this.classes.labelFloating}`]: {
[`&.${this.classes.focused} .${this.classes.labelFloating} .${this.classes.label}`]: {
color
},
[`&.${this.classes.focused} .${this.classes.labelContainer}`]: {
color
},
[`& .${this.classes.inputNative}`]: {
caretColor: color
}
};
}, this._el.nativeElement, this._withColorClass, STYLE_PRIORITY);
}, this._el.nativeElement, this._withColorClass, STYLE_PRIORITY + 1);
}
}
get withColor() {
Expand All @@ -135,11 +135,34 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit {
if (val !== this.appearance) {
this._appearance = val;
this._appearanceClass = this._theme.addStyle(`ly-field.appearance:${val}`, (theme: ThemeVariables) => {
const appearance = (theme.input as any).appearance[val];
return {
[`& .${this.classes.inputNative}`]: (theme.input as any).appearance[val].input,
[`& .${this.classes.placeholder}`]: (theme.input as any).appearance[val].input,
[`& .${this.classes.label}`]: (theme.input as any).appearance[val].input,
[`& .${this.classes.labelFloating}`]: (theme.input as any).appearance[val].floatingLabel
[`& .${this.classes.inputNative}`]: appearance.input,
[`& .${this.classes.placeholder}`]: appearance.input,
[`& .${this.classes.label}`]: {
...appearance.label
},
[`& .${this.classes.container}:hover .${this.classes.labelContainer} > div`]: {
...appearance.containerLabelHover
},
[`&.${this.classes.focused} .${this.classes.labelContainer} > div`]: {
...appearance.containerLabelFocused
},
[`& .${this.classes.labelContainer} > div`]: {
...appearance.containerLabel,
position: 'relative'
},
[`& .${this.classes.labelFloating} .${this.classes.label}`]: appearance.labelFloating,
[`& .${this.classes.labelFloating}`]: appearance.containerLabelCenterFloating,
[`& .${this.classes.labelSpacingStart}`]: {
...appearance.containerLabelStart
},
[`& .${this.classes.labelCenter}`]: {
...appearance.containerLabelCenter
},
[`& .${this.classes.labelSpacingEnd}`]: {
...appearance.containerLabelEnd
}
};
}, this._el.nativeElement, this._appearanceClass, STYLE_PRIORITY);
}
Expand Down Expand Up @@ -167,15 +190,6 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit {

ngAfterContentInit() {
this._renderer.addClass(this._input._hostElement, this.classes.inputNative);
// if (this._labelCenter) {
// if (this._labelChild) {
// this._renderer.appendChild(this._labelCenter.nativeElement, this._labelChild._vcr.element.nativeElement);
// console.log(this._labelChild._vcr.element);
// } else if (this._placeholderChild) {
// this._renderer.appendChild(this._labelCenter.nativeElement, this._placeholderChild._vcr.element.nativeElement);
// console.log(this._placeholderChild._vcr.element);
// }
// }

this._input.valueChanges.subscribe(() => {
this._updateFloatingLabel();
Expand Down
89 changes: 77 additions & 12 deletions src/lib/themes/minima/variables.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TypographyConfig } from '@alyle/ui';
import { TypographyConfig, LY_COMMON_STYLES } from '@alyle/ui';

export const typography = {
fontFamily: `'Roboto', sans-serif`,
Expand Down Expand Up @@ -84,29 +84,94 @@ export const input = {
withColor: 'primary',
appearance: {
standard: {
input: {
// marginTop && marginBottom === 21px
containerLabel: {
color: 'rgba(0,0,0,.12)',
borderBottom: 'solid 1px currentColor'
},
containerLabelFocused: {
color: 'currentColor',
borderWidth: '2px',
borderColor: 'currentColor'
},
containerLabelHover: {
color: 'currentColor'
},
label: {
// marginTop && marginBottom === 21px === 1.3125em
marginTop: '1em',
marginBottom: '.3125em'
marginBottom: '.3125em',
paddingTop: '1em'
},
input: {
// marginTop && marginBottom === 21px === 1.3125em
paddingTop: '1em',
paddingBottom: '.3125em'
},
floatingLabel: {
labelFloating: {
transform: 'translateY(-1em)'
}
}, // default & important
outlined: {
containerLabel: {
color: 'rgba(0,0,0,.12)',
border: '1px currentColor',
'&:hover': {
border: '2px'
'&:before': {
...LY_COMMON_STYLES.fill,
content: `\'\'`
},
'&:after': {
...LY_COMMON_STYLES.fill,
content: `\'\'`
}
},
containerLabelHover: {
color: 'currentColor'
},
containerLabelFocused: {
color: 'currentColor',
'&:after': {
borderWidth: '2px',
borderColor: 'currentColor',
}
},
label: {
margin: 'auto .5em'
},
containerLabelStart: {
paddingRight: '.5em',
'&:after': {
border: 'solid 1px currentColor',
borderRadius: '5px 0 0 5px',
borderRight: 'none',
}
},
containerLabelCenter: {
'&:before': {
borderTop: 'solid 1px currentColor',
},
'&:after': {
borderBottom: 'solid 1px currentColor',
}
},
containerLabelCenterFloating: {
'&:before': {
borderWidth: '0 !important'
}
},
containerLabelEnd: {
paddingRight: '.5em',
'&:after': {
border: 'solid 1px currentColor',
borderRadius: '0 5px 5px 0',
borderLeft: 'none'
}
},
input: {
marginTop: '1.5em',
marginBottom: '.5em'
marginTop: '.3125em',
marginBottom: '1em',
padding: '0 1em'
},
floatingLabel: {
transform: 'translateY(-2em)'
labelFloating: {
transform: 'translateY(-2.25em)'
}
},
filled: {
Expand Down

0 comments on commit ad3feee

Please sign in to comment.