dynamically load .style.js files; move the files closer to related components
This commit is contained in:
parent
7c77809ff9
commit
3e198526e6
15
src/components/attachment/attachment.style.js
Normal file
15
src/components/attachment/attachment.style.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
name: 'Attachment',
|
||||||
|
selector: '.Attachment',
|
||||||
|
validInnerComponents: [
|
||||||
|
'Border',
|
||||||
|
'ButtonUnstyled'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
roundness: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -40,7 +40,7 @@ export default {
|
|||||||
// normal: '' // normal state is implicitly added, it is always included
|
// normal: '' // normal state is implicitly added, it is always included
|
||||||
toggled: '.toggled',
|
toggled: '.toggled',
|
||||||
pressed: ':active',
|
pressed: ':active',
|
||||||
hover: ':hover',
|
hover: ':hover:not(:disabled)',
|
||||||
focused: ':focus-within',
|
focused: ':focus-within',
|
||||||
disabled: ':disabled'
|
disabled: ':disabled'
|
||||||
},
|
},
|
||||||
|
@ -5,7 +5,7 @@ export default {
|
|||||||
disabled: ':disabled',
|
disabled: ':disabled',
|
||||||
toggled: '.toggled',
|
toggled: '.toggled',
|
||||||
pressed: ':active',
|
pressed: ':active',
|
||||||
hover: ':hover',
|
hover: ':hover:not(:disabled)',
|
||||||
focused: ':focus-within'
|
focused: ':focus-within'
|
||||||
},
|
},
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
|
@ -11,7 +11,6 @@
|
|||||||
|
|
||||||
.chat-view-body {
|
.chat-view-body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: var(--chatBg, $fallback--bg);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -38,8 +37,7 @@
|
|||||||
.footer {
|
.footer {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: $fallback--bg;
|
background-color: var(--background);
|
||||||
background-color: var(--bg, $fallback--bg);
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,8 +60,6 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1.3em;
|
right: 1.3em;
|
||||||
top: -3.2em;
|
top: -3.2em;
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--btn, $fallback--fg);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -80,12 +76,6 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 1em;
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--text, $fallback--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread-message-count {
|
.unread-message-count {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -24,7 +24,7 @@ export default {
|
|||||||
selector: '.input',
|
selector: '.input',
|
||||||
states: {
|
states: {
|
||||||
disabled: ':disabled',
|
disabled: ':disabled',
|
||||||
hover: ':hover',
|
hover: ':hover:not(:disabled)',
|
||||||
focused: ':focus-within'
|
focused: ':focus-within'
|
||||||
},
|
},
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
|
@ -10,7 +10,8 @@ export default {
|
|||||||
'ButtonUnstyled',
|
'ButtonUnstyled',
|
||||||
'RichContent',
|
'RichContent',
|
||||||
'Input',
|
'Input',
|
||||||
'Avatar'
|
'Avatar',
|
||||||
|
'Attachment'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
14
src/components/poll/poll_graph.style.js
Normal file
14
src/components/poll/poll_graph.style.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export default {
|
||||||
|
name: 'PollGraph',
|
||||||
|
selector: '.poll-graph',
|
||||||
|
validInnerComponents: [
|
||||||
|
'Text'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
background: '--accent'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -10,7 +10,9 @@ export default {
|
|||||||
'ButtonUnstyled',
|
'ButtonUnstyled',
|
||||||
'RichContent',
|
'RichContent',
|
||||||
'Input',
|
'Input',
|
||||||
'Avatar'
|
'Avatar',
|
||||||
|
'Attachment',
|
||||||
|
'PollGraph'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
@ -7,56 +7,25 @@ import {
|
|||||||
relativeLuminance
|
relativeLuminance
|
||||||
} from '../color_convert/color_convert.js'
|
} from '../color_convert/color_convert.js'
|
||||||
|
|
||||||
import Root from 'src/components/root.style.js'
|
|
||||||
import TopBar from 'src/components/top_bar.style.js'
|
|
||||||
import Underlay from 'src/components/underlay.style.js'
|
|
||||||
import Popover from 'src/components/popover.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 PanelHeader from 'src/components/panel_header.style.js'
|
|
||||||
import Button from 'src/components/button.style.js'
|
|
||||||
import ButtonUnstyled from 'src/components/button_unstyled.style.js'
|
|
||||||
import Input from 'src/components/input.style.js'
|
|
||||||
import Text from 'src/components/text.style.js'
|
|
||||||
import FunText from 'src/components/fun_text.style.js'
|
|
||||||
import Link from 'src/components/link.style.js'
|
|
||||||
import Icon from 'src/components/icon.style.js'
|
|
||||||
import Border from 'src/components/border.style.js'
|
|
||||||
import Post from 'src/components/post.style.js'
|
|
||||||
import Notification from 'src/components/notification.style.js'
|
|
||||||
import RichContent from 'src/components/rich_content.style.js'
|
|
||||||
import Avatar from 'src/components/avatar.style.js'
|
|
||||||
import Badge from 'src/components/badge.style.js'
|
|
||||||
import Alert from 'src/components/alert.style.js'
|
|
||||||
|
|
||||||
const DEBUG = false
|
const DEBUG = false
|
||||||
|
|
||||||
|
// Ensuring the order of components
|
||||||
const components = {
|
const components = {
|
||||||
Root,
|
Root: null,
|
||||||
Text,
|
Text: null,
|
||||||
FunText,
|
FunText: null,
|
||||||
Link,
|
Link: null,
|
||||||
Icon,
|
Icon: null,
|
||||||
Border,
|
Border: null
|
||||||
Underlay,
|
|
||||||
Modals,
|
|
||||||
Popover,
|
|
||||||
MenuItem,
|
|
||||||
Panel,
|
|
||||||
PanelHeader,
|
|
||||||
TopBar,
|
|
||||||
Button,
|
|
||||||
ButtonUnstyled,
|
|
||||||
Input,
|
|
||||||
Post,
|
|
||||||
Notification,
|
|
||||||
RichContent,
|
|
||||||
Avatar,
|
|
||||||
Alert,
|
|
||||||
Badge
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Loading all style.js[on] files dynamically
|
||||||
|
const componentsContext = require.context('src', true, /\.style.js(on)?$/)
|
||||||
|
componentsContext.keys().forEach(key => {
|
||||||
|
const component = componentsContext(key).default
|
||||||
|
components[component.name] = component
|
||||||
|
})
|
||||||
|
|
||||||
// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
|
// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
|
||||||
// into an array [item2, item3] for iterating
|
// into an array [item2, item3] for iterating
|
||||||
const unroll = (item) => {
|
const unroll = (item) => {
|
||||||
@ -370,7 +339,11 @@ export const init = (extraRuleset, palette) => {
|
|||||||
// Normalizing states and variants to always include "normal"
|
// Normalizing states and variants to always include "normal"
|
||||||
const states = { normal: '', ...originalStates }
|
const states = { normal: '', ...originalStates }
|
||||||
const variants = { normal: '', ...originalVariants }
|
const variants = { normal: '', ...originalVariants }
|
||||||
const innerComponents = (validInnerComponents).map(name => components[name])
|
const innerComponents = (validInnerComponents).map(name => {
|
||||||
|
const result = components[name]
|
||||||
|
if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
|
||||||
// Optimization: we only really need combinations without "normal" because all states implicitly have it
|
// Optimization: we only really need combinations without "normal" because all states implicitly have it
|
||||||
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
|
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
|
||||||
|
Loading…
Reference in New Issue
Block a user