oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: make the tick on memberList a radio looking element

This commit is contained in:
Audric Ackermann 2022-08-18 16:53:17 +10:00
parent 970e719229
commit 7bbbc74fa8
8 changed files with 102 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
stylesheets/_session.scss
View File

@ -1126,65 +1126,6 @@ input {
}
}
.session-member-item.compact {
height: 40px;
}
.session-member-item {
cursor: pointer;
flex-shrink: 0;
font-family: $session-font-default;
padding: 0px $session-margin-sm;
height: 50px;
display: flex;
justify-content: space-between;
transition: $session-transition-duration;
&:not(:last-child) {
border-bottom: var(--border-session);
}
&.selected {
background-color: var(--color-conversation-item-selected) !important;
}
&.zombie {
opacity: 0.5;
}
&__checkmark {
opacity: 0;
transition: $session-transition-duration;
&.selected {
opacity: 1;
svg {
fill: var(--color-accent) !important;
}
}
}
&__info,
&__checkmark {
display: flex;
align-items: center;
}
&__name {
font-weight: bold;
margin-inline-start: $session-margin-md;
margin-inline-end: $session-margin-md;
}
&__pubkey {
margin-inline-start: 5px;
opacity: 0.8;
}
&__avatar > div {
margin-bottom: 0px !important;
}
}
.module-message-detail {
.module-message {
pointer-events: none;
@ -1194,20 +1135,3 @@ input {
.module-message__text {
white-space: pre-wrap;
}
.speedButton {
padding: $session-margin-xs;
opacity: 0.6;
transition: none;
&:hover {
opacity: 1;
}
.session-button {
transition: none;
&:hover {
color: var(--color-text-opposite);
}
}
}

83
ts/components/MemberListItem.tsx
View File

@ -1,10 +1,8 @@
import React from 'react';
import classNames from 'classnames';
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';
import { SessionRadio } from './basic/SessionRadio';
const AvatarContainer = styled.div`
position: relative;
@ -20,12 +18,52 @@ const AvatarItem = (props: { memberPubkey: string; isAdmin: boolean }) => {
);
};
const StyledSessionMemberItem = styled.div<{
inMentions?: boolean;
zombie?: boolean;
selected?: boolean;
}>`
cursor: pointer;
flex-shrink: 0;
font-family: var(--font-default);
padding: 0px var(--margins-sm);
height: ${props => (props.inMentions ? '40px' : '50px')};
display: flex;
justify-content: space-between;
transition: var(--default-duration);
opacity: ${props => (props.zombie ? 0.5 : 1)};
:not(:last-child) {
border-bottom: var(--border-session);
}
background-color: ${props =>
props.selected ? 'var(--color-conversation-item-selected) !important' : null};
`;
const StyledInfo = styled.div`
display: flex;
align-items: center;
`;
const StyledName = styled.span`
font-weight: bold;
margin-inline-start: var(--margins-md);
margin-inline-end: var(--margins-md);
`;
const StyledCheckContainer = styled.div`
display: flex;
align-items: center;
`;
export const MemberListItem = (props: {
pubkey: string;
isSelected: boolean;
// this bool is used to make a zombie appear with less opacity than a normal member
isZombie?: boolean;
disableBg?: boolean;
inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker
isAdmin?: boolean; // if true, we add a small crown on top of their avatar
onSelect?: (pubkey: string) => void;
onUnselect?: (pubkey: string) => void;
@ -38,7 +76,7 @@ export const MemberListItem = (props: {
isAdmin,
onSelect,
onUnselect,
disableBg,
inMentions,
dataTestId,
} = props;
@ -46,18 +84,12 @@ export const MemberListItem = (props: {
return (
// tslint:disable-next-line: use-simple-attributes
<div
className={classNames(
'session-member-item',
isSelected && 'selected',
isZombie && 'zombie',
disableBg && 'compact'
)}
<StyledSessionMemberItem
onClick={() => {
isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey);
}}
style={
!disableBg
!inMentions
? {
backgroundColor: 'var(--color-cell-background)',
}
@ -65,16 +97,21 @@ export const MemberListItem = (props: {
}
role="button"
data-testid={dataTestId}
zombie={isZombie}
inMentions={inMentions}
selected={isSelected}
>
<div className="session-member-item__info">
<span className="session-member-item__avatar">
<AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
</span>
<span className="session-member-item__name">{memberName}</span>
</div>
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
<SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
</span>
</div>
<StyledInfo>
<AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
<StyledName>{memberName}</StyledName>
</StyledInfo>
{!inMentions && (
<StyledCheckContainer>
<SessionRadio active={isSelected} value="tet" inputName="wewee" label="" />
</StyledCheckContainer>
)}
</StyledSessionMemberItem>
);
};

47
ts/components/basic/SessionRadio.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { ChangeEvent } from 'react';
import styled, { CSSProperties } from 'styled-components';
import { Flex } from '../basic/Flex';
// tslint:disable: react-unused-props-and-state
@ -8,7 +8,7 @@ type Props = {
value: string;
active: boolean;
inputName?: string;
onClick: (value: string) => void;
onClick?: (value: string) => void;
};
const StyledInput = styled.input`
@ -30,17 +30,15 @@ const StyledLabel = styled.label`
:before {
content: '';
display: inline-block;
width: var(--filled-size);
height: var(--filled-size);
margin-inline-end: var(--margin-end);
margin-inline-end: var(--filled-size);
border-radius: 100%;
transition: var(--default-duration);
padding: 7px;
outline-offset: var(--outline-offset);
padding: calc(var(--filled-size) / 2);
outline-offset: 3px;
outline: var(--color-text) solid 1px;
border: none;
margin-top: 5px;
margin-top: var(--filled-size);
:hover {
background: var(--color-accent);
@ -51,9 +49,12 @@ const StyledLabel = styled.label`
export const SessionRadio = (props: Props) => {
const { label, inputName, value, active, onClick } = props;
function clickHandler(e: any) {
e.stopPropagation();
onClick(value);
function clickHandler(e: ChangeEvent<any>) {
if (onClick) {
// let something else catch the event if our click handler is not set
e.stopPropagation();
onClick?.(value);
}
}
return (
@ -63,8 +64,6 @@ export const SessionRadio = (props: Props) => {
style={
{
'--filled-size': '15px',
'--margin-end': '1rem',
'--outline-offset': '3px',
} as CSSProperties
}
>
@ -76,30 +75,10 @@ export const SessionRadio = (props: Props) => {
checked={active}
onChange={clickHandler}
/>
<StyledLabel role="button" onClick={clickHandler}>
{label}
</StyledLabel>
</Flex>
);
};
export const SessionRadioInput = (
props: Pick<Props, 'active' | 'inputName' | 'onClick' | 'value'>
) => {
const { active, onClick, inputName, value } = props;
function clickHandler(e: any) {
e.stopPropagation();
onClick(value);
}
return (
<StyledInput
type="radio"
name={inputName || ''}
value={value}
aria-checked={active}
checked={active}
onChange={clickHandler}
/>
);
};

23
ts/components/conversation/H5AudioPlayer.tsx
View File

@ -2,6 +2,7 @@
import React, { useEffect, useRef, useState } from 'react';
import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
import { setNextMessageToPlayId } from '../../state/ducks/conversations';
import {
@ -100,7 +101,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
ref={player}
customControlsSection={[
RHAP_UI.MAIN_CONTROLS,
<div className="speedButton" key="togglePlaybackSpeed">
<StyledSpeedButton key="togglePlaybackSpeed">
<SessionButton
text={`${playbackSpeed}x`}
onClick={() => {
@ -109,7 +110,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.None}
/>
</div>,
</StyledSpeedButton>,
]}
customIcons={{
play: (
@ -122,3 +123,21 @@ export const AudioPlayerWithEncryptedFile = (props: {
/>
);
};
const StyledSpeedButton = styled.div`
padding: var(--margins-xs);
opacity: 0.6;
transition: none;
:hover {
opacity: 1;
}
.session-button {
transition: none;
&:hover {
color: var(--color-text-opposite);
}
}
`;

2
ts/components/conversation/composition/UserMentions.tsx
View File

@ -29,7 +29,7 @@ export const renderUserMentionRow = (suggestion: SuggestionDataItem) => {
isSelected={false}
key={suggestion.id}
pubkey={`${suggestion.id}`}
disableBg={true}
inMentions={true}
dataTestId="mentions-popup-row"
/>
);

4
ts/components/leftpane/overlay/choose-action/ContactRow.tsx
View File

@ -70,7 +70,9 @@ export const ContactRow = (props: Props) => {
onClick={() => openConversationWithMessages({ conversationKey: id, messageId: null })}
>
<AvatarItem id={id} displayName={displayName} />
<StyledContactRowName>{displayName || id}</StyledContactRowName>
<StyledContactRowName data-testid="module-conversation__user__profile-name">
{displayName || id}
</StyledContactRowName>
</StyledRowContainer>
);
};

6
ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
View File

@ -66,15 +66,15 @@ export const OverlayChooseAction = () => {
return (
<div className="module-left-pane-overlay">
<StyledActionRow onClick={openNewMessage}>
<StyledActionRow onClick={openNewMessage} data-testid="chooser-new-conversation-button">
<IconOnActionRow iconType="chatBubble" />
<StyledChooseActionTitle>{window.i18n('newMessage')}</StyledChooseActionTitle>
</StyledActionRow>
<StyledActionRow onClick={openCreateGroup}>
<StyledActionRow onClick={openCreateGroup} data-testid="chooser-new-group">
<IconOnActionRow iconType="group" />
<StyledChooseActionTitle>{window.i18n('createGroup')}</StyledChooseActionTitle>
</StyledActionRow>
<StyledActionRow onClick={openJoinCommunity}>
<StyledActionRow onClick={openJoinCommunity} data-testid="chooser-new-community">
<IconOnActionRow iconType="communities" />
<StyledChooseActionTitle>{window.i18n('joinOpenGroup')}</StyledChooseActionTitle>
</StyledActionRow>

2
ts/state/ducks/section.tsx
View File

@ -94,7 +94,7 @@ export const initialSectionState: SectionStateType = {
focusedSection: SectionType.Message,
focusedSettingsSection: undefined,
isAppFocused: false,
overlayMode: 'choose-action',
overlayMode: undefined,
};
export type SectionStateType = {