mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-14 03:00:29 +03:00
redesigned app settings and switch to rust crypto (#1988)
* rework general settings * account settings - WIP * add missing key prop * add object url hook * extract wide modal styles * profile settings and image editor - WIP * add outline style to upload card * remove file param from bind upload atom hook * add compact variant to upload card * add compact upload card renderer * add option to update profile avatar * add option to change profile displayname * allow displayname change based on capabilities check * rearrange settings components into folders * add system notification settings * add initial page param in settings * convert account data hook to typescript * add push rule hook * add notification mode hook * add notification mode switcher component * add all messages notification settings options * add special messages notification settings * add keyword notifications * add ignored users section * improve ignore user list strings * add about settings * add access token option in about settings * add developer tools settings * add expand button to account data dev tool option * update folds * fix editable active element textarea check * do not close dialog when editable element in focus * add text area plugins * add text area intent handler hook * add newline intent mod in text area * add next line hotkey in text area intent hook * add syntax error position dom utility function * add account data editor * add button to send new account data in dev tools * improve custom emoji plugin * add more custom emojis hooks * add text util css * add word break in setting tile title and description * emojis and sticker user settings - WIP * view image packs from settings * emoji pack editing - WIP * add option to edit pack meta * change saved changes message * add image edit and delete controls * add option to upload pack images and apply changes * fix state event type when updating image pack * lazy load pack image tile img * hide upload image button when user can not edit pack * add option to add or remove global image packs * upgrade to rust crypto (#2168) * update matrix js sdk * remove dead code * use rust crypto * update setPowerLevel usage * fix types * fix deprecated isRoomEncrypted method uses * fix deprecated room.currentState uses * fix deprecated import/export room keys func * fix merge issues in image pack file * fix remaining issues in image pack file * start indexedDBStore * update package lock and vite-plugin-top-level-await * user session settings - WIP * add useAsync hook * add password stage uia * add uia flow matrix error hook * add UIA action component * add options to delete sessions * add sso uia stage * fix SSO stage complete error * encryption - WIP * update user settings encryption terminology * add default variant to password input * use password input in uia password stage * add options for local backup in user settings * remove typo in import local backup password input label * online backup - WIP * fix uia sso action * move access token settings from about to developer tools * merge encryption tab into sessions and rename it to devices * add device placeholder tile * add logout dialog * add logout button for current device * move other devices in component * render unverified device verification tile * add learn more section for current device verification * add device verification status badge * add info card component * add index file for password input component * add types for secret storage * add component to access secret storage key * manual verification - WIP * update matrix-js-sdk to v35 * add manual verification * use react query for device list * show unverified tab on sidebar * fix device list updates * add session key details to current device * render restore encryption backup * fix loading state of restore backup * fix unverified tab settings closes after verification * key backup tile - WIP * fix unverified tab badge * rename session key to device key in device tile * improve backup restore functionality * fix restore button enabled after layout reload during restoring backup * update backup info on status change * add backup disconnection failures * add device verification using sas * restore backup after verification * show option to logout on startup error screen * fix key backup hook update on decryption key cached * add option to enable device verification * add device verification reset dialog * add logout button in settings drawer * add encrypted message lost on logout * fix backup restore never finish with 0 keys * fix setup dialog hides when enabling device verification * show backup details in menu * update setup device verification body copy * replace deprecated method * fix displayname appear as mxid in settings * remove old refactored codes * fix types
This commit is contained in:
Ajay Bura
GitHub
parent
f5d68fcc22
commit
56b754153a
196 changed files with 14171 additions and 8403 deletions
388
src/app/components/image-pack-view/ImagePackContent.tsx
Normal file
388
src/app/components/image-pack-view/ImagePackContent.tsx
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { as, Box, Text, config, Button, Menu, Spinner } from 'folds';
|
||||
import {
|
||||
ImagePack,
|
||||
ImageUsage,
|
||||
PackContent,
|
||||
PackImage,
|
||||
PackImageReader,
|
||||
packMetaEqual,
|
||||
PackMetaReader,
|
||||
} from '../../plugins/custom-emoji';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { SequenceCard } from '../sequence-card';
|
||||
import { ImageTile, ImageTileEdit, ImageTileUpload } from './ImageTile';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
import { UsageSwitcher } from './UsageSwitcher';
|
||||
import { ImagePackProfile, ImagePackProfileEdit } from './PackMeta';
|
||||
import * as css from './style.css';
|
||||
import { useFilePicker } from '../../hooks/useFilePicker';
|
||||
import { CompactUploadCardRenderer } from '../upload-card';
|
||||
import { UploadSuccess } from '../../state/upload';
|
||||
import { getImageInfo, TUploadContent } from '../../utils/matrix';
|
||||
import { getImageFileUrl, loadImageElement, renameFile } from '../../utils/dom';
|
||||
import { replaceSpaceWithDash, suffixRename } from '../../utils/common';
|
||||
import { getFileNameWithoutExt } from '../../utils/mimeTypes';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
|
||||
export type ImagePackContentProps = {
|
||||
imagePack: ImagePack;
|
||||
canEdit?: boolean;
|
||||
onUpdate?: (packContent: PackContent) => Promise<void>;
|
||||
};
|
||||
|
||||
export const ImagePackContent = as<'div', ImagePackContentProps>(
|
||||
({ imagePack, canEdit, onUpdate, ...props }, ref) => {
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const [metaEditing, setMetaEditing] = useState(false);
|
||||
const [savedMeta, setSavedMeta] = useState<PackMetaReader>();
|
||||
const currentMeta = savedMeta ?? imagePack.meta;
|
||||
|
||||
const images = useMemo(() => Array.from(imagePack.images.collection.values()), [imagePack]);
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [uploadedImages, setUploadedImages] = useState<PackImageReader[]>([]);
|
||||
const [imagesEditing, setImagesEditing] = useState<Set<string>>(new Set());
|
||||
const [savedImages, setSavedImages] = useState<Map<string, PackImageReader>>(new Map());
|
||||
const [deleteImages, setDeleteImages] = useState<Set<string>>(new Set());
|
||||
|
||||
const hasImageWithShortcode = useCallback(
|
||||
(shortcode: string): boolean => {
|
||||
const hasInPack = imagePack.images.collection.has(shortcode);
|
||||
if (hasInPack) return true;
|
||||
const hasInUploaded =
|
||||
uploadedImages.find((img) => img.shortcode === shortcode) !== undefined;
|
||||
if (hasInUploaded) return true;
|
||||
const hasInSaved =
|
||||
Array.from(savedImages).find(([, img]) => img.shortcode === shortcode) !== undefined;
|
||||
return hasInSaved;
|
||||
},
|
||||
[imagePack, savedImages, uploadedImages]
|
||||
);
|
||||
|
||||
const pickFiles = useFilePicker(
|
||||
useCallback(
|
||||
(pickedFiles: File[]) => {
|
||||
const uniqueFiles = pickedFiles.map((file) => {
|
||||
const fileName = replaceSpaceWithDash(file.name);
|
||||
if (hasImageWithShortcode(fileName)) {
|
||||
const uniqueName = suffixRename(fileName, hasImageWithShortcode);
|
||||
return renameFile(file, uniqueName);
|
||||
}
|
||||
return fileName !== file.name ? renameFile(file, fileName) : file;
|
||||
});
|
||||
|
||||
setFiles((f) => [...f, ...uniqueFiles]);
|
||||
},
|
||||
[hasImageWithShortcode]
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const handleMetaSave = useCallback(
|
||||
(editedMeta: PackMetaReader) => {
|
||||
setMetaEditing(false);
|
||||
setSavedMeta(
|
||||
(m) =>
|
||||
new PackMetaReader({
|
||||
...imagePack.meta.content,
|
||||
...m?.content,
|
||||
...editedMeta.content,
|
||||
})
|
||||
);
|
||||
},
|
||||
[imagePack.meta]
|
||||
);
|
||||
|
||||
const handleMetaCancel = () => setMetaEditing(false);
|
||||
|
||||
const handlePackUsageChange = useCallback(
|
||||
(usg: ImageUsage[]) => {
|
||||
setSavedMeta(
|
||||
(m) =>
|
||||
new PackMetaReader({
|
||||
...imagePack.meta.content,
|
||||
...m?.content,
|
||||
usage: usg,
|
||||
})
|
||||
);
|
||||
},
|
||||
[imagePack.meta]
|
||||
);
|
||||
|
||||
const handleUploadRemove = useCallback((file: TUploadContent) => {
|
||||
setFiles((fs) => fs.filter((f) => f !== file));
|
||||
}, []);
|
||||
|
||||
const handleUploadComplete = useCallback(
|
||||
async (data: UploadSuccess) => {
|
||||
const imgEl = await loadImageElement(getImageFileUrl(data.file));
|
||||
const packImage: PackImage = {
|
||||
url: data.mxc,
|
||||
info: getImageInfo(imgEl, data.file),
|
||||
};
|
||||
const image = PackImageReader.fromPackImage(
|
||||
getFileNameWithoutExt(data.file.name),
|
||||
packImage
|
||||
);
|
||||
if (!image) return;
|
||||
handleUploadRemove(data.file);
|
||||
setUploadedImages((imgs) => [image, ...imgs]);
|
||||
},
|
||||
[handleUploadRemove]
|
||||
);
|
||||
|
||||
const handleImageEdit = (shortcode: string) => {
|
||||
setImagesEditing((shortcodes) => {
|
||||
const shortcodeSet = new Set(shortcodes);
|
||||
shortcodeSet.add(shortcode);
|
||||
return shortcodeSet;
|
||||
});
|
||||
};
|
||||
const handleDeleteToggle = (shortcode: string) => {
|
||||
setDeleteImages((shortcodes) => {
|
||||
const shortcodeSet = new Set(shortcodes);
|
||||
if (shortcodeSet.has(shortcode)) shortcodeSet.delete(shortcode);
|
||||
else shortcodeSet.add(shortcode);
|
||||
return shortcodeSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleImageEditCancel = (shortcode: string) => {
|
||||
setImagesEditing((shortcodes) => {
|
||||
const shortcodeSet = new Set(shortcodes);
|
||||
shortcodeSet.delete(shortcode);
|
||||
return shortcodeSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleImageEditSave = (shortcode: string, image: PackImageReader) => {
|
||||
handleImageEditCancel(shortcode);
|
||||
|
||||
const saveImage =
|
||||
shortcode !== image.shortcode && hasImageWithShortcode(image.shortcode)
|
||||
? new PackImageReader(
|
||||
suffixRename(image.shortcode, hasImageWithShortcode),
|
||||
image.url,
|
||||
image.content
|
||||
)
|
||||
: image;
|
||||
|
||||
setSavedImages((sImgs) => {
|
||||
const imgs = new Map(sImgs);
|
||||
imgs.set(shortcode, saveImage);
|
||||
return imgs;
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetSavedChanges = () => {
|
||||
setSavedMeta(undefined);
|
||||
setFiles([]);
|
||||
setUploadedImages([]);
|
||||
setSavedImages(new Map());
|
||||
setDeleteImages(new Set());
|
||||
};
|
||||
|
||||
const [applyState, applyChanges] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const pack: PackContent = {
|
||||
pack: savedMeta?.content ?? imagePack.meta.content,
|
||||
images: {},
|
||||
};
|
||||
const pushImage = (img: PackImageReader) => {
|
||||
if (deleteImages.has(img.shortcode)) return;
|
||||
if (!pack.images) return;
|
||||
const imgToPush = savedImages.get(img.shortcode) ?? img;
|
||||
pack.images[imgToPush.shortcode] = imgToPush.content;
|
||||
};
|
||||
uploadedImages.forEach((img) => pushImage(img));
|
||||
images.forEach((img) => pushImage(img));
|
||||
|
||||
return onUpdate?.(pack);
|
||||
}, [imagePack, images, savedMeta, uploadedImages, savedImages, deleteImages, onUpdate])
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (applyState.status === AsyncStatus.Success) {
|
||||
handleResetSavedChanges();
|
||||
}
|
||||
}, [applyState]);
|
||||
|
||||
const savedChanges =
|
||||
(savedMeta && !packMetaEqual(imagePack.meta, savedMeta)) ||
|
||||
uploadedImages.length > 0 ||
|
||||
savedImages.size > 0 ||
|
||||
deleteImages.size > 0;
|
||||
const canApplyChanges = !metaEditing && imagesEditing.size === 0 && files.length === 0;
|
||||
const applying = applyState.status === AsyncStatus.Loading;
|
||||
|
||||
const renderImage = (image: PackImageReader) => (
|
||||
<SequenceCard
|
||||
key={image.shortcode}
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={deleteImages.has(image.shortcode) ? 'Critical' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
{imagesEditing.has(image.shortcode) ? (
|
||||
<ImageTileEdit
|
||||
defaultShortcode={image.shortcode}
|
||||
image={savedImages.get(image.shortcode) ?? image}
|
||||
packUsage={currentMeta.usage}
|
||||
useAuthentication={useAuthentication}
|
||||
onCancel={handleImageEditCancel}
|
||||
onSave={handleImageEditSave}
|
||||
/>
|
||||
) : (
|
||||
<ImageTile
|
||||
defaultShortcode={image.shortcode}
|
||||
image={savedImages.get(image.shortcode) ?? image}
|
||||
packUsage={currentMeta.usage}
|
||||
useAuthentication={useAuthentication}
|
||||
canEdit={canEdit}
|
||||
onEdit={handleImageEdit}
|
||||
deleted={deleteImages.has(image.shortcode)}
|
||||
onDeleteToggle={handleDeleteToggle}
|
||||
/>
|
||||
)}
|
||||
</SequenceCard>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box grow="Yes" direction="Column" gap="700" {...props} ref={ref}>
|
||||
{savedChanges && (
|
||||
<Menu className={css.UnsavedMenu} variant="Success">
|
||||
<Box alignItems="Center" gap="400">
|
||||
<Box grow="Yes" direction="Column">
|
||||
{applyState.status === AsyncStatus.Error ? (
|
||||
<Text size="T200">
|
||||
<b>Failed to apply changes! Please try again.</b>
|
||||
</Text>
|
||||
) : (
|
||||
<Text size="T200">
|
||||
<b>Changes saved! Apply when ready.</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box shrink="No" gap="200">
|
||||
<Button
|
||||
size="300"
|
||||
variant="Success"
|
||||
fill="None"
|
||||
radii="300"
|
||||
disabled={!canApplyChanges || applying}
|
||||
onClick={handleResetSavedChanges}
|
||||
>
|
||||
<Text size="B300">Reset</Text>
|
||||
</Button>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Success"
|
||||
radii="300"
|
||||
disabled={!canApplyChanges || applying}
|
||||
before={applying && <Spinner variant="Success" fill="Solid" size="100" />}
|
||||
onClick={applyChanges}
|
||||
>
|
||||
<Text size="B300">Apply Changes</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
)}
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Pack</Text>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
{metaEditing ? (
|
||||
<ImagePackProfileEdit
|
||||
meta={currentMeta}
|
||||
onCancel={handleMetaCancel}
|
||||
onSave={handleMetaSave}
|
||||
/>
|
||||
) : (
|
||||
<ImagePackProfile
|
||||
meta={currentMeta}
|
||||
canEdit={canEdit}
|
||||
onEdit={() => setMetaEditing(true)}
|
||||
/>
|
||||
)}
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Images Usage"
|
||||
description="Select how the images are being used: as emojis, as stickers, or as both."
|
||||
after={
|
||||
<UsageSwitcher
|
||||
usage={currentMeta.usage}
|
||||
canEdit={canEdit}
|
||||
onChange={handlePackUsageChange}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
{images.length === 0 && !canEdit ? null : (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Images</Text>
|
||||
{canEdit && (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Upload Images"
|
||||
description="Select images from your storage to upload them in pack."
|
||||
after={
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
type="button"
|
||||
outlined
|
||||
onClick={() => pickFiles('image/*')}
|
||||
>
|
||||
<Text size="B300">Select</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
)}
|
||||
{files.map((file) => (
|
||||
<SequenceCard
|
||||
key={file.name}
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<ImageTileUpload file={file}>
|
||||
{(uploadAtom) => (
|
||||
<CompactUploadCardRenderer
|
||||
uploadAtom={uploadAtom}
|
||||
onRemove={handleUploadRemove}
|
||||
onComplete={handleUploadComplete}
|
||||
/>
|
||||
)}
|
||||
</ImageTileUpload>
|
||||
</SequenceCard>
|
||||
))}
|
||||
{uploadedImages.map(renderImage)}
|
||||
{images.map(renderImage)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
);
|
||||
51
src/app/components/image-pack-view/ImagePackView.tsx
Normal file
51
src/app/components/image-pack-view/ImagePackView.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
|
||||
import { PackAddress } from '../../plugins/custom-emoji';
|
||||
import { Page, PageHeader, PageContent } from '../page';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { RoomImagePack } from './RoomImagePack';
|
||||
import { UserImagePack } from './UserImagePack';
|
||||
|
||||
type ImagePackViewProps = {
|
||||
address: PackAddress | undefined;
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = address && mx.getRoom(address.roomId);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false} balance>
|
||||
<Box alignItems="Center" grow="Yes" gap="200">
|
||||
<Box alignItems="Inherit" grow="Yes" gap="200">
|
||||
<Chip
|
||||
size="500"
|
||||
radii="Pill"
|
||||
onClick={requestClose}
|
||||
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||
>
|
||||
<Text size="T300">Emojis & Stickers</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes">
|
||||
<Scroll hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
{room && address ? (
|
||||
<RoomImagePack room={room} stateKey={address.stateKey} />
|
||||
) : (
|
||||
<UserImagePack />
|
||||
)}
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
214
src/app/components/image-pack-view/ImageTile.tsx
Normal file
214
src/app/components/image-pack-view/ImageTile.tsx
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
|
||||
import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
|
||||
import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
|
||||
import { mxcUrlToHttp } from '../../utils/matrix';
|
||||
import * as css from './style.css';
|
||||
import { ImageUsage, imageUsageEqual, PackImageReader } from '../../plugins/custom-emoji';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
import { useObjectURL } from '../../hooks/useObjectURL';
|
||||
import { createUploadAtom, TUploadAtom } from '../../state/upload';
|
||||
import { replaceSpaceWithDash } from '../../utils/common';
|
||||
|
||||
type ImageTileProps = {
|
||||
defaultShortcode: string;
|
||||
useAuthentication: boolean;
|
||||
packUsage: ImageUsage[];
|
||||
image: PackImageReader;
|
||||
canEdit?: boolean;
|
||||
onEdit?: (defaultShortcode: string, image: PackImageReader) => void;
|
||||
deleted?: boolean;
|
||||
onDeleteToggle?: (defaultShortcode: string) => void;
|
||||
};
|
||||
export function ImageTile({
|
||||
defaultShortcode,
|
||||
image,
|
||||
packUsage,
|
||||
useAuthentication,
|
||||
canEdit,
|
||||
onEdit,
|
||||
onDeleteToggle,
|
||||
deleted,
|
||||
}: ImageTileProps) {
|
||||
const mx = useMatrixClient();
|
||||
const getUsageStr = useUsageStr();
|
||||
|
||||
return (
|
||||
<SettingTile
|
||||
before={
|
||||
<img
|
||||
className={css.ImagePackImage}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
|
||||
alt={image.shortcode}
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
title={
|
||||
deleted ? (
|
||||
<span className={css.DeleteImageShortcode}>{image.shortcode}</span>
|
||||
) : (
|
||||
image.shortcode
|
||||
)
|
||||
}
|
||||
description={
|
||||
<Box as="span" gap="200">
|
||||
{image.usage && getUsageStr(image.usage) !== getUsageStr(packUsage) && (
|
||||
<Badge as="span" variant="Secondary" size="400" radii="300" outlined>
|
||||
<Text as="span" size="L400">
|
||||
{getUsageStr(image.usage)}
|
||||
</Text>
|
||||
</Badge>
|
||||
)}
|
||||
{image.body}
|
||||
</Box>
|
||||
}
|
||||
after={
|
||||
canEdit ? (
|
||||
<Box shrink="No" alignItems="Center" gap="200">
|
||||
<Chip
|
||||
variant={deleted ? 'Critical' : 'Secondary'}
|
||||
fill="None"
|
||||
radii="Pill"
|
||||
onClick={() => onDeleteToggle?.(defaultShortcode)}
|
||||
>
|
||||
{deleted ? <Text size="B300">Undo</Text> : <Icon size="50" src={Icons.Delete} />}
|
||||
</Chip>
|
||||
{!deleted && (
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
onClick={() => onEdit?.(defaultShortcode, image)}
|
||||
>
|
||||
<Text size="B300">Edit</Text>
|
||||
</Chip>
|
||||
)}
|
||||
</Box>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type ImageTileUploadProps = {
|
||||
file: File;
|
||||
children: (uploadAtom: TUploadAtom) => ReactNode;
|
||||
};
|
||||
export function ImageTileUpload({ file, children }: ImageTileUploadProps) {
|
||||
const url = useObjectURL(file);
|
||||
const uploadAtom = useMemo(() => createUploadAtom(file), [file]);
|
||||
|
||||
return (
|
||||
<SettingTile before={<img className={css.ImagePackImage} src={url} alt={file.name} />}>
|
||||
{children(uploadAtom)}
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
|
||||
type ImageTileEditProps = {
|
||||
defaultShortcode: string;
|
||||
useAuthentication: boolean;
|
||||
packUsage: ImageUsage[];
|
||||
image: PackImageReader;
|
||||
onCancel: (shortcode: string) => void;
|
||||
onSave: (shortcode: string, image: PackImageReader) => void;
|
||||
};
|
||||
export function ImageTileEdit({
|
||||
defaultShortcode,
|
||||
useAuthentication,
|
||||
packUsage,
|
||||
image,
|
||||
onCancel,
|
||||
onSave,
|
||||
}: ImageTileEditProps) {
|
||||
const mx = useMatrixClient();
|
||||
const defaultUsage = image.usage ?? packUsage;
|
||||
|
||||
const [unsavedUsage, setUnsavedUsages] = useState(defaultUsage);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const shortcodeInput = target?.shortcodeInput as HTMLInputElement | undefined;
|
||||
const bodyInput = target?.bodyInput as HTMLTextAreaElement | undefined;
|
||||
if (!shortcodeInput || !bodyInput) return;
|
||||
|
||||
const shortcode = replaceSpaceWithDash(shortcodeInput.value.trim());
|
||||
const body = bodyInput.value.trim() || undefined;
|
||||
const usage = unsavedUsage;
|
||||
|
||||
if (!shortcode) return;
|
||||
|
||||
if (
|
||||
shortcode === image.shortcode &&
|
||||
body === image.body &&
|
||||
imageUsageEqual(usage, defaultUsage)
|
||||
) {
|
||||
onCancel(defaultShortcode);
|
||||
return;
|
||||
}
|
||||
|
||||
const imageReader = new PackImageReader(shortcode, image.url, {
|
||||
info: image.info,
|
||||
body,
|
||||
usage: imageUsageEqual(usage, packUsage) ? undefined : usage,
|
||||
});
|
||||
|
||||
onSave(defaultShortcode, imageReader);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingTile
|
||||
before={
|
||||
<img
|
||||
className={css.ImagePackImage}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
|
||||
alt={image.shortcode}
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="200">
|
||||
<Box direction="Column" className={css.ImagePackImageInputs}>
|
||||
<Input
|
||||
before={<Text size="L400">Shortcode:</Text>}
|
||||
defaultValue={image.shortcode}
|
||||
name="shortcodeInput"
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
radii="0"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<Input
|
||||
before={<Text size="L400">Body:</Text>}
|
||||
defaultValue={image.body}
|
||||
name="bodyInput"
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
radii="0"
|
||||
/>
|
||||
</Box>
|
||||
<Box gap="200">
|
||||
<Box shrink="No" direction="Column">
|
||||
<UsageSwitcher usage={unsavedUsage} onChange={setUnsavedUsages} canEdit />
|
||||
</Box>
|
||||
<Box grow="Yes" />
|
||||
<Button type="submit" variant="Success" size="300" radii="300">
|
||||
<Text size="B300">Save</Text>
|
||||
</Button>
|
||||
<Button
|
||||
type="reset"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
onClick={() => onCancel(defaultShortcode)}
|
||||
>
|
||||
<Text size="B300">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
232
src/app/components/image-pack-view/PackMeta.tsx
Normal file
232
src/app/components/image-pack-view/PackMeta.tsx
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
Button,
|
||||
Icon,
|
||||
Icons,
|
||||
Input,
|
||||
TextArea,
|
||||
Chip,
|
||||
} from 'folds';
|
||||
import Linkify from 'linkify-react';
|
||||
import { mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { nameInitials } from '../../utils/common';
|
||||
import { BreakWord } from '../../styles/Text.css';
|
||||
import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
|
||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||
import { useFilePicker } from '../../hooks/useFilePicker';
|
||||
import { useObjectURL } from '../../hooks/useObjectURL';
|
||||
import { createUploadAtom, UploadSuccess } from '../../state/upload';
|
||||
import { CompactUploadCardRenderer } from '../upload-card';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { PackMetaReader } from '../../plugins/custom-emoji';
|
||||
|
||||
type ImagePackAvatarProps = {
|
||||
url?: string;
|
||||
name?: string;
|
||||
};
|
||||
function ImagePackAvatar({ url, name }: ImagePackAvatarProps) {
|
||||
return (
|
||||
<Avatar size="500" className={ContainerColor({ variant: 'Secondary' })}>
|
||||
{url ? (
|
||||
<AvatarImage src={url} alt={name ?? 'Unknown'} />
|
||||
) : (
|
||||
<AvatarFallback>
|
||||
<Text size="H2">{nameInitials(name ?? 'Unknown')}</Text>
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
);
|
||||
}
|
||||
|
||||
type ImagePackProfileProps = {
|
||||
meta: PackMetaReader;
|
||||
canEdit?: boolean;
|
||||
onEdit?: () => void;
|
||||
};
|
||||
export function ImagePackProfile({ meta, canEdit, onEdit }: ImagePackProfileProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const avatarUrl = meta.avatar
|
||||
? mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Box gap="400">
|
||||
<Box grow="Yes" direction="Column" gap="300">
|
||||
<Box direction="Column" gap="100">
|
||||
<Text className={BreakWord} size="H5">
|
||||
{meta.name ?? 'Unknown'}
|
||||
</Text>
|
||||
{meta.attribution && (
|
||||
<Text className={BreakWord} size="T200">
|
||||
<Linkify options={LINKIFY_OPTS}>{meta.attribution}</Linkify>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
{canEdit && (
|
||||
<Box gap="200">
|
||||
<Chip
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
before={<Icon size="50" src={Icons.Pencil} />}
|
||||
onClick={onEdit}
|
||||
outlined
|
||||
>
|
||||
<Text size="B300">Edit</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<ImagePackAvatar url={avatarUrl} name={meta.name} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type ImagePackProfileEditProps = {
|
||||
meta: PackMetaReader;
|
||||
onCancel: () => void;
|
||||
onSave: (meta: PackMetaReader) => void;
|
||||
};
|
||||
export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfileEditProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const [avatar, setAvatar] = useState(meta.avatar);
|
||||
|
||||
const avatarUrl = avatar ? mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined : undefined;
|
||||
|
||||
const [imageFile, setImageFile] = useState<File>();
|
||||
const avatarFileUrl = useObjectURL(imageFile);
|
||||
const uploadingAvatar = avatarFileUrl ? avatar === meta.avatar : false;
|
||||
const uploadAtom = useMemo(() => {
|
||||
if (imageFile) return createUploadAtom(imageFile);
|
||||
return undefined;
|
||||
}, [imageFile]);
|
||||
|
||||
const pickFile = useFilePicker(setImageFile, false);
|
||||
|
||||
const handleRemoveUpload = useCallback(() => {
|
||||
setImageFile(undefined);
|
||||
setAvatar(meta.avatar);
|
||||
}, [meta.avatar]);
|
||||
|
||||
const handleUploaded = useCallback((upload: UploadSuccess) => {
|
||||
setAvatar(upload.mxc);
|
||||
}, []);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (uploadingAvatar) return;
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const nameInput = target?.nameInput as HTMLInputElement | undefined;
|
||||
const attributionTextArea = target?.attributionTextArea as HTMLTextAreaElement | undefined;
|
||||
if (!nameInput || !attributionTextArea) return;
|
||||
|
||||
const name = nameInput.value.trim();
|
||||
const attribution = attributionTextArea.value.trim();
|
||||
if (!name) return;
|
||||
|
||||
const metaReader = new PackMetaReader({
|
||||
avatar_url: avatar,
|
||||
display_name: name,
|
||||
attribution,
|
||||
});
|
||||
onSave(metaReader);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
|
||||
<Box gap="400">
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Text size="L400">Pack Avatar</Text>
|
||||
{uploadAtom ? (
|
||||
<Box gap="200" direction="Column">
|
||||
<CompactUploadCardRenderer
|
||||
uploadAtom={uploadAtom}
|
||||
onRemove={handleRemoveUpload}
|
||||
onComplete={handleUploaded}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box gap="200">
|
||||
<Button
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
onClick={() => pickFile('image/*')}
|
||||
>
|
||||
<Text size="B300">Upload</Text>
|
||||
</Button>
|
||||
{!avatar && meta.avatar && (
|
||||
<Button
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Success"
|
||||
fill="None"
|
||||
radii="300"
|
||||
onClick={() => setAvatar(meta.avatar)}
|
||||
>
|
||||
<Text size="B300">Reset</Text>
|
||||
</Button>
|
||||
)}
|
||||
{avatar && (
|
||||
<Button
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Critical"
|
||||
fill="None"
|
||||
radii="300"
|
||||
onClick={() => setAvatar(undefined)}
|
||||
>
|
||||
<Text size="B300">Remove</Text>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<ImagePackAvatar url={avatarFileUrl ?? avatarUrl} name={meta.name} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box direction="Inherit" gap="100">
|
||||
<Text size="L400">Name</Text>
|
||||
<Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
|
||||
</Box>
|
||||
<Box direction="Inherit" gap="100">
|
||||
<Text size="L400">Attribution</Text>
|
||||
<TextArea
|
||||
name="attributionTextArea"
|
||||
defaultValue={meta.attribution}
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
/>
|
||||
</Box>
|
||||
<Box gap="300">
|
||||
<Button type="submit" variant="Success" size="300" radii="300" disabled={uploadingAvatar}>
|
||||
<Text size="B300">Save</Text>
|
||||
</Button>
|
||||
<Button
|
||||
type="reset"
|
||||
onClick={onCancel}
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
>
|
||||
<Text size="B300">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
55
src/app/components/image-pack-view/RoomImagePack.tsx
Normal file
55
src/app/components/image-pack-view/RoomImagePack.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { ImagePackContent } from './ImagePackContent';
|
||||
import { ImagePack, PackContent } from '../../plugins/custom-emoji';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { useRoomImagePack } from '../../hooks/useImagePacks';
|
||||
import { randomStr } from '../../utils/common';
|
||||
|
||||
type RoomImagePackProps = {
|
||||
room: Room;
|
||||
stateKey: string;
|
||||
};
|
||||
|
||||
export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
|
||||
const mx = useMatrixClient();
|
||||
const userId = mx.getUserId()!;
|
||||
const powerLevels = usePowerLevels(room);
|
||||
|
||||
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
|
||||
const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
|
||||
|
||||
const fallbackPack = useMemo(() => {
|
||||
const fakePackId = randomStr(4);
|
||||
return new ImagePack(
|
||||
fakePackId,
|
||||
{},
|
||||
{
|
||||
roomId: room.roomId,
|
||||
stateKey,
|
||||
}
|
||||
);
|
||||
}, [room.roomId, stateKey]);
|
||||
const imagePack = useRoomImagePack(room, stateKey) ?? fallbackPack;
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (packContent: PackContent) => {
|
||||
const { address } = imagePack;
|
||||
if (!address) return;
|
||||
|
||||
await mx.sendStateEvent(
|
||||
address.roomId,
|
||||
StateEvent.PoniesRoomEmotes,
|
||||
packContent,
|
||||
address.stateKey
|
||||
);
|
||||
},
|
||||
[mx, imagePack]
|
||||
);
|
||||
|
||||
return (
|
||||
<ImagePackContent imagePack={imagePack} canEdit={canEditImagePack} onUpdate={handleUpdate} />
|
||||
);
|
||||
}
|
||||
116
src/app/components/image-pack-view/UsageSwitcher.tsx
Normal file
116
src/app/components/image-pack-view/UsageSwitcher.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import React, { MouseEventHandler, useMemo, useState } from 'react';
|
||||
import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { ImageUsage } from '../../plugins/custom-emoji';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
|
||||
export const useUsageStr = (): ((usage: ImageUsage[]) => string) => {
|
||||
const getUsageStr = (usage: ImageUsage[]): string => {
|
||||
const sticker = usage.includes(ImageUsage.Sticker);
|
||||
const emoticon = usage.includes(ImageUsage.Emoticon);
|
||||
|
||||
if (sticker && emoticon) return 'Both';
|
||||
if (sticker) return 'Sticker';
|
||||
if (emoticon) return 'Emoji';
|
||||
return 'Both';
|
||||
};
|
||||
return getUsageStr;
|
||||
};
|
||||
|
||||
type UsageSelectorProps = {
|
||||
selected: ImageUsage[];
|
||||
onChange: (usage: ImageUsage[]) => void;
|
||||
};
|
||||
export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
|
||||
const getUsageStr = useUsageStr();
|
||||
|
||||
const selectedUsageStr = getUsageStr(selected);
|
||||
const isSelected = (usage: ImageUsage[]) => getUsageStr(usage) === selectedUsageStr;
|
||||
|
||||
const allUsages: ImageUsage[][] = useMemo(
|
||||
() => [[ImageUsage.Emoticon], [ImageUsage.Sticker], [ImageUsage.Sticker, ImageUsage.Emoticon]],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
{allUsages.map((usage) => (
|
||||
<MenuItem
|
||||
key={getUsageStr(usage)}
|
||||
size="300"
|
||||
variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
|
||||
aria-selected={isSelected(usage)}
|
||||
radii="300"
|
||||
onClick={() => onChange(usage)}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T300">{getUsageStr(usage)}</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type UsageSwitcherProps = {
|
||||
usage: ImageUsage[];
|
||||
canEdit?: boolean;
|
||||
onChange: (usage: ImageUsage[]) => void;
|
||||
};
|
||||
export function UsageSwitcher({ usage, onChange, canEdit }: UsageSwitcherProps) {
|
||||
const getUsageStr = useUsageStr();
|
||||
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleSelectUsage: MouseEventHandler<HTMLButtonElement> = (event) => {
|
||||
setMenuCords(event.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
type="button"
|
||||
outlined
|
||||
aria-disabled={!canEdit}
|
||||
after={canEdit && <Icon src={Icons.ChevronBottom} size="100" />}
|
||||
onClick={canEdit ? handleSelectUsage : undefined}
|
||||
>
|
||||
<Text size="B300">{getUsageStr(usage)}</Text>
|
||||
</Button>
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<UsageSelector
|
||||
selected={usage}
|
||||
onChange={(usg) => {
|
||||
setMenuCords(undefined);
|
||||
onChange(usg);
|
||||
}}
|
||||
/>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app/components/image-pack-view/UserImagePack.tsx
Normal file
22
src/app/components/image-pack-view/UserImagePack.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { useCallback, useMemo } from 'react';
|
||||
import { ImagePackContent } from './ImagePackContent';
|
||||
import { ImagePack, PackContent } from '../../plugins/custom-emoji';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { AccountDataEvent } from '../../../types/matrix/accountData';
|
||||
import { useUserImagePack } from '../../hooks/useImagePacks';
|
||||
|
||||
export function UserImagePack() {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const defaultPack = useMemo(() => new ImagePack(mx.getUserId() ?? '', {}, undefined), [mx]);
|
||||
const imagePack = useUserImagePack();
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (packContent: PackContent) => {
|
||||
await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, packContent);
|
||||
},
|
||||
[mx]
|
||||
);
|
||||
|
||||
return <ImagePackContent imagePack={imagePack ?? defaultPack} canEdit onUpdate={handleUpdate} />;
|
||||
}
|
||||
1
src/app/components/image-pack-view/index.ts
Normal file
1
src/app/components/image-pack-view/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './ImagePackView';
|
||||
37
src/app/components/image-pack-view/style.css.ts
Normal file
37
src/app/components/image-pack-view/style.css.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { color, config, DefaultReset, toRem } from 'folds';
|
||||
|
||||
export const ImagePackImage = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: toRem(36),
|
||||
height: toRem(36),
|
||||
objectFit: 'contain',
|
||||
},
|
||||
]);
|
||||
|
||||
export const DeleteImageShortcode = style([
|
||||
DefaultReset,
|
||||
{
|
||||
color: color.Critical.Main,
|
||||
textDecoration: 'line-through',
|
||||
},
|
||||
]);
|
||||
|
||||
export const ImagePackImageInputs = style([
|
||||
DefaultReset,
|
||||
{
|
||||
overflow: 'hidden',
|
||||
borderRadius: config.radii.R300,
|
||||
},
|
||||
]);
|
||||
|
||||
export const UnsavedMenu = style({
|
||||
position: 'sticky',
|
||||
padding: config.space.S200,
|
||||
paddingLeft: config.space.S400,
|
||||
top: config.space.S400,
|
||||
left: config.space.S400,
|
||||
right: 0,
|
||||
zIndex: 1,
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue