From 48f106b438e22d8289904c9f474819ad7b85d0e8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Feb 2024 19:17:17 +0200 Subject: [PATCH] separate greentext into "fun text" and make Post/Notification related components --- src/App.scss | 2 - src/components/fun_text.style.js | 40 +++++++++++++++++++ src/components/notification.style.js | 21 ++++++++++ src/components/notification/notification.scss | 3 +- src/components/panel.style.js | 4 +- src/components/popover.style.js | 3 +- src/components/post.style.js | 21 ++++++++++ src/components/rich_content.style.js | 17 ++++++++ src/components/rich_content/rich_content.scss | 8 ++++ src/components/status_body/status_body.scss | 8 ---- .../status_content/status_content.vue | 10 +++++ src/components/text.style.js | 13 ------ .../theme_data/theme_data_3.service.js | 13 +++++- 13 files changed, 134 insertions(+), 29 deletions(-) create mode 100644 src/components/fun_text.style.js create mode 100644 src/components/notification.style.js create mode 100644 src/components/post.style.js create mode 100644 src/components/rich_content.style.js diff --git a/src/App.scss b/src/App.scss index 27fee4b4..6a634926 100644 --- 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 new file mode 100644 index 00000000..2d3ac154 --- /dev/null +++ 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 new file mode 100644 index 00000000..057b1c7a --- /dev/null +++ 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 index 654aca3c..86d3e31d 100644 --- 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 index ce9812a6..1e8039c6 100644 --- 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 index a3a554fd..6a121cae 100644 --- 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 new file mode 100644 index 00000000..92ec230a --- /dev/null +++ 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 new file mode 100644 index 00000000..aaf126a5 --- /dev/null +++ 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 index e5d353ac..3bb5b16b 100644 --- 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 index a8878745..930ed803 100644 --- 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 index e977d489..a9db6b12 100644 --- 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); + } + } } diff --git a/src/components/text.style.js b/src/components/text.style.js index 905dbbee..a254ceb4 100644 --- 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 index 0d205c73..9cab6dd4 100644 --- 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