Merge branch 'master' of github.com:hackersanddesigners/chatty-pub

merge with heerko
This commit is contained in:
كارل مبارك 2021-07-15 16:29:23 +02:00
commit 3fec2280e3
2 changed files with 44 additions and 17 deletions

View file

@ -1,12 +1,12 @@
<template> <template>
<div class="rule" :style="rule.rules"> <div class="rule" :class="classes" :style="rule.rules">
<template v-if="rule.is_codeblock"> <pre v-if="rule.is_codeblock">
{{ contentFiltered }} {{ contentFiltered }}
</template> </pre>
<template v-else> <template v-else>
<p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p> <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
<p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p> <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
<p>}</p> <p>}</p>
</template> </template>
</div> </div>
</template> </template>
@ -29,12 +29,18 @@ export default {
return c; return c;
}, },
classes() {
let style = "";
if (this.rule.is_codeblock) {
style += " raw";
}
return style;
},
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.rule { .rule {
margin: 1em 0; margin: 1em 0;
} }
@ -42,4 +48,25 @@ export default {
.rule p { .rule p {
margin: 0; margin: 0;
} }
.rule.raw {
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 10px;
border: 1px solid black;
position: relative;
}
.rule.raw:after {
content: "raw css";
background-color: #333;
border-radius: 10px;
position: absolute;
bottom: -0.5em;
left: 50%;
transform: translateX(-50%);
padding: 3px;
border: 1px solid white;
}
</style> </style>

View file

@ -15,7 +15,7 @@ let toCSS = (message, currentStream) => {
rules = [], rules = [],
parentClassName = currentStream, parentClassName = currentStream,
id = message.id, id = message.id,
is_codeblock = message.content.includes("<code>"); is_codeblock = message.content.includes("<code>") || message.content.startsWith("```");
// let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
@ -71,7 +71,7 @@ const handleHTMLReply = message => {
quote: message.content quote: message.content
.replace(/.*[^]+<\/p>\n<blockquote>\n<p>/gm, '') .replace(/.*[^]+<\/p>\n<blockquote>\n<p>/gm, '')
.replace(/<\/p>\n<\/blockquote>/gm, '') .replace(/<\/p>\n<\/blockquote>/gm, '')
// .replace(/\n/gm, '') // .replace(/\n/gm, '')
} }
console.log(message.responseTo) console.log(message.responseTo)
} }
@ -111,7 +111,7 @@ export default createStore({
} else { } else {
state.topics.push({ state.topics.push({
title: message.subject, title: message.subject,
messages: [ message ] messages: [message]
}) })
} }
} }
@ -156,7 +156,7 @@ export default createStore({
if (toCSS(rule) !== null) { if (toCSS(rule) !== null) {
// state.rules.push(toCSS(rule, state.currentStream)) // state.rules.push(toCSS(rule, state.currentStream))
// vue will not update if i use rules.push(rule) // vue will not update if i use rules.push(rule)
state.rules = [...state.rules,...[toCSS(rule, state.currentStream)]] state.rules = [...state.rules, ...[toCSS(rule, state.currentStream)]]
} }
}, },
editMessage: (state, { mid, content }) => { editMessage: (state, { mid, content }) => {
@ -181,7 +181,7 @@ export default createStore({
// }, state.currentStream) // }, state.currentStream)
// vue will not update if i use rules.push(rule) // vue will not update if i use rules.push(rule)
state.rules.splice(state.rules.indexOf(rule), 1) state.rules.splice(state.rules.indexOf(rule), 1)
const newRules = [...state.rules, ...[toCSS({ const newRules = [...state.rules, ...[toCSS({
id: mid, content: content, id: mid, content: content,
}, state.currentStream)]] }, state.currentStream)]]
@ -206,11 +206,11 @@ export default createStore({
rules: state => state.rules, rules: state => state.rules,
sortedTopics: state => ( sortedTopics: state => (
[...state.topics] [...state.topics]
.sort((a, b) => a.title.localeCompare(b.title)) .sort((a, b) => a.title.localeCompare(b.title))
.filter(t => ( .filter(t => (
t.messages.length > 0 && t.messages.length > 0 &&
t.title != 'stream events' t.title != 'stream events'
)) ))
) )
} }