moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/chat/chat.style.js Normal file
View File

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

2
src/components/chat/chat.vue
View File

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

38
src/components/chat_message/chat_message.scss
View File

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

8
src/components/notification/notification.style.js
View File

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

3
src/components/panel.style.js
View File

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

3
src/components/panel_header.style.js
View File

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

1
src/components/rich_content/rich_content.style.js
View File

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

8
src/components/status/post.style.js
View File

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

34
src/services/theme_data/theme_data_3.service.js
View File

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