doohoyi/chatty-pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Distinguish raw css from other classes

Browse source
This commit is contained in:
Heerko 2021-07-15 15:50:09 +02:00
parent 537494b1aa
commit f94139d74a
2 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
front/src/components/Rules/Rule.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="rule" :style="rule.rules">
<template v-if="rule.is_codeblock">
<div class="rule" :class="classes" :style="rule.rules">
<pre v-if="rule.is_codeblock">
{{ contentFiltered }}
</template>
</pre>
<template v-else>
<p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
<p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
<p>}</p>
<p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
<p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
<p>}</p>
</template>
</div>
</template>
@ -29,12 +29,18 @@ export default {
return c;
},
classes() {
let style = "";
if (this.rule.is_codeblock) {
style += " raw";
}
return style;
},
},
};
</script>
<style scoped>
.rule {
margin: 1em 0;
}
@ -42,4 +48,25 @@ export default {
.rule p {
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>

20
front/src/store/index.js
View file

@ -15,7 +15,7 @@ let toCSS = (message, currentStream) => {
rules = [],
parentClassName = currentStream,
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?(?<props>(.*;\n?)+)}/gm
@ -71,7 +71,7 @@ const handleHTMLReply = message => {
quote: message.content
.replace(/.*[^]+<\/p>\n<blockquote>\n<p>/gm, '')
.replace(/<\/p>\n<\/blockquote>/gm, '')
// .replace(/\n/gm, '')
// .replace(/\n/gm, '')
}
console.log(message.responseTo)
}
@ -111,7 +111,7 @@ export default createStore({
} else {
state.topics.push({
title: message.subject,
messages: [ message ]
messages: [message]
})
}
}
@ -156,7 +156,7 @@ export default createStore({
if (toCSS(rule) !== null) {
// state.rules.push(toCSS(rule, state.currentStream))
// 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 }) => {
@ -181,7 +181,7 @@ export default createStore({
// }, state.currentStream)
// 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({
id: mid, content: content,
}, state.currentStream)]]
@ -206,11 +206,11 @@ export default createStore({
rules: state => state.rules,
sortedTopics: state => (
[...state.topics]
.sort((a, b) => a.title.localeCompare(b.title))
.filter(t => (
t.messages.length > 0 &&
t.title != 'stream events'
))
.sort((a, b) => a.title.localeCompare(b.title))
.filter(t => (
t.messages.length > 0 &&
t.title != 'stream events'
))
)
}