From ff58123bb9d7efc5517cbbdb5200a5c052ca5f70 Mon Sep 17 00:00:00 2001 From: Enlcxx <8032887+Enlcxx@users.noreply.github.com> Date: Sat, 30 Mar 2019 22:15:52 -0400 Subject: [PATCH] fix(field): fix theme variables ability to customize a component through themes --- src/lib/field/field.ts | 68 +++++------------ src/lib/src/theme/variables/field.ts | 14 ++++ src/lib/themes/minima/base.ts | 88 ++++++++++++++++++++++ src/lib/themes/minima/dark.ts | 5 +- src/lib/themes/minima/light.ts | 5 +- src/lib/themes/minima/variables.ts | 105 --------------------------- 6 files changed, 126 insertions(+), 159 deletions(-) create mode 100644 src/lib/src/theme/variables/field.ts diff --git a/src/lib/field/field.ts b/src/lib/field/field.ts index b7611f5c0..4b3cc314a 100644 --- a/src/lib/field/field.ts +++ b/src/lib/field/field.ts @@ -23,7 +23,7 @@ import { forwardRef, DoCheck } from '@angular/core'; -import { LyTheme2, ThemeVariables, mergeDeep, ElementObserver, Platform, toBoolean, DirAlias } from '@alyle/ui'; +import { LyTheme2, ThemeVariables, ElementObserver, Platform, toBoolean, DirAlias } from '@alyle/ui'; import { LyLabel } from './label'; import { LyPlaceholder } from './placeholder'; import { LyHint } from './hint'; @@ -40,44 +40,39 @@ const STYLE_PRIORITY = -2; const DEFAULT_APPEARANCE = 'standard'; const DEFAULT_APPEARANCE_THEME = { standard: { - root: { - '&:not({disabled}) {container}:hover:after': { - borderBottomColor: 'currentColor' - }, - '&{disabled} {container}:after': { - borderBottomStyle: 'dotted', - borderColor: 'inherit' - }, - 'textarea{inputNative}': { - margin: '0.25em 0' - }, - '{inputNative}:not(textarea)': { - padding: '0.25em 0' - } + '&:not({disabled}) {container}:hover:after': { + borderBottomColor: 'currentColor' + }, + '&{disabled} {container}:after': { + borderBottomStyle: 'dotted', + borderColor: 'inherit' + }, + 'textarea{inputNative}': { + margin: '0.25em 0' }, - container: { + '{inputNative}:not(textarea)': { + padding: '0.25em 0' + }, + '& {container}': { padding: '1em 0 0', '&:after': { borderBottomStyle: 'solid', borderBottomWidth: '1px' } }, - containerFocused: { + '&{focused} {container}': { '&:after': { borderWidth: '2px', borderColor: 'currentColor' } }, - containerLabelHover: { - color: 'currentColor' - }, - label: { + '& {label}': { margin: '0.25em 0' }, - placeholder: { + '& {placeholder}': { margin: '0.25em 0' }, - floatingLabel: { + '& {floatingLabel}': { transform: 'translateY(-1.25em)' } } @@ -214,31 +209,8 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit, OnDestr throw new Error(`${val} not found in theme.field.appearance`); } this._appearanceClass = this._theme.addStyle(`ly-field.appearance:${val}`, (theme: ThemeVariables) => { - const appearance = mergeDeep({}, theme.field.appearance.base, theme.field.appearance[val] || DEFAULT_APPEARANCE_THEME[val]); - const classes = this.classes; - return { - '&': {...appearance.root}, - [`& .${classes.container}`]: {...appearance.container}, - [`& .${classes.prefix}`]: {...appearance.prefix}, - [`& .${classes.infix}`]: {...appearance.infix}, - [`& .${classes.suffix}`]: {...appearance.suffix}, - [`& .${classes.inputNative}`]: {...appearance.input}, - [`& .${classes.fieldset}`]: {...appearance.fieldset}, - [`& .${classes.placeholder}`]: { - ...appearance.placeholder - }, - [`& .${classes.label}`]: { - ...appearance.label - }, - [`& .${classes.hintContainer}`]: { - ...appearance.hint - }, - [`& .${classes.floatingLabel}.${classes.label}`]: {...appearance.floatingLabel}, - - [`&.${classes.focused} .${classes.container}`]: { - ...appearance.containerFocused - }, - }; + const appearance = theme.field.appearance[val] || DEFAULT_APPEARANCE_THEME[val]; + return appearance; }, this._el.nativeElement, this._appearanceClass, STYLE_PRIORITY, STYLES); } } diff --git a/src/lib/src/theme/variables/field.ts b/src/lib/src/theme/variables/field.ts new file mode 100644 index 000000000..13fe28ebe --- /dev/null +++ b/src/lib/src/theme/variables/field.ts @@ -0,0 +1,14 @@ +import { StyleContainer } from '../style'; + +export interface FieldVariables { + root?: StyleContainer; + borderColor: string; + labelColor: string; + defaultConfig: { + appearance?: keyof FieldVariables['appearance'] + }; + appearance: { + outlined?: StyleContainer + filled?: StyleContainer + }; +} diff --git a/src/lib/themes/minima/base.ts b/src/lib/themes/minima/base.ts index 9eed49350..754674793 100644 --- a/src/lib/themes/minima/base.ts +++ b/src/lib/themes/minima/base.ts @@ -94,6 +94,94 @@ export class MinimaBase extends LyStyleUtils { } } }; + + field = { + appearance: { + outlined: { + '&:not({focused}):not({disabled}):hover {fieldset}': { + borderColor: 'currentColor' + }, + '&{focused} {fieldset}': { + borderWidth: '2px', + borderColor: 'inherit' + }, + '& textarea{inputNative}': { + margin: '1em 0' + }, + '& {inputNative}:not(textarea)': { + padding: '1em 0' + }, + '& {container}': { + padding: '0 0.75em' + }, + '& {fieldset}': { + borderWidth: '1px', + borderRadius: '5px', + padding: '0 .5em' + }, + '& {prefix}': { + '&:after': { + padding: '0.25em' + } + }, + '& suffix': { + '&:after': { + padding: '0.25em' + } + }, + '& {label}': { + margin: '1em 0' + }, + '& {placeholder}': { + margin: '1em 0' + }, + '& {floatingLabel}{label}': { + transform: 'translateY(-1.75em)' + }, + '& {hintContainer}': { + padding: '0 0.75em' + } + }, + filled: { + '&:not({focused}):not({disabled}) {container}:hover:after': { + borderBottomWidth: '1px' + }, + 'textarea{inputNative}': { + margin: '1.59375em 0 0.40625em' + }, + '{inputNative}:not(textarea)': { + padding: '1.59375em 0 0.40625em' + }, + '& {container}': { + borderRadius: '5px 5px 0 0', + padding: '0 0.75em', + '&:after': { + borderBottomStyle: 'solid', + borderBottomColor: 'currentColor', + borderBottomWidth: '0' + } + }, + '&{focused} {container}': { + '&:after': { + borderBottomWidth: '2px' + } + }, + '& {placeholder}': { + margin: '1.59375em 0 0.40625em' + }, + '& {label}': { + margin: '1em 0' + }, + '& {floatingLabel}{label}': { + transform: 'translateY(-.75em)' + }, + '& {hintContainer}': { + padding: '0 0.75em' + } + } + } + }; + constructor() { super(); this.typography.lyTyp = { diff --git a/src/lib/themes/minima/dark.ts b/src/lib/themes/minima/dark.ts index 5e4d632f4..0d9b92da5 100644 --- a/src/lib/themes/minima/dark.ts +++ b/src/lib/themes/minima/dark.ts @@ -1,4 +1,3 @@ -import { field } from './variables'; import { ThemeConfig, mergeDeep } from '@alyle/ui'; import { MinimaBase } from './base'; @@ -56,12 +55,12 @@ export class MinimaDark extends MinimaBase implements ThemeConfig { divider = 'rgba(255, 255, 255, 0.12)'; colorShadow = shadow; shadow = shadow; - field = mergeDeep({}, field, { + field = mergeDeep({}, this.field, { borderColor: 'rgba(255, 255, 255, 0.12)', labelColor: 'rgba(255, 255, 255, 0.4)', appearance: { filled: { - container: { + '& {container}': { backgroundColor: 'rgba(255, 255, 255, 0.04)', } } diff --git a/src/lib/themes/minima/light.ts b/src/lib/themes/minima/light.ts index 86b25a7e6..b34a31146 100644 --- a/src/lib/themes/minima/light.ts +++ b/src/lib/themes/minima/light.ts @@ -1,5 +1,4 @@ import { ThemeConfig, mergeDeep } from '@alyle/ui'; -import { field } from './variables'; import { MinimaBase } from './base'; const contrast = '#fff'; @@ -56,12 +55,12 @@ export class MinimaLight extends MinimaBase implements ThemeConfig { backdrop: 'rgba(0,0,0,.6)' }; bar = '#f5f5f5'; - field = mergeDeep({}, field, { + field = mergeDeep({}, this.field, { borderColor: 'rgba(0, 0, 0, 0.23)', labelColor: 'rgba(0, 0, 0, 0.6)', appearance: { filled: { - container: { + '{container}': { backgroundColor: 'rgba(0, 0, 0, 0.04)', } } diff --git a/src/lib/themes/minima/variables.ts b/src/lib/themes/minima/variables.ts index 40f85a484..be55fbc5e 100644 --- a/src/lib/themes/minima/variables.ts +++ b/src/lib/themes/minima/variables.ts @@ -5,111 +5,6 @@ export const iconButton = { export const icon = { fontSize: '24px' }; -export const field = { - appearance: { - outlined: { - root: { - '&:not({focused}):not({disabled}):hover {fieldset}': { - borderColor: 'currentColor' - }, - '&{focused} {fieldset}': { - borderWidth: '2px', - borderColor: 'inherit' - }, - 'textarea{inputNative}': { - margin: '1em 0' - }, - '{inputNative}:not(textarea)': { - padding: '1em 0' - } - }, - container: { - padding: '0 0.75em' - }, - fieldset: { - borderWidth: '1px', - borderRadius: '5px', - padding: '0 .5em' - }, - containerLabelFocused: { - color: 'currentColor', - '&:after': { - borderWidth: '2px', - borderColor: 'currentColor' - } - }, - prefix: { - '&:after': { - padding: '0.25em' - } - }, - suffix: { - '&:after': { - padding: '0.25em' - } - }, - label: { - margin: '1em 0' - }, - placeholder: { - margin: '1em 0' - }, - floatingLabel: { - transform: 'translateY(-1.75em)' - }, - hint: { - padding: '0 0.75em' - } - }, - filled: { - root: { - '&:not({focused}):not({disabled}) {container}:hover:after': { - borderBottomWidth: '1px' - }, - 'textarea{inputNative}': { - margin: '1.59375em 0 0.40625em' - }, - '{inputNative}:not(textarea)': { - padding: '1.59375em 0 0.40625em' - } - }, - container: { - borderRadius: '5px 5px 0 0', - padding: '0 0.75em', - '&:after': { - borderBottomStyle: 'solid', - borderBottomColor: 'currentColor', - borderBottomWidth: '0' - } - }, - containerFocused: { - '&:after': { - borderBottomWidth: '2px' - } - }, - containerLabelFocused: { - color: 'currentColor', - borderWidth: '2px', - borderColor: 'currentColor' - }, - containerLabelHover: { - color: 'currentColor' - }, - placeholder: { - margin: '1.59375em 0 0.40625em' - }, - label: { - margin: '1em 0' - }, - floatingLabel: { - transform: 'translateY(-.75em)' - }, - hint: { - padding: '0 0.75em' - } - } - } -}; export const zIndex = { toolbar: 1000,