add options to use system emoji

This commit is contained in:
Ajay Bura 2023-10-04 20:24:38 +05:30
parent 2639f20c90
commit 5f0b936c6c
4 changed files with 29 additions and 1 deletions
.vscode
src/app
organisms/settings
state
templates/client

View file

@ -1,5 +1,5 @@
{
"editor.formatOnSave": false,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"typescript.tsdk": "node_modules/typescript/lib"
}

View file

@ -51,6 +51,7 @@ function AppearanceSection() {
const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
const [useSystemEmoji, setUseSystemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
const [hideMembershipEvents, setHideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@ -90,6 +91,16 @@ function AppearanceSection() {
/>
)}
/>
<SettingTile
title="Use System Emoji"
options={(
<Toggle
isActive={useSystemEmoji}
onToggle={() => setUseSystemEmoji(!useSystemEmoji)}
/>
)}
content={<Text variant="b3">Use system emoji instead of Twitter emojis.</Text>}
/>
</div>
<div className="settings-appearance__card">
<MenuHeader>Room messages</MenuHeader>

View file

@ -9,6 +9,7 @@ export interface Settings {
isMarkdown: boolean;
editorToolbar: boolean;
isPeopleDrawer: boolean;
useSystemEmoji: boolean;
messageLayout: MessageLayout;
messageSpacing: MessageSpacing;
@ -27,6 +28,7 @@ const defaultSettings: Settings = {
isMarkdown: true,
editorToolbar: false,
isPeopleDrawer: true,
useSystemEmoji: false,
messageLayout: 0,
messageSpacing: '400',

View file

@ -20,6 +20,20 @@ import cons from '../../../client/state/cons';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import { MatrixClientProvider } from '../../hooks/useMatrixClient';
import { ClientContent } from './ClientContent';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
function SystemEmojiFeature() {
const [systemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
if (systemEmoji) {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
} else {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
}
return null;
}
function Client() {
const [isLoading, changeLoading] = useState(true);
@ -115,6 +129,7 @@ function Client() {
<Windows />
<Dialogs />
<ReusableContextMenu />
<SystemEmojiFeature />
</div>
</MatrixClientProvider>
);