Page MenuHomePhabricator
Files F2896468

D8840.diff
No OneTemporary
Actions

D8840.diff
View Options

diff --git a/web/avatars/edit-user-avatar-menu.css b/web/avatars/edit-avatar-menu.css
rename from web/avatars/edit-user-avatar-menu.css
rename to web/avatars/edit-avatar-menu.css
diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js
new file mode 100644
--- /dev/null
+++ b/web/avatars/edit-thread-avatar-menu.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
+
+import css from './edit-avatar-menu.css';
+import MenuItem from '../components/menu-item.react.js';
+import Menu from '../components/menu.react.js';
+
+const editIcon = (
+ <div className={css.editAvatarBadge}>
+ <SWMansionIcon icon="edit-2" size={20} />
+ </div>
+);
+
+type Props = {
+ +threadInfo: RawThreadInfo | ThreadInfo,
+};
+function EditThreadAvatarMenu(props: Props): React.Node {
+ const { threadInfo } = props;
+
+ const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
+ invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
+
+ const { baseSetThreadAvatar } = editThreadAvatarContext;
+
+ const removeThreadAvatar = React.useCallback(
+ () => baseSetThreadAvatar(threadInfo.id, { type: 'remove' }),
+ [baseSetThreadAvatar, threadInfo.id],
+ );
+
+ const removeMenuItem = React.useMemo(
+ () => (
+ <MenuItem
+ key="remove"
+ text="Reset to default"
+ icon="trash-2"
+ onClick={removeThreadAvatar}
+ />
+ ),
+ [removeThreadAvatar],
+ );
+
+ const menuItems = React.useMemo(() => [removeMenuItem], [removeMenuItem]);
+
+ return (
+ <div>
+ <Menu icon={editIcon}>{menuItems}</Menu>
+ </div>
+ );
+}
+
+export default EditThreadAvatarMenu;
diff --git a/web/avatars/edit-thread-avatar.react.js b/web/avatars/edit-thread-avatar.react.js
--- a/web/avatars/edit-thread-avatar.react.js
+++ b/web/avatars/edit-thread-avatar.react.js
@@ -4,8 +4,11 @@
import * as React from 'react';
import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+import { threadHasPermission } from 'lib/shared/thread-utils.js';
+import { threadPermissions } from 'lib/types/thread-permission-types.js';
import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
+import EditThreadAvatarMenu from './edit-thread-avatar-menu.react.js';
import css from './edit-thread-avatar.css';
import ThreadAvatar from './thread-avatar.react.js';
@@ -20,6 +23,15 @@
const { threadAvatarSaveInProgress } = editThreadAvatarContext;
const { threadInfo } = props;
+ const canEditThreadAvatar = threadHasPermission(
+ threadInfo,
+ threadPermissions.EDIT_THREAD_AVATAR,
+ );
+
+ let editThreadAvatarMenu;
+ if (canEditThreadAvatar && !threadAvatarSaveInProgress) {
+ editThreadAvatarMenu = <EditThreadAvatarMenu threadInfo={threadInfo} />;
+ }
return (
<div className={css.editThreadAvatarContainer}>
@@ -28,6 +40,7 @@
size="profile"
showSpinner={threadAvatarSaveInProgress}
/>
+ {editThreadAvatarMenu}
</div>
);
}
diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -10,7 +10,7 @@
import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js';
import { useUploadAvatarMedia } from './avatar-hooks.react.js';
-import css from './edit-user-avatar-menu.css';
+import css from './edit-avatar-menu.css';
import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
import CommIcon from '../CommIcon.react.js';
import MenuItem from '../components/menu-item.react.js';
diff --git a/web/components/menu.react.js b/web/components/menu.react.js
--- a/web/components/menu.react.js
+++ b/web/components/menu.react.js
@@ -116,6 +116,7 @@
ref={buttonRef}
className={css.menuButton}
onClick={onClickMenuCallback}
+ type="button"
>
{icon}
</button>

File Metadata

Mime Type
text/plain
Expires
Sat, Oct 5, 8:18 PM (21 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2246116
Default Alt Text
D8840.diff (4 KB)

Event Timeline