From bcc50844096b47c0656ed3338de222055a749fb1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 13 Feb 2024 02:09:43 +0200 Subject: add roundness, fix inputs --- src/components/chat/chat.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 43e7a5e4..4f8f8492 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -18,8 +18,9 @@ overflow: visible; min-height: calc(100vh - var(--navbar-height)); margin: 0; - border-radius: 10px 10px 0 0; - border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; + border-radius: var(--roundness); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; &::after { border-radius: 0; -- cgit v1.2.3-70-g09d2 From 3e198526e66b88301882b14240f0d50b8819b520 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Feb 2024 18:40:14 +0200 Subject: dynamically load .style.js files; move the files closer to related components --- src/components/attachment/attachment.style.js | 15 ++++++ src/components/avatar.style.js | 22 -------- 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 | 9 ++++ src/components/modals.style.js | 9 ---- src/components/notification.style.js | 22 -------- src/components/notification/notification.style.js | 23 ++++++++ src/components/poll/poll_graph.style.js | 14 +++++ src/components/post.style.js | 22 -------- src/components/rich_content.style.js | 17 ------ src/components/rich_content/rich_content.style.js | 17 ++++++ src/components/status/post.style.js | 24 +++++++++ src/components/user_avatar/avatar.style.js | 22 ++++++++ src/services/theme_data/theme_data_3.service.js | 65 +++++++---------------- 17 files changed, 147 insertions(+), 152 deletions(-) create mode 100644 src/components/attachment/attachment.style.js delete mode 100644 src/components/avatar.style.js create mode 100644 src/components/modal/modals.style.js delete mode 100644 src/components/modals.style.js delete mode 100644 src/components/notification.style.js create mode 100644 src/components/notification/notification.style.js create mode 100644 src/components/poll/poll_graph.style.js delete mode 100644 src/components/post.style.js delete mode 100644 src/components/rich_content.style.js create mode 100644 src/components/rich_content/rich_content.style.js create mode 100644 src/components/status/post.style.js create mode 100644 src/components/user_avatar/avatar.style.js (limited to 'src/components/chat/chat.scss') diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js new file mode 100644 index 00000000..b76b3eb0 --- /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/avatar.style.js b/src/components/avatar.style.js deleted file mode 100644 index 812d45a4..00000000 --- a/src/components/avatar.style.js +++ /dev/null @@ -1,22 +0,0 @@ -export default { - name: 'Avatar', - selector: '.Avatar', - variants: { - compact: '.-compact' - }, - defaultRules: [ - { - directives: { - roundness: 3, - shadow: [{ - x: 0, - y: 1, - blur: 8, - spread: 0, - color: '#000000', - alpha: 0.7 - }] - } - } - ] -} diff --git a/src/components/button.style.js b/src/components/button.style.js index 9f238b4e..6560c8fb 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 e80322eb..89e8499c 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 4f8f8492..31061409 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 9cddfd8e..7db50b66 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/modal/modals.style.js b/src/components/modal/modals.style.js new file mode 100644 index 00000000..c401a0cd --- /dev/null +++ b/src/components/modal/modals.style.js @@ -0,0 +1,9 @@ +export default { + name: 'Modals', + selector: '.modal-view', + lazy: true, + validInnerComponents: [ + 'Panel' + ], + defaultRules: [] +} diff --git a/src/components/modals.style.js b/src/components/modals.style.js deleted file mode 100644 index c401a0cd..00000000 --- a/src/components/modals.style.js +++ /dev/null @@ -1,9 +0,0 @@ -export default { - name: 'Modals', - selector: '.modal-view', - lazy: true, - validInnerComponents: [ - 'Panel' - ], - defaultRules: [] -} diff --git a/src/components/notification.style.js b/src/components/notification.style.js deleted file mode 100644 index 0802da77..00000000 --- a/src/components/notification.style.js +++ /dev/null @@ -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 new file mode 100644 index 00000000..ad7aab65 --- /dev/null +++ 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 new file mode 100644 index 00000000..01b4d35c --- /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/post.style.js b/src/components/post.style.js deleted file mode 100644 index f4bd12a6..00000000 --- a/src/components/post.style.js +++ /dev/null @@ -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.style.js deleted file mode 100644 index aaf126a5..00000000 --- a/src/components/rich_content.style.js +++ /dev/null @@ -1,17 +0,0 @@ -export default { - name: 'RichContent', - selector: '.RichContent', - validInnerComponents: [ - 'Text', - 'FunText', - 'Link' - ], - defaultRules: [ - { - directives: { - background: '--bg', - textNoCssColor: 'yes' - } - } - ] -} diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js new file mode 100644 index 00000000..aaf126a5 --- /dev/null +++ b/src/components/rich_content/rich_content.style.js @@ -0,0 +1,17 @@ +export default { + name: 'RichContent', + selector: '.RichContent', + validInnerComponents: [ + 'Text', + 'FunText', + 'Link' + ], + defaultRules: [ + { + directives: { + background: '--bg', + textNoCssColor: 'yes' + } + } + ] +} diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js new file mode 100644 index 00000000..dda79220 --- /dev/null +++ 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/user_avatar/avatar.style.js b/src/components/user_avatar/avatar.style.js new file mode 100644 index 00000000..812d45a4 --- /dev/null +++ b/src/components/user_avatar/avatar.style.js @@ -0,0 +1,22 @@ +export default { + name: 'Avatar', + selector: '.Avatar', + variants: { + compact: '.-compact' + }, + defaultRules: [ + { + directives: { + roundness: 3, + shadow: [{ + x: 0, + y: 1, + blur: 8, + spread: 0, + color: '#000000', + alpha: 0.7 + }] + } + } + ] +} diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 41c77506..f84a61c9 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') -- cgit v1.2.3-70-g09d2 From ce5552ae3c53b563126aae2c3c9b77a321880eed Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 6 Mar 2024 20:35:03 +0200 Subject: fix more transparent panels --- src/components/chat/chat.scss | 1 - src/components/chat/chat.style.js | 7 ++++++- src/components/dialog_modal/dialog_modal.vue | 2 +- src/components/search/search.vue | 11 ++++++++--- 4 files changed, 15 insertions(+), 6 deletions(-) (limited to 'src/components/chat/chat.scss') diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 31061409..8af710ae 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -37,7 +37,6 @@ .footer { position: sticky; bottom: 0; - background-color: var(--background); z-index: 1; } diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js index fc3d66a4..9ae2b7d7 100644 --- a/src/components/chat/chat.style.js +++ b/src/components/chat/chat.style.js @@ -1,7 +1,6 @@ export default { name: 'Chat', selector: '.chat-message-list', - lazy: true, validInnerComponents: [ 'Text', 'Link', @@ -10,5 +9,11 @@ export default { 'ChatMessage' ], defaultRules: [ + { + directives: { + background: '--bg', + blur: '5px' + } + } ] } diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index b917c637..3bceff22 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -12,7 +12,7 @@ -
+
diff --git a/src/components/search/search.vue b/src/components/search/search.vue index 643c2cad..dc803835 100644 --- a/src/components/search/search.vue +++ b/src/components/search/search.vue @@ -1,11 +1,11 @@