Message List: Do not hide scrollbar when highlighting (leverage overflow-overlay)
This commit is contained in:
parent
53ec3098b8
commit
3216dd0123
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user