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

List Item: Add divider on mobiles

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-16 16:09:28 +03:00
parent a3d00dbb39
commit 84bf1db026
14 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/left/main/Chat.scss
View File

@ -6,7 +6,6 @@
--color-text-meta: var(--color-text-meta-apple);
}
position: absolute;
top: 0;
left: 0;
@ -70,6 +69,12 @@
}
}
@media (max-width: 600px) {
.ListItem-button {
border-radius: 0 !important;
}
}
.status {
flex-shrink: 0;
}
@ -102,6 +107,7 @@
.LastMessageMeta {
margin-left: auto;
body.is-ios & {
font-size: .875rem;
margin-right: 0;
@ -133,6 +139,7 @@
content: ': ';
}
}
.colon {
margin-inline-end: .25rem;
}

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

@ -85,7 +85,7 @@ const AudioResults: FC<OwnProps & StateProps & DispatchProps> = ({
|| toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
return (
<div
className="ListItem"
className="ListItem small-icon"
key={message.id}
>
{shouldDrawDateDivider && (

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

@ -80,7 +80,7 @@ const FileResults: FC<OwnProps & StateProps & DispatchProps> = ({
|| toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
return (
<div
className="ListItem"
className="ListItem small-icon"
key={message.id}
>
{shouldDrawDateDivider && (

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

@ -17,8 +17,8 @@
.documents-list {
padding: 0 1.25rem 1.25rem;
.ListItem + .ListItem {
margin-top: 1.25rem;
.ListItem {
padding: 0.625rem 0;
}
}

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

@ -77,7 +77,7 @@ const LinkResults: FC<OwnProps & StateProps & DispatchProps> = ({
|| toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
return (
<div
className="ListItem"
className="ListItem small-icon"
dir={lang.isRtl ? 'rtl' : undefined}
key={message.id}
>

5
src/components/left/settings/SettingsPrivacy.tsx
View File

@ -132,6 +132,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
<ListItem
narrow
className="no-icon"
onClick={() => onScreenSelect(SettingsScreens.PrivacyPhoneNumber)}
>
<div className="multiline-menu-item">
@ -143,6 +144,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
</ListItem>
<ListItem
narrow
className="no-icon"
onClick={() => onScreenSelect(SettingsScreens.PrivacyLastSeen)}
>
<div className="multiline-menu-item">
@ -154,6 +156,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
</ListItem>
<ListItem
narrow
className="no-icon"
onClick={() => onScreenSelect(SettingsScreens.PrivacyProfilePhoto)}
>
<div className="multiline-menu-item">
@ -165,6 +168,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
</ListItem>
<ListItem
narrow
className="no-icon"
onClick={() => onScreenSelect(SettingsScreens.PrivacyForwarding)}
>
<div className="multiline-menu-item">
@ -176,6 +180,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
</ListItem>
<ListItem
narrow
className="no-icon"
onClick={() => onScreenSelect(SettingsScreens.PrivacyGroupChats)}
>
<div className="multiline-menu-item">

5
src/components/left/settings/SettingsPrivacyActiveSessions.tsx
View File

@ -72,7 +72,7 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps & DispatchProps> =
{lang('AuthSessions.CurrentSession')}
</h4>
<ListItem narrow inactive>
<ListItem narrow inactive className="no-icon">
<div className="multiline-menu-item" dir="auto">
<span className="title" dir="auto">{session.appName}</span>
<span className="subtitle black tight">{getDeviceEnvironment(session)}</span>
@ -81,7 +81,7 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps & DispatchProps> =
</ListItem>
<ListItem
className="destructive mb-0"
className="destructive mb-0 no-icon"
icon="stop"
ripple
narrow
@ -118,6 +118,7 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps & DispatchProps> =
handleTerminateSessionClick(session.hash);
},
}]}
className="no-icon"
>
<div className="multiline-menu-item full-size" dir="auto">
<span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>

2
src/components/left/settings/SettingsPrivacyBlockedUsers.tsx
View File

@ -60,7 +60,7 @@ const SettingsPrivacyBlockedUsers: FC<OwnProps & StateProps & DispatchProps> = (
const chat = !isPrivate ? chatsByIds[contactId] : undefined;
const className = buildClassName(
'Chat chat-item-clickable blocked-list-item',
'Chat chat-item-clickable blocked-list-item small-icon',
isPrivate ? 'private' : 'group',
);

2
src/components/left/settings/folders/SettingsFoldersMain.tsx
View File

@ -174,7 +174,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps & DispatchProps> = ({
{userFolders && userFolders.length ? userFolders.map((folder) => (
<ListItem
className="mb-2"
className="mb-2 no-icon"
narrow
multiline
onClick={() => onEditFolder(foldersById[folder.id])}

2
src/components/right/Profile.tsx
View File

@ -333,7 +333,7 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
<ListItem
key={id}
teactOrderKey={i}
className="chat-item-clickable scroll-item"
className="chat-item-clickable scroll-item small-icon"
onClick={() => handleMemberClick(id)}
contextActions={getMemberContextAction(id)}
>

22
src/components/ui/ListItem.scss
View File

@ -1,6 +1,26 @@
.ListItem {
position: relative;
@media (max-width: 600px) {
&:not(:last-of-type)::after {
content: "";
position: absolute;
bottom: 0;
left: 4.5rem;
right: 0;
height: 0.03125rem;
background: var(--color-dividers);
}
&.small-icon::after {
left: 3.875rem;
}
&.no-icon::after {
left: 0;
}
}
.ListItem-button {
width: 100%;
background-color: var(--background-color);
@ -48,7 +68,7 @@
.ListItem-button {
cursor: pointer;
@media (hover:hover) {
@media (hover: hover) {
&:hover, &:focus {
--background-color: var(--color-chat-hover);
}

5
src/components/ui/MenuItem.scss
View File

@ -15,13 +15,14 @@
cursor: pointer;
unicode-bidi: plaintext;
@media (hover:hover) {
@media (hover: hover) {
&:hover, &:focus {
background-color: var(--color-chat-hover);
text-decoration: none;
color: inherit;
}
}
@media (max-width: 600px) {
&:focus, &:hover, &:active {
text-decoration: none;
@ -80,7 +81,7 @@
margin-right: 0;
}
> .Switcher {
> .Switcher {
margin-left: 0;
margin-right: auto;
}

4
src/styles/_variables.scss
View File

@ -37,7 +37,8 @@ $color-text-secondary: #707579;
$color-text-secondary-apple: #8A8A90;
$color-text-meta: #686c72;
$color-text-meta-apple: #8C8C91;
$color-borders: #dadce0;
$color-borders: #DADCE0;
$color-dividers: #C8C6CC;
$color-item-active: #ededed;
$color-chat-hover: #f4f4f5;
$color-chat-active: #5B90E0;
@ -76,6 +77,7 @@ $color-user-8: #faa774;
--color-text-green-rgb: #{toRGB($color-text-green)};
--color-borders: #{$color-borders};
--color-borders-input: #{$color-borders};
--color-dividers: #{$color-dividers};
--color-webpage-initial-background: #{$color-dark-gray};
--color-interactive-active: var(--color-primary);
--color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);

3
src/styles/themes.json
View File

@ -15,8 +15,9 @@
"--color-text": ["#000000", "#FFFFFF"],
"--color-text-secondary": ["#707579", "#AAAAAA"],
"--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"],
"--color-borders": ["#DADCE0", "#100F10"],
"--color-borders": ["#DADCE0", "#303030"],
"--color-borders-input": ["#DADCE0", "#5B5B5A"],
"--color-dividers": ["#C8C6CC", "#404040"],
"--color-links": ["#52A1EF", "#868DF6"],
"--color-links-hover": ["#2d8dec", "#6b5fcc"],
"--color-gray": ["#C4C9CC", "#717579"],