chat styles + related improvements
This commit is contained in:
parent
ab63ec1471
commit
11fd220734
14
src/components/chat/chat.style.js
Normal file
14
src/components/chat/chat.style.js
Normal file
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
name: 'Chat',
|
||||
selector: '.chat-message-list',
|
||||
lazy: true,
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Avatar',
|
||||
'ChatMessage'
|
||||
],
|
||||
defaultRules: [
|
||||
]
|
||||
}
|
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="message-list"
|
||||
class="chat-message-list message-list"
|
||||
:style="{ height: scrollableContainerHeight }"
|
||||
>
|
||||
<template v-if="!errorLoadingChat">
|
||||
|
@ -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;
|
||||
}
|
||||
|
30
src/components/chat_message/chat_message.style.js
Normal file
30
src/components/chat_message/chat_message.style.js
Normal 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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
@ -13,11 +13,5 @@ export default {
|
||||
'Avatar',
|
||||
'Attachment'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg'
|
||||
}
|
||||
}
|
||||
]
|
||||
defaultRules: []
|
||||
}
|
||||
|
@ -14,7 +14,8 @@ export default {
|
||||
'Post',
|
||||
'Notification',
|
||||
'Alert',
|
||||
'UserCard'
|
||||
'UserCard',
|
||||
'Chat'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
|
@ -8,7 +8,8 @@ export default {
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Badge',
|
||||
'Alert'
|
||||
'Alert',
|
||||
'Avatar'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
|
@ -9,7 +9,6 @@ export default {
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
textNoCssColor: 'yes'
|
||||
}
|
||||
}
|
||||
|
@ -14,11 +14,5 @@ export default {
|
||||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg'
|
||||
}
|
||||
}
|
||||
]
|
||||
defaultRules: []
|
||||
}
|
||||
|
@ -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,7 +560,6 @@ export const init = (extraRuleset, palette) => {
|
||||
dynamicVars.stacked = lowerLevelStackedBackground
|
||||
dynamicVars.background = computed[selector].background
|
||||
|
||||
if (addRuleNeeded) {
|
||||
addRule({
|
||||
selector: cssSelector,
|
||||
component: component.name,
|
||||
@ -573,7 +568,6 @@ export const init = (extraRuleset, palette) => {
|
||||
directives: computedDirectives
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
innerComponents.forEach(innerComponent => {
|
||||
if (innerComponent.lazy) {
|
||||
@ -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 '' }
|
||||
|
Loading…
Reference in New Issue
Block a user