From c244a7bd55228eeae70a85af3bd70566e66661bd Mon Sep 17 00:00:00 2001 From: streamer45 Date: Fri, 26 Apr 2024 13:29:49 -0600 Subject: [PATCH 1/6] Tweaks to expanded view --- webapp/src/components/badge.tsx | 24 ++- .../components/expanded_view/component.scss | 10 -- .../components/expanded_view/component.tsx | 142 ++++++++++++------ .../expanded_view/controls_button.tsx | 4 +- .../expanded_view/in_call_prompt.tsx | 1 + .../expanded_view/reaction_button.tsx | 4 +- .../expanded_incoming_call_container.tsx | 6 +- 7 files changed, 125 insertions(+), 66 deletions(-) delete mode 100644 webapp/src/components/expanded_view/component.scss diff --git a/webapp/src/components/badge.tsx b/webapp/src/components/badge.tsx index b4c929630..fb61ffb0f 100644 --- a/webapp/src/components/badge.tsx +++ b/webapp/src/components/badge.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import {useIntl} from 'react-intl'; import styled, {css} from 'styled-components'; @@ -6,7 +6,9 @@ export type Props = { id: string, text: string, textSize: number, + lineHeight?: number, icon: React.ReactNode, + hoverIcon?: React.ReactNode, gap: number, iconFill?: string, bgColor?: string, @@ -17,11 +19,20 @@ export type Props = { } export function Badge(props: Props) { + const [hoverState, setHoverState] = useState(false); + + const toggleHover = () => { + setHoverState(!hoverState); + }; + return ( } - {!props.loading && + + {!props.loading && !hoverState && {props.icon} } + + {!props.loading && hoverState && + {props.hoverIcon || props.icon} + } + {props.text} ); @@ -40,6 +57,7 @@ export function Badge(props: Props) { type ContainerProps = { $bgColor?: string, $size: number, + $lineHeight: number, $margin?: string, $padding?: string, $color?: string, @@ -54,7 +72,7 @@ const Container = styled.div` margin: ${({$margin}) => $margin || 0}; padding: ${({$padding}) => $padding || 0}; font-size: ${({$size}) => $size}px; - line-height: ${({$size}) => $size}px; + line-height: ${({$lineHeight}) => $lineHeight}px; color: ${({$color}) => $color || 'currentColor'}; `; diff --git a/webapp/src/components/expanded_view/component.scss b/webapp/src/components/expanded_view/component.scss deleted file mode 100644 index aef040d2a..000000000 --- a/webapp/src/components/expanded_view/component.scss +++ /dev/null @@ -1,10 +0,0 @@ -.button-close { - border: none; - color: white; - background: none; - padding: 4px; - &:hover { - background: rgba(255, 255, 255, 0.16); - color: white; - } -} diff --git a/webapp/src/components/expanded_view/component.tsx b/webapp/src/components/expanded_view/component.tsx index bb93a2ce3..b2bfdfaf4 100644 --- a/webapp/src/components/expanded_view/component.tsx +++ b/webapp/src/components/expanded_view/component.tsx @@ -3,8 +3,6 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import './component.scss'; - import {mosThreshold} from '@calls/common'; import {UserSessionState} from '@calls/common/lib/types'; import {Channel} from '@mattermost/types/channels'; @@ -177,14 +175,6 @@ export default class ExpandedView extends React.PureComponent { headerSpreader: { marginRight: 'auto', }, - closeViewButton: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: '40px', - height: '40px', - borderRadius: '4px', - }, participants: { display: 'grid', overflow: 'auto', @@ -195,23 +185,26 @@ export default class ExpandedView extends React.PureComponent { display: 'flex', alignItems: 'center', justifyContent: 'center', - padding: '16px 8px', + padding: '12px', width: '100%', }, centerControls: { display: 'flex', alignItems: 'center', justifyContent: 'center', + gap: '8px', }, topContainer: { display: 'flex', alignItems: 'center', justifyContent: 'center', - fontSize: '16px', - lineHeight: '24px', + fontSize: '14px', + lineHeight: '20px', fontWeight: 600, + padding: '8px', + margin: '0 12px', + gap: '4px', height: '56px', - padding: '0 20px', }, screenContainer: { display: 'flex', @@ -904,19 +897,46 @@ export default class ExpandedView extends React.PureComponent { return null; } - return ( + const badge = ( )} + hoverIcon={()} bgColor={hasRecStarted ? '#D24B4E' : 'rgba(221, 223, 228, 0.04)'} loading={!hasRecStarted} /> ); + + if (hasRecStarted) { + const {formatMessage} = this.props.intl; + return ( + + {formatMessage({defaultMessage: 'Click to stop'})} + + } + > + + + + ); + } + + return badge; }; render() { @@ -1006,11 +1026,10 @@ export default class ExpandedView extends React.PureComponent {
{this.renderRecordingBadge()} - {untranslatable('•')} - + {untranslatable('•')} + {formatMessage({defaultMessage: '{count, plural, =1 {# participant} other {# participants}}'}, {count: this.props.sessions.length})} @@ -1025,19 +1044,17 @@ export default class ExpandedView extends React.PureComponent { } > - +
@@ -1065,7 +1082,7 @@ export default class ExpandedView extends React.PureComponent { id='calls-expanded-view-controls' style={this.style.controls} > -
+
this.onParticipantsListToggle()} @@ -1078,12 +1095,11 @@ export default class ExpandedView extends React.PureComponent { icon={ } - margin='0' />
@@ -1103,8 +1119,8 @@ export default class ExpandedView extends React.PureComponent { icon={ } @@ -1126,8 +1142,8 @@ export default class ExpandedView extends React.PureComponent { icon={ } @@ -1147,7 +1163,7 @@ export default class ExpandedView extends React.PureComponent { bgColorHover={isRecording ? 'rgba(var(--dnd-indicator-rgb), 0.20)' : ''} iconFill={isRecording ? 'rgba(var(--dnd-indicator-rgb), 0.80)' : ''} iconFillHover={isRecording ? 'var(--dnd-indicator)' : ''} - icon={} + icon={} /> } @@ -1183,7 +1199,7 @@ export default class ExpandedView extends React.PureComponent { icon={
{!chatDisabled && isChatUnread && ( @@ -1194,7 +1210,7 @@ export default class ExpandedView extends React.PureComponent { /> )}
-
+
this.onDisconnectClick()} @@ -1206,10 +1222,9 @@ export default class ExpandedView extends React.PureComponent { iconFillHover={'white'} icon={ } - margin='0' />
@@ -1259,7 +1274,9 @@ const isActiveElementInteractable = () => { const UnreadIndicator = ({mentions}: { mentions?: number }) => { return ( - + {mentions && {mentions > 99 ? untranslatable('99+') : mentions} } @@ -1269,11 +1286,13 @@ const UnreadIndicator = ({mentions}: { mentions?: number }) => { const MentionsCounter = styled.span` font-weight: 700; - font-size: 8px; + font-size: 10px; + line-height: 11px; color: var(--button-color); + padding: 0 2.5px; `; -const UnreadDot = styled.span` +const UnreadDot = styled.span<{$padding: string}>` position: absolute; display: flex; justify-content: center; @@ -1281,11 +1300,11 @@ const UnreadDot = styled.span` z-index: 1; top: -4px; right: -4px; - width: 15px; - height: 12px; - background: var(--button-bg); + min-width: 8px; + min-height: 8px; + padding: ${({$padding}) => $padding || 0}; + background: var(--sidebar-text-active-border); border-radius: 8px; - border: 2px solid white; `; const ExpandedViewGlobalsStyle = createGlobalStyle<{ callThreadSelected: boolean }>` @@ -1344,12 +1363,43 @@ const CloseButton = styled.button` } `; +const CloseViewButton = styled.button` + display: flex; + align-items: center; + justify-content: center; + background: none; + width: 40px; + height: 40px; + border-radius: 4px; + + svg { + fill: rgba(255, 255, 255, 0.64); + } + + &:hover { + background: rgba(255, 255, 255, 0.08); + + svg { + fill: rgba(255, 255, 255, 0.72); + } + } + + &:active { + background: rgba(255, 255, 255, 0.16); + + svg { + fill: rgba(255, 255, 255, 0.80); + } + } +`; + const ReactionOverlay = styled.div` position: absolute; bottom: 96px; display: flex; flex-direction: column; gap: 12px; + pointer-events: none; `; const LiveCaptionsOverlay = styled.div` diff --git a/webapp/src/components/expanded_view/controls_button.tsx b/webapp/src/components/expanded_view/controls_button.tsx index 791dd55ba..df0b3413c 100644 --- a/webapp/src/components/expanded_view/controls_button.tsx +++ b/webapp/src/components/expanded_view/controls_button.tsx @@ -102,9 +102,9 @@ const ButtonContainer = styled.button` flex-direction: column; align-items: center; justify-content: center; - margin: ${({$margin}) => $margin || '0 8px'}; + margin: ${({$margin}) => $margin || '0'}; border-radius: 8px; - padding: 12px; + padding: 10px; border: none; background: ${({$bgColor}) => $bgColor || 'rgba(var(--button-color-rgb), 0.08)'}; diff --git a/webapp/src/components/expanded_view/in_call_prompt.tsx b/webapp/src/components/expanded_view/in_call_prompt.tsx index 33a9b96c7..b746e9ce4 100644 --- a/webapp/src/components/expanded_view/in_call_prompt.tsx +++ b/webapp/src/components/expanded_view/in_call_prompt.tsx @@ -86,6 +86,7 @@ const Prompt = styled.div` padding: 24px 22px; max-width: 480px; z-index: 1; + pointer-events: all; `; const Main = styled.div` diff --git a/webapp/src/components/expanded_view/reaction_button.tsx b/webapp/src/components/expanded_view/reaction_button.tsx index 4e96cc589..dc8693c17 100644 --- a/webapp/src/components/expanded_view/reaction_button.tsx +++ b/webapp/src/components/expanded_view/reaction_button.tsx @@ -207,8 +207,8 @@ export const ReactionButton = forwardRef(({trackEvent, isHandRaised}: Props, ref icon={ } diff --git a/webapp/src/components/incoming_calls/expanded_incoming_call_container.tsx b/webapp/src/components/incoming_calls/expanded_incoming_call_container.tsx index f762b5a90..03e303430 100644 --- a/webapp/src/components/incoming_calls/expanded_incoming_call_container.tsx +++ b/webapp/src/components/incoming_calls/expanded_incoming_call_container.tsx @@ -29,10 +29,10 @@ const Container = styled.div` display: flex; flex-direction: column; align-self: flex-start; - margin-top: 8px; gap: 5px; - margin-right: 7px; - z-index: 1; + margin-left: auto; + margin-right: 4px; + z-index: 10; `; const StyledCallIncoming = styled(CallIncomingCondensed)` From 1a5b0bef32b8f197f4151015ba8e0faff6467f92 Mon Sep 17 00:00:00 2001 From: streamer45 Date: Fri, 26 Apr 2024 13:35:39 -0600 Subject: [PATCH 2/6] Update e2e snapshots --- .../expanded-view-controls-chromium-linux.png | Bin 6398 -> 7327 bytes .../expanded-view-controls-webkit-linux.png | Bin 6398 -> 7327 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-chromium-linux.png b/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-chromium-linux.png index 03540a2dadcdf6655dbff53e9185ed42e9860100..d71676fced8bc58b129d91ab1e29fdfaf627ace0 100644 GIT binary patch literal 7327 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 HF$wq|p5NLS literal 6398 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 diff --git a/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-webkit-linux.png b/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-webkit-linux.png index 03540a2dadcdf6655dbff53e9185ed42e9860100..d71676fced8bc58b129d91ab1e29fdfaf627ace0 100644 GIT binary patch literal 7327 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 HF$wq|p5NLS literal 6398 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 From 5ff9fd35932f314acc98964f18e86ca460730588 Mon Sep 17 00:00:00 2001 From: streamer45 Date: Fri, 26 Apr 2024 14:02:10 -0600 Subject: [PATCH 3/6] Update translations --- webapp/i18n/en.json | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 45d2a5d83..dc65a7d74 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -89,6 +89,7 @@ "S2W9y3": "You're recording", "SmSeXX": "Do you want to leave and join a call with {users}?", "Ssxh83": "Unable to find a valid audio input device. Try plugging in an audio input device.", + "TAIiAz": "Click to stop", "TDaF6J": "Dismiss", "TdTXXf": "Learn more", "Tg9Lia": "Calls is not currently enabled", From 429bdc1ba673e3f19bbac555f1512d461c2dc02c Mon Sep 17 00:00:00 2001 From: streamer45 Date: Tue, 30 Apr 2024 13:32:37 -0600 Subject: [PATCH 4/6] More tweaks --- .../components/expanded_view/component.tsx | 32 ++++++++++--------- .../expanded_view/controls_button.tsx | 3 +- .../expanded_view/reaction_button.tsx | 4 +-- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/webapp/src/components/expanded_view/component.tsx b/webapp/src/components/expanded_view/component.tsx index b2bfdfaf4..d0b1ff337 100644 --- a/webapp/src/components/expanded_view/component.tsx +++ b/webapp/src/components/expanded_view/component.tsx @@ -1050,8 +1050,8 @@ export default class ExpandedView extends React.PureComponent { > @@ -1095,8 +1095,8 @@ export default class ExpandedView extends React.PureComponent { icon={ } @@ -1119,8 +1119,8 @@ export default class ExpandedView extends React.PureComponent { icon={ } @@ -1142,8 +1142,8 @@ export default class ExpandedView extends React.PureComponent { icon={ } @@ -1163,7 +1163,7 @@ export default class ExpandedView extends React.PureComponent { bgColorHover={isRecording ? 'rgba(var(--dnd-indicator-rgb), 0.20)' : ''} iconFill={isRecording ? 'rgba(var(--dnd-indicator-rgb), 0.80)' : ''} iconFillHover={isRecording ? 'var(--dnd-indicator)' : ''} - icon={} + icon={} /> } @@ -1199,7 +1199,7 @@ export default class ExpandedView extends React.PureComponent { icon={
{!chatDisabled && isChatUnread && ( @@ -1217,12 +1217,15 @@ export default class ExpandedView extends React.PureComponent { tooltipText={formatMessage({defaultMessage: 'Leave call'})} shortcut={reverseKeyMappings.popout[LEAVE_CALL][0]} bgColor={'var(--dnd-indicator)'} - bgColorHover={'var(--dnd-indicator)'} - iconFill={'rgba(255, 255, 255, 0.80)'} + bgColorHover={'linear-gradient(0deg, var(--error-text), var(--error-text)), linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))'} + iconFill={'white'} iconFillHover={'white'} + + + icon={ } /> @@ -1368,8 +1371,7 @@ const CloseViewButton = styled.button` align-items: center; justify-content: center; background: none; - width: 40px; - height: 40px; + padding: 10px; border-radius: 4px; svg { diff --git a/webapp/src/components/expanded_view/controls_button.tsx b/webapp/src/components/expanded_view/controls_button.tsx index df0b3413c..662248623 100644 --- a/webapp/src/components/expanded_view/controls_button.tsx +++ b/webapp/src/components/expanded_view/controls_button.tsx @@ -104,12 +104,13 @@ const ButtonContainer = styled.button` justify-content: center; margin: ${({$margin}) => $margin || '0'}; border-radius: 8px; - padding: 10px; + padding: 12px; border: none; background: ${({$bgColor}) => $bgColor || 'rgba(var(--button-color-rgb), 0.08)'}; &:hover { background: ${({$bgColorHover}) => $bgColorHover || 'rgba(var(--button-color-rgb), 0.12)'}; + background-blend-mode: multiply; svg { fill: ${({$fillHover}) => $fillHover || 'var(--button-color)'}; diff --git a/webapp/src/components/expanded_view/reaction_button.tsx b/webapp/src/components/expanded_view/reaction_button.tsx index dc8693c17..9685f8c15 100644 --- a/webapp/src/components/expanded_view/reaction_button.tsx +++ b/webapp/src/components/expanded_view/reaction_button.tsx @@ -207,8 +207,8 @@ export const ReactionButton = forwardRef(({trackEvent, isHandRaised}: Props, ref icon={ } From a16d896125260e2872adcb02d312906e4c873275 Mon Sep 17 00:00:00 2001 From: streamer45 Date: Tue, 30 Apr 2024 15:06:19 -0600 Subject: [PATCH 5/6] Fancy border --- .../components/expanded_view/component.tsx | 31 ++--------------- .../expanded_view/controls_button.tsx | 34 +++++++++++++++++++ 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/webapp/src/components/expanded_view/component.tsx b/webapp/src/components/expanded_view/component.tsx index d0b1ff337..6f43ef98e 100644 --- a/webapp/src/components/expanded_view/component.tsx +++ b/webapp/src/components/expanded_view/component.tsx @@ -67,7 +67,7 @@ import { import styled, {createGlobalStyle, css} from 'styled-components'; import CallParticipant from './call_participant'; -import ControlsButton from './controls_button'; +import ControlsButton, {CallThreadIcon, MentionsCounter, UnreadDot} from './controls_button'; import GlobalBanner from './global_banner'; import {ReactionButton, ReactionButtonRef} from './reaction_button'; import RecordingInfoPrompt from './recording_info_prompt'; @@ -1197,14 +1197,14 @@ export default class ExpandedView extends React.PureComponent { iconFill={showChatThread ? 'rgba(var(--calls-bg-rgb), 0.80)' : ''} iconFillHover={showChatThread ? 'var(--calls-bg)' : ''} icon={ -
+ {!chatDisabled && isChatUnread && ( )} -
+ } unavailable={chatDisabled} /> @@ -1221,8 +1221,6 @@ export default class ExpandedView extends React.PureComponent { iconFill={'white'} iconFillHover={'white'} - - icon={ { ); }; -const MentionsCounter = styled.span` - font-weight: 700; - font-size: 10px; - line-height: 11px; - color: var(--button-color); - padding: 0 2.5px; -`; - -const UnreadDot = styled.span<{$padding: string}>` - position: absolute; - display: flex; - justify-content: center; - align-items: center; - z-index: 1; - top: -4px; - right: -4px; - min-width: 8px; - min-height: 8px; - padding: ${({$padding}) => $padding || 0}; - background: var(--sidebar-text-active-border); - border-radius: 8px; -`; - const ExpandedViewGlobalsStyle = createGlobalStyle<{ callThreadSelected: boolean }>` #root { > #global-header, diff --git a/webapp/src/components/expanded_view/controls_button.tsx b/webapp/src/components/expanded_view/controls_button.tsx index 662248623..ec74d3f6c 100644 --- a/webapp/src/components/expanded_view/controls_button.tsx +++ b/webapp/src/components/expanded_view/controls_button.tsx @@ -87,6 +87,36 @@ export default function ControlsButton(props: Props) { ); } +export const MentionsCounter = styled.span` + font-weight: 700; + font-size: 11px; + line-height: 12px; + color: var(--button-color); + padding: 0 2.5px; +`; + +export const UnreadDot = styled.span<{$padding: string}>` + position: absolute; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + top: 0; + right: 0; + transform: translate(50%, -50%); + min-width: 8px; + min-height: 8px; + padding: ${({$padding}) => $padding || 0}; + background: var(--sidebar-text-active-border); + border-radius: 8px; + border: 2px solid color-mix(in srgb, var(--calls-bg), white 8%); + box-sizing: content-box; +`; + +export const CallThreadIcon = styled.div` + position: relative; +`; + type ButtonContainerProps = { $bgColor: string, $bgColorHover?: string, @@ -117,6 +147,10 @@ const ButtonContainer = styled.button` } } + &:hover ${UnreadDot} { + border: 2px solid color-mix(in srgb, var(--calls-bg), white 12%); + } + svg { fill: ${({$fill}) => $fill || 'rgba(var(--button-color-rgb), 0.56)'}; ${({$isDisabled, $isUnavailable}) => ($isDisabled || $isUnavailable) && css` From cfc1f504fd3ab0b96a6a6998180ae68a650c48d5 Mon Sep 17 00:00:00 2001 From: streamer45 Date: Tue, 30 Apr 2024 15:10:39 -0600 Subject: [PATCH 6/6] Update e2e snapshots --- .../expanded-view-controls-chromium-linux.png | Bin 7327 -> 6108 bytes .../expanded-view-controls-webkit-linux.png | Bin 7327 -> 6108 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-chromium-linux.png b/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-chromium-linux.png index d71676fced8bc58b129d91ab1e29fdfaf627ace0..d20e48750572aeba4246ed64c0f896b77993c630 100644 GIT binary patch literal 6108 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 literal 7327 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 HF$wq|p5NLS diff --git a/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-webkit-linux.png b/e2e/tests/popout.spec.ts-snapshots/expanded-view-controls-webkit-linux.png index d71676fced8bc58b129d91ab1e29fdfaf627ace0..d20e48750572aeba4246ed64c0f896b77993c630 100644 GIT binary patch literal 6108 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 literal 7327 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 HF$wq|p5NLS