commit: 11fd220734ae697e8157d25fbf4cdfc250fe2df7
parent ab63ec1471964aaf8ffc3d65412b54b173fc5b9e
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 15:11:59 +0200
chat styles + related improvements
Diffstat:
10 files changed, 69 insertions(+), 72 deletions(-)
diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
@@ -0,0 +1,14 @@
+export default {
+ name: 'Chat',
+ selector: '.chat-message-list',
+ lazy: true,
+ validInnerComponents: [
+ 'Text',
+ 'Link',
+ 'Icon',
+ 'Avatar',
+ 'ChatMessage'
+ ],
+ defaultRules: [
+ ]
+}
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
@@ -26,7 +26,7 @@
</div>
</div>
<div
- class="message-list"
+ class="chat-message-list message-list"
:style="{ height: scrollableContainerHeight }"
>
<template v-if="!errorLoadingChat">
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
@@ -27,12 +27,6 @@
.menu-icon {
cursor: pointer;
-
- &:hover,
- .extra-button-popover.open & {
- color: $fallback--text;
- color: var(--text, $fallback--text);
- }
}
.popover {
@@ -61,10 +55,12 @@
}
.status {
- border-radius: $fallback--chatMessageRadius;
- border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+ background-color: var(--background);
+ color: var(--text);
+ border-radius: var(--roundness);
display: flex;
padding: 0.75em;
+ border: 1px solid var(--border);
}
.created-at {
@@ -117,16 +113,6 @@
align-content: end;
justify-content: flex-end;
- a {
- color: var(--chatMessageOutgoingLink, $fallback--link);
- }
-
- .status {
- color: var(--chatMessageOutgoingText, $fallback--text);
- background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
- border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
- }
-
.chat-message-inner {
align-items: flex-end;
}
@@ -137,22 +123,6 @@
}
.incoming {
- a {
- color: var(--chatMessageIncomingLink, $fallback--link);
- }
-
- .status {
- color: var(--chatMessageIncomingText, $fallback--text);
- background-color: var(--chatMessageIncomingBg, $fallback--bg);
- border: 1px solid var(--chatMessageIncomingBorder, --border);
- }
-
- .created-at {
- a {
- color: var(--chatMessageIncomingText, $fallback--text);
- }
- }
-
.chat-message-menu {
left: 0.4rem;
}
diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js
@@ -0,0 +1,30 @@
+export default {
+ name: 'ChatMessage',
+ selector: '.chat-message',
+ variants: {
+ outgoing: '.outgoing'
+ },
+ validInnerComponents: [
+ 'Text',
+ 'Icon',
+ 'Border',
+ 'Button',
+ 'RichContent',
+ 'Attachment',
+ 'PollGraph'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg, 2',
+ backgroundNoCssColor: 'yes'
+ }
+ },
+ {
+ variant: 'outgoing',
+ directives: {
+ background: '--bg, 5'
+ }
+ }
+ ]
+}
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
@@ -13,11 +13,5 @@ export default {
'Avatar',
'Attachment'
],
- defaultRules: [
- {
- directives: {
- background: '--bg'
- }
- }
- ]
+ defaultRules: []
}
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -14,7 +14,8 @@ export default {
'Post',
'Notification',
'Alert',
- 'UserCard'
+ 'UserCard',
+ 'Chat'
],
defaultRules: [
{
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
@@ -8,7 +8,8 @@ export default {
'Button',
'ButtonUnstyled',
'Badge',
- 'Alert'
+ 'Alert',
+ 'Avatar'
],
defaultRules: [
{
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
@@ -9,7 +9,6 @@ export default {
defaultRules: [
{
directives: {
- background: '--bg',
textNoCssColor: 'yes'
}
}
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
@@ -14,11 +14,5 @@ export default {
'Attachment',
'PollGraph'
],
- defaultRules: [
- {
- directives: {
- background: '--bg'
- }
- }
- ]
+ defaultRules: []
}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -17,7 +17,9 @@ const components = {
Link: null,
Icon: null,
Border: null,
- Panel: null
+ Panel: null,
+ Chat: null,
+ ChatMessage: null
}
// Loading all style.js[on] files dynamically
@@ -509,17 +511,11 @@ export const init = (extraRuleset, palette) => {
})
} else {
computed[selector] = computed[selector] || {}
- let addRuleNeeded = false
// TODO: DEFAULT TEXT COLOR
const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
- if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
- addRuleNeeded = true
- }
-
if (computedDirectives.background) {
- addRuleNeeded = true
let inheritRule = null
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
const lastVariantRule = variantRules[variantRules.length - 1]
@@ -564,15 +560,13 @@ export const init = (extraRuleset, palette) => {
dynamicVars.stacked = lowerLevelStackedBackground
dynamicVars.background = computed[selector].background
- if (addRuleNeeded) {
- addRule({
- selector: cssSelector,
- component: component.name,
- ...combination,
- parent,
- directives: computedDirectives
- })
- }
+ addRule({
+ selector: cssSelector,
+ component: component.name,
+ ...combination,
+ parent,
+ directives: computedDirectives
+ })
}
innerComponents.forEach(innerComponent => {
@@ -645,15 +639,15 @@ export const init = (extraRuleset, palette) => {
case 'background': {
if (v === 'transparent') {
return [
- 'background-color: ' + v,
+ rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
' --background: ' + v
- ].join(';\n')
+ ].filter(x => x).join(';\n')
}
const color = cssColorString(computed[selector].background, rule.directives.opacity)
return [
- 'background-color: ' + color,
+ rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
' --background: ' + color
- ].join(';\n')
+ ].filter(x => x).join(';\n')
}
case 'textColor': {
if (rule.directives.textNoCssColor === 'yes') { return '' }
