Story Viewer: Use separate Like button in Composer (#3824)
This commit is contained in:
Alexander Zinchuk
parent
5d379b62cf
commit
a3aeab9ee8
@ -108,6 +108,23 @@
|
||||
transition: box-shadow 0.1s;
|
||||
}
|
||||
|
||||
&.story-reaction-button {
|
||||
--custom-emoji-size: 1.5rem;
|
||||
--custom-emoji-border-radius: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
.icon-heart {
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.story-reaction-heart {
|
||||
color: var(--color-heart) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.send {
|
||||
.icon-send {
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
@ -283,21 +300,22 @@
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - 4rem);
|
||||
background: var(--color-background);
|
||||
border-radius: var(--border-radius-default-small);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 1px 2px var(--color-default-shadow);
|
||||
border-radius: var(--border-radius-messages);
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&.full-featured {
|
||||
box-shadow: 0 1px 2px var(--color-default-shadow);
|
||||
border-radius: var(--border-radius-messages);
|
||||
&.with-story-tweaks {
|
||||
border-radius: var(--border-radius-default-small);
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.svg-appendix {
|
||||
position: absolute;
|
||||
bottom: -0.1875rem;
|
||||
/* stylelint-disable-next-line plugin/whole-pixel */
|
||||
right: -0.551rem; // This value is correct. Safari fix
|
||||
right: -0.5rem;
|
||||
width: 0.5625rem;
|
||||
height: 1.25rem;
|
||||
transition: opacity 200ms;
|
||||
@ -427,14 +445,6 @@
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.story-reaction-button {
|
||||
--custom-emoji-size: 1.5rem;
|
||||
}
|
||||
|
||||
.story-reaction-heart {
|
||||
color: var(--color-heart);
|
||||
}
|
||||
}
|
||||
|
||||
> .input-group {
|
||||
|
||||
@ -94,6 +94,7 @@ import { buildCustomEmojiHtml } from '../middle/composer/helpers/customEmoji';
|
||||
import buildAttachment, { prepareAttachmentsToSend } from '../middle/composer/helpers/buildAttachment';
|
||||
import applyIosAutoCapitalizationFix from '../middle/composer/helpers/applyIosAutoCapitalizationFix';
|
||||
import renderText from './helpers/renderText';
|
||||
import { REM } from './helpers/mediaDimensions';
|
||||
|
||||
import useLastCallback from '../../hooks/useLastCallback';
|
||||
import useSignal from '../../hooks/useSignal';
|
||||
@ -259,6 +260,7 @@ const MESSAGE_MAX_LENGTH = 4096;
|
||||
const SENDING_ANIMATION_DURATION = 350;
|
||||
const MOUNT_ANIMATION_DURATION = 430;
|
||||
|
||||
const REACTION_SIZE = 1.5 * REM;
|
||||
const HEART_REACTION: ApiReaction = {
|
||||
emoticon: '❤',
|
||||
};
|
||||
@ -1532,32 +1534,32 @@ const Composer: FC<OwnProps & StateProps> = ({
|
||||
onClick={handleBotCommandSelect}
|
||||
onClose={closeBotCommandTooltip}
|
||||
/>
|
||||
<div className={buildClassName('composer-wrapper', isInMessageList && 'full-featured')}>
|
||||
<div className={buildClassName('composer-wrapper', isInStoryViewer && 'with-story-tweaks')}>
|
||||
<svg className="svg-appendix" width="9" height="20">
|
||||
<defs>
|
||||
<filter
|
||||
x="-50%"
|
||||
y="-14.7%"
|
||||
width="200%"
|
||||
height="141.2%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="composerAppendix"
|
||||
>
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0"
|
||||
in="shadowBlurOuter1"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#composerAppendix)" />
|
||||
<path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#FFF" className="corner" />
|
||||
</g>
|
||||
</svg>
|
||||
{isInMessageList && (
|
||||
<>
|
||||
<svg className="svg-appendix" width="9" height="20">
|
||||
<defs>
|
||||
<filter
|
||||
x="-50%"
|
||||
y="-14.7%"
|
||||
width="200%"
|
||||
height="141.2%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="composerAppendix"
|
||||
>
|
||||
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0"
|
||||
in="shadowBlurOuter1"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#composerAppendix)" />
|
||||
<path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#FFF" className="corner" />
|
||||
</g>
|
||||
</svg>
|
||||
<InlineBotTooltip
|
||||
isOpen={isInlineBotTooltipOpen}
|
||||
botId={inlineBotId}
|
||||
@ -1684,33 +1686,6 @@ const Composer: FC<OwnProps & StateProps> = ({
|
||||
onFocus={markInputHasFocus}
|
||||
onBlur={unmarkInputHasFocus}
|
||||
/>
|
||||
{isInStoryViewer && !activeVoiceRecording && (
|
||||
<Button
|
||||
round
|
||||
className="story-reaction-button"
|
||||
color="translucent"
|
||||
onClick={handleLikeStory}
|
||||
onContextMenu={handleStoryPickerContextMenu}
|
||||
onMouseDown={handleBeforeStoryPickerContextMenu}
|
||||
ariaLabel={lang('AccDescrLike')}
|
||||
ref={storyReactionRef}
|
||||
>
|
||||
{sentStoryReaction && !isSentStoryReactionHeart && (
|
||||
<ReactionStaticEmoji
|
||||
reaction={sentStoryReaction}
|
||||
availableReactions={availableReactions}
|
||||
/>
|
||||
)}
|
||||
<i
|
||||
className={buildClassName(
|
||||
'icon',
|
||||
!sentStoryReaction && 'icon-heart-outline',
|
||||
isSentStoryReactionHeart && 'icon-heart story-reaction-heart',
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
{isInMessageList && (
|
||||
<>
|
||||
{isInlineBotLoading && Boolean(inlineBotId) && (
|
||||
@ -1820,6 +1795,35 @@ const Composer: FC<OwnProps & StateProps> = ({
|
||||
<i className="icon icon-delete" />
|
||||
</Button>
|
||||
)}
|
||||
{isInStoryViewer && !activeVoiceRecording && (
|
||||
<Button
|
||||
round
|
||||
className="story-reaction-button"
|
||||
color="secondary"
|
||||
onClick={handleLikeStory}
|
||||
onContextMenu={handleStoryPickerContextMenu}
|
||||
onMouseDown={handleBeforeStoryPickerContextMenu}
|
||||
ariaLabel={lang('AccDescrLike')}
|
||||
ref={storyReactionRef}
|
||||
>
|
||||
{sentStoryReaction && !isSentStoryReactionHeart ? (
|
||||
<ReactionStaticEmoji
|
||||
reaction={sentStoryReaction}
|
||||
availableReactions={availableReactions}
|
||||
size={REACTION_SIZE}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className={buildClassName(
|
||||
'icon',
|
||||
'icon-heart',
|
||||
isSentStoryReactionHeart && 'story-reaction-heart',
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
ref={mainButtonRef}
|
||||
round
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user