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>
|
</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">
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
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',
|
'Avatar',
|
||||||
'Attachment'
|
'Attachment'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: []
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,8 @@ export default {
|
|||||||
'Post',
|
'Post',
|
||||||
'Notification',
|
'Notification',
|
||||||
'Alert',
|
'Alert',
|
||||||
'UserCard'
|
'UserCard',
|
||||||
|
'Chat'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
|
@ -8,7 +8,8 @@ export default {
|
|||||||
'Button',
|
'Button',
|
||||||
'ButtonUnstyled',
|
'ButtonUnstyled',
|
||||||
'Badge',
|
'Badge',
|
||||||
'Alert'
|
'Alert',
|
||||||
|
'Avatar'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
|
@ -9,7 +9,6 @@ export default {
|
|||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--bg',
|
|
||||||
textNoCssColor: 'yes'
|
textNoCssColor: 'yes'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,11 +14,5 @@ export default {
|
|||||||
'Attachment',
|
'Attachment',
|
||||||
'PollGraph'
|
'PollGraph'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: []
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
@ -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 '' }
|
||||||
|
Loading…
Reference in New Issue
Block a user