Merge branch 'master' of github.com:hackersanddesigners/chatty-pub
merge with heerko
This commit is contained in:
commit
3fec2280e3
2 changed files with 44 additions and 17 deletions
|
|
@ -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"> {{ dec }}</p>
|
<p v-for="dec in rule.rules" :key="dec"> {{ 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>
|
||||||
|
|
@ -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'
|
||||||
))
|
))
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue