menu-item improvements

This commit is contained in:
Henry Jameson 2024-02-11 23:11:28 +02:00
parent 9ec61d0f0a
commit 98f972e557
16 changed files with 209 additions and 251 deletions

View File

@ -129,15 +129,6 @@ i[class*="icon-"],
color: var(--icon); color: var(--icon);
} }
.button-unstyled:hover,
a:hover {
> i[class*="icon-"],
> .svg-inline--fa,
> .iconLetter {
color: var(--text);
}
}
nav { nav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
background-color: $fallback--fg; background-color: $fallback--fg;
@ -192,8 +183,7 @@ nav {
grid-column: 1 / span 3; grid-column: 1 / span 3;
grid-row: 1 / 1; grid-row: 1 / 1;
pointer-events: none; pointer-events: none;
background-color: rgb(0 0 0 / 15%); background-color: var(--underlay);
background-color: var(--underlay, rgb(0 0 0 / 15%));
z-index: -1000; z-index: -1000;
} }
@ -363,10 +353,7 @@ nav {
.button-default { .button-default {
user-select: none; user-select: none;
color: $fallback--text; color: var(--text);
color: var(--btnText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border: none; border: none;
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
@ -376,70 +363,12 @@ nav {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--interfaceFont, sans-serif);
&.-sublime {
background: transparent;
}
i[class*="icon-"],
.svg-inline--fa {
color: var(--icon);
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: none; border: none;
} }
&:active {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg);
svg,
i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
}
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg);
svg,
i {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggled, $fallback--fg);
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
svg,
i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
}
&.danger {
// TODO: add better color variable
color: $fallback--text;
color: var(--alertErrorPanelText, $fallback--text);
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError);
} }
} }
@ -458,8 +387,7 @@ nav {
color: inherit; color: inherit;
&.-link { &.-link {
color: $fallback--link; color: var(--link);
color: var(--link, $fallback--link);
} }
&.-fullwidth { &.-fullwidth {
@ -510,7 +438,6 @@ textarea {
&[disabled="disabled"], &[disabled="disabled"],
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5;
} }
&[type="range"] { &[type="range"] {
@ -610,9 +537,7 @@ textarea {
} }
option { option {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
} }
@ -746,6 +671,7 @@ option {
.faint { .faint {
--text: var(--textFaint); --text: var(--textFaint);
--textGreentext: var(--textGreentextFaint); --textGreentext: var(--textGreentextFaint);
--textCyantext: var(--textCyantextFaint);
--link: var(--linkFaint); --link: var(--linkFaint);
color: var(--text); color: var(--text);

View File

@ -0,0 +1,13 @@
export default {
name: 'Border',
selector: '/*border*/',
virtual: true,
defaultRules: [
{
directives: {
textColor: '$mod(--parent, 10)',
textAuto: 'no-auto'
}
}
]
}

View File

@ -23,28 +23,37 @@ const hoverGlow = {
export default { export default {
name: 'Button', // Name of the component name: 'Button', // Name of the component
selector: '.button', // CSS selector/prefix selector: '.button', // CSS selector/prefix
// States, system witll calculate ALL possible combinations of those and append a "normal" to them + standalone "normal" state // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
states: { states: {
// normal: state is implicitly added // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
// normal: '' // normal state is implicitly added, it is always included
disabled: ':disabled', disabled: ':disabled',
toggled: '.toggled', toggled: '.toggled',
pressed: ':active', pressed: ':active',
hover: ':hover', hover: ':hover',
focused: ':focus-within' focused: ':focus-within'
}, },
// Variants are mutually exclusive, which saves on computation time // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
variants: { variants: {
normal: '-default', // you can override normal variant // Variants save on computation time since adding new variant just adds one more "set".
danger: '.danger', normal: '-default', // you can override normal variant, it will be appenended to the main class
unstyled: '-unstyled' danger: '-default.danger'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist.
}, },
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
validInnerComponents: [ validInnerComponents: [
'Text', 'Text',
'Icon' 'Icon'
], ],
// Default rules, used as "default theme", essentially.
defaultRules: [ defaultRules: [
{ {
component: 'Button', // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
// like within it
directives: { directives: {
background: '--fg', background: '--fg',
shadow: [{ shadow: [{
@ -58,7 +67,6 @@ export default {
} }
}, },
{ {
component: 'Button',
variant: 'unstyled', variant: 'unstyled',
directives: { directives: {
background: '--fg', background: '--fg',
@ -66,14 +74,12 @@ export default {
} }
}, },
{ {
component: 'Button',
state: ['hover'], state: ['hover'],
directives: { directives: {
shadow: [hoverGlow, ...buttonInsetFakeBorders] shadow: [hoverGlow, ...buttonInsetFakeBorders]
} }
}, },
{ {
component: 'Button',
state: ['hover', 'pressed'], state: ['hover', 'pressed'],
directives: { directives: {
background: '--accent,-24.2', background: '--accent,-24.2',
@ -81,7 +87,6 @@ export default {
} }
}, },
{ {
component: 'Button',
state: ['disabled'], state: ['disabled'],
directives: { directives: {
background: '$blend(--background, 0.25, --parent)', background: '$blend(--background, 0.25, --parent)',

View File

@ -1,19 +0,0 @@
export default {
name: 'DropdownMenu',
selector: '.dropdown',
validInnerComponents: [
'Text',
'Icon',
'Input'
],
states: {
hover: ':hover'
},
defaultRules: [
{
directives: {
background: '--fg'
}
}
]
}

View File

@ -0,0 +1,45 @@
export default {
name: 'MenuItem',
selector: '.menu-item',
validInnerComponents: [
'Text',
'Icon',
'Input',
'Border'
],
states: {
hover: ':hover',
active: 'active'
},
defaultRules: [
{
directives: {
background: '--fg'
}
},
{
component: 'Text',
variant: 'normal',
parent: {
component: 'MenuItem',
state: ['normal', 'hover'],
variant: 'normal'
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
}
]
}

View File

@ -0,0 +1,8 @@
export default {
name: 'Modals',
selector: '.modal-view',
validInnerComponents: [
'Panel'
],
defaultRules: []
}

View File

@ -107,7 +107,7 @@
.NavPanel { .NavPanel {
.panel { .panel {
overflow: hidden; overflow: hidden;
box-shadow: var(--panelShadow); box-shadow: var(--shadow);
} }
ul { ul {
@ -124,14 +124,14 @@
} }
> li { > li {
&:first-child .menu-item { &:first-child.menu-item {
border-top-right-radius: $fallback--panelRadius; border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius); border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius; border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius); border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
} }
&:last-child .menu-item { &:last-child.menu-item {
border-bottom-right-radius: $fallback--panelRadius; border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius; border-bottom-left-radius: $fallback--panelRadius;

View File

@ -1,7 +1,6 @@
<template> <template>
<OptionalRouterLink <OptionalRouterLink
v-slot="{ isActive, href, navigate } = {}" v-slot="{ isActive, href, navigate } = {}"
ass="ass"
:to="routeTo" :to="routeTo"
> >
<li <li
@ -96,40 +95,5 @@
margin-right: -0.8em; margin-right: -0.8em;
} }
} }
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
.menu-icon {
--icon: var(--text, $fallback--icon);
}
}
&.-active {
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
.menu-icon {
--icon: var(--text, $fallback--icon);
}
&:hover {
text-decoration: underline;
}
}
} }
</style> </style>

View File

@ -7,12 +7,21 @@ export default {
'Icon', 'Icon',
'Button', 'Button',
'Input', 'Input',
'PanelHeader' 'PanelHeader',
'MenuItem'
], ],
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--bg' background: '--bg',
shadow: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
} }
} }
] ]

View File

@ -11,7 +11,8 @@ export default {
{ {
component: 'PanelHeader', component: 'PanelHeader',
directives: { directives: {
background: '--fg' background: '--fg',
shadow: []
} }
} }
] ]

View File

@ -1,6 +1,10 @@
export default { export default {
name: 'Popover', name: 'Popover',
selector: '.popover', selector: '.popover',
variants: {
tooltip: '.tooltip',
modal: '.modal'
},
validInnerComponents: [ validInnerComponents: [
'Text', 'Text',
'Link', 'Link',
@ -8,12 +12,20 @@ export default {
'Button', 'Button',
'Input', 'Input',
'PanelHeader', 'PanelHeader',
'DropdownMenu' 'MenuItem'
], ],
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--fg' background: '--bg',
shadow: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}]
} }
} }
] ]

View File

@ -3,8 +3,8 @@ export default {
selector: ':root', selector: ':root',
validInnerComponents: [ validInnerComponents: [
'Underlay', 'Underlay',
'TopBar', 'Modals',
'Popover' 'TopBar'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -1,6 +1,9 @@
export default { export default {
name: 'Underlay', name: 'Underlay',
selector: 'body', // Should be '#content' but for now this is better for testing until I have proper popovers and such... selector: '#content',
// Out of tree selector: Most components are laid over underlay, but underlay itself is not part of the DOM tree,
// i.e. it's a separate absolutely-positioned component, so we need to treat it differently depending on whether
// we are searching for underlay specifically or for whatever is laid on top of it.
outOfTreeSelector: '.underlay', outOfTreeSelector: '.underlay',
validInnerComponents: [ validInnerComponents: [
'Panel' 'Panel'

View File

@ -3,8 +3,6 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.panel-heading { .panel-heading {
background-color: inherit; background-color: inherit;
@ -24,8 +22,7 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 5; z-index: 5;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: var(--shadow);
box-shadow: var(--panelShadow);
pointer-events: none; pointer-events: none;
} }
} }
@ -133,58 +130,18 @@
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
border-width: 0 0 1px; border-width: 0 0 1px;
align-items: start; align-items: start;
// panel theme
color: var(--panelText);
&::after { &::after {
background-color: var(--background); background-color: var(--background);
z-index: -2; z-index: -2;
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
box-shadow: var(--panelHeaderShadow); box-shadow: var(--shadow);
}
.button-unstyled:hover,
a:hover {
i[class*="icon-"],
.svg-inline--fa,
.iconLetter {
color: var(--panelText);
}
}
.faint {
background-color: transparent;
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
} }
&:not(.-flexible-height) { &:not(.-flexible-height) {
> .button-default { > .button-default {
flex-shrink: 0; flex-shrink: 0;
&,
i[class*="icon-"] {
color: $fallback--text;
color: var(--btnPanelText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPressedPanel, $fallback--fg);
color: $fallback--text;
color: var(--btnPressedPanelText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledPanelText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledPanelText, $fallback--text);
}
} }
} }
@ -227,6 +184,6 @@
align-items: center; align-items: center;
border-width: 1px 0 0; border-width: 1px 0 0;
border-style: solid; border-style: solid;
border-color: var(--border, $fallback--border); border-color: var(--border);
} }
/* stylelint-enable no-descending-specificity */ /* stylelint-enable no-descending-specificity */

View File

@ -11,7 +11,8 @@ import Root from 'src/components/root.style.js'
import TopBar from 'src/components/top_bar.style.js' import TopBar from 'src/components/top_bar.style.js'
import Underlay from 'src/components/underlay.style.js' import Underlay from 'src/components/underlay.style.js'
import Popover from 'src/components/popover.style.js' import Popover from 'src/components/popover.style.js'
import DropdownMenu from 'src/components/dropdown_menu.style.js' import Modals from 'src/components/modals.style.js'
import MenuItem from 'src/components/menu_item.style.js'
import Panel from 'src/components/panel.style.js' import Panel from 'src/components/panel.style.js'
import PanelHeader from 'src/components/panel_header.style.js' import PanelHeader from 'src/components/panel_header.style.js'
import Button from 'src/components/button.style.js' import Button from 'src/components/button.style.js'
@ -19,34 +20,11 @@ import Input from 'src/components/input.style.js'
import Text from 'src/components/text.style.js' import Text from 'src/components/text.style.js'
import Link from 'src/components/link.style.js' import Link from 'src/components/link.style.js'
import Icon from 'src/components/icon.style.js' import Icon from 'src/components/icon.style.js'
import Border from 'src/components/border.style.js'
const DEBUG = false const DEBUG = false
export const DEFAULT_SHADOWS = { export const DEFAULT_SHADOWS = {
panel: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
topBar: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
popup: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}],
avatar: [{ avatar: [{
x: 0, x: 0,
y: 1, y: 1,
@ -54,9 +32,7 @@ export const DEFAULT_SHADOWS = {
spread: 0, spread: 0,
color: '#000000', color: '#000000',
alpha: 0.7 alpha: 0.7
}], }]
avatarStatus: [],
panelHeader: []
} }
const components = { const components = {
@ -64,9 +40,11 @@ const components = {
Text, Text,
Link, Link,
Icon, Icon,
Border,
Underlay, Underlay,
Modals,
Popover, Popover,
DropdownMenu, MenuItem,
Panel, Panel,
PanelHeader, PanelHeader,
TopBar, TopBar,
@ -196,16 +174,41 @@ export const init = (extraRuleset, palette) => {
const rules = [] const rules = []
const ruleset = [ const normalizeCombination = rule => {
...Object.values(components).map(c => c.defaultRules.map(r => ({ component: c.name, ...r })) || []).reduce((acc, arr) => [...acc, ...arr], []),
...extraRuleset
].map(rule => {
rule.variant = rule.variant ?? 'normal' rule.variant = rule.variant ?? 'normal'
rule.state = [...new Set(['normal', ...(rule.state || [])])] rule.state = [...new Set(['normal', ...(rule.state || [])])]
}
const rulesetUnsorted = [
...Object.values(components)
.map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
.reduce((acc, arr) => [...acc, ...arr], []),
...extraRuleset
].map(rule => {
normalizeCombination(rule)
let currentParent = rule.parent
while (currentParent) {
normalizeCombination(currentParent)
currentParent = currentParent.parent
}
return rule return rule
}) })
const ruleset = rulesetUnsorted
.map((data, index) => ({ data, index }))
.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
const parentsA = unroll(a).length
const parentsB = unroll(b).length
if (parentsA === parentsB || (parentsB !== 0 && parentsA !== 0)) return ai - bi
if (parentsA === 0 && parentsB !== 0) return -1
if (parentsB === 0 && parentsA !== 0) return 1
return 0 // failsafe, shouldn't happen?
})
.map(({ data }) => data)
console.log(ruleset)
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name)) const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
const addRule = (rule) => { const addRule = (rule) => {
@ -260,6 +263,18 @@ export const init = (extraRuleset, palette) => {
targetColor = alphaBlend(backgroundArg, amount, foregroundArg) targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
break break
} }
case 'mod': {
if (args.length !== 2) {
throw new Error(`$mod requires 2 arguments, ${args.length} were provided`)
}
const color = convert(findColor(args[0], dynamicVars)).rgb
const amount = Number(args[1])
const effectiveBackground = dynamicVars.lowerLevelBackground
const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
const mod = isLightOnDark ? 1 : -1
targetColor = brightness(amount * mod, color).rgb
break
}
} }
} catch (e) { } catch (e) {
console.error('Failure executing color function', e) console.error('Failure executing color function', e)
@ -332,12 +347,12 @@ export const init = (extraRuleset, palette) => {
} }
const processInnerComponent = (component, parent) => { const processInnerComponent = (component, parent) => {
const parentList = parent ? unroll(parent).reverse().map(c => c.component) : [] // const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
if (!component.virtual) { // if (!component.virtual) {
const path = [...parentList, component.name].join(' > ') // const path = [...parentList, component.name].join(' > ')
console.log('Component ' + path + ' process starting') // console.log('Component ' + path + ' process starting')
} // }
const t0 = performance.now() // const t0 = performance.now()
const { const {
validInnerComponents = [], validInnerComponents = [],
states: originalStates = {}, states: originalStates = {},
@ -359,7 +374,7 @@ export const init = (extraRuleset, palette) => {
}).reduce((acc, x) => [...acc, ...x], []) }).reduce((acc, x) => [...acc, ...x], [])
stateVariantCombination.forEach(combination => { stateVariantCombination.forEach(combination => {
const tt0 = performance.now() // const tt0 = performance.now()
const soloSelector = ruleToSelector({ component: component.name, ...combination }, true) const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
const selector = ruleToSelector({ component: component.name, ...combination, parent }, true) const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
@ -422,6 +437,11 @@ export const init = (extraRuleset, palette) => {
} }
} }
if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
console.log(existingRules)
console.log(computedRule, newTextRule)
}
dynamicVars.inheritedBackground = lowerLevelBackground dynamicVars.inheritedBackground = lowerLevelBackground
// TODO properly provide "parent" text color? // TODO properly provide "parent" text color?
@ -518,17 +538,17 @@ export const init = (extraRuleset, palette) => {
} }
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination })) innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
const tt1 = performance.now() // const tt1 = performance.now()
if (!component.virtual) { // if (!component.virtual) {
console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms') // console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
} // }
}) })
const t1 = performance.now() // const t1 = performance.now()
if (!component.virtual) { // if (!component.virtual) {
const path = [...parentList, component.name].join(' > ') // const path = [...parentList, component.name].join(' > ')
console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms') // console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
} // }
} }
processInnerComponent(components.Root) processInnerComponent(components.Root)

View File

@ -5,5 +5,19 @@ export default {
'Link', 'Link',
'Text', 'Text',
'Icon' 'Icon'
],
defaultRules: [
{
directives: {
shadow: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
] ]
} }