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

replace SessionIcon size enum with type

Browse Source
pull/1888/head
audric 4 years ago
parent 95b2e866fc
commit 8ebcb2d1e1
38 changed files with 107 additions and 162 deletions
Show Stats Download Patch File Download Diff File

14
background.d.ts vendored
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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';

Write Preview
Loading…
Cancel
Save