Wrap calling button text
This commit is contained in:
parent
93310de194
commit
d658dc9025
|
@ -3909,198 +3909,6 @@ button.module-image__border-overlay:focus {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-calling-button__icon {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-calling-button {
|
|
||||||
@mixin icon($path) {
|
|
||||||
@include color-svg($path, $color-white, $mask-origin: padding-box);
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__participants {
|
|
||||||
@include icon('../images/icons/v2/group-solid-24.svg');
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&--container {
|
|
||||||
@include button-reset;
|
|
||||||
border: none;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--shown {
|
|
||||||
background-color: $color-gray-75;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 6px 8px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
margin-top: -6px;
|
|
||||||
margin-right: -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--count {
|
|
||||||
@include font-body-2-bold;
|
|
||||||
margin-left: 5px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__settings {
|
|
||||||
@include icon('../images/icons/v2/settings-solid-16.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&__grid-view {
|
|
||||||
@include icon('../images/icons/v2/grid-view-solid-24.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&__speaker-view {
|
|
||||||
@include icon('../images/icons/v2/speaker-view-solid-24.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&__pip {
|
|
||||||
@include icon('../images/icons/v2/pip-minimize-24.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&__cancel {
|
|
||||||
@include icon('../images/icons/v2/x-24.svg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-calling-button__container {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-left: 0;
|
|
||||||
|
|
||||||
transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
|
|
||||||
@media (prefers-reduced-motion) {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--hidden {
|
|
||||||
margin-left: -100px;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
// The container could be wider than 100px depending on the label. Hiding the label
|
|
||||||
// ensures that the above `margin-left` will completely hide the button.
|
|
||||||
.module-calling-button__label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-calling-button__icon {
|
|
||||||
border-radius: 52px;
|
|
||||||
height: 52px;
|
|
||||||
width: 52px;
|
|
||||||
|
|
||||||
@mixin calling-button-icon($icon, $background-color, $icon-color) {
|
|
||||||
background-color: $background-color;
|
|
||||||
|
|
||||||
div {
|
|
||||||
@include color-svg($icon, $icon-color);
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin calling-button-icon-on($icon) {
|
|
||||||
@include calling-button-icon($icon, $color-white, $color-gray-75);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin calling-button-icon-off($icon) {
|
|
||||||
@include calling-button-icon($icon, $color-white-alpha-40, $color-white);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin calling-button-icon-disabled($icon) {
|
|
||||||
@include calling-button-icon($icon, $color-gray-45, $color-white);
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the on/off states seem backwards, it's because this button reflects "is audio
|
|
||||||
// muted?", not "is audio on?".
|
|
||||||
&--audio {
|
|
||||||
$icon: '../images/icons/v2/mic-off-solid-28.svg';
|
|
||||||
&--on {
|
|
||||||
@include calling-button-icon-off($icon);
|
|
||||||
}
|
|
||||||
&--off {
|
|
||||||
@include calling-button-icon-on($icon);
|
|
||||||
}
|
|
||||||
&--disabled {
|
|
||||||
@include calling-button-icon-disabled($icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--video {
|
|
||||||
$icon: '../images/icons/v2/video-solid-28.svg';
|
|
||||||
&--on {
|
|
||||||
@include calling-button-icon-on($icon);
|
|
||||||
}
|
|
||||||
&--off {
|
|
||||||
@include calling-button-icon-off($icon);
|
|
||||||
}
|
|
||||||
&--disabled {
|
|
||||||
@include calling-button-icon-disabled($icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--hangup {
|
|
||||||
@include calling-button-icon(
|
|
||||||
'../images/icons/v2/phone-down-28.svg',
|
|
||||||
$color-accent-red,
|
|
||||||
$color-white
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--ring {
|
|
||||||
$icon: '../images/icons/v2/ring-28.svg';
|
|
||||||
&--on {
|
|
||||||
@include calling-button-icon-on($icon);
|
|
||||||
}
|
|
||||||
&--off {
|
|
||||||
@include calling-button-icon-off($icon);
|
|
||||||
}
|
|
||||||
&--disabled {
|
|
||||||
@include calling-button-icon-disabled($icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--presenting {
|
|
||||||
$icon: '../images/icons/v2/share-screen-26.svg';
|
|
||||||
&--on {
|
|
||||||
@include calling-button-icon-on($icon);
|
|
||||||
}
|
|
||||||
&--off {
|
|
||||||
@include calling-button-icon-off($icon);
|
|
||||||
}
|
|
||||||
&--disabled {
|
|
||||||
@include calling-button-icon-disabled($icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-calling-button__label {
|
|
||||||
@include font-subtitle;
|
|
||||||
margin-top: 8px;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: lowercase;
|
|
||||||
color: $color-white;
|
|
||||||
@include calling-text-shadow;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes module-ongoing-call__controls--fade-in {
|
@keyframes module-ongoing-call__controls--fade-in {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
@ -0,0 +1,188 @@
|
||||||
|
// Copyright 2021 Signal Messenger, LLC
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
.CallingButton {
|
||||||
|
@mixin icon($path) {
|
||||||
|
@include color-svg($path, $color-white, $mask-origin: padding-box);
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 52px;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
height: 52px;
|
||||||
|
justify-content: center;
|
||||||
|
outline: none;
|
||||||
|
width: 52px;
|
||||||
|
|
||||||
|
@mixin calling-button-icon($icon, $background-color, $icon-color) {
|
||||||
|
background-color: $background-color;
|
||||||
|
|
||||||
|
div {
|
||||||
|
@include color-svg($icon, $icon-color);
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin calling-button-icon-on($icon) {
|
||||||
|
@include calling-button-icon($icon, $color-white, $color-gray-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin calling-button-icon-off($icon) {
|
||||||
|
@include calling-button-icon($icon, $color-white-alpha-40, $color-white);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin calling-button-icon-disabled($icon) {
|
||||||
|
@include calling-button-icon($icon, $color-gray-45, $color-white);
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the on/off states seem backwards, it's because this button reflects "is audio
|
||||||
|
// muted?", not "is audio on?".
|
||||||
|
&--audio {
|
||||||
|
$icon: '../images/icons/v2/mic-off-solid-28.svg';
|
||||||
|
&--on {
|
||||||
|
@include calling-button-icon-off($icon);
|
||||||
|
}
|
||||||
|
&--off {
|
||||||
|
@include calling-button-icon-on($icon);
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
@include calling-button-icon-disabled($icon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--video {
|
||||||
|
$icon: '../images/icons/v2/video-solid-28.svg';
|
||||||
|
&--on {
|
||||||
|
@include calling-button-icon-on($icon);
|
||||||
|
}
|
||||||
|
&--off {
|
||||||
|
@include calling-button-icon-off($icon);
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
@include calling-button-icon-disabled($icon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--hangup {
|
||||||
|
@include calling-button-icon(
|
||||||
|
'../images/icons/v2/phone-down-28.svg',
|
||||||
|
$color-accent-red,
|
||||||
|
$color-white
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--ring {
|
||||||
|
$icon: '../images/icons/v2/ring-28.svg';
|
||||||
|
&--on {
|
||||||
|
@include calling-button-icon-on($icon);
|
||||||
|
}
|
||||||
|
&--off {
|
||||||
|
@include calling-button-icon-off($icon);
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
@include calling-button-icon-disabled($icon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--presenting {
|
||||||
|
$icon: '../images/icons/v2/share-screen-26.svg';
|
||||||
|
&--on {
|
||||||
|
@include calling-button-icon-on($icon);
|
||||||
|
}
|
||||||
|
&--off {
|
||||||
|
@include calling-button-icon-off($icon);
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
@include calling-button-icon-disabled($icon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__participants {
|
||||||
|
@include icon('../images/icons/v2/group-solid-24.svg');
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&--container {
|
||||||
|
@include button-reset;
|
||||||
|
border: none;
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--shown {
|
||||||
|
background-color: $color-gray-75;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
margin-top: -6px;
|
||||||
|
margin-right: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--count {
|
||||||
|
@include font-body-2-bold;
|
||||||
|
margin-left: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__settings {
|
||||||
|
@include icon('../images/icons/v2/settings-solid-16.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&__grid-view {
|
||||||
|
@include icon('../images/icons/v2/grid-view-solid-24.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&__speaker-view {
|
||||||
|
@include icon('../images/icons/v2/speaker-view-solid-24.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pip {
|
||||||
|
@include icon('../images/icons/v2/pip-minimize-24.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cancel {
|
||||||
|
@include icon('../images/icons/v2/x-24.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-right: 12px;
|
||||||
|
max-width: 52px;
|
||||||
|
|
||||||
|
transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--hidden {
|
||||||
|
margin-left: -100px;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
// The container could be wider than 100px depending on the label. Hiding the label
|
||||||
|
// ensures that the above `margin-left` will completely hide the button.
|
||||||
|
.CallingButton__label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
@include font-subtitle;
|
||||||
|
margin-top: 8px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: lowercase;
|
||||||
|
color: $color-white;
|
||||||
|
@include calling-text-shadow;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -37,6 +37,7 @@
|
||||||
@import './components/BadgeSustainerInstructionsDialog.scss';
|
@import './components/BadgeSustainerInstructionsDialog.scss';
|
||||||
@import './components/BetterAvatarBubble.scss';
|
@import './components/BetterAvatarBubble.scss';
|
||||||
@import './components/Button.scss';
|
@import './components/Button.scss';
|
||||||
|
@import './components/CallingButton.scss';
|
||||||
@import './components/CallingLobby.scss';
|
@import './components/CallingLobby.scss';
|
||||||
@import './components/CallingLobbyJoinButton.scss';
|
@import './components/CallingLobbyJoinButton.scss';
|
||||||
@import './components/CallingPreCallInfo.scss';
|
@import './components/CallingPreCallInfo.scss';
|
||||||
|
|
|
@ -111,8 +111,8 @@ export const CallingButton = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
const className = classNames(
|
const className = classNames(
|
||||||
'module-calling-button__icon',
|
'CallingButton__icon',
|
||||||
`module-calling-button__icon--${classNameSuffix}`
|
`CallingButton__icon--${classNameSuffix}`
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -123,8 +123,8 @@ export const CallingButton = ({
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'module-calling-button__container',
|
'CallingButton__container',
|
||||||
!isVisible && 'module-calling-button__container--hidden'
|
!isVisible && 'CallingButton__container--hidden'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
@ -139,10 +139,7 @@ export const CallingButton = ({
|
||||||
>
|
>
|
||||||
<div />
|
<div />
|
||||||
</button>
|
</button>
|
||||||
<label
|
<label className="CallingButton__label" htmlFor={uniqueButtonId}>
|
||||||
className="module-calling-button__label"
|
|
||||||
htmlFor={uniqueButtonId}
|
|
||||||
>
|
|
||||||
{label}
|
{label}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -55,18 +55,14 @@ export const CallingHeader = ({
|
||||||
aria-label={i18n('calling__participants', [
|
aria-label={i18n('calling__participants', [
|
||||||
String(participantCount),
|
String(participantCount),
|
||||||
])}
|
])}
|
||||||
className={classNames(
|
className={classNames('CallingButton__participants--container', {
|
||||||
'module-calling-button__participants--container',
|
'CallingButton__participants--shown': showParticipantsList,
|
||||||
{
|
})}
|
||||||
'module-calling-button__participants--shown':
|
|
||||||
showParticipantsList,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
onClick={toggleParticipants}
|
onClick={toggleParticipants}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<i className="module-calling-button__participants" />
|
<i className="CallingButton__participants" />
|
||||||
<span className="module-calling-button__participants--count">
|
<span className="CallingButton__participants--count">
|
||||||
{participantCount}
|
{participantCount}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -80,7 +76,7 @@ export const CallingHeader = ({
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-label={i18n('callingDeviceSelection__settings')}
|
aria-label={i18n('callingDeviceSelection__settings')}
|
||||||
className="module-calling-button__settings"
|
className="CallingButton__settings"
|
||||||
onClick={toggleSettings}
|
onClick={toggleSettings}
|
||||||
type="button"
|
type="button"
|
||||||
/>
|
/>
|
||||||
|
@ -104,8 +100,8 @@ export const CallingHeader = ({
|
||||||
)}
|
)}
|
||||||
className={
|
className={
|
||||||
isInSpeakerView
|
isInSpeakerView
|
||||||
? 'module-calling-button__grid-view'
|
? 'CallingButton__grid-view'
|
||||||
: 'module-calling-button__speaker-view'
|
: 'CallingButton__speaker-view'
|
||||||
}
|
}
|
||||||
onClick={toggleSpeakerView}
|
onClick={toggleSpeakerView}
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -118,7 +114,7 @@ export const CallingHeader = ({
|
||||||
<Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
|
<Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
|
||||||
<button
|
<button
|
||||||
aria-label={i18n('calling__pip--on')}
|
aria-label={i18n('calling__pip--on')}
|
||||||
className="module-calling-button__pip"
|
className="CallingButton__pip"
|
||||||
onClick={togglePip}
|
onClick={togglePip}
|
||||||
type="button"
|
type="button"
|
||||||
/>
|
/>
|
||||||
|
@ -130,7 +126,7 @@ export const CallingHeader = ({
|
||||||
<Tooltip content={i18n('cancel')} theme={Theme.Dark}>
|
<Tooltip content={i18n('cancel')} theme={Theme.Dark}>
|
||||||
<button
|
<button
|
||||||
aria-label={i18n('cancel')}
|
aria-label={i18n('cancel')}
|
||||||
className="module-calling-button__cancel"
|
className="CallingButton__cancel"
|
||||||
onClick={onCancel}
|
onClick={onCancel}
|
||||||
type="button"
|
type="button"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue