mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-23 13:45:06 +01:00
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
|
||||
toggled: '.toggled',
|
||||
pressed: ':active',
|
||||
hover: ':hover',
|
||||
hover: ':hover:not(:disabled)',
|
||||
focused: ':focus-within',
|
||||
disabled: ':disabled'
|
||||
},
|
||||
|
@ -5,7 +5,7 @@ export default {
|
||||
disabled: ':disabled',
|
||||
toggled: '.toggled',
|
||||
pressed: ':active',
|
||||
hover: ':hover',
|
||||
hover: ':hover:not(:disabled)',
|
||||
focused: ':focus-within'
|
||||
},
|
||||
validInnerComponents: [
|
||||
|
@ -11,7 +11,6 @@
|
||||
|
||||
.chat-view-body {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--chatBg, $fallback--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@ -38,8 +37,7 @@
|
||||
.footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
background-color: var(--background);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -62,8 +60,6 @@
|
||||
position: absolute;
|
||||
right: 1.3em;
|
||||
top: -3.2em;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -80,12 +76,6 @@
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
font-size: 0.8em;
|
||||
left: 50%;
|
||||
|
@ -24,7 +24,7 @@ export default {
|
||||
selector: '.input',
|
||||
states: {
|
||||
disabled: ':disabled',
|
||||
hover: ':hover',
|
||||
hover: ':hover:not(:disabled)',
|
||||
focused: ':focus-within'
|
||||
},
|
||||
validInnerComponents: [
|
||||
|
@ -10,7 +10,8 @@ export default {
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar'
|
||||
'Avatar',
|
||||
'Attachment'
|
||||
],
|
||||
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',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar'
|
||||
'Avatar',
|
||||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
@ -7,56 +7,25 @@ import {
|
||||
relativeLuminance
|
||||
} 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
|
||||
|
||||
// Ensuring the order of components
|
||||
const components = {
|
||||
Root,
|
||||
Text,
|
||||
FunText,
|
||||
Link,
|
||||
Icon,
|
||||
Border,
|
||||
Underlay,
|
||||
Modals,
|
||||
Popover,
|
||||
MenuItem,
|
||||
Panel,
|
||||
PanelHeader,
|
||||
TopBar,
|
||||
Button,
|
||||
ButtonUnstyled,
|
||||
Input,
|
||||
Post,
|
||||
Notification,
|
||||
RichContent,
|
||||
Avatar,
|
||||
Alert,
|
||||
Badge
|
||||
Root: null,
|
||||
Text: null,
|
||||
FunText: null,
|
||||
Link: null,
|
||||
Icon: null,
|
||||
Border: null
|
||||
}
|
||||
|
||||
// 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: {...} } }}
|
||||
// into an array [item2, item3] for iterating
|
||||
const unroll = (item) => {
|
||||
@ -370,7 +339,11 @@ export const init = (extraRuleset, palette) => {
|
||||
// Normalizing states and variants to always include "normal"
|
||||
const states = { normal: '', ...originalStates }
|
||||
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
|
||||
const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
|
||||
|
Loading…
Reference in New Issue
Block a user