danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2025-01-22 05:11:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Various fixes for hover state on touch devices (another attempt) (#1307)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-23 17:01:59 +03:00
parent 6b803a45f1
commit bb8e492a94
9 changed files with 94 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,32 +23,44 @@
}
}
&.selected,
&.selected:hover {
--background-color: var(--color-chat-active) !important;
@media (max-width: 600px) {
&.selected {
--background-color: var(--color-chat-hover) !important;
.Avatar.online::after {
border-color: var(--color-chat-active) !important;
background: var(--color-white);
.Avatar.online::after {
border-color: var(--color-chat-hover);
}
}
}
.ListItem-button {
@media (min-width: 600px) {
&.selected,
&.selected:hover {
--background-color: var(--color-chat-active) !important;
--color-text: var(--color-white);
--color-text-meta-colored: var(--color-white);
--color-text-meta: var(--color-white);
--color-text-secondary: var(--color-white);
--color-error: var(--color-white);
--color-pinned: var(--color-white);
}
.icon-muted-chat {
color: var(--color-white) !important;
}
.Avatar.online::after {
border-color: var(--color-chat-active) !important;
background: var(--color-white);
}
.Badge:not(.pinned) {
background: var(--color-white);
color: var(--color-chat-active);
.ListItem-button {
--background-color: var(--color-chat-active) !important;
--color-text: var(--color-white);
--color-text-meta-colored: var(--color-white);
--color-text-meta: var(--color-white);
--color-text-secondary: var(--color-white);
--color-error: var(--color-white);
--color-pinned: var(--color-white);
}
.icon-muted-chat {
color: var(--color-white) !important;
}
.Badge:not(.pinned) {
background: var(--color-white);
color: var(--color-chat-active);
}
}
}

2
src/components/left/main/Chat.tsx
View File

@ -256,7 +256,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
const className = buildClassName(
'Chat chat-item-clickable',
isChatPrivate(chatId) ? 'private' : 'group',
isSelected && !IS_SINGLE_COLUMN_LAYOUT && 'selected',
isSelected && 'selected',
);
return (

21
src/components/right/management/ManageChannel.tsx
View File

@ -184,16 +184,25 @@ const ManageChannel: FC<OwnProps & StateProps & DispatchProps> = ({
disabled={!canChangeInfo}
/>
{chat.isCreator && (
<ListItem icon="lock" ripple multiline onClick={handleClickEditType}>
<ListItem icon="lock" multiline onClick={handleClickEditType}>
<span className="title">{lang('ChannelType')}</span>
<span className="subtitle">{chat.username ? lang('TypePublic') : lang('TypePrivate')}</span>
</ListItem>
)}
<ListItem icon="message" multiline ripple onClick={handleClickDiscussion} disabled={!canChangeInfo}>
<ListItem
icon="message"
multiline
onClick={handleClickDiscussion}
disabled={!canChangeInfo}
>
<span className="title">{lang('Discussion')}</span>
<span className="subtitle">{hasLinkedChat ? lang('DiscussionUnlink') : lang('Add')}</span>
</ListItem>
<ListItem icon="admin" multiline ripple onClick={handleClickAdministrators}>
<ListItem
icon="admin"
multiline
onClick={handleClickAdministrators}
>
<span className="title">{lang('ChannelAdministrators')}</span>
<span className="subtitle">{adminsCount}</span>
</ListItem>
@ -206,7 +215,11 @@ const ManageChannel: FC<OwnProps & StateProps & DispatchProps> = ({
</div>
</div>
<div className="section">
<ListItem icon="group" multiline ripple onClick={handleClickSubscribers}>
<ListItem
icon="group"
multiline
onClick={handleClickSubscribers}
>
<span className="title" dir="auto">{lang('ChannelSubscribers')}</span>
<span className="subtitle" dir="auto">{lang('Subscribers', chat.membersCount!, 'i')}</span>
</ListItem>

9
src/components/right/management/ManageChatAdministrators.tsx
View File

@ -5,8 +5,8 @@ import { withGlobal } from '../../../lib/teact/teactn';
import { ManagementScreens } from '../../../types';
import { ApiChat, ApiChatMember, ApiUser } from '../../../api/types';
import { getUserFullName, isChatChannel } from '../../../modules/helpers';
import { getUserFullName, isChatChannel } from '../../../modules/helpers';
import { selectChat } from '../../../modules/selectors';
import useLang from '../../../hooks/useLang';
import useHistoryBack from '../../../hooks/useHistoryBack';
@ -86,7 +86,11 @@ const ManageChatAdministrators: FC<OwnProps & StateProps> = ({
<div className="Management">
<div className="custom-scroll">
<div className="section">
<ListItem icon="recent" multiline ripple onClick={handleRecentActionsClick}>
<ListItem
icon="recent"
multiline
onClick={handleRecentActionsClick}
>
<span className="title">{lang('EventLog')}</span>
<span className="subtitle">{lang(isChannel ? 'EventLogInfoDetailChannel' : 'EventLogInfoDetail')}</span>
</ListItem>
@ -103,7 +107,6 @@ const ManageChatAdministrators: FC<OwnProps & StateProps> = ({
<ListItem
key={member.userId}
className="chat-item-clickable"
ripple
onClick={() => handleAdminMemberClick(member)}
>
<PrivateChatInfo

17
src/components/right/management/ManageGroup.tsx
View File

@ -235,13 +235,17 @@ const ManageGroup: FC<OwnProps & StateProps & DispatchProps> = ({
disabled={!canChangeInfo}
/>
{chat.isCreator && (
<ListItem icon="lock" multiline ripple onClick={handleClickEditType}>
<ListItem icon="lock" multiline onClick={handleClickEditType}>
<span className="title">{lang('GroupType')}</span>
<span className="subtitle">{chat.username ? lang('TypePublic') : lang('TypePrivate')}</span>
</ListItem>
)}
{hasLinkedChannel && (
<ListItem icon="message" multiline ripple onClick={handleClickDiscussion}>
<ListItem
icon="message"
multiline
onClick={handleClickDiscussion}
>
<span className="title">{lang('LinkedChannel')}</span>
<span className="subtitle">{lang('DiscussionUnlink')}</span>
</ListItem>
@ -249,7 +253,6 @@ const ManageGroup: FC<OwnProps & StateProps & DispatchProps> = ({
<ListItem
icon="permissions"
multiline
ripple
onClick={handleClickPermissions}
disabled={!canBanUsers}
>
@ -258,13 +261,17 @@ const ManageGroup: FC<OwnProps & StateProps & DispatchProps> = ({
{enabledPermissionsCount}/{TOTAL_PERMISSIONS_COUNT}
</span>
</ListItem>
<ListItem icon="admin" multiline ripple onClick={handleClickAdministrators}>
<ListItem
icon="admin"
multiline
onClick={handleClickAdministrators}
>
<span className="title">{lang('ChannelAdministrators')}</span>
<span className="subtitle">{formatInteger(adminsCount)}</span>
</ListItem>
</div>
<div className="section">
<ListItem icon="group" multiline ripple onClick={handleClickMembers}>
<ListItem icon="group" multiline onClick={handleClickMembers}>
<span className="title">{lang('GroupMembers')}</span>
<span className="subtitle">{formatInteger(chat.membersCount!)}</span>
</ListItem>

9
src/components/right/management/ManageGroupPermissions.tsx
View File

@ -247,7 +247,12 @@ const ManageGroupPermissions: FC<OwnProps & StateProps & DispatchProps> = ({
</div>
<div className="section">
<ListItem icon="delete-user" multiline ripple narrow onClick={handleRemovedUsersClick}>
<ListItem
icon="delete-user"
multiline
narrow
onClick={handleRemovedUsersClick}
>
<span className="title">{lang('ChannelBlockedUsers')}</span>
<span className="subtitle">{removedUsersCount}</span>
</ListItem>
@ -258,7 +263,6 @@ const ManageGroupPermissions: FC<OwnProps & StateProps & DispatchProps> = ({
<ListItem
icon="add-user"
ripple
onClick={handleAddExceptionClick}
>
{lang('ChannelAddException')}
@ -268,7 +272,6 @@ const ManageGroupPermissions: FC<OwnProps & StateProps & DispatchProps> = ({
<ListItem
key={member.userId}
className="chat-item-clickable exceptions-member"
ripple
onClick={() => handleExceptionMemberClick(member)}
>
<PrivateChatInfo

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

@ -53,10 +53,11 @@
--background-color: var(--color-chat-hover);
}
}
}
@media (max-width: 600px) {
&:not(.has-ripple) .ListItem-button:active {
--background-color: var(--color-chat-hover);
@media (max-width: 600px) {
&.active {
--background-color: var(--color-chat-hover);
}
}
}
}

12
src/components/ui/ListItem.tsx
View File

@ -2,9 +2,11 @@ import { RefObject } from 'react';
import React, { FC, useRef, useCallback } from '../../lib/teact/teact';
import { IS_TOUCH_ENV } from '../../util/environment';
import { fastRaf } from '../../util/schedulers';
import buildClassName from '../../util/buildClassName';
import useContextMenuHandlers from '../../hooks/useContextMenuHandlers';
import useContextMenuPosition from '../../hooks/useContextMenuPosition';
import useFlag from '../../hooks/useFlag';
import useLang from '../../hooks/useLang';
import RippleEffect from './RippleEffect';
@ -66,6 +68,7 @@ const ListItem: FC<OwnProps> = (props) => {
if (ref) {
containerRef = ref;
}
const [isTouched, markIsTouched, unmarkIsTouched] = useFlag();
const {
isContextMenuOpen, contextMenuPosition,
@ -97,7 +100,12 @@ const ListItem: FC<OwnProps> = (props) => {
return;
}
onClick(e);
}, [disabled, onClick]);
if (IS_TOUCH_ENV && !ripple) {
markIsTouched();
fastRaf(unmarkIsTouched);
}
}, [disabled, markIsTouched, onClick, ripple, unmarkIsTouched]);
const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (inactive || IS_TOUCH_ENV) {
@ -141,7 +149,7 @@ const ListItem: FC<OwnProps> = (props) => {
style={style}
>
<div
className="ListItem-button"
className={buildClassName('ListItem-button', isTouched && 'active')}
role="button"
ref={buttonRef}
tabIndex={0}

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

@ -23,11 +23,14 @@
}
}
@media (max-width: 600px) {
&:active {
background-color: var(--color-chat-hover);
&:focus, &:hover, &:active {
text-decoration: none;
color: inherit;
}
&:active {
background-color: var(--color-chat-hover);
}
}
i {