hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

i spent too much time on this

Browse source
This commit is contained in:
Henry Jameson 2025-07-02 02:26:17 +03:00
commit 3822aaf137
5 changed files with 37 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -11,13 +11,13 @@
<link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" /> <link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
<!-- putting styles here to avoid having to wait for styles to load up --> <!-- putting styles here to avoid having to wait for styles to load up -->
<link rel="stylesheet" id="splashscreen" href="/static/splash.css" /> <link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
<link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" /> <style id="pleroma-eager-styles"></style>
<link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" /> <style id="pleroma-lazy-styles"></style>
<link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" /> <style id="theme-holder"></style>
<link rel="stylesheet" id="theme-preview-holder" type="text/css" href="/static/empty.css" /> <style id="theme-preview-holder"></style>
<link rel="stylesheet" id="component-style-holder" type="text/css" href="/static/empty.css" /> <style id="component-style-holder"></style>
<link rel="stylesheet" id="editor-preview-style-holder" type="text/css" href="/static/empty.css" /> <style id="editor-overall-preview-holder"></style>
<link rel="stylesheet" id="old-editor-preview-style-holder" type="text/css" href="/static/empty.css" /> <style id="old-editor-preview-style-holder"></style>
<!--server-generated-meta--> <!--server-generated-meta-->
</head> </head>
<body> <body>

1
public/static/empty.css
View file

@ -1 +0,0 @@
// nothing here //

4
src/components/component_preview/component_preview.js
View file

@ -51,8 +51,8 @@ export default {
const styleEl = document.getElementById('component-style-holder') const styleEl = document.getElementById('component-style-holder')
const styleSheet = styleEl.sheet const styleSheet = styleEl.sheet
for (let i = styleEl.sheet.cssRules.length - 1; i >= 0; --i) { for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
styleEl.sheet.deleteRule(i) styleSheet.deleteRule(i)
} }
const result = [] const result = []

42
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -20,10 +20,7 @@ import Preview from '../theme_tab/theme_preview.vue'
import VirtualDirectivesTab from './virtual_directives_tab.vue' import VirtualDirectivesTab from './virtual_directives_tab.vue'
import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js' import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
import { import { getCssRules } from 'src/services/theme_data/css_utils.js'
getCssRules,
getScopedVersion
} from 'src/services/theme_data/css_utils.js'
import { serialize } from 'src/services/theme_data/iss_serializer.js' import { serialize } from 'src/services/theme_data/iss_serializer.js'
import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js' import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
import { import {
@ -688,21 +685,38 @@ export default {
const overallPreviewRules = ref([]) const overallPreviewRules = ref([])
exports.overallPreviewRules = overallPreviewRules exports.overallPreviewRules = overallPreviewRules
const overallPreviewCssRules = ref([]) watch([overallPreviewRules], () => {
watchEffect(throttle(() => { let css = null
try { try {
overallPreviewCssRules.value = getScopedVersion( css = getCssRules(overallPreviewRules.value).map(r => r.replace('html', '&'))
getCssRules(overallPreviewRules.value),
'#edited-style-preview'
).join('\n')
} catch (e) { } catch (e) {
console.error(e) console.error(e)
return
} }
}, 500))
exports.overallPreviewCssRules = overallPreviewCssRules const styleEl = document.getElementById('editor-overall-preview-holder')
const styleSheet = styleEl.sheet
const updateOverallPreview = throttle(() => { console.log(styleSheet)
console.log('BEFORE', styleSheet.cssRules)
for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
styleSheet.deleteRule(i)
}
styleSheet.insertRule([
'#edited-style-preview {\n',
css.join('\n'),
'\n}'
].join(''), 'index-max')
styleSheet.insertRule([
'#edited-style-preview {\n',
css.join('\n'),
'\n}'
].join(''), 'index-max')
console.log('AFTER', styleSheet.cssRules)
})
const updateOverallPreview = () => {
try { try {
overallPreviewRules.value = init({ overallPreviewRules.value = init({
inputRuleset: [ inputRuleset: [
@ -724,7 +738,7 @@ export default {
console.error('Could not compile preview theme', e) console.error('Could not compile preview theme', e)
return null return null
} }
}, 5000) }
// //
// Apart from "hover" we can't really show how component looks like in // Apart from "hover" we can't really show how component looks like in
// certain states, so we have to fake them. // certain states, so we have to fake them.

8
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -6,14 +6,6 @@
<div class="setting-item heading"> <div class="setting-item heading">
<h2> {{ $t('settings.style.themes3.editor.title') }} </h2> <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
<div class="meta-preview"> <div class="meta-preview">
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<!-- eslint-disable vue/no-v-html -->
<component
:is="'style'"
v-html="overallPreviewCssRules"
/>
<!-- eslint-enable vue/no-v-html -->
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<Preview id="edited-style-preview" /> <Preview id="edited-style-preview" />
<teleport <teleport
v-if="isActive" v-if="isActive"