Incoming call bar design updates
This commit is contained in:
Evan Hahn
GitHub
parent
3d8976d030
commit
4b82ac387b
5 changed files with 281 additions and 249 deletions
|
|
@ -5237,153 +5237,6 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
.module-incoming-call {
|
||||
align-items: center;
|
||||
background-color: $color-gray-75;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: var(--title-bar-drag-area-height);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.module-incoming-call__contact {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
||||
&--avatar {
|
||||
margin-bottom: 8px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&--name {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&--name-header {
|
||||
@include font-body-1-bold;
|
||||
color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&--message-text {
|
||||
@include font-body-2;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.module-incoming-call__actions {
|
||||
display: flex;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.module-incoming-call__button {
|
||||
&--accept-video-as-audio {
|
||||
background-color: $color-gray-45;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/video-off-solid-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--accept-video {
|
||||
background-color: $color-accent-green;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg('../images/icons/v2/video-solid-24.svg', $color-white);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--accept-audio {
|
||||
background-color: $color-accent-green;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-right-solid-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--decline {
|
||||
background-color: $color-accent-red;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg('../images/icons/v2/phone-down-24.svg', $color-white);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-incoming-call__button,
|
||||
.module-calling-button__icon {
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
|
|
|
|||
196
stylesheets/components/IncomingCallBar.scss
Normal file
196
stylesheets/components/IncomingCallBar.scss
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.IncomingCallBar {
|
||||
&__container {
|
||||
animation: IncomingCallBar--animation 0.2s forwards ease-out;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
align-items: center;
|
||||
background-color: $color-gray-75;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__contact {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
||||
&--avatar {
|
||||
margin-bottom: 8px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&--name {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&--name-header {
|
||||
@include font-body-1-bold;
|
||||
color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&--message-text {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
@include font-body-2;
|
||||
color: #ffffff;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
border: none;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
outline: none;
|
||||
width: 40px;
|
||||
|
||||
&--accept-video-as-audio {
|
||||
background-color: $color-gray-45;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/video-off-solid-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--accept-video {
|
||||
background-color: $color-accent-green;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/video-solid-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--accept-audio {
|
||||
background-color: $color-accent-green;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-right-solid-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--decline {
|
||||
background-color: $color-accent-red;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@include mouse-mode {
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/phone-down-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes IncomingCallBar--animation {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
top: 22px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
@import './components/GroupDescription.scss';
|
||||
@import './components/GroupDialog.scss';
|
||||
@import './components/GroupInput.scss';
|
||||
@import './components/IncomingCallBar.scss';
|
||||
@import './components/Input.scss';
|
||||
@import './components/MediaQualitySelector.scss';
|
||||
@import './components/MessageAudio.scss';
|
||||
|
|
|
|||
|
|
@ -35,22 +35,6 @@ const defaultProps = {
|
|||
i18n,
|
||||
};
|
||||
|
||||
const permutations = [
|
||||
{
|
||||
title: 'Incoming Call Bar (video)',
|
||||
props: {},
|
||||
},
|
||||
{
|
||||
title: 'Incoming Call Bar (audio)',
|
||||
props: {
|
||||
call: {
|
||||
...defaultProps.call,
|
||||
isVideoCall: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
storiesOf('Components/IncomingCallBar', module)
|
||||
.add('Knobs Playground', () => {
|
||||
const color = select('color', AvatarColors, 'ultramarine');
|
||||
|
|
@ -75,11 +59,10 @@ storiesOf('Components/IncomingCallBar', module)
|
|||
/>
|
||||
);
|
||||
})
|
||||
.add('Iterations', () => {
|
||||
return permutations.map(({ props, title }) => (
|
||||
<>
|
||||
<h3>{title}</h3>
|
||||
<IncomingCallBar {...defaultProps} {...props} />
|
||||
</>
|
||||
));
|
||||
});
|
||||
.add('Incoming Call Bar (video)', () => <IncomingCallBar {...defaultProps} />)
|
||||
.add('Incoming Call Bar (audio)', () => (
|
||||
<IncomingCallBar
|
||||
{...defaultProps}
|
||||
call={{ ...defaultProps.call, isVideoCall: false }}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const CallButton = ({
|
|||
<Tooltip content={tooltipContent} theme={Theme.Dark}>
|
||||
<button
|
||||
aria-label={tooltipContent}
|
||||
className={`module-incoming-call__button module-incoming-call__button--${classSuffix}`}
|
||||
className={`IncomingCallBar__button IncomingCallBar__button--${classSuffix}`}
|
||||
onClick={onClick}
|
||||
tabIndex={tabIndex}
|
||||
type="button"
|
||||
|
|
@ -82,91 +82,90 @@ export const IncomingCallBar = ({
|
|||
} = conversation;
|
||||
|
||||
return (
|
||||
<div className="module-incoming-call">
|
||||
<div className="module-incoming-call__contact">
|
||||
<div className="module-incoming-call__contact--avatar">
|
||||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
avatarPath={avatarPath}
|
||||
color={color || 'ultramarine'}
|
||||
noteToSelf={false}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
isMe={isMe}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
sharedGroupNames={sharedGroupNames}
|
||||
size={52}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-incoming-call__contact--name">
|
||||
<div className="module-incoming-call__contact--name-header">
|
||||
<ContactName
|
||||
<div className="IncomingCallBar__container">
|
||||
<div className="IncomingCallBar__bar">
|
||||
<div className="IncomingCallBar__contact">
|
||||
<div className="IncomingCallBar__contact--avatar">
|
||||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
avatarPath={avatarPath}
|
||||
color={color || 'ultramarine'}
|
||||
noteToSelf={false}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
isMe={isMe}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
sharedGroupNames={sharedGroupNames}
|
||||
size={52}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
dir="auto"
|
||||
className="module-incoming-call__contact--message-text"
|
||||
>
|
||||
{i18n(isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall')}
|
||||
<div className="IncomingCallBar__contact--name">
|
||||
<div className="IncomingCallBar__contact--name-header">
|
||||
<ContactName
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
<div dir="auto" className="IncomingCallBar__contact--message-text">
|
||||
{i18n(isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-incoming-call__actions">
|
||||
{isVideoCall ? (
|
||||
<>
|
||||
<CallButton
|
||||
classSuffix="decline"
|
||||
onClick={() => {
|
||||
declineCall({ conversationId });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('declineCall')}
|
||||
/>
|
||||
<CallButton
|
||||
classSuffix="accept-video-as-audio"
|
||||
onClick={() => {
|
||||
acceptCall({ conversationId, asVideoCall: false });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('acceptCallWithoutVideo')}
|
||||
/>
|
||||
<CallButton
|
||||
classSuffix="accept-video"
|
||||
onClick={() => {
|
||||
acceptCall({ conversationId, asVideoCall: true });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('acceptCall')}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CallButton
|
||||
classSuffix="decline"
|
||||
onClick={() => {
|
||||
declineCall({ conversationId });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('declineCall')}
|
||||
/>
|
||||
<CallButton
|
||||
classSuffix="accept-audio"
|
||||
onClick={() => {
|
||||
acceptCall({ conversationId, asVideoCall: false });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('acceptCall')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className="IncomingCallBar__actions">
|
||||
{isVideoCall ? (
|
||||
<>
|
||||
<CallButton
|
||||
classSuffix="decline"
|
||||
onClick={() => {
|
||||
declineCall({ conversationId });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('declineCall')}
|
||||
/>
|
||||
<CallButton
|
||||
classSuffix="accept-video-as-audio"
|
||||
onClick={() => {
|
||||
acceptCall({ conversationId, asVideoCall: false });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('acceptCallWithoutVideo')}
|
||||
/>
|
||||
<CallButton
|
||||
classSuffix="accept-video"
|
||||
onClick={() => {
|
||||
acceptCall({ conversationId, asVideoCall: true });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('acceptCall')}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CallButton
|
||||
classSuffix="decline"
|
||||
onClick={() => {
|
||||
declineCall({ conversationId });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('declineCall')}
|
||||
/>
|
||||
<CallButton
|
||||
classSuffix="accept-audio"
|
||||
onClick={() => {
|
||||
acceptCall({ conversationId, asVideoCall: false });
|
||||
}}
|
||||
tabIndex={0}
|
||||
tooltipContent={i18n('acceptCall')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue