Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-17 23:34:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

View Once UI Updates

Browse Source
This commit is contained in:
yash-signal
2026-03-05 13:01:26 -06:00
committed by GitHub
parent 295b480329
commit 1a70c794e4
8 changed files with 102 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ts/components/CompositionInput.dom.tsx
View File

@@ -1084,6 +1084,7 @@ export function CompositionInput(props: Props): React.ReactElement {
<AxoSymbol.Icon
size={20}
symbol={isViewOnceActive ? 'viewonce' : 'viewonce-slash'}
weight={300}
label={null}
/>
</button>

1
ts/components/MediaEditor.dom.tsx
View File

@@ -1380,6 +1380,7 @@ export function MediaEditor({
i18n={i18n}
isHighQuality={localIsHighQuality}
onSelectQuality={handleSelectQuality}
theme={pickerTheme}
/>
</div>
)}

135
ts/components/MediaQualitySelector.dom.tsx
View File

@@ -6,6 +6,7 @@ import React, { useCallback, useRef, useState } from 'react';
import classNames from 'classnames';
import { Popover } from 'radix-ui';
import type { LocalizerType } from '../types/Util.std.js';
import { ThemeType } from '../types/Util.std.js';
import { AxoIconButton } from '../axo/AxoIconButton.dom.js';
export type PropsType = {
@@ -13,6 +14,7 @@ export type PropsType = {
i18n: LocalizerType;
isHighQuality: boolean;
onSelectQuality: (conversationId: string, isHQ: boolean) => unknown;
theme?: ThemeType;
};
export function MediaQualitySelector({
@@ -20,6 +22,7 @@ export function MediaQualitySelector({
i18n,
isHighQuality,
onSelectQuality,
theme,
}: PropsType): React.JSX.Element {
const [open, setOpen] = useState(false);
const standardRef = useRef<HTMLButtonElement>(null);
@@ -56,78 +59,88 @@ export function MediaQualitySelector({
variant="borderless-secondary"
size="md"
symbol={isHighQuality ? 'hd' : 'hd-slash'}
iconWeight={300}
label={i18n('icu:MediaQualitySelector--button')}
tooltip={false}
/>
</Popover.Trigger>
{open && (
<Popover.Portal>
<Popover.Content
className="MediaQualitySelector__popper"
side="top"
align="start"
sideOffset={4}
onOpenAutoFocus={handleOpenAutoFocus}
onKeyDown={handleContentKeyDown}
<div
className={classNames({
'light-theme': theme === ThemeType.light,
'dark-theme': theme === ThemeType.dark,
})}
>
<div className="MediaQualitySelector__title">
{i18n('icu:MediaQualitySelector--title')}
</div>
<button
ref={standardRef}
aria-label={i18n(
'icu:MediaQualitySelector--standard-quality-title'
)}
className="MediaQualitySelector__option"
type="button"
onClick={() => {
onSelectQuality(conversationId, false);
setOpen(false);
}}
<Popover.Content
className="MediaQualitySelector__popper"
side="top"
align="start"
sideOffset={4}
onOpenAutoFocus={handleOpenAutoFocus}
onKeyDown={handleContentKeyDown}
>
<div
className={classNames({
'MediaQualitySelector__option--checkmark': true,
'MediaQualitySelector__option--selected': !isHighQuality,
})}
/>
<div>
<div className="MediaQualitySelector__option--title">
{i18n('icu:MediaQualitySelector--standard-quality-title')}
</div>
<div className="MediaQualitySelector__option--description">
{i18n(
'icu:MediaQualitySelector--standard-quality-description'
)}
</div>
<div className="MediaQualitySelector__title">
{i18n('icu:MediaQualitySelector--title')}
</div>
</button>
<button
ref={highRef}
aria-label={i18n('icu:MediaQualitySelector--high-quality-title')}
className="MediaQualitySelector__option"
type="button"
onClick={() => {
onSelectQuality(conversationId, true);
setOpen(false);
}}
>
<div
className={classNames({
'MediaQualitySelector__option--checkmark': true,
'MediaQualitySelector__option--selected': isHighQuality,
})}
/>
<div>
<div className="MediaQualitySelector__option--title">
{i18n('icu:MediaQualitySelector--high-quality-title')}
<button
ref={standardRef}
aria-label={i18n(
'icu:MediaQualitySelector--standard-quality-title'
)}
className="MediaQualitySelector__option"
type="button"
onClick={() => {
onSelectQuality(conversationId, false);
setOpen(false);
}}
>
<div
className={classNames({
'MediaQualitySelector__option--checkmark': true,
'MediaQualitySelector__option--selected': !isHighQuality,
})}
/>
<div>
<div className="MediaQualitySelector__option--title">
{i18n('icu:MediaQualitySelector--standard-quality-title')}
</div>
<div className="MediaQualitySelector__option--description">
{i18n(
'icu:MediaQualitySelector--standard-quality-description'
)}
</div>
</div>
<div className="MediaQualitySelector__option--description">
{i18n('icu:MediaQualitySelector--high-quality-description')}
</button>
<button
ref={highRef}
aria-label={i18n(
'icu:MediaQualitySelector--high-quality-title'
)}
className="MediaQualitySelector__option"
type="button"
onClick={() => {
onSelectQuality(conversationId, true);
setOpen(false);
}}
>
<div
className={classNames({
'MediaQualitySelector__option--checkmark': true,
'MediaQualitySelector__option--selected': isHighQuality,
})}
/>
<div>
<div className="MediaQualitySelector__option--title">
{i18n('icu:MediaQualitySelector--high-quality-title')}
</div>
<div className="MediaQualitySelector__option--description">
{i18n('icu:MediaQualitySelector--high-quality-description')}
</div>
</div>
</div>
</button>
</Popover.Content>
</button>
</Popover.Content>
</div>
</Popover.Portal>
)}
</Popover.Root>