From dbbb6075f348a2abe7afb63d799289cc0d42a329 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Wed, 27 Jul 2022 10:09:46 +0530 Subject: [PATCH] WIP --- src/app/molecules/image-pack/ImagePack.jsx | 46 ++++++++++++++----- src/app/molecules/image-pack/ImagePack.scss | 9 +++- .../molecules/image-pack/ImagePackItem.jsx | 43 +++++++++++++++-- .../molecules/image-pack/ImagePackItem.scss | 25 +++++++++- .../molecules/image-pack/ImagePackProfile.jsx | 41 +++++++++++++---- .../image-pack/ImagePackProfile.scss | 7 ++- .../image-pack/ImagePackUsageSelector.jsx | 25 ++++++++-- src/app/molecules/room-emojis/RoomEmojis.jsx | 34 ++++++++++++++ src/app/organisms/room/RoomSettings.jsx | 25 +--------- .../space-settings/SpaceSettings.jsx | 8 ++++ .../space-settings/SpaceSettings.scss | 3 +- 11 files changed, 211 insertions(+), 55 deletions(-) create mode 100644 src/app/molecules/room-emojis/RoomEmojis.jsx diff --git a/src/app/molecules/image-pack/ImagePack.jsx b/src/app/molecules/image-pack/ImagePack.jsx index cd1494de..8cd45a5d 100644 --- a/src/app/molecules/image-pack/ImagePack.jsx +++ b/src/app/molecules/image-pack/ImagePack.jsx @@ -6,9 +6,9 @@ import initMatrix from '../../../client/initMatrix'; import Button from '../../atoms/button/Button'; import Text from '../../atoms/text/Text'; -import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; import ImagePackProfile from './ImagePackProfile'; import ImagePackItem from './ImagePackItem'; +import Checkbox from '../../atoms/button/Checkbox'; import { ImagePack as ImagePackBuilder, getUserImagePack } from '../../organisms/emoji-board/custom-emoji'; function getUsage(usage) { @@ -19,6 +19,17 @@ function getUsage(usage) { return 'both'; } +function isGlobalPack(roomId, stateKey) { + const mx = initMatrix.matrixClient; + const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent(); + if (typeof globalContent !== 'object') return false; + + const { rooms } = globalContent; + if (typeof rooms !== 'object') return false; + + return rooms[roomId]?.[stateKey] !== undefined; +} + function ImagePack({ roomId, stateKey }) { const mx = initMatrix.matrixClient; const room = mx.getRoom(roomId); @@ -33,32 +44,34 @@ function ImagePack({ roomId, stateKey }) { return (
- {pack.displayName} false} + onUsageChange={(newUsage) => console.log(newUsage)} onEdit={() => false} /> -
- Image - Shortcode - Usage -
+
+ Image + Shortcode + Usage +
{([...pack.images].slice(0, viewMore ? pack.images.size : 2)).map(([shortcode, image]) => ( false} + onDelete={() => false} + onRename={() => false} /> ))}
-
- {pack.images.size > 2 && ( + {pack.images.size > 2 && ( +
- )} -
+
+ )} + { roomId && ( +
+ +
+ Use globally + Add this pack to your account to use in all rooms. +
+
+ )}
); } diff --git a/src/app/molecules/image-pack/ImagePack.scss b/src/app/molecules/image-pack/ImagePack.scss index 47bcf84f..b4becfbf 100644 --- a/src/app/molecules/image-pack/ImagePack.scss +++ b/src/app/molecules/image-pack/ImagePack.scss @@ -6,7 +6,6 @@ } &__header { - margin-top: var(--sp-normal); padding: var(--sp-extra-tight) var(--sp-normal); display: flex; align-items: center; @@ -19,5 +18,13 @@ &__footer { padding: var(--sp-normal); + display: flex; + } + &__global { + padding: var(--sp-normal); + padding-top: var(--sp-tight); + display: flex; + align-items: center; + gap: var(--sp-normal); } } \ No newline at end of file diff --git a/src/app/molecules/image-pack/ImagePackItem.jsx b/src/app/molecules/image-pack/ImagePackItem.jsx index b5b2cbfc..d0f531b8 100644 --- a/src/app/molecules/image-pack/ImagePackItem.jsx +++ b/src/app/molecules/image-pack/ImagePackItem.jsx @@ -2,14 +2,39 @@ import React from 'react'; import PropTypes from 'prop-types'; import './ImagePackItem.scss'; +import { openReusableContextMenu } from '../../../client/action/navigation'; +import { getEventCords } from '../../../util/common'; + import Avatar from '../../atoms/avatar/Avatar'; import Text from '../../atoms/text/Text'; import Button from '../../atoms/button/Button'; import RawIcon from '../../atoms/system-icons/RawIcon'; +import IconButton from '../../atoms/button/IconButton'; +import ImagePackUsageSelector from './ImagePackUsageSelector'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; +import PencilIC from '../../../../public/res/ic/outlined/pencil.svg'; +import BinIC from '../../../../public/res/ic/outlined/bin.svg'; + +function ImagePackItem({ + url, shortcode, usage, onUsageChange, onDelete, onRename, +}) { + const handleUsageSelect = (event) => { + openReusableContextMenu( + 'bottom', + getEventCords(event, '.btn-surface'), + (closeMenu) => ( + { + onUsageChange(newUsage); + closeMenu(); + }} + /> + ), + ); + }; -function ImagePackItem({ url, shortcode, usage }) { return (
@@ -17,8 +42,12 @@ function ImagePackItem({ url, shortcode, usage }) { {shortcode}
-
@@ -38,7 +63,7 @@ function ImagePackProfile({ ImagePackProfile.defaultProps = { avatarUrl: null, attribution: null, - onUsage: null, + onUsageChange: null, onEdit: null, }; ImagePackProfile.propTypes = { @@ -46,7 +71,7 @@ ImagePackProfile.propTypes = { displayName: PropTypes.string.isRequired, attribution: PropTypes.string, usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired, - onUsage: PropTypes.func, + onUsageChange: PropTypes.func, onEdit: PropTypes.func, }; diff --git a/src/app/molecules/image-pack/ImagePackProfile.scss b/src/app/molecules/image-pack/ImagePackProfile.scss index 819a46a7..f61a48ab 100644 --- a/src/app/molecules/image-pack/ImagePackProfile.scss +++ b/src/app/molecules/image-pack/ImagePackProfile.scss @@ -3,15 +3,20 @@ .image-pack-profile { padding: var(--sp-normal); display: flex; + align-items: flex-start; + gap: var(--sp-tight); &__content { - padding: 0 var(--sp-tight); @extend .cp-fx__item-one; & div:first-child { display: flex; align-items: center; gap: var(--sp-extra-tight); + + & .ic-btn { + padding: var(--sp-ultra-tight); + } } } &__usage { diff --git a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx b/src/app/molecules/image-pack/ImagePackUsageSelector.jsx index 71efc521..279b3816 100644 --- a/src/app/molecules/image-pack/ImagePackUsageSelector.jsx +++ b/src/app/molecules/image-pack/ImagePackUsageSelector.jsx @@ -2,14 +2,33 @@ import React from 'react'; import PropTypes from 'prop-types'; import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu'; +import CheckIC from '../../../../public/res/ic/outlined/check.svg'; function ImagePackUsageSelector({ usage, onSelect }) { return (
Usage - onSelect('emoticon')}>Emoji - onSelect('sticker')}>Sticker - onSelect('both')}>Both + onSelect('emoticon')} + > + Emoji + + onSelect('sticker')} + > + Sticker + + onSelect('both')} + > + Both +
); } diff --git a/src/app/molecules/room-emojis/RoomEmojis.jsx b/src/app/molecules/room-emojis/RoomEmojis.jsx new file mode 100644 index 00000000..5e2d8651 --- /dev/null +++ b/src/app/molecules/room-emojis/RoomEmojis.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import initMatrix from '../../../client/initMatrix'; +import ImagePack from '../image-pack/ImagePack'; + +function RoomEmojis({ roomId }) { + const mx = initMatrix.matrixClient; + const room = mx.getRoom(roomId); + + const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes'); + const unUsablePacks = []; + const usablePacks = packEvents.filter((mEvent) => { + if (typeof mEvent.getContent()?.images !== 'object') { + unUsablePacks.push(mEvent); + return false; + } + return true; + }); + + return usablePacks.map((mEvent) => ( + + )); +} + +RoomEmojis.propTypes = { + roomId: PropTypes.string.isRequired, +}; + +export default RoomEmojis; diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx index 1d6c478e..63277347 100644 --- a/src/app/organisms/room/RoomSettings.jsx +++ b/src/app/organisms/room/RoomSettings.jsx @@ -25,7 +25,7 @@ import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomH import RoomEncryption from '../../molecules/room-encryption/RoomEncryption'; import RoomPermissions from '../../molecules/room-permissions/RoomPermissions'; import RoomMembers from '../../molecules/room-members/RoomMembers'; -import ImagePack from '../../molecules/image-pack/ImagePack'; +import RoomEmojis from '../../molecules/room-emojis/RoomEmojis'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; @@ -128,29 +128,6 @@ GeneralSettings.propTypes = { roomId: PropTypes.string.isRequired, }; -function RoomEmojis({ roomId }) { - const mx = initMatrix.matrixClient; - const room = mx.getRoom(roomId); - - const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes'); - const unUsablePacks = []; - const usablePacks = packEvents.filter((mEvent) => { - if (typeof mEvent.getContent()?.images !== 'object') { - unUsablePacks.push(mEvent); - return false; - } - return true; - }); - - return usablePacks.map((mEvent) => ( - - )); -} - function SecuritySettings({ roomId }) { return ( <> diff --git a/src/app/organisms/space-settings/SpaceSettings.jsx b/src/app/organisms/space-settings/SpaceSettings.jsx index 43735993..2c9d6d46 100644 --- a/src/app/organisms/space-settings/SpaceSettings.jsx +++ b/src/app/organisms/space-settings/SpaceSettings.jsx @@ -25,6 +25,7 @@ import RoomVisibility from '../../molecules/room-visibility/RoomVisibility'; import RoomAliases from '../../molecules/room-aliases/RoomAliases'; import RoomPermissions from '../../molecules/room-permissions/RoomPermissions'; import RoomMembers from '../../molecules/room-members/RoomMembers'; +import RoomEmojis from '../../molecules/room-emojis/RoomEmojis'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; @@ -35,6 +36,7 @@ import PinIC from '../../../../public/res/ic/outlined/pin.svg'; import PinFilledIC from '../../../../public/res/ic/filled/pin.svg'; import CategoryIC from '../../../../public/res/ic/outlined/category.svg'; import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg'; +import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg'; import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog'; import { useForceUpdate } from '../../hooks/useForceUpdate'; @@ -42,6 +44,7 @@ import { useForceUpdate } from '../../hooks/useForceUpdate'; const tabText = { GENERAL: 'General', MEMBERS: 'Members', + EMOJIS: 'Emojis', PERMISSIONS: 'Permissions', }; @@ -53,6 +56,10 @@ const tabItems = [{ iconSrc: UserIC, text: tabText.MEMBERS, disabled: false, +}, { + iconSrc: EmojiIC, + text: tabText.EMOJIS, + disabled: false, }, { iconSrc: ShieldUserIC, text: tabText.PERMISSIONS, @@ -178,6 +185,7 @@ function SpaceSettings() {
{selectedTab.text === tabText.GENERAL && } {selectedTab.text === tabText.MEMBERS && } + {selectedTab.text === tabText.EMOJIS && } {selectedTab.text === tabText.PERMISSIONS && }
diff --git a/src/app/organisms/space-settings/SpaceSettings.scss b/src/app/organisms/space-settings/SpaceSettings.scss index 987f23b8..a7e83409 100644 --- a/src/app/organisms/space-settings/SpaceSettings.scss +++ b/src/app/organisms/space-settings/SpaceSettings.scss @@ -32,6 +32,7 @@ } .space-settings .room-permissions__card, -.space-settings .room-members { +.space-settings .room-members, +.space-settings .image-pack { @extend .space-settings__card; } \ No newline at end of file