github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-28 12:50:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化聊天表情样式

Browse Source
This commit is contained in:
kuaifan 2022-04-19 00:36:30 +08:00
parent 87933c821f
commit 7c5e9f9b75
5 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/js/functions/web.js vendored
View File

@ -695,7 +695,8 @@
.sr-reader,
.no-dark-mode,
.no-dark-mode-before:before,
.sr-backdrop {
.sr-backdrop,
.dialog-content .content-text {
${this.utils.reverseFilter}
}
@ -705,7 +706,8 @@
[style*="background-image: url"] *,
input,
[background] *,
twitterwidget .NaturalImage-image {
twitterwidget .NaturalImage-image,
.dialog-content .content-text img {
${this.utils.noneFilter}
}

4
resources/assets/js/pages/manage/components/ChatInput/emoji.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="chat-emoji-wrapper">
<ul class="chat-emoji-box overlay-y" :class="type">
<ul class="chat-emoji-box overlay-y" :class="type === 'emoji' ? ['no-dark-mode', 'emoji'] : [type]">
<li v-for="item in list" @click="onSelect(item)">
<img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
<span v-else v-html="item.html" :title="item.name"></span>
@ -8,7 +8,7 @@
</ul>
<ul class="chat-emoji-menu">
<li :class="{active: type === 'emoji'}" @click="type='emoji'">
<span>&#128512;</span>
<span class="no-dark-mode">&#128512;</span>
</li>
<li v-for="item in emoticonList" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
<img :title="item.name" :alt="item.name" :src="item.src"/>

2
resources/assets/js/pages/manage/components/ChatInput/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="chat-input-wrapper" :class="modeClass">
<div ref="editor"></div>
<div ref="editor" class="no-dark-mode"></div>
<div class="chat-input-toolbar">
<slot name="toolbarBefore"/>

25
resources/assets/js/pages/manage/components/DialogView.vue
View File

@ -7,10 +7,10 @@
<div class="dialog-head">
<!--详情-->
<div class="dialog-content">
<div class="dialog-content" :class="contentClass">
<!--文本-->
<div v-if="msgData.type === 'text'" class="content-text">
<pre class="no-dark-mode" @click="viewText" v-html="textMsg(msgData.msg.text)"></pre>
<pre @click="viewText" v-html="textMsg(msgData.msg.text)"></pre>
</div>
<!--文件-->
<div v-else-if="msgData.type === 'file'" :class="`content-file ${msgData.msg.type}`">
@ -124,6 +124,23 @@ export default {
showMenu() {
return this.msgData.userid == this.userId || this.msgData.type === 'file'
},
contentClass() {
const {type, msg} = this.msgData;
let classArray = [];
if (type === 'text') {
if (/^<img\s+class="emoticon"[^>]*?>$/.test(msg.text)) {
classArray.push('an-emoticon')
} else if (/^\s*<p>\s*([\uD800-\uDBFF][\uDC00-\uDFFF]){3}\s*<\/p>\s*$/.test(msg.text)) {
classArray.push('three-emoji')
} else if (/^\s*<p>\s*([\uD800-\uDBFF][\uDC00-\uDFFF]){2}\s*<\/p>\s*$/.test(msg.text)) {
classArray.push('two-emoji')
} else if (/^\s*<p>\s*[\uD800-\uDBFF][\uDC00-\uDFFF]\s*<\/p>\s*$/.test(msg.text)) {
classArray.push('an-emoji')
}
}
return classArray;
}
},
@ -195,8 +212,8 @@ export default {
imageStyle(info) {
const {width, height} = info;
if (width && height) {
let maxW = 180,
maxH = 180,
let maxW = 220,
maxH = 220,
tempW = width,
tempH = height;
if (width > maxW || height > maxH) {

35
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -230,6 +230,40 @@
display: flex;
align-items: flex-start;
&.an-emoticon,
&.an-emoji,
&.two-emoji,
&.three-emoji {
background-color: transparent !important;
}
&.an-emoji {
.content-text {
> pre {
font-size: 72px;
line-height: 1;
}
}
}
&.two-emoji {
.content-text {
> pre {
font-size: 52px;
line-height: 1;
}
}
}
&.three-emoji {
.content-text {
> pre {
font-size: 32px;
line-height: 1;
}
}
}
.content-text {
color: #333333;
@ -242,6 +276,7 @@
word-wrap: break-word;
word-break: break-word;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
img {
cursor: pointer;