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}
-
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