evrithing seems to work now

This commit is contained in:
or-else
2021-09-14 20:36:57 -07:00
parent 8ee83a9b26
commit c00c1002e3
22 changed files with 188 additions and 137 deletions
+36 -45
View File
@@ -1557,25 +1557,10 @@ img.channel {
text-align: left;
border-radius: 0.5rem;
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12);
transition: ease-out background-color 0.5s;
transition-delay: 0.3s;
}
/*
NEW BUBBLE TIP STYLE
.left .bubble .tip::before {
content: ' ';
position: absolute;
width: 0.8rem;
height: 0.8rem;
left: -0.8rem;
bottom: 0;
background-color: inherit;
clip-path: polygon(100% 0, 0 110%, 100% 110%);
box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
border-bottom-left-radius: 0.3rem;
}
*/
.chat-box li.single {
margin-top: 0.25rem;
margin-bottom: 0.75rem;
@@ -1601,7 +1586,11 @@ NEW BUBBLE TIP STYLE
margin-right: 0.5rem;
}
.left .bubble .tip {
.left.flash .bubble {
background-color: #94A97C;
}
.left .bubble.tip {
border-bottom-left-radius: 0;
}
@@ -1610,7 +1599,11 @@ NEW BUBBLE TIP STYLE
margin-left: 1.75rem;
}
.right .bubble .tip {
.right.flash .bubble {
background-color: #ccc;
}
.right .bubble.tip {
border-bottom-right-radius: 0;
}
@@ -1620,39 +1613,33 @@ NEW BUBBLE TIP STYLE
}
/* Left triangle placed bottom left flush. */
.chat-box .left .tip::before {
.left .bubble.tip::before {
content: '';
position: absolute;
width: 0;
height: 0;
right: auto;
left: -.8rem;
top: auto;
width: 0.85rem;
height: 0.85rem;
left: -0.8rem;
bottom: 0;
border: 0.62rem solid #c5e1a5;
color: #c5e1a5;
border-top-color: transparent;
border-left-color: transparent;
box-shadow: 0 1.6px 0.5px -0.8px rgba(0, 0, 0, 0.12);
background-color: inherit;
clip-path: polygon(100% 0, 0 110%, 100% 110%);
-webkit-clip-path: polygon(100% 0, 0 110%, 100% 110%);
box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
border-bottom-left-radius: 0.3rem;
}
/* Right triangle placed bottom right flush. */
.chat-box .right .tip::before {
.right .bubble.tip::before {
content: '';
position: absolute;
display: flex;
justify-content: space-between;
width: 0;
height: 0;
left: auto;
right: -.8rem;
top: auto;
width: 0.85rem;
height: 0.85rem;
left: 99.8%;
bottom: 0;
border: 0.62rem solid #fafafa;
color: #fafafa;
border-top-color: transparent;
border-right-color: transparent;
box-shadow: 0 1.6px 0.5px -0.8px rgba(0, 0, 0, 0.12);
background-color: inherit;
clip-path: polygon(0 0, 100% 110%, 0 110%);
-webkit-clip-path: polygon(0 0, 100% 110%, 0 110%);
box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
border-bottom-right-radius: 0.3rem;
}
.chat-box .avatar-box {
@@ -2498,11 +2485,15 @@ ul.tabbar li.active > a {
}
.chat-box .left .reply-quote {
background-color: #daebc6;
background-color: rgba(255, 255, 255, 0.4);
}
.chat-box .right .reply-quote {
background-color: #eee;
background-color: rgba(128, 128, 128, 0.12);
}
.reply-quote .inline-image {
vertical-align: middle;
}
#reply-quote-preview {
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -79,7 +79,7 @@ export const MAX_IMAGE_DIM = 1024;
export const IMAGE_PREVIEW_DIM = 64;
// Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
export const IMAGE_THUMBNAIL_DIM = 25;
export const IMAGE_THUMBNAIL_DIM = 36;
// Maximum number of online users to be shown in a topic title bar. Others will be
// hidden under "+X more"
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "ungültiger Inhalt",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -436,7 +436,7 @@
"invalid_content": {
"translation": "invalid content",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "contenido inválido",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -253,7 +253,7 @@
},
"invalid_content": {
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable"
"description": "Shown when the message is unreadable"
},
"invalid_security_token": {
"defaultMessage": "Invalid security token",
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "잘못된내용",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "conținut invalid",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "сообщение не читается",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "內容無效",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+1 -1
View File
@@ -429,7 +429,7 @@
"invalid_content": {
"translation": "无效内容",
"defaultMessage": "invalid content",
"description": "Shown when message is unreadable",
"description": "Shown when the message is unreadable",
"missing": false,
"obsolete": false
},
+22 -14
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import { IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
import { fitImageSize } from './blob-helpers.js';
@@ -30,20 +30,20 @@ function handleImageData(el, data, attr) {
if (!data) {
attr.src = 'img/broken_image.png';
attr.style = {
width: BROKEN_IMAGE_SIZE + 'px',
height: BROKEN_IMAGE_SIZE + 'px',
width: IMAGE_THUMBNAIL_DIM + 'px',
height: IMAGE_THUMBNAIL_DIM + 'px',
// Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
minWidth: BROKEN_IMAGE_SIZE + 'px',
minHeight: BROKEN_IMAGE_SIZE + 'px'
minWidth: IMAGE_THUMBNAIL_DIM + 'px',
minHeight: IMAGE_THUMBNAIL_DIM + 'px'
};
return el;
}
attr.className = 'inline-image';
const dim = fitImageSize(data.width, data.height,
this.viewportWidth > 0 ?
Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) : REM_SIZE * 34.5,
REM_SIZE * 24, false) || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
REM_SIZE * 34.5, REM_SIZE * 24, false) ||
{dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
attr.style = {
width: dim.dstWidth + 'px',
height: dim.dstHeight + 'px',
@@ -147,6 +147,7 @@ export function fullFormatter(style, data, values, key) {
// Converts Drafty object into a one-line preview. 'this' is set by the caller.
// 'this' must contain:
// formatMessage: this.props.intl.formatMessage
// messages: formatjs messages defined with defineMessages.
export function previewFormatter(style, data, values, key) {
let el = Drafty.tagName(style);
const attr = { key: key };
@@ -184,9 +185,13 @@ export function previewFormatter(style, data, values, key) {
el = React.Fragment;
break;
case 'EX':
if (data && data.mime == 'application/json') {
// Ignore JSON attachments: they are form response payloads.
return null;
if (data) {
if (data.mime == 'application/json') {
// Ignore JSON attachments: they are form response payloads.
return null;
}
// Clear inband data.
data.val = null;
}
el = React.Fragment;
values = [<i key="ex" className="material-icons">attachment</i>, this.formatMessage(messages.drafty_attachment)];
@@ -207,17 +212,20 @@ export function previewFormatter(style, data, values, key) {
// Converts Drafty object into a quoted reply. 'this' is set by the caller.
// 'this' must contain:
// formatMessage: this.props.intl.formatMessage
// messages: formatjs messages defined with defineMessages.
// authorizeURL: this.props.tinode.authorizeURL
// onQuoteClick: this.handleQuoteClick (optional)
export function quoteFormatter(style, data, values, key) {
if (['BR', 'IM', 'MN', 'QQ'].includes(style)) {
let el = Drafty.tagName(style);
const attr = Drafty.attrValue(style, data) || {};
let attr = Drafty.attrValue(style, data) || {};
attr.key = key;
switch(style) {
case 'IM':
el = handleImageData.call(this, el, data, attr);
values = null;
const img = handleImageData.call(this, el, data, attr);
values = [React.createElement(img, attr, null), ' ', this.formatMessage(messages.drafty_image)];
el = React.Fragment;
attr = {key: key};
break;
case 'MN':
el = 'span';
+21 -10
View File
@@ -71,6 +71,11 @@ const messages = defineMessages({
defaultMessage: 'Picture',
description: 'Comment for embedded images in drafty preview'
},
invalid_content: {
id: 'invalid_content',
defaultMessage: 'invalid content',
description: 'Shown when the message is unreadable'
},
});
// Checks if the access permissions are granted but not yet accepted.
@@ -848,6 +853,7 @@ class MessagesView extends React.Component {
handlePickReply(seq, content) {
this.setState({reply: null});
if (!seq || !content) {
return;
}
@@ -855,7 +861,12 @@ class MessagesView extends React.Component {
if (typeof content == 'string') {
content = Drafty.init(content);
}
content = Drafty.preview(content, 30);
if (Drafty.isValid(content)) {
content = Drafty.preview(content, 30);
} else {
content = Drafty.append(Drafty.init('\u26A0 '),
Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
}
// Get the author.
const topic = this.props.tinode.getTopic(this.state.topic);
@@ -893,6 +904,8 @@ class MessagesView extends React.Component {
ex.data.name = '';
ex.data.width = IMAGE_THUMBNAIL_DIM;
ex.data.height = IMAGE_THUMBNAIL_DIM;
ex.data.maxWidth = IMAGE_THUMBNAIL_DIM;
ex.data.maxHeight = IMAGE_THUMBNAIL_DIM;
};
const scale = (origBlob) => {
imageScaled(origBlob, IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, false,
@@ -949,7 +962,7 @@ class MessagesView extends React.Component {
// All done. Create a reply quote.
this.setState({
reply: {
content: Drafty.createQuote(senderName, senderId, content),
content: Drafty.quote(senderName, senderId, content),
seq: seq
}
});
@@ -962,14 +975,12 @@ class MessagesView extends React.Component {
handleQuoteClick(replyToSeq) {
const ref = this.getOrCreateMessageRef(replyToSeq);
if (!ref) {
return;
}
const element = ref.current;
if (element) {
element.scrollIntoView({block: "center", behavior: "smooth"});
element.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
setTimeout(() => { element.style.backgroundColor = ''; } , 1000);
if (ref && ref.current) {
ref.current.scrollIntoView({block: "center", behavior: "smooth"});
// ref.current.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
ref.current.classList.add('flash');
setTimeout(() => { ref.current.classList.remove('flash') } , 1000);
//setTimeout(() => { ref.current.style.backgroundColor = ''; } , 1000);
} else {
console.error("Unresolved message ref: seqId", replyToSeq);
}
+5 -4
View File
@@ -31,8 +31,9 @@ class BaseChatMessage extends React.PureComponent {
this.formatterContext = {
getFormatter: (tp) => { return tp == 'QQ' ? quoteFormatter : null; },
viewportWidth: this.props.viewportWidth,
authorizeURL: this.props.tinode.authorizeURL,
formatMessage: props.intl.formatMessage,
viewportWidth: props.viewportWidth,
authorizeURL: props.tinode.authorizeURL,
onImagePreview: this.handleImagePreview,
onFormButtonClick: this.handleFormButtonClick,
onQuoteClick: this.handleQuoteClick
@@ -136,9 +137,9 @@ class BaseChatMessage extends React.PureComponent {
defaultMessage="content deleted" description="Shown when messages are deleted" />
</i></>
} else if (typeof content != 'string') {
content = <><i className="material-icons gray">error_outline</i> <i className="gray">
content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
<FormattedMessage id="invalid_content"
defaultMessage="invalid content" description="Shown when message is unreadable" /></i></>
defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
}
return (
+2 -2
View File
@@ -74,9 +74,9 @@ class Contact extends React.Component {
Drafty.isValid(this.props.preview) ?
React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
{formatMessage: this.props.intl.formatMessage})) :
<><i className="material-icons gray">error_outline</i> <i className="gray">
<><i className="material-icons gray">warning_amber</i> <i className="gray">
<FormattedMessage id="invalid_content"
defaultMessage="invalid content" description="Shown when message is unreadable" /></i>
defaultMessage="invalid content" description="Shown when the message is unreadable" /></i>
</>
) :
this.props.comment;
+46 -26
View File
@@ -74,7 +74,7 @@ const MAX_INBAND_ATTACHMENT_SIZE = 262144;
const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
const MAX_IMAGE_DIM = 1024;
const IMAGE_PREVIEW_DIM = 64;
const IMAGE_THUMBNAIL_DIM = 25;
const IMAGE_THUMBNAIL_DIM = 36;
const MAX_ONLINE_IN_TOPIC = 4;
const MAX_TITLE_LENGTH = 60;
const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
@@ -406,10 +406,10 @@ function handleImageData(el, data, attr) {
if (!data) {
attr.src = 'img/broken_image.png';
attr.style = {
width: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px',
height: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px',
minWidth: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px',
minHeight: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px'
width: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px',
height: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px',
minWidth: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px',
minHeight: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px'
};
return el;
}
@@ -565,8 +565,12 @@ function previewFormatter(style, data, values, key) {
break;
case 'EX':
if (data && data.mime == 'application/json') {
return null;
if (data) {
if (data.mime == 'application/json') {
return null;
}
data.val = null;
}
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
@@ -597,13 +601,17 @@ function previewFormatter(style, data, values, key) {
function quoteFormatter(style, data, values, key) {
if (['BR', 'IM', 'MN', 'QQ'].includes(style)) {
let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.tagName(style);
const attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.attrValue(style, data) || {};
let attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.attrValue(style, data) || {};
attr.key = key;
switch (style) {
case 'IM':
el = handleImageData.call(this, el, data, attr);
values = null;
const img = handleImageData.call(this, el, data, attr);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement(img, attr, null), ' ', this.formatMessage(messages.drafty_image)];
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
attr = {
key: key
};
break;
case 'MN':
@@ -3131,6 +3139,13 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
"type": 0,
"value": "Picture"
}]
},
invalid_content: {
id: "invalid_content",
defaultMessage: [{
"type": 0,
"value": "invalid content"
}]
}
});
@@ -3939,7 +3954,12 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
content = Drafty.init(content);
}
content = Drafty.preview(content, 30);
if (Drafty.isValid(content)) {
content = Drafty.preview(content, 30);
} else {
content = Drafty.append(Drafty.init('\u26A0 '), Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
}
const topic = this.props.tinode.getTopic(this.state.topic);
const msg = topic.findMessage(seq);
let senderName, senderId;
@@ -3962,6 +3982,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
const ents = [];
Drafty.entities(content, (data, idx, tp) => {
if (tp == 'IM') {
console.log("Image", data);
ents.push({
tp: tp,
data: data
@@ -3975,10 +3996,14 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
ex.data.name = '';
ex.data.width = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
ex.data.height = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
ex.data.maxWidth = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
ex.data.maxHeight = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
};
const scale = origBlob => {
console.log("Image scaling request");
(0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_16__.imageScaled)(origBlob, _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM, _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM, -1, false, (mime, blob, width, height, fname) => {
console.log("Image scaled:", width, height, fname);
ex.data.mime = mime;
ex.data.size = blob.size;
ex.data.width = width;
@@ -4022,7 +4047,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
}).finally(() => {
this.setState({
reply: {
content: Drafty.createQuote(senderName, senderId, content),
content: Drafty.quote(senderName, senderId, content),
seq: seq
}
});
@@ -4038,20 +4063,14 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
handleQuoteClick(replyToSeq) {
const ref = this.getOrCreateMessageRef(replyToSeq);
if (!ref) {
return;
}
const element = ref.current;
if (element) {
element.scrollIntoView({
if (ref && ref.current) {
ref.current.scrollIntoView({
block: "center",
behavior: "smooth"
});
element.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
ref.current.classList.add('flash');
setTimeout(() => {
element.style.backgroundColor = '';
ref.current.classList.remove('flash');
}, 1000);
} else {
console.error("Unresolved message ref: seqId", replyToSeq);
@@ -7586,8 +7605,9 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
getFormatter: tp => {
return tp == 'QQ' ? _lib_formatters_js__WEBPACK_IMPORTED_MODULE_6__.quoteFormatter : null;
},
viewportWidth: this.props.viewportWidth,
authorizeURL: this.props.tinode.authorizeURL,
formatMessage: props.intl.formatMessage,
viewportWidth: props.viewportWidth,
authorizeURL: props.tinode.authorizeURL,
onImagePreview: this.handleImagePreview,
onFormButtonClick: this.handleFormButtonClick,
onQuoteClick: this.handleQuoteClick
@@ -7707,7 +7727,7 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
} else if (typeof content != 'string') {
content = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons gray"
}, "error_outline"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
}, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "gray"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "invalid_content",
@@ -8419,7 +8439,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
formatMessage: this.props.intl.formatMessage
})) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons gray"
}, "error_outline"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
}, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "gray"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "invalid_content",
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+41 -21
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long