visual improvements, remove various dependencies
This commit is contained in:
hippoz
parent
e446fc47ce
commit
5bc5e3cbd2
GPG key ID:
56C4E02A85F2FBED
32 changed files with 3228 additions and 5705 deletions
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"defaultHomeserver": 3,
|
||||
"defaultHomeserver": 0,
|
||||
"homeserverList": [
|
||||
"http://localhost:3000",
|
||||
"converser.eu",
|
||||
"envs.net",
|
||||
"halogen.city",
|
||||
|
|
|
|||
142
index.html
142
index.html
|
|
@ -1,101 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cinny</title>
|
||||
<meta name="name" content="Cinny" />
|
||||
<meta name="author" content="Ajay Bura" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
|
||||
/>
|
||||
|
||||
<meta property="og:title" content="Cinny" />
|
||||
<meta property="og:url" content="https://cinny.in" />
|
||||
<meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
|
||||
/>
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cinny</title>
|
||||
<meta name="name" content="Cinny" />
|
||||
<meta name="author" content="Ajay Bura" />
|
||||
<meta name="description"
|
||||
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source." />
|
||||
<meta name="keywords" content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element" />
|
||||
|
||||
<link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
|
||||
<meta property="og:title" content="Cinny" />
|
||||
<meta property="og:description"
|
||||
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source." />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="application-name" content="Cinny" />
|
||||
<meta name="apple-mobile-web-app-title" content="Cinny" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
|
||||
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="application-name" content="Cinny" />
|
||||
<meta name="apple-mobile-web-app-title" content="Cinny" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="./public/res/apple/apple-touch-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="./public/res/apple/apple-touch-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="./public/res/apple/apple-touch-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="./public/res/apple/apple-touch-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="./public/res/apple/apple-touch-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="./public/res/apple/apple-touch-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="./public/res/apple/apple-touch-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="./public/res/apple/apple-touch-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="167x167" href="./public/res/apple/apple-touch-icon-167x167.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./public/res/apple/apple-touch-icon-180x180.png" />
|
||||
</head>
|
||||
|
||||
<body id="appBody">
|
||||
<script>
|
||||
window.global ||= window;
|
||||
</script>
|
||||
<div id="root"></div>
|
||||
<audio id="notificationSound">
|
||||
<source src="./public/sound/notification.ogg" type="audio/ogg" />
|
||||
</audio>
|
||||
<audio id="inviteSound">
|
||||
<source src="./public/sound/invite.ogg" type="audio/ogg" />
|
||||
</audio>
|
||||
<script type="module" src="./src/index.jsx"></script>
|
||||
</body>
|
||||
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="57x57"
|
||||
href="./public/res/apple/apple-touch-icon-57x57.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="60x60"
|
||||
href="./public/res/apple/apple-touch-icon-60x60.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="72x72"
|
||||
href="./public/res/apple/apple-touch-icon-72x72.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="76x76"
|
||||
href="./public/res/apple/apple-touch-icon-76x76.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="114x114"
|
||||
href="./public/res/apple/apple-touch-icon-114x114.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="120x120"
|
||||
href="./public/res/apple/apple-touch-icon-120x120.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="144x144"
|
||||
href="./public/res/apple/apple-touch-icon-144x144.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="152x152"
|
||||
href="./public/res/apple/apple-touch-icon-152x152.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="167x167"
|
||||
href="./public/res/apple/apple-touch-icon-167x167.png"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="./public/res/apple/apple-touch-icon-180x180.png"
|
||||
/>
|
||||
</head>
|
||||
<body id="appBody">
|
||||
<script>
|
||||
window.global ||= window;
|
||||
</script>
|
||||
<div id="root"></div>
|
||||
<audio id="notificationSound">
|
||||
<source src="./public/sound/notification.ogg" type="audio/ogg" />
|
||||
</audio>
|
||||
<audio id="inviteSound">
|
||||
<source src="./public/sound/invite.ogg" type="audio/ogg" />
|
||||
</audio>
|
||||
<script type="module" src="./src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
5331
package-lock.json
generated
5331
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,6 +9,7 @@
|
|||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "yarn check:eslint && yarn check:prettier",
|
||||
"check:eslint": "eslint src/*",
|
||||
"check:prettier": "prettier --check .",
|
||||
|
|
@ -32,7 +33,6 @@
|
|||
"flux": "4.0.3",
|
||||
"formik": "2.2.9",
|
||||
"html-react-parser": "3.0.4",
|
||||
"katex": "0.16.4",
|
||||
"linkify-html": "4.0.2",
|
||||
"linkifyjs": "4.0.2",
|
||||
"matrix-js-sdk": "22.0.0",
|
||||
|
|
@ -43,11 +43,9 @@
|
|||
"react-dnd": "15.1.2",
|
||||
"react-dnd-html5-backend": "15.1.3",
|
||||
"react-dom": "17.0.2",
|
||||
"react-google-recaptcha": "2.1.0",
|
||||
"react-modal": "3.16.1",
|
||||
"sanitize-html": "2.8.0",
|
||||
"tippy.js": "6.3.7",
|
||||
"twemoji": "14.0.2"
|
||||
"tippy.js": "6.3.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const Avatar = React.forwardRef(({
|
|||
iconSrc !== null
|
||||
? <RawIcon size={size} src={iconSrc} color={iconColor} />
|
||||
: text !== null && (
|
||||
<Text variant={textSize} primary>
|
||||
<Text variant={textSize} monospace>
|
||||
{twemojify(avatarInitials(text))}
|
||||
</Text>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
display: inline-flex;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: var(--bo-radius);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&__large {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import './ContextMenu.scss';
|
||||
|
||||
import Tippy from '@tippyjs/react';
|
||||
import 'tippy.js/animations/scale-extreme.css';
|
||||
import 'tippy.js/animations/scale-subtle.css';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import Button from '../button/Button';
|
||||
|
|
@ -22,7 +22,7 @@ function ContextMenu({
|
|||
|
||||
return (
|
||||
<Tippy
|
||||
animation="scale-extreme"
|
||||
animation="scale-subtle"
|
||||
className="context-menu"
|
||||
visible={isVisible}
|
||||
onClickOutside={hideMenu}
|
||||
|
|
@ -31,7 +31,7 @@ function ContextMenu({
|
|||
interactive
|
||||
arrow={false}
|
||||
maxWidth={maxWidth}
|
||||
duration={200}
|
||||
duration={150}
|
||||
>
|
||||
{render(isVisible ? hideMenu : showMenu)}
|
||||
</Tippy>
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Math.scss';
|
||||
|
||||
import katex from 'katex';
|
||||
import 'katex/dist/katex.min.css';
|
||||
|
||||
import 'katex/dist/contrib/copy-tex';
|
||||
|
||||
const Math = React.memo(({
|
||||
content, throwOnError, errorColor, displayMode,
|
||||
}) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
|
||||
}, [content, throwOnError, errorColor, displayMode]);
|
||||
|
||||
return <span ref={ref} />;
|
||||
});
|
||||
Math.defaultProps = {
|
||||
throwOnError: null,
|
||||
errorColor: null,
|
||||
displayMode: null,
|
||||
};
|
||||
Math.propTypes = {
|
||||
content: PropTypes.string.isRequired,
|
||||
throwOnError: PropTypes.bool,
|
||||
errorColor: PropTypes.string,
|
||||
displayMode: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Math;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.katex-display {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -39,20 +39,22 @@
|
|||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
animation: raw-modal--overlay 150ms;
|
||||
animation: raw-modal--overlay 210ms;
|
||||
animation-timing-function: cubic-bezier(0.77,0,0.18,1);
|
||||
}
|
||||
|
||||
.ReactModal__Content {
|
||||
animation: raw-modal--content 150ms;
|
||||
animation: raw-modal--content 210ms;
|
||||
animation-timing-function: cubic-bezier(0.77,0,0.18,1);
|
||||
}
|
||||
|
||||
@keyframes raw-modal--content {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
opacity: .5;
|
||||
transform: scale(0.90);
|
||||
opacity: .4;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@ import './Text.scss';
|
|||
|
||||
function Text({
|
||||
className, style, variant, weight,
|
||||
primary, span, children,
|
||||
primary, monospace, span, children,
|
||||
}) {
|
||||
const classes = [];
|
||||
if (className) classes.push(className);
|
||||
|
||||
classes.push(`text text-${variant} text-${weight}`);
|
||||
if (primary) classes.push('font-primary');
|
||||
if (monospace) classes.push('font-monospace');
|
||||
|
||||
const textClass = classes.join(' ');
|
||||
if (span) return <span className={textClass} style={style}>{ children }</span>;
|
||||
|
|
@ -26,6 +27,7 @@ Text.defaultProps = {
|
|||
variant: 'b1',
|
||||
weight: 'normal',
|
||||
primary: false,
|
||||
monospace: false,
|
||||
span: false,
|
||||
};
|
||||
|
||||
|
|
@ -35,6 +37,7 @@ Text.propTypes = {
|
|||
variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
|
||||
weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
|
||||
primary: PropTypes.bool,
|
||||
monospace: PropTypes.bool,
|
||||
span: PropTypes.bool,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,29 +6,24 @@ import { isInSameDay } from '../../../util/common';
|
|||
|
||||
function Time({ timestamp, fullTime }) {
|
||||
const date = new Date(timestamp);
|
||||
let formattedDate;
|
||||
|
||||
const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
|
||||
let formattedDate = formattedFullTime;
|
||||
|
||||
if (!fullTime) {
|
||||
if (fullTime) {
|
||||
formattedDate = formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT')
|
||||
} else {
|
||||
const compareDate = new Date();
|
||||
const isToday = isInSameDay(date, compareDate);
|
||||
compareDate.setDate(compareDate.getDate() - 1);
|
||||
const isYesterday = isInSameDay(date, compareDate);
|
||||
|
||||
formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
|
||||
formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy hh:MM TT');
|
||||
if (isYesterday) {
|
||||
formattedDate = `Yesterday, ${formattedDate}`;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<time
|
||||
dateTime={date.toISOString()}
|
||||
title={formattedFullTime}
|
||||
>
|
||||
{formattedDate}
|
||||
</time>
|
||||
<time dateTime={date.toISOString()}>{formattedDate}</time>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import './Tooltip.scss';
|
|||
import Tippy from '@tippyjs/react';
|
||||
|
||||
function Tooltip({
|
||||
className, placement, content, delay, children,
|
||||
className, placement, content, children,
|
||||
}) {
|
||||
return (
|
||||
<Tippy
|
||||
|
|
@ -14,8 +14,8 @@ function Tooltip({
|
|||
arrow={false}
|
||||
maxWidth={250}
|
||||
placement={placement}
|
||||
delay={delay}
|
||||
duration={[100, 0]}
|
||||
duration={[75, 0]}
|
||||
animation="scale-subtle"
|
||||
>
|
||||
{children}
|
||||
</Tippy>
|
||||
|
|
@ -25,14 +25,12 @@ function Tooltip({
|
|||
Tooltip.defaultProps = {
|
||||
placement: 'top',
|
||||
className: '',
|
||||
delay: [200, 0],
|
||||
};
|
||||
|
||||
Tooltip.propTypes = {
|
||||
className: PropTypes.string,
|
||||
placement: PropTypes.string,
|
||||
content: PropTypes.node.isRequired,
|
||||
delay: PropTypes.arrayOf(PropTypes.number),
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -85,11 +85,9 @@ const MessageHeader = React.memo(({
|
|||
<span>{twemojify(username)}</span>
|
||||
<span>{twemojify(userId)}</span>
|
||||
</Text>
|
||||
<div className="message__time">
|
||||
<Text variant="b3">
|
||||
<Time timestamp={timestamp} fullTime={fullTime} />
|
||||
</Text>
|
||||
</div>
|
||||
<Text className="message__time" variant="b3">
|
||||
<Time timestamp={timestamp} fullTime={fullTime} />
|
||||
</Text>
|
||||
</div>
|
||||
));
|
||||
MessageHeader.defaultProps = {
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
& .message__profile {
|
||||
min-width: 0;
|
||||
color: var(--tc-surface-high);
|
||||
@include dir.side(margin, 0, var(--sp-tight));
|
||||
@include dir.side(margin, 0, var(--sp-ultra-tight));
|
||||
|
||||
& > span {
|
||||
@extend .cp-txt__ellipsis;
|
||||
|
|
@ -128,13 +128,8 @@
|
|||
}
|
||||
|
||||
& .message__time {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
& > .text {
|
||||
white-space: nowrap;
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
white-space: nowrap;
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
}
|
||||
.message__reply {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
@use '../../partials/text';
|
||||
|
||||
.people-selector {
|
||||
width: 100%;
|
||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
margin: var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
& .segmented-controls {
|
||||
@include dir.side(margin, 0, var(--sp-normal));
|
||||
margin: var(--sp-extra-tight);
|
||||
flex-grow: 1;
|
||||
& > button {
|
||||
padding: var(--sp-ultra-tight) 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,9 +54,6 @@
|
|||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
& .message__time {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './EmojiBoard.scss';
|
||||
|
||||
import parse from 'html-react-parser';
|
||||
import twemoji from 'twemoji';
|
||||
import parse from "html-react-parser";
|
||||
import { emojiGroups, emojis } from './emoji';
|
||||
import { getRelevantPacks } from './custom-emoji';
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
|
|
@ -13,7 +12,6 @@ import cons from '../../../client/state/cons';
|
|||
import navigation from '../../../client/state/navigation';
|
||||
import AsyncSearch from '../../../util/AsyncSearch';
|
||||
import { addRecentEmoji, getRecentEmojis } from './recent';
|
||||
import { TWEMOJI_BASE_URL } from '../../../util/twemojify';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||
|
|
@ -49,17 +47,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
|
|||
<span key={emojiIndex}>
|
||||
{emoji.hexcode ? (
|
||||
// This is a unicode emoji, and should be rendered with twemoji
|
||||
parse(
|
||||
twemoji.parse(emoji.unicode, {
|
||||
attributes: () => ({
|
||||
unicode: emoji.unicode,
|
||||
shortcodes: emoji.shortcodes?.toString(),
|
||||
hexcode: emoji.hexcode,
|
||||
loading: 'lazy',
|
||||
}),
|
||||
base: TWEMOJI_BASE_URL,
|
||||
})
|
||||
)
|
||||
<span className="emoji" unicode={emoji.unicode} shortcodes={emoji.shortcode} data-mx-emoticon={emoji.mxc}>{ emoji.unicode }</span>
|
||||
) : (
|
||||
// This is a custom emoji, and should be render as an mxc
|
||||
<img
|
||||
|
|
@ -187,15 +175,6 @@ function EmojiBoard({ onSelect, searchRef }) {
|
|||
const { shortcodes, unicode } = getEmojiDataFromTarget(emoji);
|
||||
const { src } = e.target;
|
||||
|
||||
if (typeof shortcodes === 'undefined') {
|
||||
searchRef.current.placeholder = 'Search';
|
||||
setEmojiInfo({
|
||||
unicode: '🙂',
|
||||
shortcode: 'slight_smile',
|
||||
src: 'https://twemoji.maxcdn.com/v/13.1.0/72x72/1f642.png',
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (searchRef.current.placeholder === shortcodes[0]) return;
|
||||
searchRef.current.setAttribute('placeholder', shortcodes[0]);
|
||||
setEmojiInfo({ shortcode: shortcodes[0], src, unicode });
|
||||
|
|
@ -340,7 +319,7 @@ function EmojiBoard({ onSelect, searchRef }) {
|
|||
</ScrollView>
|
||||
</div>
|
||||
<div ref={emojiInfo} className="emoji-board__content__info">
|
||||
<div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
|
||||
<div><span className="emoji" unicode="🙂" shortcodes="slight_smile">🙂</span></div>
|
||||
<Text>:slight_smile:</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@
|
|||
}
|
||||
|
||||
& .room-selector {
|
||||
width: calc(100% - var(--sp-extra-tight));
|
||||
@include dir.side(margin, auto, 0);
|
||||
margin: var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
.sidebar__cross-signin-alert .avatar-container {
|
||||
box-shadow: var(--bs-danger-border);
|
||||
animation-name: pushRight;
|
||||
animation-duration: 400ms;
|
||||
animation-duration: 250ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,15 +68,13 @@
|
|||
& .people-selector {
|
||||
padding: var(--sp-extra-tight);
|
||||
border-radius: var(--bo-radius);
|
||||
&__container {
|
||||
@include dir.side(margin, var(--sp-extra-tight), 0);
|
||||
}
|
||||
}
|
||||
|
||||
& .segmented-controls {
|
||||
display: flex;
|
||||
margin-bottom: var(--sp-extra-tight);
|
||||
@include dir.side(margin, var(--sp-extra-tight), 0);
|
||||
margin: var(--sp-extra-tight);
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--sp-tight);
|
||||
}
|
||||
& .segment-btn {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -40,6 +40,5 @@
|
|||
min-height: 85px;
|
||||
position: relative;
|
||||
background: var(--bg-surface);
|
||||
border-top: 1px solid var(--bg-surface-border);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,10 +2,8 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RoomViewCmdBar.scss';
|
||||
import parse from 'html-react-parser';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
|
||||
|
|
@ -51,39 +49,6 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
|
|||
function renderEmojiSuggestion(emPrefix, emos) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
|
||||
// Renders a small Twemoji
|
||||
function renderTwemoji(emoji) {
|
||||
return parse(
|
||||
twemoji.parse(emoji.unicode, {
|
||||
attributes: () => ({
|
||||
unicode: emoji.unicode,
|
||||
shortcodes: emoji.shortcodes?.toString(),
|
||||
}),
|
||||
base: TWEMOJI_BASE_URL,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Render a custom emoji
|
||||
function renderCustomEmoji(emoji) {
|
||||
return (
|
||||
<img
|
||||
className="emoji"
|
||||
src={mx.mxcUrlToHttp(emoji.mxc)}
|
||||
data-mx-emoticon=""
|
||||
alt={`:${emoji.shortcode}:`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Dynamically render either a custom emoji or twemoji based on what the input is
|
||||
function renderEmoji(emoji) {
|
||||
if (emoji.mxc) {
|
||||
return renderCustomEmoji(emoji);
|
||||
}
|
||||
return renderTwemoji(emoji);
|
||||
}
|
||||
|
||||
return emos.map((emoji) => (
|
||||
<CmdItem
|
||||
key={emoji.shortcode}
|
||||
|
|
@ -94,7 +59,7 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
|
|||
})
|
||||
}
|
||||
>
|
||||
<Text variant="b1">{renderEmoji(emoji)}</Text>
|
||||
<Text variant="b1">{emoji}</Text>
|
||||
<Text variant="b2">{`:${emoji.shortcode}:`}</Text>
|
||||
</CmdItem>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -361,12 +361,12 @@ function RoomViewInput({
|
|||
}
|
||||
return (
|
||||
<>
|
||||
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
|
||||
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
||||
<IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
|
||||
</div>
|
||||
<div ref={inputBaseRef} className="room-input__input-container">
|
||||
{roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
|
||||
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
|
||||
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
||||
<IconButton size="small" onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
|
||||
</div>
|
||||
<ScrollView autoHide>
|
||||
<Text className="room-input__textarea-wrapper">
|
||||
<TextareaAutosize
|
||||
|
|
@ -380,42 +380,43 @@ function RoomViewInput({
|
|||
/>
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</div>
|
||||
<div ref={rightOptionsRef} className="room-input__option-container">
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
openReusableContextMenu(
|
||||
'top',
|
||||
(() => {
|
||||
const cords = getEventCords(e);
|
||||
cords.y -= 20;
|
||||
return cords;
|
||||
})(),
|
||||
(closeMenu) => (
|
||||
<StickerBoard
|
||||
roomId={roomId}
|
||||
onSelect={(data) => {
|
||||
handleSendSticker(data);
|
||||
closeMenu();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
);
|
||||
}}
|
||||
tooltip="Sticker"
|
||||
src={StickerIC}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
const cords = getEventCords(e);
|
||||
cords.x += (document.dir === 'rtl' ? -80 : 80);
|
||||
cords.y -= 250;
|
||||
openEmojiBoard(cords, addEmoji);
|
||||
}}
|
||||
tooltip="Emoji"
|
||||
src={EmojiIC}
|
||||
/>
|
||||
<IconButton onClick={sendMessage} tooltip="Send" src={SendIC} />
|
||||
<div ref={rightOptionsRef} className="room-input__option-container">
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
openReusableContextMenu(
|
||||
'top',
|
||||
(() => {
|
||||
const cords = getEventCords(e);
|
||||
cords.y -= 20;
|
||||
return cords;
|
||||
})(),
|
||||
(closeMenu) => (
|
||||
<StickerBoard
|
||||
roomId={roomId}
|
||||
onSelect={(data) => {
|
||||
handleSendSticker(data);
|
||||
closeMenu();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
);
|
||||
}}
|
||||
tooltip="Sticker"
|
||||
src={StickerIC}
|
||||
size="small"
|
||||
/>
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
const cords = getEventCords(e);
|
||||
cords.x += (document.dir === 'rtl' ? -80 : 80);
|
||||
cords.y -= 250;
|
||||
openEmojiBoard(cords, addEmoji);
|
||||
}}
|
||||
tooltip="Emoji"
|
||||
src={EmojiIC}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.room-input {
|
||||
padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
|
||||
display: flex;
|
||||
min-height: 56px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__alert {
|
||||
margin: auto;
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
background-color: var(--bg-surface-low);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
border-radius: var(--bo-radius);
|
||||
padding: var(--sp-ultra-tight);
|
||||
|
||||
& > .ic-raw {
|
||||
transform: scale(0.8);
|
||||
|
|
@ -38,6 +40,8 @@
|
|||
}
|
||||
|
||||
&__textarea-wrapper {
|
||||
margin-left: var(--sp-extra-tight);
|
||||
margin-right: var(--sp-extra-tight);
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Auth.scss';
|
||||
import ReCAPTCHA from 'react-google-recaptcha';
|
||||
import { Formik } from 'formik';
|
||||
|
||||
import * as auth from '../../../client/action/auth';
|
||||
|
|
@ -375,8 +374,7 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
|
|||
const d = await auth.completeRegisterStage(baseUrl, username, password, { session });
|
||||
|
||||
if (isRecaptcha && !d.completed.includes('m.login.recaptcha')) {
|
||||
const sitekey = params['m.login.recaptcha'].public_key;
|
||||
setProcess({ type: 'm.login.recaptcha', sitekey });
|
||||
setProcess({ isLoading: false, error: 'm.login.recaptcha is not supported.' });
|
||||
return;
|
||||
}
|
||||
if (isTerms && !d.completed.includes('m.login.terms')) {
|
||||
|
|
@ -400,17 +398,6 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
|
|||
asyncProcess();
|
||||
}, [process]);
|
||||
|
||||
const handleRecaptcha = async (value) => {
|
||||
if (typeof value !== 'string') return;
|
||||
const [username, password] = getInputs();
|
||||
const d = await auth.completeRegisterStage(baseUrl, username, password, {
|
||||
type: 'm.login.recaptcha',
|
||||
response: value,
|
||||
session,
|
||||
});
|
||||
if (d.done) refreshWindow();
|
||||
else setProcess({ type: 'processing', message: 'Registration in progress...' });
|
||||
};
|
||||
const handleTerms = async () => {
|
||||
const [username, password] = getInputs();
|
||||
const d = await auth.completeRegisterStage(baseUrl, username, password, {
|
||||
|
|
@ -435,7 +422,6 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
|
|||
return (
|
||||
<>
|
||||
{process.type === 'processing' && <LoadingScreen message={process.message} />}
|
||||
{process.type === 'm.login.recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={handleRecaptcha} />}
|
||||
{process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
|
||||
{process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
|
||||
<div className="auth-form__heading">
|
||||
|
|
@ -607,22 +593,6 @@ LoadingScreen.propTypes = {
|
|||
message: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
function Recaptcha({ message, sitekey, onChange }) {
|
||||
return (
|
||||
<ProcessWrapper>
|
||||
<div style={{ marginBottom: 'var(--sp-normal)' }}>
|
||||
<Text variant="s1" weight="medium">{message}</Text>
|
||||
</div>
|
||||
<ReCAPTCHA sitekey={sitekey} onChange={onChange} />
|
||||
</ProcessWrapper>
|
||||
);
|
||||
}
|
||||
Recaptcha.propTypes = {
|
||||
message: PropTypes.string.isRequired,
|
||||
sitekey: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function Terms({ url, onSubmit }) {
|
||||
return (
|
||||
<ProcessWrapper>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import * as sdk from 'matrix-js-sdk';
|
||||
import { createClient } from 'matrix-js-sdk';
|
||||
import cons from '../state/cons';
|
||||
|
||||
function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
|
||||
|
|
@ -9,7 +9,7 @@ function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
|
|||
}
|
||||
|
||||
function createTemporaryClient(baseUrl) {
|
||||
return sdk.createClient({ baseUrl });
|
||||
return createClient({ baseUrl });
|
||||
}
|
||||
|
||||
async function startSsoLogin(baseUrl, type, idpId) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import EventEmitter from 'events';
|
||||
import * as sdk from 'matrix-js-sdk';
|
||||
import Olm from '@matrix-org/olm';
|
||||
// import { logger } from 'matrix-js-sdk/lib/logger';
|
||||
|
||||
import { secret } from './state/auth';
|
||||
import RoomList from './state/RoomList';
|
||||
|
|
@ -10,11 +8,10 @@ import RoomsInput from './state/RoomsInput';
|
|||
import Notifications from './state/Notifications';
|
||||
import { cryptoCallbacks } from './state/secretStorageKeys';
|
||||
import navigation from './state/navigation';
|
||||
import { createClient, IndexedDBCryptoStore, IndexedDBStore } from 'matrix-js-sdk';
|
||||
|
||||
global.Olm = Olm;
|
||||
|
||||
// logger.disableAll();
|
||||
|
||||
class InitMatrix extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
|
@ -29,19 +26,19 @@ class InitMatrix extends EventEmitter {
|
|||
}
|
||||
|
||||
async startClient() {
|
||||
const indexedDBStore = new sdk.IndexedDBStore({
|
||||
const indexedDBStore = new IndexedDBStore({
|
||||
indexedDB: global.indexedDB,
|
||||
localStorage: global.localStorage,
|
||||
dbName: 'web-sync-store',
|
||||
});
|
||||
await indexedDBStore.startup();
|
||||
|
||||
this.matrixClient = sdk.createClient({
|
||||
this.matrixClient = createClient({
|
||||
baseUrl: secret.baseUrl,
|
||||
accessToken: secret.accessToken,
|
||||
userId: secret.userId,
|
||||
store: indexedDBStore,
|
||||
cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
|
||||
cryptoStore: new IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
|
||||
deviceId: secret.deviceId,
|
||||
timelineSupport: true,
|
||||
cryptoCallbacks,
|
||||
|
|
|
|||
|
|
@ -194,6 +194,7 @@
|
|||
|
||||
--font-primary: 'Roboto', sans-serif;
|
||||
--font-secondary: 'Roboto', sans-serif;
|
||||
--font-monospace: monospace;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -331,6 +332,10 @@
|
|||
--ic-surface-low: rgba(255, 251, 222, 64%);
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
|
||||
.font-primary {
|
||||
font-family: var(--font-primary);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,60 +1,20 @@
|
|||
/* eslint-disable import/prefer-default-export */
|
||||
import React, { lazy, Suspense } from 'react';
|
||||
|
||||
import linkifyHtml from 'linkify-html';
|
||||
import parse from 'html-react-parser';
|
||||
import twemoji from 'twemoji';
|
||||
import { sanitizeText } from './sanitize';
|
||||
|
||||
export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
|
||||
|
||||
const Math = lazy(() => import('../app/atoms/math/Math'));
|
||||
|
||||
const mathOptions = {
|
||||
replace: (node) => {
|
||||
const maths = node.attribs?.['data-mx-maths'];
|
||||
if (maths) {
|
||||
return (
|
||||
<Suspense fallback={<code>{maths}</code>}>
|
||||
<Math
|
||||
content={maths}
|
||||
throwOnError={false}
|
||||
errorColor="var(--tc-danger-normal)"
|
||||
displayMode={node.name === 'div'}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text - text to twemojify
|
||||
* @param {object|undefined} opts - options for tweomoji.parse
|
||||
* @param {boolean} [linkify=false] - convert links to html tags (default: false)
|
||||
* @param {boolean} [sanitize=true] - sanitize html text (default: true)
|
||||
* @param {boolean} [maths=false] - render maths (default: false)
|
||||
* @returns React component
|
||||
*/
|
||||
export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
|
||||
export function twemojify(text, _opts=null, linkify=false, sanitize=true, _maths=false) {
|
||||
if (typeof text !== 'string') return text;
|
||||
let content = text;
|
||||
const options = opts ?? { base: TWEMOJI_BASE_URL };
|
||||
if (!options.base) {
|
||||
options.base = TWEMOJI_BASE_URL;
|
||||
}
|
||||
|
||||
if (sanitize) {
|
||||
content = sanitizeText(content);
|
||||
}
|
||||
|
||||
content = twemoji.parse(content, options);
|
||||
if (linkify) {
|
||||
content = linkifyHtml(content, {
|
||||
target: '_blank',
|
||||
rel: 'noreferrer noopener',
|
||||
});
|
||||
}
|
||||
return parse(content, maths ? mathOptions : null);
|
||||
return parse(content);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue