More printing stuff

This commit is contained in:
Heerko 2021-07-08 15:59:29 +02:00
parent 3a59921fae
commit deaab48261
3 changed files with 30 additions and 27 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<span :class="classes" class="message"> <span :class="classes" class="message">
<vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it> <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
<div class="reactions"> <div class="reactions ui">
<template v-for="reaction in reactions" :key="reaction"> <template v-for="reaction in reactions" :key="reaction">
{{ reaction }} {{ reaction }}
</template> </template>
@ -27,15 +27,15 @@ export default {
c = c.replaceAll('src="', 'src="' + url); c = c.replaceAll('src="', 'src="' + url);
c = c.replaceAll('href="/', 'href="' + url + "/"); c = c.replaceAll('href="/', 'href="' + url + "/");
const referrers = this.$store.state const referrers = this.$store.state.topics
.topics.find(t => t.title == this.message.subject) .find((t) => t.title == this.message.subject)
.messages.filter( .messages.filter(
(m) => (m) =>
m.responseTo && m.responseTo &&
m.responseTo.id == this.message.id && m.responseTo.id == this.message.id &&
m.responseTo.sender_id == this.message.sender_id && m.responseTo.sender_id == this.message.sender_id &&
this.message.content.includes(m.responseTo.quote) this.message.content.includes(m.responseTo.quote)
); );
referrers.forEach((m) => { referrers.forEach((m) => {
const classes = m.reactions.map((r) => "u" + r.emoji_code).join(" "); const classes = m.reactions.map((r) => "u" + r.emoji_code).join(" ");
c = c.replace( c = c.replace(
@ -82,6 +82,7 @@ export default {
justify-content: center; justify-content: center;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
font-size: 3rem; font-size: 3rem;
pointer-events: none;
} }
.reactions, .reactions,
.reactions::before, .reactions::before,

View file

@ -1,29 +1,31 @@
<script> <script>
import { mapState } from 'vuex'; import { mapState } from "vuex";
import emoji from "../../mixins/emoji"; import emoji from "../../mixins/emoji";
export default { export default {
name: "Styles", name: "Styles",
mixins: [emoji], mixins: [emoji],
computed: { computed: {
...mapState([ ...mapState(["rules"]),
'rules'
]),
}, },
data() { data() {
return { return {
el: null, el: null,
} };
}, },
methods: { methods: {
generateStyleRules() { generateStyleRules() {
let styles = ""; let styles = "";
this.rules.map((r) => { this.rules.map((r) => {
styles += `.${r.parentClassName} ${r.className}` if (r.className.startsWith("@")) {
if (this.containsEmoji(r.className)) { styles += r.className;
styles += `, .${r.parentClassName} .u${this.toEmojiCode(r.className)}` } else {
styles += `.${r.parentClassName} ${r.className}`;
if (this.containsEmoji(r.className)) {
styles += `, .${r.parentClassName} .u${this.toEmojiCode(
r.className
)}`;
}
} }
styles += "{"; styles += "{";
r.rules.map((s) => { r.rules.map((s) => {
@ -40,15 +42,15 @@ export default {
}, },
}, },
mounted() { mounted() {
this.el = this.createStyleElement() this.el = this.createStyleElement();
document.head.appendChild(this.el) document.head.appendChild(this.el);
}, },
watch: { watch: {
rules() { rules() {
console.log('rules!') console.log("rules!");
const newStyle = this.createStyleElement() const newStyle = this.createStyleElement();
document.head.replaceChild(newStyle, this.el) document.head.replaceChild(newStyle, this.el);
this.el = newStyle this.el = newStyle;
}, },
}, },
}; };

View file

@ -109,7 +109,7 @@ iframe {
@media print { @media print {
.ui { .ui {
display: none; display: none !important;
} }
} }
</style> </style>