diff --git a/src/api/gramjs/apiBuilders/stories.ts b/src/api/gramjs/apiBuilders/stories.ts index 9c1aff3a2..8027580c4 100644 --- a/src/api/gramjs/apiBuilders/stories.ts +++ b/src/api/gramjs/apiBuilders/stories.ts @@ -68,6 +68,7 @@ export function buildApiStory(peerId: string, story: GramJs.TypeStoryItem): ApiT ...(closeFriends && { isForCloseFriends: true }), ...(noforwards && { noForwards: true }), ...(views?.viewsCount && { viewsCount: views.viewsCount }), + ...(views?.forwardsCount && { forwardsCount: views.forwardsCount }), ...(views?.reactionsCount && { reactionsCount: views.reactionsCount }), ...(views?.reactions && { reactions: views.reactions.map(buildReactionCount) }), ...(views?.recentViewers && { diff --git a/src/api/types/stories.ts b/src/api/types/stories.ts index 85f0824cb..a5b09928c 100644 --- a/src/api/types/stories.ts +++ b/src/api/types/stories.ts @@ -19,6 +19,7 @@ export interface ApiStory { isOut?: true; noForwards?: boolean; viewsCount?: number; + forwardsCount?: number; reactionsCount?: number; reactions?: ApiReactionCount[]; recentViewerIds?: string[]; diff --git a/src/components/story/StoryFooter.module.scss b/src/components/story/StoryFooter.module.scss index 4bedf8319..fefe64a3e 100644 --- a/src/components/story/StoryFooter.module.scss +++ b/src/components/story/StoryFooter.module.scss @@ -53,10 +53,17 @@ font-size: 1.25rem; } -.channelReaction { +.footerItem { display: flex; align-items: center; - padding-inline-end: 0.5rem; + + &:last-child { + padding-inline-end: 0.5rem; + } + + & + & { + margin-inline-end: 0.5rem; + } } .views { diff --git a/src/components/story/StoryFooter.tsx b/src/components/story/StoryFooter.tsx index 808ae6d94..632314a09 100644 --- a/src/components/story/StoryFooter.tsx +++ b/src/components/story/StoryFooter.tsx @@ -32,7 +32,7 @@ const StoryFooter = ({ const lang = useLang(); const { - viewsCount, reactionsCount, isOut, peerId, id: storyId, sentReaction, + viewsCount, forwardsCount, reactionsCount, isOut, peerId, id: storyId, sentReaction, } = story; const isChannel = !isUserId(peerId); @@ -121,37 +121,54 @@ const StoryFooter = ({ round onClick={handleForwardClick} ariaLabel={lang('Forward')} + className={styles.footerItem} > )} {isChannel && ( -
- - {Boolean(reactionsCount) && ({reactionsCount})} -
+ <> + {Boolean(forwardsCount) && ( +
+ + {forwardsCount} +
+ )} +
+ + {Boolean(reactionsCount) && ({reactionsCount})} +
+ )} ); diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss index e11f88916..f733b0f3c 100644 --- a/src/components/ui/Button.scss +++ b/src/components/ui/Button.scss @@ -55,8 +55,12 @@ } &.disabled { - opacity: 0.5 !important; cursor: var(--custom-cursor, default); + + &:not(.non-interactive) { + opacity: 0.5 !important; + } + &:not(.click-allowed) { pointer-events: none; } diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index a906c94af..87c929bfb 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -36,6 +36,7 @@ export type OwnProps = { href?: string; download?: string; disabled?: boolean; + nonInteractive?: boolean; allowDisabledClick?: boolean; noFastClick?: boolean; ripple?: boolean; @@ -91,6 +92,7 @@ const Button: FC = ({ href, download, disabled, + nonInteractive, allowDisabledClick, noFastClick = color === 'danger', ripple, @@ -110,6 +112,8 @@ const Button: FC = ({ const [isClicked, setIsClicked] = useState(false); + const isNotInteractive = disabled || nonInteractive; + const fullClassName = buildClassName( 'Button', className, @@ -118,7 +122,8 @@ const Button: FC = ({ round && 'round', pill && 'pill', fluid && 'fluid', - disabled && 'disabled', + isNotInteractive && 'disabled', + nonInteractive && 'non-interactive', allowDisabledClick && 'click-allowed', isText && 'text', isLoading && 'loading', @@ -132,7 +137,7 @@ const Button: FC = ({ ); const handleClick = useLastCallback((e: ReactMouseEvent) => { - if ((allowDisabledClick || !disabled) && onClick) { + if ((allowDisabledClick || !isNotInteractive) && onClick) { onClick(e); } @@ -147,7 +152,7 @@ const Button: FC = ({ const handleMouseDown = useLastCallback((e: ReactMouseEvent) => { if (!noPreventDefault) e.preventDefault(); - if ((allowDisabledClick || !disabled) && onMouseDown) { + if ((allowDisabledClick || !isNotInteractive) && onMouseDown) { onMouseDown(e); } @@ -173,7 +178,7 @@ const Button: FC = ({ onTransitionEnd={onTransitionEnd} > {children} - {!disabled && ripple && ( + {!isNotInteractive && ripple && ( )} @@ -190,10 +195,10 @@ const Button: FC = ({ onContextMenu={onContextMenu} onMouseDown={handleMouseDown} onMouseUp={onMouseUp} - onMouseEnter={onMouseEnter && !disabled ? onMouseEnter : undefined} - onMouseLeave={onMouseLeave && !disabled ? onMouseLeave : undefined} + onMouseEnter={onMouseEnter && !isNotInteractive ? onMouseEnter : undefined} + onMouseLeave={onMouseLeave && !isNotInteractive ? onMouseLeave : undefined} onTransitionEnd={onTransitionEnd} - onFocus={onFocus && !disabled ? onFocus : undefined} + onFocus={onFocus && !isNotInteractive ? onFocus : undefined} aria-label={ariaLabel} aria-controls={ariaControls} aria-haspopup={hasPopup} @@ -208,7 +213,7 @@ const Button: FC = ({ ) : children} - {!disabled && ripple && ( + {!isNotInteractive && ripple && ( )}