Message List: Do not hide scrollbar when highlighting (leverage overflow-overlay)

This commit is contained in:
Alexander Zinchuk 2021-08-27 21:08:33 +03:00
parent 53ec3098b8
commit 3216dd0123
4 changed files with 1 additions and 50 deletions

View File

@ -300,30 +300,4 @@
transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0); transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
} }
} }
&.select-mode-active,
&.has-focus-highlight,
body.has-context-menu &,
.animating > div > & {
/*
Remove scrollbar for full-width selection and compensate it with right padding
*/
&::-webkit-scrollbar {
width: 0;
}
padding-right: 0;
/* Styles for Firefox */
@supports (scrollbar-width: none) {
padding-right: .6875rem;
scrollbar-width: none;
}
}
.is-safari &.select-mode-active,
.is-safari &.has-focus-highlight,
.is-safari.has-context-menu .messages-layout & {
padding-right: .375rem;
}
} }

View File

@ -76,7 +76,6 @@ type StateProps = {
isRestricted?: boolean; isRestricted?: boolean;
restrictionReason?: ApiRestrictionReason; restrictionReason?: ApiRestrictionReason;
focusingId?: number; focusingId?: number;
hasFocusHighlight?: boolean;
isSelectModeActive?: boolean; isSelectModeActive?: boolean;
animationLevel?: number; animationLevel?: number;
lastMessage?: ApiMessage; lastMessage?: ApiMessage;
@ -123,7 +122,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
isRestricted, isRestricted,
restrictionReason, restrictionReason,
focusingId, focusingId,
hasFocusHighlight,
isSelectModeActive, isSelectModeActive,
loadViewportMessages, loadViewportMessages,
setScrollOffset, setScrollOffset,
@ -455,7 +453,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
noAvatars && 'no-avatars', noAvatars && 'no-avatars',
!canPost && 'no-composer', !canPost && 'no-composer',
type === 'pinned' && 'type-pinned', type === 'pinned' && 'type-pinned',
hasFocusHighlight && 'has-focus-highlight',
isSelectModeActive && 'select-mode-active', isSelectModeActive && 'select-mode-active',
isScrolled && 'scrolled', isScrolled && 'scrolled',
!isReady && 'is-animating', !isReady && 'is-animating',
@ -547,7 +544,6 @@ export default memo(withGlobal<OwnProps>(
const { isRestricted, restrictionReason, lastMessage } = chat; const { isRestricted, restrictionReason, lastMessage } = chat;
const focusingId = selectFocusedMessageId(global, chatId); const focusingId = selectFocusedMessageId(global, chatId);
const hasFocusHighlight = focusingId ? !global.focusedMessage!.noHighlight : undefined;
const withLastMessageWhenPreloading = ( const withLastMessageWhenPreloading = (
threadId === MAIN_THREAD_ID threadId === MAIN_THREAD_ID
@ -579,7 +575,6 @@ export default memo(withGlobal<OwnProps>(
isViewportNewest: type !== 'thread' || selectIsViewportNewest(global, chatId, threadId), isViewportNewest: type !== 'thread' || selectIsViewportNewest(global, chatId, threadId),
threadFirstMessageId: selectFirstMessageId(global, chatId, threadId), threadFirstMessageId: selectFirstMessageId(global, chatId, threadId),
focusingId, focusingId,
hasFocusHighlight,
isSelectModeActive: selectIsInSelectMode(global), isSelectModeActive: selectIsInSelectMode(global),
botDescription, botDescription,
threadTopMessageId, threadTopMessageId,

View File

@ -5,9 +5,6 @@ import { IAnchorPosition } from '../types';
import { IS_TOUCH_ENV, IS_SINGLE_COLUMN_LAYOUT } from '../util/environment'; import { IS_TOUCH_ENV, IS_SINGLE_COLUMN_LAYOUT } from '../util/environment';
const LONG_TAP_DURATION_MS = 200; const LONG_TAP_DURATION_MS = 200;
const SELECTION_ANIMATION_DURATION_MS = 200;
let contextMenuCounter = 0;
function checkIsDisabledForMobile() { function checkIsDisabledForMobile() {
return IS_SINGLE_COLUMN_LAYOUT return IS_SINGLE_COLUMN_LAYOUT
@ -40,11 +37,6 @@ export default (
if (contextMenuPosition) { if (contextMenuPosition) {
return; return;
} }
document.body.classList.remove('no-selection');
if (contextMenuCounter === 0) {
document.body.classList.add('has-context-menu');
}
contextMenuCounter++;
setIsContextMenuOpen(true); setIsContextMenuOpen(true);
setContextMenuPosition({ x: e.clientX, y: e.clientY }); setContextMenuPosition({ x: e.clientX, y: e.clientY });
@ -57,13 +49,6 @@ export default (
const handleContextMenuHide = useCallback(() => { const handleContextMenuHide = useCallback(() => {
setContextMenuPosition(undefined); setContextMenuPosition(undefined);
document.body.classList.remove('no-selection'); document.body.classList.remove('no-selection');
setTimeout(() => {
contextMenuCounter--;
if (contextMenuCounter === 0) {
document.body.classList.remove('has-context-menu');
}
}, SELECTION_ANIMATION_DURATION_MS);
}, []); }, []);
// Support context menu on touch-devices // Support context menu on touch-devices

View File

@ -2,7 +2,7 @@ import { addReducer, getGlobal, setGlobal } from '../../../lib/teact/teactn';
import { ANIMATION_LEVEL_MAX } from '../../../config'; import { ANIMATION_LEVEL_MAX } from '../../../config';
import { import {
IS_ANDROID, IS_IOS, IS_MAC_OS, IS_SAFARI, IS_TOUCH_ENV, IS_ANDROID, IS_IOS, IS_MAC_OS, IS_TOUCH_ENV,
} from '../../../util/environment'; } from '../../../util/environment';
import { setLanguage } from '../../../util/langProvider'; import { setLanguage } from '../../../util/langProvider';
import switchTheme from '../../../util/switchTheme'; import switchTheme from '../../../util/switchTheme';
@ -31,9 +31,6 @@ addReducer('init', (global) => {
switchTheme(theme, animationLevel === ANIMATION_LEVEL_MAX); switchTheme(theme, animationLevel === ANIMATION_LEVEL_MAX);
startWebsync(); startWebsync();
if (IS_SAFARI) {
document.body.classList.add('is-safari');
}
if (IS_IOS) { if (IS_IOS) {
document.body.classList.add('is-ios'); document.body.classList.add('is-ios');
} else if (IS_ANDROID) { } else if (IS_ANDROID) {