From 458738f06a2c6c702039f2d4421213ad2295c3af Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Sun, 31 Jul 2022 10:07:25 +0530 Subject: [PATCH] Change pack avatar, name & attribution --- src/app/molecules/image-pack/ImagePack.jsx | 21 ++++-- .../molecules/image-pack/ImagePackProfile.jsx | 67 ++++++++++++++++--- .../image-pack/ImagePackProfile.scss | 12 +++- .../molecules/image-pack/ImagePackUpload.jsx | 1 + .../molecules/image-upload/ImageUpload.jsx | 14 +++- src/app/organisms/emoji-board/custom-emoji.js | 10 +-- 6 files changed, 103 insertions(+), 22 deletions(-) diff --git a/src/app/molecules/image-pack/ImagePack.jsx b/src/app/molecules/image-pack/ImagePack.jsx index 32253497..bf132759 100644 --- a/src/app/molecules/image-pack/ImagePack.jsx +++ b/src/app/molecules/image-pack/ImagePack.jsx @@ -107,7 +107,17 @@ function useImagePackHandles(pack, sendPackContent) { return newKey; }; - const handleEditProfile = () => false; + const handleAvatarChange = (url) => { + pack.setAvatarUrl(url); + sendPackContent(pack.getContent()); + forceUpdate(); + }; + const handleEditProfile = (name, attribution) => { + pack.setDisplayName(name); + pack.setAttribution(attribution); + sendPackContent(pack.getContent()); + forceUpdate(); + }; const handleUsageChange = (newUsage) => { const usage = []; if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon'); @@ -163,6 +173,7 @@ function useImagePackHandles(pack, sendPackContent) { }; return { + handleAvatarChange, handleEditProfile, handleUsageChange, handleRenameItem, @@ -180,6 +191,7 @@ function ImagePack({ roomId, stateKey }) { const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey); const { + handleAvatarChange, handleEditProfile, handleUsageChange, handleRenameItem, @@ -196,12 +208,13 @@ function ImagePack({ roomId, stateKey }) { return (
{ canChange && ( diff --git a/src/app/molecules/image-pack/ImagePackProfile.jsx b/src/app/molecules/image-pack/ImagePackProfile.jsx index fd6dd568..b639936d 100644 --- a/src/app/molecules/image-pack/ImagePackProfile.jsx +++ b/src/app/molecules/image-pack/ImagePackProfile.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import './ImagePackProfile.scss'; @@ -9,14 +9,30 @@ import Text from '../../atoms/text/Text'; import Avatar from '../../atoms/avatar/Avatar'; import Button from '../../atoms/button/Button'; import IconButton from '../../atoms/button/IconButton'; +import Input from '../../atoms/input/Input'; +import ImageUpload from '../image-upload/ImageUpload'; import ImagePackUsageSelector from './ImagePackUsageSelector'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import PencilIC from '../../../../public/res/ic/outlined/pencil.svg'; function ImagePackProfile({ - avatarUrl, displayName, attribution, usage, onUsageChange, onEdit, + avatarUrl, displayName, attribution, usage, + onUsageChange, onAvatarChange, onEditProfile, }) { + const [isEdit, setIsEdit] = useState(false); + + const handleSubmit = (e) => { + e.preventDefault(); + + const { nameInput, attributionInput } = e.target; + const name = nameInput.value.trim() || undefined; + const att = attributionInput.value.trim() || undefined; + + onEditProfile(name, att); + setIsEdit(false); + }; + const handleUsageSelect = (event) => { openReusableContextMenu( 'bottom', @@ -35,13 +51,42 @@ function ImagePackProfile({ return (
- {avatarUrl && } + { + onAvatarChange + ? ( + onAvatarChange(undefined)} + /> + ) + : + }
-
- {displayName} - {onEdit && } -
- {attribution && {attribution}} + { + isEdit + ? ( +
+ + +
+ + +
+
+ ) : ( + <> +
+ {displayName} + {onEditProfile && setIsEdit(true)} src={PencilIC} tooltip="Edit" />} +
+ {attribution && {attribution}} + + ) + }
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; }