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 && (
)}