From b68cb07e3e026a7ab1df6cdcfa2c665022f7382e Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 15 Dec 2021 14:41:55 +1100 Subject: [PATCH] add crown icon for closed group admins (#2084) --- images/crown.svg | 1 - js/background.js | 1 - stylesheets/_avatar.scss | 23 --------------- stylesheets/_session_left_pane.scss | 28 ------------------- ts/components/MemberListItem.tsx | 22 +++++++++++---- ts/components/avatar/Avatar.tsx | 27 ++++++++++++++++++ .../message/message-content/MessageAvatar.tsx | 8 ++---- .../dialog/OnionStatusPathDialog.tsx | 4 ++- .../dialog/UpdateGroupMembersDialog.tsx | 18 ++++++------ ts/components/icon/Icons.tsx | 7 +++++ ts/components/icon/SessionIcon.tsx | 2 +- ts/components/icon/SessionIconButton.tsx | 3 ++ ts/components/leftpane/ActionsPanel.tsx | 9 +++--- .../leftpane/LeftPaneSectionContainer.tsx | 24 ++++++++++++++++ .../overlay/SessionJoinableDefaultRooms.tsx | 2 +- ts/hooks/useParamSelector.ts | 2 +- 16 files changed, 100 insertions(+), 81 deletions(-) delete mode 100644 images/crown.svg create mode 100644 ts/components/leftpane/LeftPaneSectionContainer.tsx diff --git a/images/crown.svg b/images/crown.svg deleted file mode 100644 index 9c9a36643..000000000 --- a/images/crown.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/js/background.js b/js/background.js index 5fae82823..0f208becc 100644 --- a/js/background.js +++ b/js/background.js @@ -42,7 +42,6 @@ preload([ 'alert-outline.svg', 'check.svg', - 'crown.svg', 'error.svg', 'file-gradient.svg', 'file.svg', diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index b7abb7f64..81ac8b565 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -17,25 +17,6 @@ $borderAvatarColor: unquote( } } -.module-avatar__icon--crown-wrapper { - position: absolute; - bottom: 0%; - right: 12%; - height: 21px; - width: 21px; - transform: translate(25%, 25%); - padding: 9%; - background-color: $color-white; - border-radius: 50%; - filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); -} - -.module-avatar__icon--crown { - @include color-svg('../images/crown.svg', #ffb000); - height: 100%; - width: 100%; -} - .module-avatar__icon-closed .module-avatar--28, .module-avatar--28 { height: 28px; @@ -101,10 +82,6 @@ $borderAvatarColor: unquote( } } -.module-avatar__icon--crown-wrapper { - background-color: $color-gray-75; -} - .module-avatar__icon-closed { .module-avatar:last-child { position: absolute; diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index a547920a9..7b217c829 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -87,34 +87,6 @@ $session-compose-margin: 20px; height: 100vh; } - &__sections-container { - height: 100vh; - flex-shrink: 0; - width: 80px; - overflow-x: hidden; - display: inline-flex; - flex-direction: column; - - border-right: var(--border-session); - - .module-avatar, - .session-icon-button { - cursor: pointer; - padding: 30px; - - &:nth-last-child(2) { - margin: auto auto 0px auto; - opacity: 1 !important; - /* Hide theme icon until light theme is ready */ - } - - &:first-child { - padding: 0; - margin: 30px auto; - } - } - } - &__header { display: flex; flex-direction: row; diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 79e56532f..f663ac87c 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -1,12 +1,23 @@ import React from 'react'; import classNames from 'classnames'; -import { Avatar, AvatarSize } from './avatar/Avatar'; +import { Avatar, AvatarSize, CrownIcon } from './avatar/Avatar'; import { Constants } from '../session'; import { SessionIcon } from './icon'; import { useConversationUsernameOrShorten } from '../hooks/useParamSelector'; +import styled from 'styled-components'; -const AvatarItem = (props: { memberPubkey: string }) => { - return ; +const AvatarContainer = styled.div` + position: relative; +`; + +const AvatarItem = (props: { memberPubkey: string; isAdmin: boolean }) => { + const { memberPubkey, isAdmin } = props; + return ( + + + {isAdmin && } + + ); }; export const MemberListItem = (props: { @@ -14,10 +25,11 @@ export const MemberListItem = (props: { isSelected: boolean; // this bool is used to make a zombie appear with less opacity than a normal member isZombie?: boolean; + isAdmin?: boolean; // if true, we add a small crown on top of their avatar onSelect?: (pubkey: string) => void; onUnselect?: (pubkey: string) => void; }) => { - const { isSelected, pubkey, isZombie, onSelect, onUnselect } = props; + const { isSelected, pubkey, isZombie, isAdmin, onSelect, onUnselect } = props; const memberName = useConversationUsernameOrShorten(pubkey); @@ -31,7 +43,7 @@ export const MemberListItem = (props: { >
- + {memberName}
diff --git a/ts/components/avatar/Avatar.tsx b/ts/components/avatar/Avatar.tsx index 1b1da7c76..99319b26d 100644 --- a/ts/components/avatar/Avatar.tsx +++ b/ts/components/avatar/Avatar.tsx @@ -10,6 +10,8 @@ import { import { AvatarPlaceHolder } from './AvatarPlaceHolder/AvatarPlaceHolder'; import { ClosedGroupAvatar } from './AvatarPlaceHolder/ClosedGroupAvatar'; import { useDisableDrag } from '../../hooks/useDisableDrag'; +import styled from 'styled-components'; +import { SessionIcon } from '../icon'; export enum AvatarSize { XS = 28, @@ -38,6 +40,31 @@ const Identicon = (props: Props) => { return ; }; +const CrownWrapper = styled.div` + position: absolute; + display: flex; + bottom: 0%; + right: 12%; + height: 20px; + width: 20px; + transform: translate(25%, 25%); + color: #f7c347; + background: var(--color-inbox-background); + border-radius: 50%; + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); + + align-items: center; + justify-content: center; +`; + +export const CrownIcon = () => { + return ( + + + + ); +}; + const NoImage = ( props: Pick & { isClosedGroup: boolean; diff --git a/ts/components/conversation/message/message-content/MessageAvatar.tsx b/ts/components/conversation/message/message-content/MessageAvatar.tsx index 53b61d1cf..473da4c29 100644 --- a/ts/components/conversation/message/message-content/MessageAvatar.tsx +++ b/ts/components/conversation/message/message-content/MessageAvatar.tsx @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { MessageRenderingProps } from '../../../../models/messageType'; import { updateUserDetailsModal } from '../../../../state/ducks/modalDialog'; import { getMessageAvatarProps } from '../../../../state/selectors/conversations'; -import { Avatar, AvatarSize } from '../../../avatar/Avatar'; +import { Avatar, AvatarSize, CrownIcon } from '../../../avatar/Avatar'; // tslint:disable: use-simple-attributes export type MessageAvatarSelectorProps = Pick< @@ -68,11 +68,7 @@ export const MessageAvatar = (props: Props) => { onAvatarClick={(!isPublic && onMessageAvatarClick) || undefined} pubkey={authorPhoneNumber} /> - {isPublic && isSenderAdmin && ( -
-
-
- )} + {isSenderAdmin && }
); }; diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index d112b57b2..e9a2a2c21 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/ts/components/dialog/OnionStatusPathDialog.tsx @@ -151,8 +151,9 @@ export const ActionPanelOnionStatusLight = (props: { isSelected: boolean; handleClick: () => void; dataTestId?: string; + id: string; }) => { - const { isSelected, handleClick, dataTestId } = props; + const { isSelected, handleClick, dataTestId, id } = props; const onionPathsCount = useSelector(getOnionPathsCount); const firstPathLength = useSelector(getFirstOnionPathLength); @@ -181,6 +182,7 @@ export const ActionPanelOnionStatusLight = (props: { noScale={true} isSelected={isSelected} dataTestId={dataTestId} + id={id} /> ); }; diff --git a/ts/components/dialog/UpdateGroupMembersDialog.tsx b/ts/components/dialog/UpdateGroupMembersDialog.tsx index 118eef18e..bb3919cbf 100644 --- a/ts/components/dialog/UpdateGroupMembersDialog.tsx +++ b/ts/components/dialog/UpdateGroupMembersDialog.tsx @@ -21,29 +21,31 @@ type Props = { conversationId: string; }; +/** + * Admins are always put first in the list of group members. + * Also, admins have a little crown on their avatar. + */ const ClassicMemberList = (props: { convoId: string; selectedMembers: Array; - showAdmins?: boolean; // if true, admins of this convo will be put at the top of the list and greyed onSelect: (m: string) => void; onUnselect: (m: string) => void; }) => { - const { onSelect, convoId, onUnselect, selectedMembers, showAdmins } = props; + const { onSelect, convoId, onUnselect, selectedMembers } = props; const weAreAdmin = useWeAreAdmin(convoId); const convoProps = useConversationPropsById(convoId); if (!convoProps) { throw new Error('MemberList needs convoProps'); } let currentMembers = convoProps.members || []; - if (showAdmins) { - const { groupAdmins } = convoProps; - currentMembers = currentMembers.sort(m => (groupAdmins?.includes(m) ? -1 : 0)); - } + const { groupAdmins } = convoProps; + currentMembers = currentMembers.sort(m => (groupAdmins?.includes(m) ? -1 : 0)); return ( <> - {currentMembers.map((member: string) => { + {currentMembers.map(member => { const isSelected = (weAreAdmin && selectedMembers.includes(member)) || false; + const isAdmin = groupAdmins?.includes(member); return ( ); })} @@ -244,7 +247,6 @@ export const UpdateGroupMembersDialog = (props: Props) => { onSelect={onAdd} onUnselect={onRemove} selectedMembers={membersToKeepWithUpdate} - showAdmins={true} /> diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx index a5140595b..80b063a74 100644 --- a/ts/components/icon/Icons.tsx +++ b/ts/components/icon/Icons.tsx @@ -16,6 +16,7 @@ export type SessionIconType = | 'circlePlus' | 'circleElipses' | 'contacts' + | 'crown' | 'delete' | 'ellipses' | 'emoji' @@ -185,6 +186,12 @@ export const icons = { viewBox: '0 2.5 24 20', ratio: 1, }, + crown: { + path: + 'M462.3,130.5c-26.7,0-48.5,21.8-48.5,48.5c0,12.9,5,24.5,13.2,33.2c-14.6,16.3-35.7,26.6-59.3,26.6c-1.4,0-2.7,0-4.1-0.1c-36.3-1.8-66.2-28.1-73.7-62.7c8.9-8.8,14.5-21,14.5-34.5c0-0.8,0-1.7-0.1-2.5c-0.2-3.2-0.6-6.4-1.4-9.4 c0-0.1,0-0.2-0.1-0.2c-5.3-20.7-24-36-46.2-36.4c-0.3,0-0.5,0-0.8,0v0c0,0,0,0,0,0c-26.7,0-48.5,21.8-48.5,48.5c0,13.5,5.5,25.7,14.5,34.5c-7.7,35.8-39.6,62.8-77.7,62.8c-23.5,0-44.7-10.3-59.3-26.6c8.2-8.7,13.2-20.4,13.2-33.2c0-26.7-21.8-48.5-48.5-48.5S1.2,152.2,1.2,179c0,23.2,16.3,42.6,38.1,47.4c5.2,42.6,16.1,96.3,39.2,132.9h0V404c0,8.3,6.7,15,15,15H256h162.5c8.3,0,15-6.7,15-15v-44.8h0c5.6-8.8,10.5-18.7,14.7-29.1c13.3-32.8,20.6-71.5,24.5-103.7c21.8-4.8,38.1-24.2,38.1-47.4C510.8,152.2,489.1,130.5,462.3,130.5z', + viewBox: '0 0 512 512', + ratio: 1, + }, ellipses: { path: 'M30,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S25.589,16,30,16z M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z M30,44c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,44,30,44z', diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx index 979465c3e..24b00e816 100644 --- a/ts/components/icon/SessionIcon.tsx +++ b/ts/components/icon/SessionIcon.tsx @@ -149,7 +149,7 @@ const SessionSvg = (props: { backgroundColor?: string; iconPadding?: string; }) => { - const colorSvg = props.iconColor || 'var(--colors-text)'; + const colorSvg = props.iconColor || 'var(--color-text)'; const pathArray = props.path instanceof Array ? props.path : [props.path]; const propsToPick = { width: props.width, diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx index c5cafe0fc..1f3d58a34 100644 --- a/ts/components/icon/SessionIconButton.tsx +++ b/ts/components/icon/SessionIconButton.tsx @@ -11,6 +11,7 @@ interface SProps extends SessionIconProps { isHidden?: boolean; margin?: string; dataTestId?: string; + id?: string; } const SessionIconButtonInner = React.forwardRef((props, ref) => { @@ -29,6 +30,7 @@ const SessionIconButtonInner = React.forwardRef((props, borderRadius, iconPadding, margin, + id, } = props; const clickHandler = (e: React.MouseEvent) => { if (props.onClick) { @@ -42,6 +44,7 @@ const SessionIconButtonInner = React.forwardRef((props, className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')} role="button" ref={ref} + id={id} onClick={clickHandler} style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }} data-testid={props.dataTestId} diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index 0602abe64..49a6e71a8 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -50,6 +50,7 @@ import { DraggableCallContainer } from '../calling/DraggableCallContainer'; import { IncomingCallDialog } from '../calling/IncomingCallDialog'; import { SessionIconButton } from '../icon'; import { SessionToastContainer } from '../SessionToastContainer'; +import { LeftPaneSectionContainer } from './LeftPaneSectionContainer'; const Section = (props: { type: SectionType }) => { const ourNumber = useSelector(getOurNumber); @@ -141,6 +142,7 @@ const Section = (props: { type: SectionType }) => { dataTestId="onion-status-section" handleClick={handleClick} isSelected={isSelected} + id={'onion-path-indicator-led-id'} /> ); default: @@ -314,10 +316,7 @@ export const ActionsPanel = () => { -
+
@@ -327,7 +326,7 @@ export const ActionsPanel = () => {
-
+ ); }; diff --git a/ts/components/leftpane/LeftPaneSectionContainer.tsx b/ts/components/leftpane/LeftPaneSectionContainer.tsx new file mode 100644 index 000000000..4cf5eaff1 --- /dev/null +++ b/ts/components/leftpane/LeftPaneSectionContainer.tsx @@ -0,0 +1,24 @@ +import styled from 'styled-components'; + +export const LeftPaneSectionContainer = styled.div` + width: 80px; + display: flex; + flex-direction: column; + align-items: center; + border-right: var(--border-session); + + .session-icon-button { + padding: 30px 0; + } + + .module-avatar { + height: 80px; + display: flex; + align-items: center; + } + + // this is not ideal but it seems that nth-0last-child does not work + #onion-path-indicator-led-id { + margin: auto auto 0px auto; + } +`; diff --git a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx index dbf823032..5ec758a4f 100644 --- a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx +++ b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx @@ -39,7 +39,7 @@ const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => { if (isCancelled) { return; } - void downloadPreviewOpenGroupV2(parsedInfos) + downloadPreviewOpenGroupV2(parsedInfos) .then(base64 => { if (isCancelled) { return; diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts index e7974c766..5cf8ce2f3 100644 --- a/ts/hooks/useParamSelector.ts +++ b/ts/hooks/useParamSelector.ts @@ -59,7 +59,7 @@ export function useConversationsUsernameOrFull(pubkeys: Array) { return window.i18n('you'); } const convo = state.conversations.conversationLookup[pubkey]; - return convo?.profileName || convo?.name || pubkey; + return `"${convo?.profileName}"` || `"${convo?.name}"` || pubkey; }); }); }