commit: 48f106b438e22d8289904c9f474819ad7b85d0e8
parent ae345d2c458bd0952d9b85c2e03060b2d286d320
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 19:17:17 +0200
separate greentext into "fun text" and make Post/Notification related components
Diffstat:
13 files changed, 134 insertions(+), 29 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -673,8 +673,6 @@ option {
.faint {
--text: var(--textFaint);
- --textGreentext: var(--textGreentextFaint);
- --textCyantext: var(--textCyantextFaint);
--link: var(--linkFaint);
color: var(--text);
diff --git a/src/components/fun_text.style.js b/src/components/fun_text.style.js
@@ -0,0 +1,40 @@
+export default {
+ name: 'FunText',
+ selector: '/*fun-text*/',
+ virtual: true,
+ variants: {
+ greentext: '.greentext',
+ cyantext: '.cyantext'
+ },
+ states: {
+ faint: '.faint'
+ },
+ defaultRules: [
+ {
+ directives: {
+ textColor: '--text',
+ textAuto: 'preserve'
+ }
+ },
+ {
+ state: ['faint'],
+ directives: {
+ textOpacity: 0.5
+ }
+ },
+ {
+ variant: 'greentext',
+ directives: {
+ textColor: '--cGreen',
+ textAuto: 'preserve'
+ }
+ },
+ {
+ variant: 'cyantext',
+ directives: {
+ textColor: '--cBlue',
+ textAuto: 'preserve'
+ }
+ }
+ ]
+}
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
@@ -0,0 +1,21 @@
+export default {
+ name: 'Notification',
+ selector: '.Notification',
+ validInnerComponents: [
+ 'Text',
+ 'Link',
+ 'Icon',
+ 'Border',
+ 'Button',
+ 'ButtonUnstyled',
+ 'RichContent',
+ 'Input'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg'
+ }
+ }
+ ]
+}
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -3,8 +3,7 @@
// TODO Copypaste from Status, should unify it somehow
.Notification {
border-bottom: 1px solid;
- border-color: $fallback--border;
- border-color: var(--border, $fallback--border);
+ border-color: var(--border);
word-wrap: break-word;
word-break: break-word;
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -9,7 +9,9 @@ export default {
'ButtonUnstyled',
'Input',
'PanelHeader',
- 'MenuItem'
+ 'MenuItem',
+ 'Post',
+ 'Notification'
],
defaultRules: [
{
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
@@ -13,7 +13,8 @@ export default {
'ButtonUnstyled',
'Input',
'PanelHeader',
- 'MenuItem'
+ 'MenuItem',
+ 'Post'
],
defaultRules: [
{
diff --git a/src/components/post.style.js b/src/components/post.style.js
@@ -0,0 +1,21 @@
+export default {
+ name: 'Post',
+ selector: '.Status',
+ validInnerComponents: [
+ 'Text',
+ 'Link',
+ 'Icon',
+ 'Border',
+ 'Button',
+ 'ButtonUnstyled',
+ 'RichContent',
+ 'Input'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg'
+ }
+ }
+ ]
+}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content.style.js
@@ -0,0 +1,17 @@
+export default {
+ name: 'RichContent',
+ selector: '.RichContent',
+ validInnerComponents: [
+ 'Text',
+ 'FunText',
+ 'Link'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg',
+ textNoCssColor: 'yes'
+ }
+ }
+ ]
+}
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
@@ -65,4 +65,12 @@
vertical-align: middle;
object-fit: contain;
}
+
+ .greentext {
+ color: var(--funtextGreentext);
+ }
+
+ .cyantext {
+ color: var(--funtextCyantext);
+ }
}
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
@@ -112,14 +112,6 @@
}
}
- .greentext {
- color: var(--textGreentext);
- }
-
- .cyantext {
- color: var(--textCyantext);
- }
-
&.-compact {
align-items: top;
flex-direction: row;
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
@@ -62,5 +62,15 @@
.StatusContent {
flex: 1;
min-width: 0;
+
+ &.faint {
+ .greentext {
+ color: var(--funtextGreentextFaint);
+ }
+
+ .cyantext {
+ color: var(--funtextCyantextFaint);
+ }
+ }
}
</style>
diff --git a/src/components/text.style.js b/src/components/text.style.js
@@ -2,34 +2,21 @@ export default {
name: 'Text',
selector: '/*text*/',
virtual: true,
- variants: {
- greentext: '.greentext'
- },
states: {
faint: '.faint'
},
defaultRules: [
{
- component: 'Text',
directives: {
textColor: '--text',
textAuto: 'no-preserve'
}
},
{
- component: 'Text',
state: ['faint'],
directives: {
textOpacity: 0.5
}
- },
- {
- component: 'Text',
- variant: 'greentext',
- directives: {
- textColor: '--cGreen',
- textAuto: 'preserve'
- }
}
]
}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -19,9 +19,13 @@ import Button from 'src/components/button.style.js'
import ButtonUnstyled from 'src/components/button_unstyled.style.js'
import Input from 'src/components/input.style.js'
import Text from 'src/components/text.style.js'
+import FunText from 'src/components/fun_text.style.js'
import Link from 'src/components/link.style.js'
import Icon from 'src/components/icon.style.js'
import Border from 'src/components/border.style.js'
+import Post from 'src/components/post.style.js'
+import Notification from 'src/components/notification.style.js'
+import RichContent from 'src/components/rich_content.style.js'
const DEBUG = false
@@ -39,6 +43,7 @@ export const DEFAULT_SHADOWS = {
const components = {
Root,
Text,
+ FunText,
Link,
Icon,
Border,
@@ -51,7 +56,10 @@ const components = {
TopBar,
Button,
ButtonUnstyled,
- Input
+ Input,
+ Post,
+ Notification,
+ RichContent
}
// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@@ -582,6 +590,7 @@ export const init = (extraRuleset, palette) => {
].join(';\n')
}
case 'textColor': {
+ if (rule.directives.textNoCssColor === 'yes') { return '' }
return 'color: ' + v
}
default: return ''
@@ -594,7 +603,7 @@ export const init = (extraRuleset, palette) => {
return [
header,
directives + ';',
- !rule.virtual ? ' color: var(--text);' : '',
+ (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
'',
virtualDirectives,
footer
