From f87d902c98e5d50b42bcb9c4f950a94f284ad085 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 22 Aug 2022 17:27:52 +1000 Subject: [PATCH] fix: PR Reviews --- stylesheets/_session_constants.scss | 1 - stylesheets/_session_left_pane.scss | 4 +- ts/components/SessionSearchInput.tsx | 58 +++++++++---------- ts/components/conversation/H5AudioPlayer.tsx | 36 ++++++------ ts/components/leftpane/LeftPaneList.tsx | 2 +- .../leftpane/overlay/OverlayClosedGroup.tsx | 30 +++++----- .../overlay/choose-action/ContactRow.tsx | 35 +++++------ .../choose-action/ContactsListWithBreaks.tsx | 53 +++++++++-------- ts/session/apis/snode_api/onions.ts | 1 - ts/state/ducks/SessionTheme.tsx | 1 + 10 files changed, 108 insertions(+), 113 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index cb45234e0..a98df48b5 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -203,7 +203,6 @@ $session-subtle-factor: 0.6; // ////////////////////////////////////////////// // Default Components -$session-search-input-height: 34px; $main-view-header-height: 63px; $session-left-pane-width: 300px; diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index f07b21807..652e74d23 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -274,8 +274,8 @@ $session-compose-margin: 20px; justify-content: center; align-items: center; - height: $session-search-input-height; - width: $session-search-input-height; + height: var(--search-input-height); + width: var(--search-input-height); padding: 0px; margin: 0px; diff --git a/ts/components/SessionSearchInput.tsx b/ts/components/SessionSearchInput.tsx index c26a82cc7..ae8cc3276 100644 --- a/ts/components/SessionSearchInput.tsx +++ b/ts/components/SessionSearchInput.tsx @@ -8,6 +8,35 @@ import { getOverlayMode } from '../state/selectors/section'; import { cleanSearchTerm } from '../util/cleanSearchTerm'; import { SessionIconButton } from './icon'; +const StyledSearchInput = styled.div` + height: var(--search-input-height); + width: 100%; + margin-inline-end: 1px; + margin-bottom: 10px; + display: inline-flex; + flex-shrink: 0; + + .session-icon-button { + margin: auto 10px; + } +`; + +const StyledInput = styled.input` + width: inherit; + height: inherit; + border: none; + flex-grow: 1; + font-size: var(--font-size-sm); + font-family: var(--font-default); + text-overflow: ellipsis; + background: none; + color: var(--color-text); + + &:focus { + outline: none !important; + } +`; + const doTheSearch = (dispatch: Dispatch, cleanedTerm: string) => { dispatch(search(cleanedTerm)); }; @@ -74,32 +103,3 @@ export const SessionSearchInput = () => { ); }; - -const StyledSearchInput = styled.div` - height: 34px; // $session-search-input-height - width: 100%; - margin-inline-end: 1px; - margin-bottom: 10px; - display: inline-flex; - flex-shrink: 0; - - .session-icon-button { - margin: auto 10px; - } -`; - -const StyledInput = styled.input` - width: inherit; - height: inherit; - border: none; - flex-grow: 1; - font-size: var(--font-size-sm); - font-family: var(--font-default); - text-overflow: ellipsis; - background: none; - color: var(--color-text); - - &:focus { - outline: none !important; - } -`; diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index 3d52e9b8b..8de5d639f 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/ts/components/conversation/H5AudioPlayer.tsx @@ -14,6 +14,24 @@ import { getAudioAutoplay } from '../../state/selectors/userConfig'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { SessionIcon } from '../icon'; +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); + } + } +`; + export const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string; @@ -123,21 +141,3 @@ 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); - } - } -`; diff --git a/ts/components/leftpane/LeftPaneList.tsx b/ts/components/leftpane/LeftPaneList.tsx index 5cd0650cd..090547449 100644 --- a/ts/components/leftpane/LeftPaneList.tsx +++ b/ts/components/leftpane/LeftPaneList.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; export const StyledLeftPaneList = styled.div` - height: -webkit-fill-available; + height: 100%; flex-grow: 1; flex-shrink: 1; overflow-y: auto; diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index 60ebd8c3f..8936baf30 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -18,6 +18,21 @@ import styled from 'styled-components'; import { SessionSearchInput } from '../../SessionSearchInput'; import { getSearchResults, isSearching } from '../../../state/selectors/search'; +const StyledMemberListNoContacts = styled.div` + font-family: var(--font-font-mono); + background: var(--color-cell-background); + text-align: center; + padding: 20px; +`; + +const StyledGroupMemberListContainer = styled.div` + padding: 2px 0px; + width: 100%; + max-height: 400px; + overflow-y: auto; + border: var(--border-session); +`; + const NoContacts = () => { return ( {window.i18n('noContactsForGroup')} @@ -143,18 +158,3 @@ export const OverlayClosedGroup = () => { ); }; - -const StyledMemberListNoContacts = styled.div` - font-family: var(--font-font-mono); - background: var(--color-cell-background); - text-align: center; - padding: 20px; -`; - -const StyledGroupMemberListContainer = styled.div` - padding: 2px 0px; - width: 100%; - max-height: 400px; - overflow-y: auto; - border: var(--border-session); -`; diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx index 0b5a71d6a..a1883bc7e 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx @@ -38,7 +38,6 @@ const StyledContactRowName = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - /* font-weight: 600; */ font-size: var(--font-size-lg); `; @@ -46,10 +45,8 @@ const StyledRowContainer = styled.div` display: flex; align-items: center; padding: 0 var(--margins-lg); - transition: background-color var(--default-duration) linear; cursor: pointer; - border-bottom: 1px var(--color-session-border) solid; &:first-child { @@ -61,22 +58,6 @@ const StyledRowContainer = styled.div` } `; -export const ContactRow = (props: Props) => { - const { id, style, displayName } = props; - - return ( - openConversationWithMessages({ conversationKey: id, messageId: null })} - > - - - {displayName || id} - - - ); -}; - const StyledBreak = styled.div` display: flex; align-items: center; @@ -97,3 +78,19 @@ export const ContactRowBreak = (props: { char: string; key: string; style: CSSPr ); }; + +export const ContactRow = (props: Props) => { + const { id, style, displayName } = props; + + return ( + openConversationWithMessages({ conversationKey: id, messageId: null })} + > + + + {displayName || id} + + + ); +}; diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx index 7d0223e78..ea3aa6eb1 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx @@ -11,12 +11,36 @@ import { import { StyledLeftPaneList } from '../../LeftPaneList'; import { ContactRow, ContactRowBreak } from './ContactRow'; import { StyledChooseActionTitle } from './OverlayChooseAction'; -// tslint:disable: use-simple-attributes no-submodule-imports + +const StyledContactSection = styled.div` + display: flex; + flex-direction: column; + overflow: hidden; + flex: 1; + width: 100%; + + .module-conversation-list-item __header__date, + .module-conversation-list-item __message { + display: none; + } + + .module-conversation-list-item __buttons { + display: flex; + + .session-button { + font-size: var(--font-size-xs); + padding: 6px; + height: auto; + margin: 0px; + line-height: 14px; + } + } +`; const renderRow = (props: ListRowProps) => { const { index, key, style, parent } = props; - // ugly, but it seems react-viurtualized do not support very well functional components just yet + // ugly, but it seems react-virtualized does not support very well functional components just yet // https://stackoverflow.com/questions/54488954/how-to-pass-prop-into-rowrender-of-react-virtualized const directContactsByNameWithBreaks = (parent as any).props .directContactsByNameWithBreaks as Array; @@ -83,31 +107,6 @@ const ContactListItemSection = () => { ); }; -const StyledContactSection = styled.div` - display: flex; - flex-direction: column; - overflow: hidden; - flex: 1; - width: 100%; - - .module-conversation-list-item __header__date, - .module-conversation-list-item __message { - display: none; - } - - .module-conversation-list-item __buttons { - display: flex; - - .session-button { - font-size: var(--font-size-xs); - padding: 6px; - height: auto; - margin: 0px; - line-height: 14px; - } - } -`; - const ContactsTitle = () => { const contactsCount = useSelector(getDirectContactsCount); if (contactsCount <= 0) { diff --git a/ts/session/apis/snode_api/onions.ts b/ts/session/apis/snode_api/onions.ts index db64540d8..5180debe7 100644 --- a/ts/session/apis/snode_api/onions.ts +++ b/ts/session/apis/snode_api/onions.ts @@ -804,7 +804,6 @@ async function sendOnionRequestHandlingSnodeEject({ decodingSymmetricKey = result.decodingSymmetricKey; } catch (e) { window?.log?.warn('sendOnionRequestNoRetries error message: ', e.message); - // const isTimeout = (e.message && isString(e.message) && (e.message as string).toLowerCase().includes('network timeout at')) if (e.code === 'ENETUNREACH' || e.message === 'ENETUNREACH' || throwErrors) { throw e; } diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index 89b13c4c8..3abe5241c 100644 --- a/ts/state/ducks/SessionTheme.tsx +++ b/ts/state/ducks/SessionTheme.tsx @@ -345,6 +345,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* CONSTANTS */ --compositionContainerHeight: 60px; + --search-input-height: 34px; /* COLORS NOT CHANGING BETWEEN THEMES */ --color-warning: ${warning};