+
{canShowCustomSendMenu && (
{
+ const lang = useLang();
const { isMobile } = useAppLayout();
const displayType = getDisplayType(attachment, shouldDisplayCompressed);
@@ -82,15 +84,16 @@ const AttachmentModalItem = ({
);
default: {
const canEdit = SUPPORTED_PHOTO_CONTENT_TYPES.has(attachment.mimeType) && !isMobile;
+ const isPhoto = SUPPORTED_PHOTO_CONTENT_TYPES.has(attachment.mimeType);
return (
<>
@@ -117,7 +120,7 @@ const AttachmentModalItem = ({
);
return (
-
+
{content}
{
onClose={handleClose}
>
{renderHeader()}
- = ({
<>
-
{renderContent()}
-
+
) : (
<>
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss
index 16c2de449..ba919b405 100644
--- a/src/components/ui/Modal.scss
+++ b/src/components/ui/Modal.scss
@@ -145,11 +145,11 @@
}
}
+ .modal-header-condensed-wide,
.modal-header-condensed {
@extend %modal-header;
min-height: 3.5rem;
- padding: 0.375rem 0.75rem !important;
.modal-action-button {
width: auto;
@@ -175,6 +175,19 @@
}
}
+ .modal-header-condensed {
+ padding: 0.375rem 0.75rem !important;
+ }
+
+ .modal-header-condensed-wide {
+ padding: 0.375rem 1.375rem !important;
+ .modal-title {
+ &:not(:only-child) {
+ margin: 0 1.375rem;
+ }
+ }
+ }
+
.modal-content {
overflow-y: auto;
flex-grow: 1;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 559d62092..fe9d7264f 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -38,6 +38,7 @@ export type OwnProps = {
hasCloseButton?: boolean;
hasAbsoluteCloseButton?: boolean;
absoluteCloseButtonColor?: ButtonProps['color'];
+ isBackButton?: boolean;
noBackdrop?: boolean;
noBackdropClose?: boolean;
children: React.ReactNode;
@@ -91,6 +92,7 @@ const Modal = (props: OwnProps) => {
hasCloseButton,
hasAbsoluteCloseButton,
absoluteCloseButtonColor = 'translucent',
+ isBackButton,
noBackdrop,
style,
dialogStyle,
@@ -176,16 +178,22 @@ const Modal = (props: OwnProps) => {
return header;
}
+ const closeIconClassName = buildClassName(
+ 'animated-close-icon',
+ isBackButton && 'state-back',
+ );
+
const closeButton = withCloseButton ? (
+ >
+
+
) : undefined;
return title ? (
diff --git a/src/components/ui/TabList.scss b/src/components/ui/SquareTabList.scss
similarity index 97%
rename from src/components/ui/TabList.scss
rename to src/components/ui/SquareTabList.scss
index 957191be2..7eaeadfd0 100644
--- a/src/components/ui/TabList.scss
+++ b/src/components/ui/SquareTabList.scss
@@ -1,4 +1,4 @@
-.TabList {
+.SquareTabList {
scrollbar-color: rgba(0, 0, 0, 0);
scrollbar-width: none;
diff --git a/src/components/ui/SquareTabList.tsx b/src/components/ui/SquareTabList.tsx
new file mode 100644
index 000000000..3f1ebe2a0
--- /dev/null
+++ b/src/components/ui/SquareTabList.tsx
@@ -0,0 +1,111 @@
+import type { ElementRef, TeactNode } from '../../lib/teact/teact';
+import { memo, useEffect, useRef } from '../../lib/teact/teact';
+
+import type { ApiMessageEntityCustomEmoji } from '../../api/types';
+import type { MenuItemContextAction } from './ListItem';
+
+import animateHorizontalScroll from '../../util/animateHorizontalScroll';
+import { IS_ANDROID, IS_IOS } from '../../util/browser/windowEnvironment';
+import buildClassName from '../../util/buildClassName';
+
+import useHorizontalScroll from '../../hooks/useHorizontalScroll';
+import useLang from '../../hooks/useLang';
+import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
+
+import Tab from './Tab';
+
+import './SquareTabList.scss';
+
+export type TabWithProperties = {
+ id?: number;
+ title: TeactNode;
+ badgeCount?: number;
+ isBlocked?: boolean;
+ isBadgeActive?: boolean;
+ contextActions?: MenuItemContextAction[];
+ emoticon?: string | ApiMessageEntityCustomEmoji;
+ noTitleAnimations?: boolean;
+};
+
+type OwnProps = {
+ tabs: readonly TabWithProperties[];
+ activeTab: number;
+ className?: string;
+ tabClassName?: string;
+ contextRootElementSelector?: string;
+ ref?: ElementRef
;
+ onSwitchTab: (index: number) => void;
+};
+
+const TAB_SCROLL_THRESHOLD_PX = 16;
+// Should match duration from `--slide-transition` CSS variable
+const SCROLL_DURATION = IS_IOS ? 450 : IS_ANDROID ? 400 : 300;
+
+const SquareTabList = ({
+ tabs,
+ activeTab,
+ className,
+ tabClassName,
+ contextRootElementSelector,
+ ref,
+ onSwitchTab,
+}: OwnProps) => {
+ const internalRef = useRef();
+ const containerRef = ref || internalRef;
+ const previousActiveTab = usePreviousDeprecated(activeTab);
+
+ const lang = useLang();
+
+ useHorizontalScroll(containerRef, undefined, true);
+
+ // Scroll container to place active tab in the center
+ useEffect(() => {
+ const container = containerRef.current!;
+ const { scrollWidth, offsetWidth, scrollLeft } = container;
+ if (scrollWidth <= offsetWidth) {
+ return;
+ }
+
+ const activeTabElement = container.childNodes[activeTab] as HTMLElement | null;
+ if (!activeTabElement) {
+ return;
+ }
+
+ const { offsetLeft: activeTabOffsetLeft, offsetWidth: activeTabOffsetWidth } = activeTabElement;
+ const newLeft = activeTabOffsetLeft - (offsetWidth / 2) + (activeTabOffsetWidth / 2);
+
+ // Prevent scrolling by only a couple of pixels, which doesn't look smooth
+ if (Math.abs(newLeft - scrollLeft) < TAB_SCROLL_THRESHOLD_PX) {
+ return;
+ }
+
+ animateHorizontalScroll(container, newLeft, SCROLL_DURATION);
+ }, [activeTab, containerRef]);
+
+ return (
+
+ {tabs.map((tab, i) => (
+
+ ))}
+
+ );
+};
+
+export default memo(SquareTabList);
diff --git a/src/components/ui/TabList.module.scss b/src/components/ui/TabList.module.scss
new file mode 100644
index 000000000..9a970f259
--- /dev/null
+++ b/src/components/ui/TabList.module.scss
@@ -0,0 +1,85 @@
+.container,
+.activeIndicator {
+ display: flex;
+ flex-shrink: 0;
+ flex-wrap: nowrap;
+ align-items: center;
+
+ padding-block: 0.375rem;
+ padding-inline: 0.25rem;
+}
+
+.container {
+ user-select: none;
+ scrollbar-width: none;
+
+ position: relative;
+
+ overflow-x: auto;
+
+ border-radius: 1.5rem;
+
+ opacity: 0;
+ background-color: var(--color-background);
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
+
+ transition: opacity 150ms;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ &.ready {
+ opacity: 1;
+ }
+}
+
+.activeIndicator {
+ will-change: clip-path;
+
+ isolation: isolate;
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ contain: layout style paint;
+ overflow: hidden;
+
+ width: fit-content;
+
+ background-color: var(--color-primary-opacity);
+
+ transition: clip-path var(--slide-transition);
+}
+
+.tab {
+ cursor: var(--custom-cursor, pointer);
+
+ display: flex;
+ flex-shrink: 0;
+ gap: 0.25rem;
+ align-items: center;
+
+ padding: 0.375rem 1rem;
+ border-radius: 1.25rem;
+
+ font-size: 1rem;
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-secondary);
+ white-space: nowrap;
+
+ &:hover {
+ opacity: 0.85;
+ }
+
+ .activeIndicator & {
+ color: var(--color-primary);
+ }
+}
+
+.lockIcon {
+ font-size: 0.875rem;
+}
diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx
index 4652efe9e..7337bf3b5 100644
--- a/src/components/ui/TabList.tsx
+++ b/src/components/ui/TabList.tsx
@@ -1,111 +1,90 @@
-import type { ElementRef, TeactNode } from '../../lib/teact/teact';
-import { memo, useEffect, useRef } from '../../lib/teact/teact';
+import { memo, useEffect, useRef, useState } from '../../lib/teact/teact';
-import type { ApiMessageEntityCustomEmoji } from '../../api/types';
-import type { MenuItemContextAction } from './ListItem';
+import type { TabWithProperties } from './SquareTabList';
+
+export type { TabWithProperties };
-import animateHorizontalScroll from '../../util/animateHorizontalScroll';
-import { IS_ANDROID, IS_IOS } from '../../util/browser/windowEnvironment';
import buildClassName from '../../util/buildClassName';
import useHorizontalScroll from '../../hooks/useHorizontalScroll';
-import useLang from '../../hooks/useLang';
-import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
+import useLastCallback from '../../hooks/useLastCallback';
+import useResizeObserver from '../../hooks/useResizeObserver';
-import Tab from './Tab';
+import Icon from '../common/icons/Icon';
-import './TabList.scss';
-
-export type TabWithProperties = {
- id?: number;
- title: TeactNode;
- badgeCount?: number;
- isBlocked?: boolean;
- isBadgeActive?: boolean;
- contextActions?: MenuItemContextAction[];
- emoticon?: string | ApiMessageEntityCustomEmoji;
- noTitleAnimations?: boolean;
-};
+import styles from './TabList.module.scss';
type OwnProps = {
tabs: readonly TabWithProperties[];
activeTab: number;
className?: string;
- tabClassName?: string;
- contextRootElementSelector?: string;
- ref?: ElementRef;
onSwitchTab: (index: number) => void;
};
-const TAB_SCROLL_THRESHOLD_PX = 16;
-// Should match duration from `--slide-transition` CSS variable
-const SCROLL_DURATION = IS_IOS ? 450 : IS_ANDROID ? 400 : 300;
-
const TabList = ({
tabs,
activeTab,
className,
- tabClassName,
- contextRootElementSelector,
- ref,
onSwitchTab,
}: OwnProps) => {
- let containerRef = useRef();
- if (ref) {
- containerRef = ref;
- }
- const previousActiveTab = usePreviousDeprecated(activeTab);
+ const containerRef = useRef();
+ const clipPathContainerRef = useRef();
+ const [clipPath, setClipPath] = useState('');
- const lang = useLang();
+ useHorizontalScroll(containerRef, !tabs.length, true);
- useHorizontalScroll(containerRef, undefined, true);
+ const updateClipPath = useLastCallback(() => {
+ const clipPathContainer = clipPathContainerRef.current;
+ const activeTabEl = activeTab >= 0 && clipPathContainer?.childNodes[activeTab] as HTMLElement | undefined;
+
+ if (clipPathContainer && activeTabEl && clipPathContainer.offsetWidth > 0) {
+ const { offsetLeft, offsetWidth } = activeTabEl;
+ const containerWidth = clipPathContainer.offsetWidth;
+ const left = (offsetLeft / containerWidth * 100).toFixed(1);
+ const right = ((containerWidth - (offsetLeft + offsetWidth)) / containerWidth * 100).toFixed(1);
+
+ setClipPath(`inset(0.25rem ${right}% 0.25rem ${left}% round 1.25rem)`);
+ }
+ });
- // Scroll container to place active tab in the center
useEffect(() => {
- const container = containerRef.current!;
- const { scrollWidth, offsetWidth, scrollLeft } = container;
- if (scrollWidth <= offsetWidth) {
- return;
- }
+ updateClipPath();
+ }, [activeTab, tabs]);
- const activeTabElement = container.childNodes[activeTab] as HTMLElement | null;
- if (!activeTabElement) {
- return;
- }
+ useResizeObserver(clipPathContainerRef, updateClipPath);
- const { offsetLeft: activeTabOffsetLeft, offsetWidth: activeTabOffsetWidth } = activeTabElement;
- const newLeft = activeTabOffsetLeft - (offsetWidth / 2) + (activeTabOffsetWidth / 2);
+ const handleTabClick = useLastCallback((index: number) => {
+ onSwitchTab(index);
+ });
- // Prevent scrolling by only a couple of pixels, which doesn't look smooth
- if (Math.abs(newLeft - scrollLeft) < TAB_SCROLL_THRESHOLD_PX) {
- return;
- }
+ if (!tabs.length) return undefined;
- animateHorizontalScroll(container, newLeft, SCROLL_DURATION);
- }, [activeTab]);
+ const renderTab = (tab: TabWithProperties, index: number) => (
+ handleTabClick(index)}
+ >
+ {tab.title}
+ {tab.isBlocked && }
+
+ );
return (
- {tabs.map((tab, i) => (
-
- ))}
+ {tabs.map(renderTab)}
+
+
+ {tabs.map(renderTab)}
+