diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 9cc5047f47..fc69df6736 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -4161,25 +4161,6 @@ button.module-image__border-overlay:focus { } } -.module-calling-tools { - position: absolute; - top: calc(32px + var(--title-bar-drag-area-height)); - inset-inline-end: 0; - display: flex; - - &__button { - margin-inline-end: 12px; - } - - &__button:last-child { - margin-inline-end: 24px; - } - .ContextMenu__container { - background: none; - text-wrap: nowrap; - } -} - .module-calling-pip { backface-visibility: hidden; background-color: variables.$color-gray-95; diff --git a/stylesheets/components/CallSettingsButton.scss b/stylesheets/components/CallSettingsButton.scss deleted file mode 100644 index 4546846df4..0000000000 --- a/stylesheets/components/CallSettingsButton.scss +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright 2023 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -@use '../mixins'; -@use '../variables'; - -@mixin CallSettingsButton-icon($path) { - @include mixins.color-svg($path, variables.$color-gray-15); -} - -.CallSettingsButton__Button { - align-items: center; - background-color: variables.$color-gray-78; - border: none; - border-radius: 40px; - display: flex; - height: 36px; - justify-content: center; - outline: none; - width: 36px; - - @include mixins.keyboard-mode { - &:focus { - outline-offset: 1px; - outline: 2px solid variables.$color-ultramarine; - } - } -} - -.CallSettingsButton__Icon { - height: 20px; - width: 20px; - border: none; -} - -.CallSettingsButton__Icon--Cancel { - @include CallSettingsButton-icon('../images/icons/v3/x/x.svg'); -} - -.CallSettingsButton__Icon--SidebarView { - @include CallSettingsButton-icon( - '../images/icons/v3/sidebar_view/sidebar_view.svg' - ); -} - -.CallSettingsButton__Icon--PaginatedView { - @include CallSettingsButton-icon('../images/icons/v3/grid/grid.svg'); -} - -.CallSettingsButton__Icon--Pip { - @include CallSettingsButton-icon('../images/icons/v3/pip/pip.svg'); -} - -.CallSettingsButton__Icon--Settings { - @include CallSettingsButton-icon('../images/icons/v3/settings/settings.svg'); -} - -.CallSettingsButton__Icon--SpeakerView { - @include CallSettingsButton-icon( - '../images/icons/v3/speaker_view/speaker_view.svg' - ); -} diff --git a/stylesheets/components/CallingToast.scss b/stylesheets/components/CallingToast.scss index 9d810077aa..b312e82c96 100644 --- a/stylesheets/components/CallingToast.scss +++ b/stylesheets/components/CallingToast.scss @@ -66,13 +66,3 @@ transform: translateY(-100%); inset-inline-start: 0; } - -.CallingToast__viewChanged { - display: flex; - align-items: center; - gap: 8px; - &__icon { - width: 18px; - height: 18px; - } -} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 8948684ec5..f44a1cccc3 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -47,7 +47,6 @@ $is-storybook: false !default; @use 'components/CallingStatusIndicator.scss'; @use 'components/CallingButton.scss'; @use 'components/CallControls.scss'; -@use 'components/CallSettingsButton.scss'; @use 'components/CallingLobby.scss'; @use 'components/CallingPendingParticipants.scss'; @use 'components/CallingPreCallInfo.scss'; diff --git a/ts/axo/AxoDropdownMenu.dom.tsx b/ts/axo/AxoDropdownMenu.dom.tsx index fc56fedfdc..c491300eac 100644 --- a/ts/axo/AxoDropdownMenu.dom.tsx +++ b/ts/axo/AxoDropdownMenu.dom.tsx @@ -449,14 +449,16 @@ export namespace AxoDropdownMenu { > - + {props.symbol && ( - + )} @@ -518,14 +520,16 @@ export namespace AxoDropdownMenu { > - + {props.symbol && ( - + )} @@ -617,7 +621,7 @@ export namespace AxoDropdownMenu { )} {props.children} - + diff --git a/ts/components/CallScreen.dom.tsx b/ts/components/CallScreen.dom.tsx index 38fe708caf..ff03fdb816 100644 --- a/ts/components/CallScreen.dom.tsx +++ b/ts/components/CallScreen.dom.tsx @@ -29,10 +29,7 @@ import type { SetRendererCanvasType, } from '../state/ducks/calling.preload.ts'; import { Avatar, AvatarSize } from './Avatar.dom.tsx'; -import { - CallingHeader, - getCallViewIconClassname, -} from './CallingHeader.dom.tsx'; +import { CallingHeader, getCallViewModeIcon } from './CallingHeader.dom.tsx'; import { CallingPreCallInfo, RingMode } from './CallingPreCallInfo.dom.tsx'; import { CallingButton, CallingButtonType } from './CallingButton.dom.tsx'; import { Button, ButtonVariant } from './Button.dom.tsx'; @@ -1348,13 +1345,12 @@ function useViewModeChangedToast({ showToast({ key: VIEW_MODE_CHANGED_TOAST_KEY, content: ( -
- + +    {i18n('icu:calling__view_mode--updated')}
), diff --git a/ts/components/CallingHeader.dom.tsx b/ts/components/CallingHeader.dom.tsx index a145399966..d4b414ed91 100644 --- a/ts/components/CallingHeader.dom.tsx +++ b/ts/components/CallingHeader.dom.tsx @@ -2,13 +2,15 @@ // SPDX-License-Identifier: AGPL-3.0-only import type { JSX } from 'react'; +import { useCallback } from 'react'; -import classNames from 'classnames'; import type { LocalizerType } from '../types/Util.std.ts'; import { CallViewMode } from '../types/Calling.std.ts'; -import { Tooltip } from './Tooltip.dom.tsx'; -import { Theme } from '../util/theme.std.ts'; -import { ContextMenu } from './ContextMenu.dom.tsx'; +import { AxoDropdownMenu } from '../axo/AxoDropdownMenu.dom.tsx'; +import { AxoIconButton } from '../axo/AxoIconButton.dom.tsx'; +import { tw } from '../axo/tw.dom.tsx'; +import type { AxoSymbolIconName } from '../axo/_internal/AxoSymbolDefs.generated.std.ts'; +import { missingCaseError } from '../util/missingCaseError.std.ts'; export type PropsType = { callViewMode?: CallViewMode; @@ -31,127 +33,108 @@ export function CallingHeader({ togglePip, toggleSettings, }: PropsType): JSX.Element { + const handleViewModeChange = useCallback( + (value: string) => { + changeCallView?.(value as CallViewMode); + }, + [changeCallView] + ); + return ( -
+
{isGroupCall && participantCount > 2 && callViewMode && changeCallView && ( -
- changeCallView(CallViewMode.Paginated), - value: CallViewMode.Paginated, - }, - { - icon: 'CallSettingsButton__Icon--SidebarView', - label: i18n('icu:calling__view_mode--overflow'), - onClick: () => changeCallView(CallViewMode.Sidebar), - value: CallViewMode.Sidebar, - }, - { - icon: 'CallSettingsButton__Icon--SpeakerView', - label: i18n('icu:calling__view_mode--speaker'), - onClick: () => changeCallView(CallViewMode.Speaker), - value: CallViewMode.Speaker, - }, - ]} - theme={Theme.Dark} - popperOptions={{ - placement: 'bottom', - strategy: 'absolute', - }} - value={ - // If it's Presentation we want to still show Speaker as selected - callViewMode === CallViewMode.Presentation - ? CallViewMode.Speaker - : callViewMode - } - > - + + + + + -
- -
- - -
+ + {i18n('icu:calling__view_mode--paginated')} + + + {i18n('icu:calling__view_mode--overflow')} + + + {i18n('icu:calling__view_mode--speaker')} + + + + )} -
- - - -
+ {togglePip && ( -
- - - -
+ )} {onCancel && ( -
- - - -
+ )}
); } -const CALL_VIEW_MODE_ICON_CLASSNAMES: Record = { - [CallViewMode.Sidebar]: 'CallSettingsButton__Icon--SidebarView', - [CallViewMode.Paginated]: 'CallSettingsButton__Icon--PaginatedView', - [CallViewMode.Speaker]: 'CallSettingsButton__Icon--SpeakerView', - [CallViewMode.Presentation]: 'CallSettingsButton__Icon--SpeakerView', -}; -export function getCallViewIconClassname(viewMode: CallViewMode): string { - return CALL_VIEW_MODE_ICON_CLASSNAMES[viewMode]; +export function getCallViewModeIcon(mode: CallViewMode): AxoSymbolIconName { + switch (mode) { + case CallViewMode.Paginated: + return 'grid'; + case CallViewMode.Sidebar: + return 'grid-sidebar'; + case CallViewMode.Presentation: + case CallViewMode.Speaker: + return 'sidebar'; + default: + throw missingCaseError(mode); + } } diff --git a/ts/test-mock/calling/callMessages_test.docker.node.ts b/ts/test-mock/calling/callMessages_test.docker.node.ts index db3b4544cf..e23d0e6766 100644 --- a/ts/test-mock/calling/callMessages_test.docker.node.ts +++ b/ts/test-mock/calling/callMessages_test.docker.node.ts @@ -193,10 +193,7 @@ describe('callMessages', function callMessages(this: Mocha.Suite) { async function setInputAndOutput(win: Page, input: string, output: string) { debug(`setInputAndOutput input: ${input} output: ${output}`); - await win - .locator('.CallSettingsButton__Button') - .and(win.getByLabel('Settings')) - .click(); + await win.getByLabel('Settings').click(); await win.locator('#audio-input').selectOption(input); await win.locator('#audio-output').selectOption(output); await win.locator('.module-calling-device-selection__close-button').click();