commit: 3e198526e66b88301882b14240f0d50b8819b520
parent 7c77809ff9a4d365ec17fb2ed43f3795382940a9
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Feb 2024 18:40:14 +0200
dynamically load .style.js files; move the files closer to related components
Diffstat:
14 files changed, 99 insertions(+), 104 deletions(-)
diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
@@ -0,0 +1,15 @@
+export default {
+ name: 'Attachment',
+ selector: '.Attachment',
+ validInnerComponents: [
+ 'Border',
+ 'ButtonUnstyled'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ roundness: 3
+ }
+ }
+ ]
+}
diff --git a/src/components/button.style.js b/src/components/button.style.js
@@ -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'
},
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
@@ -5,7 +5,7 @@ export default {
disabled: ':disabled',
toggled: '.toggled',
pressed: ':active',
- hover: ':hover',
+ hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
@@ -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%;
diff --git a/src/components/input.style.js b/src/components/input.style.js
@@ -24,7 +24,7 @@ export default {
selector: '.input',
states: {
disabled: ':disabled',
- hover: ':hover',
+ hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
diff --git a/src/components/modals.style.js b/src/components/modal/modals.style.js
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
@@ -1,22 +0,0 @@
-export default {
- name: 'Notification',
- selector: '.Notification',
- validInnerComponents: [
- 'Text',
- 'Link',
- 'Icon',
- 'Border',
- 'Button',
- 'ButtonUnstyled',
- 'RichContent',
- 'Input',
- 'Avatar'
- ],
- defaultRules: [
- {
- directives: {
- background: '--bg'
- }
- }
- ]
-}
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
@@ -0,0 +1,23 @@
+export default {
+ name: 'Notification',
+ selector: '.Notification',
+ validInnerComponents: [
+ 'Text',
+ 'Link',
+ 'Icon',
+ 'Border',
+ 'Button',
+ 'ButtonUnstyled',
+ 'RichContent',
+ 'Input',
+ 'Avatar',
+ 'Attachment'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg'
+ }
+ }
+ ]
+}
diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js
@@ -0,0 +1,14 @@
+export default {
+ name: 'PollGraph',
+ selector: '.poll-graph',
+ validInnerComponents: [
+ 'Text'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--accent'
+ }
+ }
+ ]
+}
diff --git a/src/components/post.style.js b/src/components/post.style.js
@@ -1,22 +0,0 @@
-export default {
- name: 'Post',
- selector: '.Status',
- validInnerComponents: [
- 'Text',
- 'Link',
- 'Icon',
- 'Border',
- 'Button',
- 'ButtonUnstyled',
- 'RichContent',
- 'Input',
- 'Avatar'
- ],
- defaultRules: [
- {
- directives: {
- background: '--bg'
- }
- }
- ]
-}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content/rich_content.style.js
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
@@ -0,0 +1,24 @@
+export default {
+ name: 'Post',
+ selector: '.Status',
+ validInnerComponents: [
+ 'Text',
+ 'Link',
+ 'Icon',
+ 'Border',
+ 'Button',
+ 'ButtonUnstyled',
+ 'RichContent',
+ 'Input',
+ 'Avatar',
+ 'Attachment',
+ 'PollGraph'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg'
+ }
+ }
+ ]
+}
diff --git a/src/components/avatar.style.js b/src/components/user_avatar/avatar.style.js
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -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')
