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

replace SessionIcon size enum with type

This commit is contained in:
audric 2021-08-30 14:02:15 +10:00
parent 95b2e866fc
commit 8ebcb2d1e1
38 changed files with 107 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
background.d.ts vendored
View File

@ -1,14 +0,0 @@
export interface ConfirmationDialogParams {
title?: string;
message: string;
messageSub?: string;
resolve?: any;
reject?: any;
okText?: string;
okTheme?: string;
closeTheme?: string;
cancelText?: string;
hideCancel?: boolean;
sessionIcon?: SessionIconType;
iconSize?: SessionIconSize;
}

8
ts/components/ConversationListItem.tsx
View File

@ -22,7 +22,7 @@ import {
} from '../state/ducks/conversations';
import _ from 'underscore';
import { useMembersAvatars } from '../hooks/useMembersAvatar';
import { SessionIcon, SessionIconSize, SessionIconType } from './session/icon';
import { SessionIcon, SessionIconType } from './session/icon';
import { useSelector } from 'react-redux';
import { SectionType } from '../state/ducks/section';
import { getFocusedSection } from '../state/selectors/section';
@ -88,7 +88,7 @@ const HeaderItem = (props: {
<SessionIcon
iconType={SessionIconType.Pin}
iconColor={theme.colors.textColorSubtle}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
/>
) : null;
@ -105,7 +105,7 @@ const HeaderItem = (props: {
<SessionIcon
iconType={SessionIconType.Mute}
iconColor={theme.colors.textColorSubtle}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
/>
);
case 'mentions_only':
@ -113,7 +113,7 @@ const HeaderItem = (props: {
<SessionIcon
iconType={SessionIconType.BellMention}
iconColor={theme.colors.textColorSubtle}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
/>
);
default:

4
ts/components/Lightbox.tsx
View File

@ -6,7 +6,7 @@ import is from '@sindresorhus/is';
import * as GoogleChrome from '../util/GoogleChrome';
import * as MIME from '../types/MIME';
import { SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
import { SessionIconButton, SessionIconType } from './session/icon';
import { Flex } from './basic/Flex';
import { DefaultTheme } from 'styled-components';
// useCss has some issues on our setup. so import it directly
@ -166,7 +166,7 @@ const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
return (
<SessionIconButton
iconType={iconType}
iconSize={SessionIconSize.Huge}
iconSize={'huge'}
iconRotation={iconRotation}
// the lightbox has a dark background
iconColor="white"

8
ts/components/conversation/ConversationHeader.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Avatar, AvatarSize } from '../Avatar';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIconButton, SessionIconType } from '../session/icon';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
import { ConversationAvatar } from '../session/usingClosedConversationDetails';
@ -86,7 +86,7 @@ const SelectionOverlay = (props: {
<div className="close-button">
<SessionIconButton
iconType={SessionIconType.Exit}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={onCloseOverlay}
/>
</div>
@ -118,7 +118,7 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
});
}}
>
<SessionIconButton iconType={SessionIconType.Ellipses} iconSize={SessionIconSize.Medium} />
<SessionIconButton iconType={SessionIconType.Ellipses} iconSize={'medium'} />
</div>
);
};
@ -178,7 +178,7 @@ const BackButton = (props: { onGoBack: () => void; showBackButton: boolean }) =>
return (
<SessionIconButton
iconType={SessionIconType.Chevron}
iconSize={SessionIconSize.Large}
iconSize={'large'}
iconRotation={90}
onClick={onGoBack}
/>

4
ts/components/conversation/DataExtractionNotification.tsx
View File

@ -3,7 +3,7 @@ import { useTheme } from 'styled-components';
import { PropsForDataExtractionNotification } from '../../models/messageType';
import { SignalService } from '../../protobuf';
import { Flex } from '../basic/Flex';
import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIcon, SessionIconType } from '../session/icon';
import { SpacerXS, Text } from '../basic/Text';
import { ReadableMessage } from './ReadableMessage';
@ -35,7 +35,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
<SessionIcon
iconType={SessionIconType.Upload}
theme={theme}
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconRotation={180}
/>
<SpacerXS />

9
ts/components/conversation/ExpireTimer.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react';
import { getTimerBucketIcon } from '../../util/timer';
import { useInterval } from '../../hooks/useInterval';
import styled, { useTheme } from 'styled-components';
import { SessionIcon, SessionIconSize } from '../session/icon';
import { SessionIcon } from '../session/icon';
type Props = {
expirationLength: number;
@ -66,12 +66,7 @@ export const ExpireTimer = (props: Props) => {
return (
<ExpireTimerBucket>
<SessionIcon
iconType={bucket}
iconSize={SessionIconSize.Tiny}
iconColor={expireTimerColor}
theme={theme}
/>
<SessionIcon iconType={bucket} iconSize={'tiny'} iconColor={expireTimerColor} theme={theme} />
</ExpireTimerBucket>
);
};

4
ts/components/conversation/GroupInvitation.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIconButton, SessionIconType } from '../session/icon';
import { useTheme } from 'styled-components';
import { PropsForGroupInvitation } from '../../state/ducks/conversations';
import { acceptOpenGroupInvitation } from '../../interactions/messageInteractions';
@ -30,7 +30,7 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
iconType={SessionIconType.Plus}
iconColor={theme.colors.accent}
theme={theme}
iconSize={SessionIconSize.Large}
iconSize={'large'}
onClick={() => {
acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
}}

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

@ -10,7 +10,7 @@ import {
getSortedMessagesOfSelectedConversation,
} from '../../state/selectors/conversations';
import { getAudioAutoplay } from '../../state/selectors/userConfig';
import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIcon, SessionIconType } from '../session/icon';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
export const AudioPlayerWithEncryptedFile = (props: {
@ -110,7 +110,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
play: (
<SessionIcon
iconType={SessionIconType.Play}
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconColor={theme.colors.textColorSubtle}
theme={theme}
/>
@ -118,7 +118,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
pause: (
<SessionIcon
iconType={SessionIconType.Pause}
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconColor={theme.colors.textColorSubtle}
theme={theme}
/>

4
ts/components/conversation/TimerNotification.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { Intl } from '../Intl';
import { missingCaseError } from '../../util/missingCaseError';
import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIcon, SessionIconType } from '../session/icon';
import { PropsForExpirationTimer } from '../../state/ducks/conversations';
import { ReadableMessage } from './ReadableMessage';
@ -48,7 +48,7 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
<div>
<SessionIcon
iconType={SessionIconType.Stopwatch}
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconColor={'#ABABAB'}
/>
</div>

4
ts/components/conversation/message/ClickToTrustSender.tsx
View File

@ -4,7 +4,7 @@ import { getMessageById, getMessagesByConversation } from '../../../data/data';
import { getConversationController } from '../../../session/conversations';
import { AttachmentDownloads } from '../../../session/utils';
import { updateConfirmModal } from '../../../state/ducks/modalDialog';
import { SessionIcon, SessionIconSize, SessionIconType } from '../../session/icon';
import { SessionIcon, SessionIconType } from '../../session/icon';
import { SessionButtonColor } from '../../session/SessionButton';
const StyledTrustSenderUI = styled.div`
@ -83,7 +83,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {
return (
<StyledTrustSenderUI onClick={openConfirmationModal}>
<SessionIcon iconSize={SessionIconSize.Small} iconType={SessionIconType.Gallery} />
<SessionIcon iconSize={'small'} iconType={SessionIconType.Gallery} />
<ClickToDownload>{window.i18n('clickToTrustContact')}</ClickToDownload>
</StyledTrustSenderUI>
);

4
ts/components/conversation/message/MessagePreview.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import { isImageAttachment } from '../../../types/Attachment';
import { SessionIcon, SessionIconSize, SessionIconType } from '../../session/icon';
import { SessionIcon, SessionIconType } from '../../session/icon';
import { ImageGrid } from '../ImageGrid';
import { Image } from '../Image';
import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../Message';
@ -63,7 +63,7 @@ export const MessagePreview = (props: Props) => {
<div className="module-message__link-preview__icon_container">
<div className="module-message__link-preview__icon_container__inner">
<div className="module-message__link-preview__icon-container__circle-background">
<SessionIcon iconType={SessionIconType.Link} iconSize={SessionIconSize.Small} />
<SessionIcon iconType={SessionIconType.Link} iconSize={'small'} />
</div>
</div>
</div>

14
ts/components/conversation/message/OutgoingMessageStatus.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import styled, { useTheme } from 'styled-components';
import { MessageDeliveryStatus } from '../../../models/messageType';
import { SessionIcon, SessionIconSize, SessionIconType } from '../../session/icon';
import { SessionIcon, SessionIconType } from '../../session/icon';
const MessageStatusSendingContainer = styled.div`
display: inline-block;
@ -17,7 +17,7 @@ const MessageStatusSending = () => {
rotateDuration={2}
iconColor={iconColor}
iconType={SessionIconType.Sending}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
/>
</MessageStatusSendingContainer>
);
@ -28,11 +28,7 @@ const MessageStatusSent = () => {
return (
<MessageStatusSendingContainer>
<SessionIcon
iconColor={iconColor}
iconType={SessionIconType.CircleCheck}
iconSize={SessionIconSize.Tiny}
/>
<SessionIcon iconColor={iconColor} iconType={SessionIconType.CircleCheck} iconSize={'tiny'} />
</MessageStatusSendingContainer>
);
};
@ -45,7 +41,7 @@ const MessageStatusRead = () => {
<SessionIcon
iconColor={iconColor}
iconType={SessionIconType.DoubleCheckCircleFilled}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
/>
</MessageStatusSendingContainer>
);
@ -58,7 +54,7 @@ const MessageStatusError = () => {
<SessionIcon
iconColor={theme.colors.destructive}
iconType={SessionIconType.Error}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
/>
</MessageStatusSendingContainer>
);

6
ts/components/dialog/EditProfileDialog.tsx
View File

@ -6,7 +6,7 @@ import { Avatar, AvatarSize } from '../Avatar';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIconButton, SessionIconType } from '../session/icon';
import { PillDivider } from '../session/PillDivider';
import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
import { MAX_USERNAME_LENGTH } from '../session/registration/RegistrationStages';
@ -150,7 +150,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
<div className="qr-view-button">
<SessionIconButton
iconType={SessionIconType.QR}
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconColor={'rgb(0, 0, 0)'}
onClick={() => {
this.setState(state => ({ ...state, mode: 'qr' }));
@ -185,7 +185,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
<p>{name}</p>
<SessionIconButton
iconType={SessionIconType.Pencil}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={() => {
this.setState({ mode: 'edit' });
}}

8
ts/components/dialog/OnionStatusPathDialog.tsx
View File

@ -18,7 +18,7 @@ import {
} from '../../state/selectors/onions';
import { getTheme } from '../../state/selectors/theme';
import { Flex } from '../basic/Flex';
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIcon, SessionIconButton, SessionIconType } from '../session/icon';
import { SessionSpinner } from '../session/SessionSpinner';
import { SessionWrapperModal } from '../session/SessionWrapperModal';
@ -119,12 +119,12 @@ export const ModalStatusLight = (props: StatusLightType) => {
return (
<div className="onion__growing-icon">
<SessionIcon
borderRadius={50}
borderRadius={'50px'}
iconColor={color}
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
iconType={SessionIconType.Circle}
iconSize={SessionIconSize.Tiny}
iconSize={'tiny'}
theme={theme}
/>
</div>
@ -159,7 +159,7 @@ export const ActionPanelOnionStatusLight = (props: {
return (
<SessionIconButton
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconType={SessionIconType.Circle}
iconColor={iconColor}
onClick={handleClick}

6
ts/components/dialog/SessionModal.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import { DefaultTheme } from 'styled-components';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
import { SessionIconButton, SessionIconType } from '../session/icon';
import { SessionButtonColor, SessionButtonType } from '../session/SessionButton';
interface Props {
@ -83,7 +83,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
{showExitIcon ? (
<SessionIconButton
iconType={SessionIconType.Exit}
iconSize={SessionIconSize.Small}
iconSize={'small'}
onClick={this.close}
theme={this.props.theme}
/>
@ -97,7 +97,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
<SessionIconButton
key={iconItem.iconType}
iconType={iconItem.iconType}
iconSize={SessionIconSize.Large}
iconSize={'large'}
iconRotation={iconItem.iconRotation}
onClick={iconItem.onClick}
theme={this.props.theme}

4
ts/components/session/ActionsPanel.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { SessionIconButton, SessionIconType } from './icon';
import { Avatar, AvatarSize } from '../Avatar';
import { darkTheme, lightTheme } from '../../state/ducks/SessionTheme';
import { SessionToastContainer } from './SessionToastContainer';
@ -118,7 +118,7 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
<ActionPanelOnionStatusLight handleClick={handleClick} isSelected={isSelected} />
) : (
<SessionIconButton
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconType={iconType}
iconColor={iconColor}
notificationCount={unreadToShow}

9
ts/components/session/LeftPaneSectionHeader.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
import { SessionIcon, SessionIconType } from './icon';
import styled, { useTheme } from 'styled-components';
import { SessionButton, SessionButtonType } from './SessionButton';
import { useDispatch, useSelector } from 'react-redux';
@ -56,12 +56,7 @@ export const LeftPaneSectionHeader = (props: Props) => {
{label && <Tab label={label} type={0} isSelected={true} key={label} />}
{buttonIcon && (
<SessionButton onClick={buttonClicked} key="compose">
<SessionIcon
iconType={buttonIcon}
iconSize={SessionIconSize.Small}
iconColor="white"
theme={theme}
/>
<SessionIcon iconType={buttonIcon} iconSize={'small'} iconColor="white" theme={theme} />
</SessionButton>
)}
</div>

4
ts/components/session/LeftPaneSettingSection.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
import { SessionIcon, SessionIconType } from './icon';
import { SessionSettingCategory } from './settings/SessionSettings';
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
import { useDispatch, useSelector } from 'react-redux';
@ -61,7 +61,7 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
<div>
{item.id === focusedSettingsSection && (
<SessionIcon
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconType={SessionIconType.Chevron}
iconRotation={270}
theme={theme}

4
ts/components/session/SessionClosableOverlay.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { SessionIconButton, SessionIconType } from './icon';
import { SessionIdEditable } from './SessionIdEditable';
import { ContactType, SessionMemberListItem } from './SessionMemberListItem';
import { ReduxConversationType } from '../../state/ducks/conversations';
@ -147,7 +147,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
<div className="module-left-pane-overlay">
<div className="exit">
<SessionIconButton
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconType={SessionIconType.Exit}
onClick={onCloseClick}
/>

4
ts/components/session/SessionDropdown.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext, useState } from 'react';
import { ThemeContext } from 'styled-components';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
import { SessionIcon, SessionIconType } from './icon/';
import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
// THIS IS DROPDOWN ACCORDIAN STYLE OPTIONS SELECTOR ELEMENT, NOT A CONTEXTMENU
@ -38,7 +38,7 @@ export const SessionDropdown = (props: Props) => {
{label}
<SessionIcon
iconType={SessionIconType.Chevron}
iconSize={SessionIconSize.Small}
iconSize={'small'}
iconRotation={chevronOrientation}
theme={theme}
/>

4
ts/components/session/SessionDropdownItem.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import classNames from 'classnames';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
import { SessionIcon, SessionIconType } from './icon/';
import { ThemeContext } from 'styled-components';
export enum SessionDropDownItemType {
@ -38,7 +38,7 @@ export const SessionDropdownItem = (props: Props) => {
role="button"
onClick={clickHandler}
>
{icon ? <SessionIcon iconType={icon} iconSize={SessionIconSize.Small} theme={theme} /> : ''}
{icon ? <SessionIcon iconType={icon} iconSize={'small'} theme={theme} /> : ''}
<div className="item-content">{content}</div>
</div>
);

4
ts/components/session/SessionInput.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { SessionIconButton, SessionIconType } from './icon';
import { DefaultTheme } from 'styled-components';
interface Props {
@ -110,7 +110,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
return (
<SessionIconButton
iconType={SessionIconType.Eye}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={() => {
this.setState({
forceShow: !this.state.forceShow,

4
ts/components/session/SessionMemberListItem.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import { Avatar, AvatarSize } from '../Avatar';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
import { SessionIcon, SessionIconType } from './icon';
import { Constants } from '../../session';
import { useTheme } from 'styled-components';
import { PubKey } from '../../session/types';
@ -76,7 +76,7 @@ export const SessionMemberListItem = (props: Props) => {
<span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
<SessionIcon
iconType={SessionIconType.Check}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconColor={Constants.UI.COLORS.GREEN}
theme={theme}
/>

4
ts/components/session/SessionRegistrationView.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import { AccentText } from './AccentText';
import { RegistrationStages } from './registration/RegistrationStages';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { SessionIconButton, SessionIconType } from './icon';
import { SessionToastContainer } from './SessionToastContainer';
import { lightTheme, SessionTheme } from '../../state/ducks/SessionTheme';
import { setSignInByLinking } from '../../session/utils/User';
@ -19,7 +19,7 @@ export const SessionRegistrationView = () => {
<div className="session-content-header">
<div className="session-content-close-button">
<SessionIconButton
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconType={SessionIconType.Exit}
onClick={() => {
window.close();

4
ts/components/session/SessionScrollButton.tsx
View File

@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import styled, { ThemeContext } from 'styled-components';
import { getShowScrollButton } from '../../state/selectors/conversations';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { SessionIconButton, SessionIconType } from './icon';
type Props = {
onClick?: () => any;
@ -25,7 +25,7 @@ export const SessionScrollButton = (props: Props) => {
<SessionScrollButtonDiv theme={themeContext}>
<SessionIconButton
iconType={SessionIconType.Chevron}
iconSize={SessionIconSize.Huge}
iconSize={'huge'}
isHidden={!show}
onClick={props.onClick}
theme={themeContext}

4
ts/components/session/SessionSearchInput.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { getConversationsCount } from '../../state/selectors/conversations';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
import { SessionIconButton, SessionIconType } from './icon';
type Props = {
searchString: string;
@ -21,7 +21,7 @@ export const SessionSearchInput = (props: Props) => {
return (
<div className="session-search-input">
<SessionIconButton iconSize={SessionIconSize.Medium} iconType={SessionIconType.Search} />
<SessionIconButton iconSize={'medium'} iconType={SessionIconType.Search} />
<input
value={searchString}
onChange={e => onChange(e.target.value)}

4
ts/components/session/SessionToast.tsx
View File

@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
import { SessionIcon, SessionIconType } from './icon/';
import { Flex } from '../basic/Flex';
import styled, { ThemeContext } from 'styled-components';
import { noop } from 'lodash';
@ -50,7 +50,7 @@ export const SessionToast = (props: Props) => {
const theme = useContext(ThemeContext);
const toastDesc = description ? description : '';
const toastIconSize = toastDesc ? SessionIconSize.Huge : SessionIconSize.Medium;
const toastIconSize = toastDesc ? 'huge' : 'medium';
// Set a custom icon or allow the theme to define the icon
let toastIcon = icon || undefined;

6
ts/components/session/SessionWrapperModal.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
import { SessionIconButton, SessionIconType } from './icon/';
import { SessionButton } from './SessionButton';
import { useTheme } from 'styled-components';
@ -86,7 +86,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{showExitIcon ? (
<SessionIconButton
iconType={SessionIconType.Exit}
iconSize={SessionIconSize.Small}
iconSize={'small'}
onClick={props.onClose}
theme={theme}
/>
@ -100,7 +100,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
<SessionIconButton
key={iconItem.iconType}
iconType={iconItem.iconType}
iconSize={SessionIconSize.Large}
iconSize={'large'}
iconRotation={iconItem.iconRotation}
onClick={iconItem.onClick}
theme={theme}

6
ts/components/session/conversation/SessionCompositionBox.tsx
View File

@ -4,7 +4,7 @@ import _, { debounce } from 'lodash';
import { AttachmentType } from '../../../types/Attachment';
import * as MIME from '../../../types/MIME';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionIconButton, SessionIconType } from '../icon';
import { SessionEmojiPanel } from './SessionEmojiPanel';
import { SessionRecording } from './SessionRecording';
@ -377,14 +377,14 @@ class SessionCompositionBoxInner extends React.Component<Props, State> {
{typingEnabled && (
<SessionIconButton
iconType={SessionIconType.Emoji}
iconSize={SessionIconSize.Large}
iconSize={'large'}
onClick={this.toggleEmojiPanel}
/>
)}
<div className="send-message-button">
<SessionIconButton
iconType={SessionIconType.Send}
iconSize={SessionIconSize.Large}
iconSize={'large'}
iconRotation={90}
onClick={this.onSendMessage}
/>

4
ts/components/session/conversation/SessionFileDropzone.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import { Flex } from '../../basic/Flex';
import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
import { SessionIcon, SessionIconType } from '../icon';
const DropZoneContainer = styled.div`
display: inline-block;
@ -32,7 +32,7 @@ export const SessionFileDropzone = () => {
<DropZoneWithBorder>
<Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
<SessionIcon
iconSize={SessionIconSize.Max}
iconSize={'max'}
iconType={SessionIconType.CirclePlus}
theme={themeContext}
/>

10
ts/components/session/conversation/SessionQuotedMessageComposition.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback } from 'react';
import { Flex } from '../../basic/Flex';
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionIcon, SessionIconButton, SessionIconType } from '../icon';
import styled, { useTheme } from 'styled-components';
import { getAlt, isAudio } from '../../../types/Attachment';
import { Image } from '../../conversation/Image';
@ -78,7 +78,7 @@ export const SessionQuotedMessageComposition = () => {
<ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
<SessionIconButton
iconType={SessionIconType.Exit}
iconSize={SessionIconSize.Small}
iconSize={'small'}
onClick={removeQuotedMessage}
theme={theme}
/>
@ -98,11 +98,7 @@ export const SessionQuotedMessageComposition = () => {
)}
{hasAudioAttachment && (
<SessionIcon
iconType={SessionIconType.Microphone}
iconSize={SessionIconSize.Huge}
theme={theme}
/>
<SessionIcon iconType={SessionIconType.Microphone} iconSize={'huge'} theme={theme} />
)}
</Flex>
</QuotedMessageCompositionReply>

17
ts/components/session/conversation/SessionRecording.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import moment from 'moment';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionIconButton, SessionIconType } from '../icon';
import { Constants } from '../../../session';
import { ToastUtils } from '../../../session/utils';
import autoBind from 'auto-bind';
@ -130,7 +130,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
{isRecording && (
<SessionIconButton
iconType={SessionIconType.Pause}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconColor={Constants.UI.COLORS.DANGER_ALT}
onClick={actionPauseFn}
/>
@ -138,31 +138,28 @@ class SessionRecordingInner extends React.Component<Props, State> {
{actionPauseAudio && (
<SessionIconButton
iconType={SessionIconType.Pause}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={actionPauseFn}
/>
)}
{hasRecordingAndPaused && (
<SessionIconButton
iconType={SessionIconType.Play}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={this.playAudio}
/>
)}
{hasRecording && (
<SessionIconButton
iconType={SessionIconType.Delete}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={this.onDeleteVoiceMessage}
/>
)}
</StyledFlexWrapper>
{actionDefault && (
<SessionIconButton
iconType={SessionIconType.Microphone}
iconSize={SessionIconSize.Huge}
/>
<SessionIconButton iconType={SessionIconType.Microphone} iconSize={'huge'} />
)}
</div>
@ -188,7 +185,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
>
<SessionIconButton
iconType={SessionIconType.Send}
iconSize={SessionIconSize.Large}
iconSize={'large'}
iconRotation={90}
onClick={this.onSendVoiceMessage}
/>

6
ts/components/session/conversation/SessionRightPanel.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionIconButton, SessionIconType } from '../icon';
import { Avatar, AvatarSize } from '../../Avatar';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
import { SessionDropdown } from '../SessionDropdown';
@ -136,7 +136,7 @@ const HeaderItem = () => {
<div className="group-settings-header">
<SessionIconButton
iconType={SessionIconType.Chevron}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconRotation={270}
onClick={() => {
dispatch(closeRightPanel());
@ -154,7 +154,7 @@ const HeaderItem = () => {
{showInviteContacts && (
<SessionIconButton
iconType={SessionIconType.AddUser}
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
onClick={() => {
if (selectedConversation) {
showInviteContactByConvoId(selectedConversation.id);

9
ts/components/session/icon/Icons.tsx
View File

@ -62,14 +62,7 @@ export enum SessionIconType {
Timer60 = 'timer60',
}
export enum SessionIconSize {
Tiny = 'tiny',
Small = 'small',
Medium = 'medium',
Large = 'large',
Huge = 'huge',
Max = 'max',
}
export type SessionIconSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | 'huge2' | 'max';
export const icons = {
[SessionIconType.AddUser]: {

20
ts/components/session/icon/SessionIcon.tsx
View File

@ -21,17 +21,19 @@ const getIconDimensionFromIconSize = (iconSize: SessionIconSize | number) => {
return iconSize;
} else {
switch (iconSize) {
case SessionIconSize.Tiny:
case 'tiny':
return 12;
case SessionIconSize.Small:
case 'small':
return 15;
case SessionIconSize.Medium:
case 'medium':
return 20;
case SessionIconSize.Large:
case 'large':
return 25;
case SessionIconSize.Huge:
case 'huge':
return 30;
case SessionIconSize.Max:
case 'huge2':
return 40;
case 'max':
return 80;
default:
return 20;
@ -174,9 +176,11 @@ export const SessionIcon = (props: SessionIconProps) => {
borderRadius,
glowStartDelay,
noScale,
backgroundColor,
iconPadding,
} = props;
let { iconSize, iconRotation } = props;
iconSize = iconSize || SessionIconSize.Medium;
iconSize = iconSize || 'medium';
iconRotation = iconRotation || 0;
const themeToUse = theme || useTheme() || lightTheme;
@ -201,6 +205,8 @@ export const SessionIcon = (props: SessionIconProps) => {
borderRadius={borderRadius}
iconRotation={iconRotation}
iconColor={iconColor}
backgroundColor={backgroundColor}
iconPadding={iconPadding}
theme={themeToUse}
/>
);

6
ts/components/session/icon/SessionIconButton.tsx
View File

@ -26,6 +26,9 @@ const SessionIconButtonInner = (props: SProps) => {
glowStartDelay,
noScale,
isHidden,
backgroundColor,
borderRadius,
iconPadding,
} = props;
const clickHandler = (e: any) => {
if (props.onClick) {
@ -52,6 +55,9 @@ const SessionIconButtonInner = (props: SProps) => {
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
noScale={noScale}
backgroundColor={backgroundColor}
borderRadius={borderRadius}
iconPadding={iconPadding}
/>
{Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
</div>

28
ts/components/session/settings/SessionSettings.tsx
View File

@ -15,13 +15,12 @@ import {
hasLinkPreviewPopupBeenDisplayed,
} from '../../../../ts/data/data';
import { shell } from 'electron';
import { SessionConfirmDialogProps } from '../../dialog/SessionConfirm';
import { mapDispatchToProps } from '../../../state/actions';
import { unblockConvoById } from '../../../interactions/conversationInteractions';
import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
import { PasswordAction } from '../../dialog/SessionPasswordDialog';
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
import { SessionIconButton, SessionIconType } from '../icon';
import { ToastUtils } from '../../../session/utils';
export enum SessionSettingCategory {
@ -54,10 +53,6 @@ interface State {
shouldLockSettings: boolean | null;
}
interface ConfirmationDialogParams extends SessionConfirmDialogProps {
shouldShowConfirm: boolean | undefined;
}
interface LocalSettingType {
category: SessionSettingCategory;
description: string | undefined;
@ -70,7 +65,6 @@ interface LocalSettingType {
type: SessionSettingType | undefined;
setFn: any;
onClick: any;
confirmationDialogParams: ConfirmationDialogParams | undefined;
}
class SettingsViewInner extends React.Component<SettingsViewProps, State> {
@ -162,7 +156,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
onClick={onClickFn}
onSliderChange={sliderFn}
content={content}
confirmationDialogParams={setting.confirmationDialogParams}
/>
)}
</div>
@ -258,7 +251,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
<span className="text-selectable">v{window.versionInfo.version}</span>
<span>
<SessionIconButton
iconSize={SessionIconSize.Medium}
iconSize={'medium'}
iconType={SessionIconType.Oxen}
onClick={openOxenWebsite}
/>
@ -335,7 +328,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
content: { defaultValue: true },
comparisonValue: undefined,
onClick: undefined,
confirmationDialogParams: undefined,
},
{
id: 'spell-check',
@ -348,7 +340,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
content: { defaultValue: true },
comparisonValue: undefined,
onClick: undefined,
confirmationDialogParams: undefined,
},
{
id: 'link-preview-setting',
@ -376,7 +367,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
content: undefined,
comparisonValue: undefined,
onClick: undefined,
confirmationDialogParams: undefined,
},
{
@ -403,7 +393,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
content: undefined,
comparisonValue: undefined,
onClick: undefined,
confirmationDialogParams: undefined,
},
{
id: 'audio-message-autoplay-setting',
@ -420,7 +409,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
},
comparisonValue: undefined,
onClick: undefined,
confirmationDialogParams: undefined,
},
{
@ -459,7 +447,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
],
},
},
confirmationDialogParams: undefined,
},
{
id: 'zoom-factor-setting',
@ -479,7 +466,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
defaultValue: 100,
info: (value: number) => `${value}%`,
},
confirmationDialogParams: undefined,
},
{
id: 'help-translation',
@ -497,7 +483,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
buttonText: window.i18n('helpUsTranslateSession'),
buttonColor: SessionButtonColor.Primary,
},
confirmationDialogParams: undefined,
},
{
id: 'media-permissions',
@ -510,7 +495,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
content: undefined,
comparisonValue: undefined,
onClick: undefined,
confirmationDialogParams: undefined,
},
{
id: 'read-receipt-setting',
@ -523,7 +507,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
comparisonValue: undefined,
onClick: undefined,
content: {},
confirmationDialogParams: undefined,
},
{
id: 'typing-indicators-setting',
@ -536,7 +519,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
comparisonValue: undefined,
onClick: undefined,
content: {},
confirmationDialogParams: undefined,
},
{
id: 'auto-update',
@ -549,7 +531,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
comparisonValue: undefined,
onClick: undefined,
content: {},
confirmationDialogParams: undefined,
},
{
id: 'set-password',
@ -567,7 +548,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
onClick: () => {
this.displayPasswordModal('set');
},
confirmationDialogParams: undefined,
},
{
id: 'change-password',
@ -585,7 +565,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
onClick: () => {
this.displayPasswordModal('change');
},
confirmationDialogParams: undefined,
},
{
id: 'remove-password',
@ -603,7 +582,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
onClick: () => {
this.displayPasswordModal('remove');
},
confirmationDialogParams: undefined,
},
];
}
@ -651,7 +629,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
},
hidden: false,
onClick: undefined,
confirmationDialogParams: undefined,
});
}
@ -668,7 +645,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
setFn: undefined,
hidden: false,
onClick: undefined,
confirmationDialogParams: undefined,
},
];
}

1
ts/window.d.ts vendored
View File

@ -5,7 +5,6 @@ import { LibsignalProtocol } from '../../libtextsecure/libsignal-protocol';
import { SignalInterface } from '../../js/modules/signal';
import { LibTextsecure } from '../libtextsecure';
import { ConfirmationDialogParams } from '../background';
import { Store } from 'redux';
import { DefaultTheme } from 'styled-components';