ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Global Search: Remove border for first entry (#3359)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-05 13:14:25 +02:00
parent ae4b193bf8
commit e5bae9adcd
6 changed files with 56 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/left/search/AudioResults.tsx
View File

@ -11,6 +11,7 @@ import { createMapStateToProps } from './helpers/createMapStateToProps';
import { formatMonthAndYear, toYearMonth } from '../../../util/dateFormat';
import { getSenderName } from './helpers/getSenderName';
import { throttle } from '../../../util/schedulers';
import buildClassName from '../../../util/buildClassName';
import useAsyncRendering from '../../right/hooks/useAsyncRendering';
import useLang from '../../../hooks/useLang';
@ -79,7 +80,8 @@ const AudioResults: FC<OwnProps & StateProps> = ({
function renderList() {
return foundMessages.map((message, index) => {
const shouldDrawDateDivider = index === 0
const isFirst = index === 0;
const shouldDrawDateDivider = isFirst
|| toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
return (
<div
@ -87,7 +89,14 @@ const AudioResults: FC<OwnProps & StateProps> = ({
key={message.id}
>
{shouldDrawDateDivider && (
<p className="section-heading" dir={lang.isRtl ? 'rtl' : undefined}>
<p
className={buildClassName(
'section-heading',
isFirst && 'section-heading-first',
!isFirst && 'section-heading-with-border',
)}
dir={lang.isRtl ? 'rtl' : undefined}
>
{formatMonthAndYear(lang, new Date(message.date * 1000))}
</p>
)}

15
src/components/left/search/FileResults.tsx
View File

@ -15,6 +15,7 @@ import { formatMonthAndYear, toYearMonth } from '../../../util/dateFormat';
import { getSenderName } from './helpers/getSenderName';
import { throttle } from '../../../util/schedulers';
import { getMessageDocument } from '../../../global/helpers';
import buildClassName from '../../../util/buildClassName';
import useAsyncRendering from '../../right/hooks/useAsyncRendering';
import useLang from '../../../hooks/useLang';
@ -88,7 +89,8 @@ const FileResults: FC<OwnProps & StateProps> = ({
function renderList() {
return foundMessages.map((message, index) => {
const shouldDrawDateDivider = index === 0
const isFirst = index === 0;
const shouldDrawDateDivider = isFirst
|| toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
return (
<div
@ -96,7 +98,16 @@ const FileResults: FC<OwnProps & StateProps> = ({
key={message.id}
>
{shouldDrawDateDivider && (
<p className="section-heading">{formatMonthAndYear(lang, new Date(message.date * 1000))}</p>
<p
className={buildClassName(
'section-heading',
isFirst && 'section-heading-first',
!isFirst && 'section-heading-with-border',
)}
dir={lang.isRtl ? 'rtl' : undefined}
>
{formatMonthAndYear(lang, new Date(message.date * 1000))}
</p>
)}
<Document
message={message}

16
src/components/left/search/LeftSearch.scss
View File

@ -32,14 +32,18 @@
font-size: 0.9375rem;
color: var(--color-text-secondary);
&::before {
&-first {
padding-top: 0.75rem;
}
&-with-border::before {
content: "";
position: absolute;
width: 100%;
width: calc(100% + 1.25rem);
height: 1px;
background: var(--color-borders);
left: 0.625rem;
top: -1px;
left: 0;
top: 0;
}
&[dir="rtl"],
@ -71,6 +75,10 @@
&::before {
display: none;
}
&.without-border {
box-shadow: none;
}
}
.WebLink {

13
src/components/left/search/LinkResults.tsx
View File

@ -13,6 +13,7 @@ import { createMapStateToProps } from './helpers/createMapStateToProps';
import { formatMonthAndYear, toYearMonth } from '../../../util/dateFormat';
import { getSenderName } from './helpers/getSenderName';
import { throttle } from '../../../util/schedulers';
import buildClassName from '../../../util/buildClassName';
import useAsyncRendering from '../../right/hooks/useAsyncRendering';
import useLang from '../../../hooks/useLang';
@ -85,7 +86,8 @@ const LinkResults: FC<OwnProps & StateProps> = ({
function renderList() {
return foundMessages.map((message, index) => {
const shouldDrawDateDivider = index === 0
const isFirst = index === 0;
const shouldDrawDateDivider = isFirst
|| toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
return (
<div
@ -94,7 +96,14 @@ const LinkResults: FC<OwnProps & StateProps> = ({
key={message.id}
>
{shouldDrawDateDivider && (
<p className="section-heading" dir={lang.isRtl ? 'rtl' : undefined}>
<p
className={buildClassName(
'section-heading',
isFirst && 'section-heading-first',
!isFirst && 'section-heading-with-border',
)}
dir={lang.isRtl ? 'rtl' : undefined}
>
{formatMonthAndYear(lang, new Date(message.date * 1000))}
</p>
)}

9
src/components/left/search/RecentContacts.tsx
View File

@ -9,6 +9,7 @@ import type { ApiUser } from '../../../api/types';
import { getUserFirstOrLastName } from '../../../global/helpers';
import renderText from '../../common/helpers/renderText';
import { throttle } from '../../../util/schedulers';
import buildClassName from '../../../util/buildClassName';
import useHorizontalScroll from '../../../hooks/useHorizontalScroll';
import useLang from '../../../hooks/useLang';
@ -92,7 +93,13 @@ const RecentContacts: FC<OwnProps & StateProps> = ({
)}
{recentlyFoundChatIds && (
<div className="search-section pt-1">
<h3 className="section-heading mt-0 recent-chats-header" dir={lang.isRtl ? 'rtl' : undefined}>
<h3
className={buildClassName(
'section-heading mt-0 recent-chats-header',
!topUserIds && 'without-border',
)}
dir={lang.isRtl ? 'rtl' : undefined}
>
{lang('Recent')}
<Button

1
src/global/actions/ui/initial.ts
View File

@ -27,6 +27,7 @@ import { replaceSettings } from '../../reducers';
const HISTORY_ANIMATION_DURATION = 450;
setSystemThemeChangeCallback((theme) => {
// eslint-disable-next-line eslint-multitab-tt/no-immediate-global
let global = getGlobal();
if (!global.settings.byKey.shouldUseSystemTheme) return;