From 44f61073dcf00e0869b681bde1a6f0c4b56b3f70 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 1 Feb 2022 15:03:25 +1100 Subject: [PATCH] move search results to styled components and cleanup search logic and rendering of message results --- _locales/en/messages.json | 2 +- stylesheets/_modules.scss | 123 ------------------ stylesheets/_session_left_pane.scss | 7 - stylesheets/_theme_dark.scss | 20 --- ts/components/conversation/Timestamp.tsx | 25 ++-- .../composition/CompositionBox.tsx | 1 + .../leftpane/LeftPaneMessageSection.tsx | 9 +- .../overlay/SessionJoinableDefaultRooms.tsx | 2 +- ts/components/search/MessageSearchResults.tsx | 82 +++++++++--- ts/components/search/SearchResults.tsx | 88 +++++++------ ts/components/search/UserSearchResults.tsx | 66 ---------- ts/state/ducks/search.ts | 21 +-- ts/state/selectors/search.ts | 18 +-- ts/util/cleanSearchTerm.ts | 1 + 14 files changed, 136 insertions(+), 329 deletions(-) delete mode 100644 ts/components/search/UserSearchResults.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 49480428e..c0ab18058 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -85,7 +85,7 @@ "sessionMessenger": "Session", "search": "Search", "noSearchResults": "No results found for \"$searchTerm$\"", - "conversationsHeader": "Conversations", + "conversationsHeader": "Contacts and Groups", "contactsHeader": "Contacts", "messagesHeader": "Messages", "settingsHeader": "Settings", diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index fe4f307b9..99345556b 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1359,129 +1359,6 @@ @include color-svg('../images/x-16.svg', $color-gray-60); } -// Module: Search Results - -.module-search-results { - overflow-y: auto; - max-height: 100%; - color: var(--color-text); -} - -.module-search-results__conversations-header { - height: 36px; - line-height: 36px; - - margin-inline-start: 16px; - - font-size: 14px; - font-weight: 300; - letter-spacing: 0; -} - -.module-search-results__no-results { - margin-top: 27px; - width: 100%; - text-align: center; -} - -.module-search-results__contacts-header { - height: 36px; - line-height: 36px; - - margin-inline-start: 16px; - - font-size: 14px; - font-weight: 300; - letter-spacing: 0; -} - -.module-search-results__messages-header { - height: 36px; - line-height: 36px; - - margin-inline-start: 16px; - - font-size: 14px; - font-weight: 300; - letter-spacing: 0; -} - -// Module: Message Search Result - -.module-message-search-result { - padding: 8px; - padding-inline-start: 16px; - padding-inline-end: 16px; - min-height: 64px; - max-width: 300px; - - display: flex; - flex-direction: row; - align-items: flex-start; - - cursor: pointer; - &:hover { - background-color: var(--color-clickable-hovered); - } -} - -.module-message-search-result__text { - flex-grow: 1; - margin-inline-start: 12px; - // parent - 48px (for avatar) - 16px (our right margin) - max-width: calc(100% - 64px); - - display: inline-flex; - flex-direction: column; - align-items: stretch; -} - -.module-message-search-result__header { - display: flex; - flex-direction: row; - align-items: center; -} - -.module-message-search-result__header__from { - flex-grow: 1; - flex-shrink: 1; - font-size: 14px; - line-height: 18px; - - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - color: var(--color-text); -} - -.module-message-search-result__header__timestamp { - flex-shrink: 0; - margin-inline-start: 6px; - - font-size: 11px; - line-height: 16px; - letter-spacing: 0.3px; - - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - text-transform: uppercase; - - color: $color-gray-60; -} - -.module-message-search-result__header__name { - font-weight: 300; -} -.module-messages-search-result__header__group { - font-weight: 300; - .module-contact-name { - display: initial; - } -} - // Module: Left Pane .module-left-pane { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 7b217c829..83b921cc0 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -184,10 +184,6 @@ $session-compose-margin: 20px; width: -webkit-fill-available; } - .module-search-results { - width: -webkit-fill-available; - } - .session-description-long { font-size: $session-font-sm; line-height: $session-font-h3; @@ -217,9 +213,6 @@ $session-compose-margin: 20px; } } } -.module-search-results { - flex-grow: 1; -} .module-conversations-list-content { overflow-x: hidden; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index fb05763aa..7c08a070c 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -383,18 +383,6 @@ @include color-svg('../images/x-16.svg', $color-gray-25); } - // Module: Spinner - - .module-search-results__conversations-header { - color: $color-gray-05; - } - .module-search-results__contacts-header { - color: $color-gray-05; - } - .module-search-results__messages-header { - color: $color-gray-05; - } - // Module: Message Search Result .module-message-search-result { @@ -403,14 +391,6 @@ } } - .module-message-search-result__header__from { - color: $color-gray-05; - } - - .module-message-search-result__header__timestamp { - color: $color-gray-25; - } - .module-message__link-preview__icon-container__circle-background { background-color: $color-gray-25; } diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx index 0f0163150..7d427510a 100644 --- a/ts/components/conversation/Timestamp.tsx +++ b/ts/components/conversation/Timestamp.tsx @@ -7,25 +7,10 @@ import styled from 'styled-components'; type Props = { timestamp?: number; - module?: string; - withImageNoCaption?: boolean; isConversationListItem?: boolean; momentFromNow: boolean; }; -const TimestampContainerListItem = styled.div` - flex-shrink: 0; - margin-inline-start: 6px; - font-size: 11px; - line-height: 16px; - letter-spacing: 0.3px; - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-transform: uppercase; - color: var(--color-text); -`; - const UPDATE_FREQUENCY = 60 * 1000; const TimestampContainerNotListItem = styled.div` @@ -34,7 +19,15 @@ const TimestampContainerNotListItem = styled.div` letter-spacing: 0.3px; text-transform: uppercase; user-select: none; - color: var(--color-text); + color: var(--color-text-subtle); +`; + +const TimestampContainerListItem = styled(TimestampContainerNotListItem)` + flex-shrink: 0; + margin-inline-start: 6px; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; `; export const Timestamp = (props: Props) => { diff --git a/ts/components/conversation/composition/CompositionBox.tsx b/ts/components/conversation/composition/CompositionBox.tsx index 48ac028c0..95f4fb26f 100644 --- a/ts/components/conversation/composition/CompositionBox.tsx +++ b/ts/components/conversation/composition/CompositionBox.tsx @@ -750,6 +750,7 @@ class CompositionBoxInner extends React.Component { } else if (event.key === 'PageUp' || event.key === 'PageDown') { // swallow pageUp events if they occurs on the composition box (it breaks the app layout) event.preventDefault(); + event.stopPropagation(); } } diff --git a/ts/components/leftpane/LeftPaneMessageSection.tsx b/ts/components/leftpane/LeftPaneMessageSection.tsx index 15f879c77..cee728270 100644 --- a/ts/components/leftpane/LeftPaneMessageSection.tsx +++ b/ts/components/leftpane/LeftPaneMessageSection.tsx @@ -41,7 +41,7 @@ export class LeftPaneMessageSection extends React.Component { super(props); autoBind(this); - this.debouncedSearch = _.debounce(this.search.bind(this), 20); + this.debouncedSearch = _.debounce(this.search.bind(this), 50); } public renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element | null => { @@ -62,10 +62,9 @@ export class LeftPaneMessageSection extends React.Component { public renderList(): JSX.Element | Array { const { conversations, searchResults } = this.props; - const contacts = searchResults?.contacts || []; if (searchResults) { - return ; + return ; } if (!conversations) { @@ -160,11 +159,11 @@ export class LeftPaneMessageSection extends React.Component { this.debouncedSearch(cleanedTerm); } - public clearSearch() { + private clearSearch() { window.inboxStore?.dispatch(clearSearch()); } - public search() { + private search() { const { searchTerm } = this.props; window.inboxStore?.dispatch( search(searchTerm, { diff --git a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx index faa5b0ac7..a3d19bf50 100644 --- a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx +++ b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; diff --git a/ts/components/search/MessageSearchResults.tsx b/ts/components/search/MessageSearchResults.tsx index 4aef6fccf..98ca54cc9 100644 --- a/ts/components/search/MessageSearchResults.tsx +++ b/ts/components/search/MessageSearchResults.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import classNames from 'classnames'; import { getOurPubKeyStrFromCache } from '../../session/utils/User'; import { openConversationToSpecificMessage } from '../../state/ducks/conversations'; @@ -30,10 +29,45 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults) font-size: 12px; line-height: 14px; overflow-x: hidden; - font-weight: 400; + font-weight: 700; color: var(--color-text-subtle); `; +const StyledSearchResulsts = styled.div` + padding: 8px; + padding-inline-start: 16px; + padding-inline-end: 16px; + min-height: 64px; + max-width: 300px; + + display: flex; + flex-direction: row; + align-items: flex-start; + + cursor: pointer; + &:hover { + background-color: var(--color-clickable-hovered); + } +`; + +const StyledResultText = styled.div` + flex-grow: 1; + margin-inline-start: 12px; + display: inline-flex; + flex-direction: column; + align-items: stretch; +`; + +const ResultsHeader = styled.div` + display: flex; + flex-direction: row; + align-items: center; +`; + +const StyledMessageResultsHeaderName = styled.span` + font-weight: 300; +`; + const FromName = (props: { source: string; conversationId: string }) => { const { conversationId, source } = props; @@ -41,14 +75,12 @@ const FromName = (props: { source: string; conversationId: string }) => { if (isNoteToSelf) { return ( - - {window.i18n('noteToSelf')} - + {window.i18n('noteToSelf')} ); } if (source === getOurPubKeyStrFromCache()) { - return {window.i18n('you')}; + return {window.i18n('you')}; } return ( @@ -68,9 +100,9 @@ const ConversationHeader = (props: { source: string; conversationId: string }) = if (conversationId !== ourKey) { return ( - + - + ); } @@ -121,6 +153,23 @@ const ResultBody = styled.div` -webkit-box-orient: vertical; `; +const StyledTimestampContaimer = styled.div` + flex-shrink: 0; + margin-inline-start: 6px; + + font-size: 11px; + line-height: 16px; + letter-spacing: 0.3px; + + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + text-transform: uppercase; + + color: var(--color-text-subtle); +`; + export const MessageSearchResult = (props: MessageResultProps) => { const { id, @@ -156,7 +205,7 @@ export const MessageSearchResult = (props: MessageResultProps) => { } return ( -
{ @@ -166,24 +215,23 @@ export const MessageSearchResult = (props: MessageResultProps) => { shouldHighlightMessage: true, }); }} - className={classNames('module-message-search-result')} > -
-
+ + -
+ -
-
+ + -
-
+ + ); }; diff --git a/ts/components/search/SearchResults.tsx b/ts/components/search/SearchResults.tsx index 8769eb5c8..feff70b8a 100644 --- a/ts/components/search/SearchResults.tsx +++ b/ts/components/search/SearchResults.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import styled from 'styled-components'; import { ConversationListItemProps, MemoConversationListItemWithDetails, @@ -6,69 +7,70 @@ import { import { MessageResultProps, MessageSearchResult } from './MessageSearchResults'; export type SearchResultsProps = { - contacts: Array; - conversations: Array; + contactsAndGroups: Array; messages: Array; searchTerm: string; }; -const ContactsItem = (props: { header: string; items: Array }) => { - return ( -
-
{props.header}
- {props.items.map(contact => ( - - ))} -
- ); -}; +const StyledSeparatorSection = styled.div` + height: 36px; + line-height: 36px; + + margin-inline-start: 16px; + + color: var(--color-text); + + font-size: 14px; + font-weight: 700; + letter-spacing: 0; +`; + +const SearchResultsContainer = styled.div` + overflow-y: auto; + max-height: 100%; + color: var(--color-text); + flex-grow: 1; + width: -webkit-fill-available; +`; +const NoResults = styled.div` + margin-top: 27px; + width: 100%; + text-align: center; +`; export const SearchResults = (props: SearchResultsProps) => { - const { conversations, contacts, messages, searchTerm } = props; + const { contactsAndGroups, messages, searchTerm } = props; - const haveConversations = conversations && conversations.length; - const haveContacts = contacts && contacts.length; - const haveMessages = messages && messages.length; - const noResults = !haveConversations && !haveContacts && !haveMessages; + const haveContactsAndGroup = contactsAndGroups?.length; + const haveMessages = Boolean(messages?.length); + const noResults = !haveContactsAndGroup && !haveMessages; return ( -
- {noResults ? ( -
- {window.i18n('noSearchResults', [searchTerm])} -
- ) : null} - {haveConversations ? ( -
-
- {window.i18n('conversationsHeader')} -
- {conversations.map(conversation => ( + + {noResults ? {window.i18n('noSearchResults', [searchTerm])} : null} + {haveContactsAndGroup ? ( +
+ {window.i18n('conversationsHeader')} + {contactsAndGroups.map(contactOrGroup => ( ))}
) : null} - {haveContacts ? ( - - ) : null} - {haveMessages ? ( -
-
+ {haveMessages && ( +
+ {`${window.i18n('messagesHeader')}: ${messages.length}`} -
+ {messages.map(message => ( ))}
- ) : null} -
+ )} + ); }; diff --git a/ts/components/search/UserSearchResults.tsx b/ts/components/search/UserSearchResults.tsx deleted file mode 100644 index c0c1c891e..000000000 --- a/ts/components/search/UserSearchResults.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; - -import classNames from 'classnames'; -import { PubKey } from '../../session/types'; -import { ConversationListItemProps } from '../leftpane/conversation-list-item/ConversationListItem'; - -export type Props = { - contacts: Array; - searchTerm: string; - selectedContact: number; - onContactSelected: any; -}; - -export class UserSearchResults extends React.Component { - public constructor(props: Props) { - super(props); - } - - public render() { - const { contacts, searchTerm } = this.props; - - const noResults = !contacts || contacts.length <= 0; - - return ( -
- {noResults ? ( -
- {window.i18n('noSearchResults', [searchTerm])} -
- ) : ( - this.renderContacts(contacts) - )} -
- ); - } - - private renderContacts(items: Array) { - return ( -
- {items.map((contact, index) => this.renderContact(contact, index))} -
- ); - } - - private renderContact(contact: ConversationListItemProps, index: Number) { - const { profileName, id } = contact; - const { selectedContact } = this.props; - - const shortenedPubkey = PubKey.shorten(id); - const rowContent = `${profileName} ${shortenedPubkey}`; - - return ( -
this.props.onContactSelected(contact.id)} - role="button" - > - {rowContent} -
- ); - } -} diff --git a/ts/state/ducks/search.ts b/ts/state/ducks/search.ts index 76fcbd8a2..13cb658f5 100644 --- a/ts/state/ducks/search.ts +++ b/ts/state/ducks/search.ts @@ -14,12 +14,8 @@ import { MessageResultProps } from '../../components/search/MessageSearchResults export type SearchStateType = { query: string; normalizedPhoneNumber?: string; - // We need to store messages here, because they aren't anywhere else in state - selectedMessage?: string; // For conversations we store just the id, and pull conversation props in the selector - conversations: Array; - contacts: Array; - + contactsAndGroups: Array; messages?: Array; }; @@ -27,8 +23,7 @@ export type SearchStateType = { type SearchResultsPayloadType = { query: string; normalizedPhoneNumber?: string; - conversations: Array; - contacts: Array; + contactsAndGroups: Array; messages?: Array; }; @@ -81,6 +76,7 @@ async function doSearch(query: string, options: SearchOptions): Promise { return { - contacts: compact( - searchState.contacts.map(id => { - const value = lookup[id]; - - if (value && id === selectedConversation) { - return { - ...value, - isSelected: true, - }; - } - - return value; - }) - ), - conversations: compact( - searchState.conversations.map(id => { + contactsAndGroups: compact( + searchState.contactsAndGroups.map(id => { const value = lookup[id]; // Don't return anything when activeAt is unset (i.e. no current conversations with this user) diff --git a/ts/util/cleanSearchTerm.ts b/ts/util/cleanSearchTerm.ts index f78fb5b16..32e7f5dd3 100644 --- a/ts/util/cleanSearchTerm.ts +++ b/ts/util/cleanSearchTerm.ts @@ -3,6 +3,7 @@ export function cleanSearchTerm(searchTerm: string) { const withoutSpecialCharacters = lowercase.replace(/([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])/g, ' '); const whiteSpaceNormalized = withoutSpecialCharacters.replace(/\s+/g, ' '); const byToken = whiteSpaceNormalized.split(' '); + // be aware that a user typing Note To Self will have an issue when the `not` part of it is typed as the not word is reserved const withoutSpecialTokens = byToken.filter( token => token &&