This commit is contained in:
Troplo 2022-07-31 19:53:52 +10:00
parent ab4c172899
commit 5ee4af70ab
6 changed files with 88 additions and 41 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "colubrina-chat", "name": "colubrina-chat",
"version": "1.0.9", "version": "1.0.10",
"private": true, "private": true,
"author": "Troplo <troplo@troplo.com>", "author": "Troplo <troplo@troplo.com>",
"license": "GPL-3.0", "license": "GPL-3.0",
@ -22,8 +22,10 @@
"glob-parent": "^5.1.2", "glob-parent": "^5.1.2",
"graphql": "^16.3.0", "graphql": "^16.3.0",
"graphql-tag": "^2.12.6", "graphql-tag": "^2.12.6",
"highlight.js": "^11.6.0",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"markdown-it-emoji": "git+https://github.com/Troplo/markdown-it-unicode-emoji", "markdown-it-emoji": "git+https://github.com/Troplo/markdown-it-unicode-emoji",
"markdown-it-highlightjs": "^4.0.1",
"node-ipc": "git+https://git.troplo.com/Troplo/node-ipc", "node-ipc": "git+https://git.troplo.com/Troplo/node-ipc",
"nth-check": "^2.0.1", "nth-check": "^2.0.1",
"patch-package": "^6.4.7", "patch-package": "^6.4.7",

View file

@ -1,5 +1,12 @@
/* large codeblock */
code {
background-color: var(--v-bg-base) !important;
border: 2px solid var(--v-bg-lighten1);
display: block;
padding: 20px;
}
.message-hover { .message-hover {
background-color: var(--v-bg-lighten1); background-color: var(--v-bg-lighten1);
border-radius: 5px; border-radius: 5px;
} }
.message-toast { .message-toast {

View file

@ -160,42 +160,33 @@
</v-row> </v-row>
<template v-else-if="embed.type === 'image'"> <template v-else-if="embed.type === 'image'">
<v-hover v-slot="{ hover }"> <v-hover v-slot="{ hover }">
<div> <v-img
<v-img @click="setImagePreview(embed)"
@click="setImagePreview(embed)" contain
contain :aspect-ratio="16 / 9"
:aspect-ratio="16 / 9" :src="embed.mediaProxyLink"
:src="embed.mediaProxyLink" >
> <template v-slot:placeholder>
<template v-slot:placeholder> <v-row
<v-row class="fill-height ma-0"
class="fill-height ma-0" align="center"
align="center" justify="center"
justify="center" >
> <v-progress-circular
<v-progress-circular indeterminate
indeterminate color="grey lighten-5"
color="grey lighten-5" ></v-progress-circular>
></v-progress-circular> </v-row>
</v-row> </template>
</template> <template v-slot:default>
<template v-slot:default> <v-fade-transition v-if="hover">
<v-fade-transition v-if="hover"> <v-overlay absolute>
<v-overlay absolute> <v-icon large>mdi-arrow-expand-all</v-icon>
<v-icon large>mdi-arrow-expand-all</v-icon> </v-overlay>
</v-overlay> </v-fade-transition>
</v-fade-transition> </template>
</template> </v-img>
</v-img>
</div>
</v-hover> </v-hover>
<v-card-actions>
MediaProxy Image
<v-spacer />
<v-btn text icon :href="embed.url" target="_blank">
<v-icon> mdi-download </v-icon>
</v-btn>
</v-card-actions>
</template> </template>
<v-row v-else-if="embed.type === 'embed-v1'"> <v-row v-else-if="embed.type === 'embed-v1'">
<v-col <v-col
@ -293,7 +284,8 @@
v-for="(attachment, index) in message.attachments" v-for="(attachment, index) in message.attachments"
:key="attachment.id" :key="attachment.id"
:id="'attachment-' + index" :id="'attachment-' + index"
max-width="40%" :max-width="500"
:min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
elevaion="0" elevaion="0"
color="card" color="card"
> >

View file

@ -14,6 +14,7 @@ import "./plugins/dayjs"
import SocketIO from "socket.io-client" import SocketIO from "socket.io-client"
import twemoji from "twemoji" import twemoji from "twemoji"
import VueNativeNotification from "vue-native-notification" import VueNativeNotification from "vue-native-notification"
import "highlight.js/styles/github.css"
const md = require("markdown-it")({ const md = require("markdown-it")({
html: false, // Enable HTML tags in source html: false, // Enable HTML tags in source
xhtmlOut: false, // Use '/' to close single tags (<br />). xhtmlOut: false, // Use '/' to close single tags (<br />).
@ -48,6 +49,8 @@ const defaultRender =
return self.renderToken(tokens, idx, options) return self.renderToken(tokens, idx, options)
} }
md.use(emoji) md.use(emoji)
const hljs = require("highlight.js/lib/core")
md.use(require("markdown-it-highlightjs"), { hljs })
md.renderer.rules.emoji = function (token, idx) { md.renderer.rules.emoji = function (token, idx) {
return twemoji.parse(token[idx].content, { return twemoji.parse(token[idx].content, {
folder: "svg", folder: "svg",

View file

@ -222,7 +222,10 @@
:key="association.id" :key="association.id"
top top
> >
<template v-slot:activator="{ on }"> <template
v-slot:activator="{ on }"
v-if="association.user.id !== $store.state.user.id"
>
<v-btn <v-btn
icon icon
small small
@ -249,10 +252,38 @@
{{ association.user.username }} has read up to this point. {{ association.user.username }} has read up to this point.
</span> </span>
</v-tooltip> </v-tooltip>
<br /> <br v-if="index + 1 > messages.length" />
<br v-if="index + 1 <= messages.length" /> <br v-if="index + 1 > messages.length" />
</div> </div>
</template> </template>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
icon
small
fab
width="20"
height="20"
class="ml-2 mt-2"
style="float: right"
@click="openUserPanel($store.state.user)"
>
<v-avatar size="20" v-on="on" color="primary">
<img
v-if="$store.state.user.avatar"
:src="'/usercontent/' + $store.state.user.avatar"
alt="avatar"
/>
<span v-else>{{
$store.state.user.username[0].toUpperCase()
}}</span>
</v-avatar>
</v-btn>
</template>
<span>
{{ $store.state.user.username }} has read up to this point.
</span>
</v-tooltip>
</v-card-text> </v-card-text>
<v-card-text> <v-card-text>
<v-toolbar <v-toolbar

View file

@ -4705,6 +4705,11 @@ highlight.js@^10.7.1:
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
highlight.js@^11.5.1, highlight.js@^11.6.0:
version "11.6.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
hmac-drbg@^1.0.1: hmac-drbg@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -5827,6 +5832,13 @@ map-visit@^1.0.0:
optionalDependencies: optionalDependencies:
emojione "2.1.0" emojione "2.1.0"
markdown-it-highlightjs@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/markdown-it-highlightjs/-/markdown-it-highlightjs-4.0.1.tgz#6b8eb6a3b971ed592db1ff160cfa5ce9f2e44232"
integrity sha512-EPXwFEN6P5nqR3G4KjT20r20xbGYKMMA/360hhSYFmeoGXTE6hsLtJAiB/8ID8slVH4CWHHEL7GX0YenyIstVQ==
dependencies:
highlight.js "^11.5.1"
markdown-it@^13.0.1: markdown-it@^13.0.1:
version "13.0.1" version "13.0.1"
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430" resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"