dynamically load .style.js files; move the files closer to related components

This commit is contained in:
Henry Jameson 2024-02-18 18:40:14 +02:00
parent 7c77809ff9
commit 3e198526e6
12 changed files with 57 additions and 62 deletions

View File

@ -0,0 +1,15 @@
export default {
name: 'Attachment',
selector: '.Attachment',
validInnerComponents: [
'Border',
'ButtonUnstyled'
],
defaultRules: [
{
directives: {
roundness: 3
}
}
]
}

View File

@ -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'
}, },

View File

@ -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: [

View File

@ -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%;

View File

@ -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: [

View File

@ -10,7 +10,8 @@ export default {
'ButtonUnstyled', 'ButtonUnstyled',
'RichContent', 'RichContent',
'Input', 'Input',
'Avatar' 'Avatar',
'Attachment'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -0,0 +1,14 @@
export default {
name: 'PollGraph',
selector: '.poll-graph',
validInnerComponents: [
'Text'
],
defaultRules: [
{
directives: {
background: '--accent'
}
}
]
}

View File

@ -10,7 +10,9 @@ export default {
'ButtonUnstyled', 'ButtonUnstyled',
'RichContent', 'RichContent',
'Input', 'Input',
'Avatar' 'Avatar',
'Attachment',
'PollGraph'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -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')