chat styles + related improvements

This commit is contained in:
Henry Jameson 2024-02-19 15:11:59 +02:00
parent ab63ec1471
commit 11fd220734
10 changed files with 69 additions and 72 deletions

View File

@ -0,0 +1,14 @@
export default {
name: 'Chat',
selector: '.chat-message-list',
lazy: true,
validInnerComponents: [
'Text',
'Link',
'Icon',
'Avatar',
'ChatMessage'
],
defaultRules: [
]
}

View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div <div
class="message-list" class="chat-message-list message-list"
:style="{ height: scrollableContainerHeight }" :style="{ height: scrollableContainerHeight }"
> >
<template v-if="!errorLoadingChat"> <template v-if="!errorLoadingChat">

View File

@ -27,12 +27,6 @@
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
&:hover,
.extra-button-popover.open & {
color: $fallback--text;
color: var(--text, $fallback--text);
}
} }
.popover { .popover {
@ -61,10 +55,12 @@
} }
.status { .status {
border-radius: $fallback--chatMessageRadius; background-color: var(--background);
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); color: var(--text);
border-radius: var(--roundness);
display: flex; display: flex;
padding: 0.75em; padding: 0.75em;
border: 1px solid var(--border);
} }
.created-at { .created-at {
@ -117,16 +113,6 @@
align-content: end; align-content: end;
justify-content: flex-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 { .chat-message-inner {
align-items: flex-end; align-items: flex-end;
} }
@ -137,22 +123,6 @@
} }
.incoming { .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 { .chat-message-menu {
left: 0.4rem; left: 0.4rem;
} }

View File

@ -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'
}
}
]
}

View File

@ -13,11 +13,5 @@ export default {
'Avatar', 'Avatar',
'Attachment' 'Attachment'
], ],
defaultRules: [ defaultRules: []
{
directives: {
background: '--bg'
}
}
]
} }

View File

@ -14,7 +14,8 @@ export default {
'Post', 'Post',
'Notification', 'Notification',
'Alert', 'Alert',
'UserCard' 'UserCard',
'Chat'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -8,7 +8,8 @@ export default {
'Button', 'Button',
'ButtonUnstyled', 'ButtonUnstyled',
'Badge', 'Badge',
'Alert' 'Alert',
'Avatar'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -9,7 +9,6 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--bg',
textNoCssColor: 'yes' textNoCssColor: 'yes'
} }
} }

View File

@ -14,11 +14,5 @@ export default {
'Attachment', 'Attachment',
'PollGraph' 'PollGraph'
], ],
defaultRules: [ defaultRules: []
{
directives: {
background: '--bg'
}
}
]
} }

View File

@ -17,7 +17,9 @@ const components = {
Link: null, Link: null,
Icon: null, Icon: null,
Border: null, Border: null,
Panel: null Panel: null,
Chat: null,
ChatMessage: null
} }
// Loading all style.js[on] files dynamically // Loading all style.js[on] files dynamically
@ -509,17 +511,11 @@ export const init = (extraRuleset, palette) => {
}) })
} else { } else {
computed[selector] = computed[selector] || {} computed[selector] = computed[selector] || {}
let addRuleNeeded = false
// TODO: DEFAULT TEXT COLOR // TODO: DEFAULT TEXT COLOR
const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
addRuleNeeded = true
}
if (computedDirectives.background) { if (computedDirectives.background) {
addRuleNeeded = true
let inheritRule = null let inheritRule = null
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent })) const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
const lastVariantRule = variantRules[variantRules.length - 1] const lastVariantRule = variantRules[variantRules.length - 1]
@ -564,15 +560,13 @@ export const init = (extraRuleset, palette) => {
dynamicVars.stacked = lowerLevelStackedBackground dynamicVars.stacked = lowerLevelStackedBackground
dynamicVars.background = computed[selector].background dynamicVars.background = computed[selector].background
if (addRuleNeeded) { addRule({
addRule({ selector: cssSelector,
selector: cssSelector, component: component.name,
component: component.name, ...combination,
...combination, parent,
parent, directives: computedDirectives
directives: computedDirectives })
})
}
} }
innerComponents.forEach(innerComponent => { innerComponents.forEach(innerComponent => {
@ -645,15 +639,15 @@ export const init = (extraRuleset, palette) => {
case 'background': { case 'background': {
if (v === 'transparent') { if (v === 'transparent') {
return [ return [
'background-color: ' + v, rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
' --background: ' + v ' --background: ' + v
].join(';\n') ].filter(x => x).join(';\n')
} }
const color = cssColorString(computed[selector].background, rule.directives.opacity) const color = cssColorString(computed[selector].background, rule.directives.opacity)
return [ return [
'background-color: ' + color, rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
' --background: ' + color ' --background: ' + color
].join(';\n') ].filter(x => x).join(';\n')
} }
case 'textColor': { case 'textColor': {
if (rule.directives.textNoCssColor === 'yes') { return '' } if (rule.directives.textNoCssColor === 'yes') { return '' }