Pack usage
@@ -64,7 +109,8 @@ ImagePackProfile.defaultProps = {
avatarUrl: null,
attribution: null,
onUsageChange: null,
- onEdit: null,
+ onAvatarChange: null,
+ onEditProfile: null,
};
ImagePackProfile.propTypes = {
avatarUrl: PropTypes.string,
@@ -72,7 +118,8 @@ ImagePackProfile.propTypes = {
attribution: PropTypes.string,
usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
onUsageChange: PropTypes.func,
- onEdit: PropTypes.func,
+ onAvatarChange: PropTypes.func,
+ onEditProfile: PropTypes.func,
};
export default ImagePackProfile;
diff --git a/src/app/molecules/image-pack/ImagePackProfile.scss b/src/app/molecules/image-pack/ImagePackProfile.scss
index f61a48ab..d21212fb 100644
--- a/src/app/molecules/image-pack/ImagePackProfile.scss
+++ b/src/app/molecules/image-pack/ImagePackProfile.scss
@@ -9,7 +9,7 @@
&__content {
@extend .cp-fx__item-one;
- & div:first-child {
+ & > div:first-child {
display: flex;
align-items: center;
gap: var(--sp-extra-tight);
@@ -18,6 +18,16 @@
padding: var(--sp-ultra-tight);
}
}
+ & > form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--sp-extra-tight);
+ & > div:last-child {
+ margin: var(--sp-extra-tight) 0;
+ display: flex;
+ gap: var(--sp-tight);
+ }
+ }
}
&__usage {
& > *:first-child {
diff --git a/src/app/molecules/image-pack/ImagePackUpload.jsx b/src/app/molecules/image-pack/ImagePackUpload.jsx
index df048f1f..9358856d 100644
--- a/src/app/molecules/image-pack/ImagePackUpload.jsx
+++ b/src/app/molecules/image-pack/ImagePackUpload.jsx
@@ -41,6 +41,7 @@ function ImagePackUpload({ onUpload }) {
const img = evt.target.files[0];
if (!img) return;
setImgFile(img);
+ shortcodeRef.current.focus();
};
const handleRemove = () => {
setImgFile(null);
diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
index 69564aa5..137d23bf 100644
--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -7,9 +7,13 @@ import initMatrix from '../../../client/initMatrix';
import Text from '../../atoms/text/Text';
import Avatar from '../../atoms/avatar/Avatar';
import Spinner from '../../atoms/spinner/Spinner';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
function ImageUpload({
text, bgColor, imageSrc, onUpload, onRequestRemove,
+ size,
}) {
const [uploadPromise, setUploadPromise] = useState(null);
const uploadImageRef = useRef(null);
@@ -50,10 +54,14 @@ function ImageUpload({
imageSrc={imageSrc}
text={text}
bgColor={bgColor}
- size="large"
+ size={size}
/>
- {uploadPromise === null && Upload}
+ {uploadPromise === null && (
+ size === 'large'
+ ? Upload
+ :
+ )}
{uploadPromise !== null && }
@@ -75,6 +83,7 @@ ImageUpload.defaultProps = {
text: null,
bgColor: 'transparent',
imageSrc: null,
+ size: 'large',
};
ImageUpload.propTypes = {
@@ -83,6 +92,7 @@ ImageUpload.propTypes = {
imageSrc: PropTypes.string,
onUpload: PropTypes.func.isRequired,
onRequestRemove: PropTypes.func.isRequired,
+ size: PropTypes.oneOf(['large', 'normal']),
};
export default ImageUpload;
diff --git a/src/app/organisms/emoji-board/custom-emoji.js b/src/app/organisms/emoji-board/custom-emoji.js
index 026e08b6..5a20a70d 100644
--- a/src/app/organisms/emoji-board/custom-emoji.js
+++ b/src/app/organisms/emoji-board/custom-emoji.js
@@ -15,18 +15,18 @@ class ImagePack {
this.id = eventId;
this.content = JSON.parse(JSON.stringify(content));
- this.displayName = room?.name ?? undefined;
- this.avatarUrl = room?.getMxcAvatarUrl() ?? undefined;
-
this.applyPack(content);
this.applyImages(content);
+
+ this.displayName ??= room?.name;
+ this.avatarUrl ??= room?.getMxcAvatarUrl();
}
applyPack(content) {
const pack = content.pack ?? {};
- this.displayName = pack.display_name ?? this.displayName;
- this.avatarUrl = pack.avatar_url ?? this.avatarUrl;
+ this.displayName = pack.display_name;
+ this.avatarUrl = pack.avatar_url;
this.usage = pack.usage ?? ['emoticon', 'sticker'];
this.attribution = pack.attribution;
}