From 3e198526e66b88301882b14240f0d50b8819b520 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Feb 2024 18:40:14 +0200 Subject: [PATCH] dynamically load .style.js files; move the files closer to related components --- src/components/attachment/attachment.style.js | 15 +++++ src/components/button.style.js | 2 +- src/components/button_unstyled.style.js | 2 +- src/components/chat/chat.scss | 12 +--- src/components/input.style.js | 2 +- src/components/{ => modal}/modals.style.js | 0 .../{ => notification}/notification.style.js | 3 +- src/components/poll/poll_graph.style.js | 14 ++++ .../{ => rich_content}/rich_content.style.js | 0 src/components/{ => status}/post.style.js | 4 +- .../{ => user_avatar}/avatar.style.js | 0 .../theme_data/theme_data_3.service.js | 65 ++++++------------- 12 files changed, 57 insertions(+), 62 deletions(-) create mode 100644 src/components/attachment/attachment.style.js rename src/components/{ => modal}/modals.style.js (100%) rename src/components/{ => notification}/notification.style.js (90%) create mode 100644 src/components/poll/poll_graph.style.js rename src/components/{ => rich_content}/rich_content.style.js (100%) rename src/components/{ => status}/post.style.js (86%) rename src/components/{ => user_avatar}/avatar.style.js (100%) diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js new file mode 100644 index 0000000000..b76b3eb061 --- /dev/null +++ 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 index 9f238b4e7d..6560c8fb05 100644 --- 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 index e80322eb9c..89e8499c6e 100644 --- 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 index 4f8f8492e0..310614094b 100644 --- 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 index 9cddfd8ea8..7db50b66d5 100644 --- 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 similarity index 100% rename from src/components/modals.style.js rename to src/components/modal/modals.style.js diff --git a/src/components/notification.style.js b/src/components/notification/notification.style.js similarity index 90% rename from src/components/notification.style.js rename to src/components/notification/notification.style.js index 0802da77b5..ad7aab655b 100644 --- a/src/components/notification.style.js +++ b/src/components/notification/notification.style.js @@ -10,7 +10,8 @@ export default { 'ButtonUnstyled', 'RichContent', 'Input', - 'Avatar' + 'Avatar', + 'Attachment' ], defaultRules: [ { diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js new file mode 100644 index 0000000000..01b4d35cad --- /dev/null +++ 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/rich_content.style.js b/src/components/rich_content/rich_content.style.js similarity index 100% rename from src/components/rich_content.style.js rename to src/components/rich_content/rich_content.style.js diff --git a/src/components/post.style.js b/src/components/status/post.style.js similarity index 86% rename from src/components/post.style.js rename to src/components/status/post.style.js index f4bd12a682..dda79220f8 100644 --- a/src/components/post.style.js +++ b/src/components/status/post.style.js @@ -10,7 +10,9 @@ export default { 'ButtonUnstyled', 'RichContent', 'Input', - 'Avatar' + 'Avatar', + 'Attachment', + 'PollGraph' ], defaultRules: [ { diff --git a/src/components/avatar.style.js b/src/components/user_avatar/avatar.style.js similarity index 100% rename from src/components/avatar.style.js rename to 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 index 41c77506a9..f84a61c96b 100644 --- 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')