imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - add tooltip to device details toggle (#9594)

Browse source 
* add hide/show tooltip to dm details toggle

* use named export, update tests
This commit is contained in:
Kerry 2022-11-21 08:24:56 +13:00 • committed by GitHub
parent acdcda78f0
commit caac059479
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 29 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/settings/devices/CurrentDeviceSection.tsx
View file

@ -22,7 +22,7 @@ import Spinner from '../../elements/Spinner';
import SettingsSubsection from '../shared/SettingsSubsection';
import { SettingsSubsectionHeading } from '../shared/SettingsSubsectionHeading';
import DeviceDetails from './DeviceDetails';
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
import { DeviceExpandDetailsButton } from './DeviceExpandDetailsButton';
import DeviceTile from './DeviceTile';
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
import { ExtendedDevice } from './types';

16
src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
View file

@ -19,17 +19,19 @@ import React from 'react';
import { Icon as CaretIcon } from '../../../../../res/img/feather-customised/dropdown-arrow.svg';
import { _t } from '../../../../languageHandler';
import AccessibleButton from '../../elements/AccessibleButton';
import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton';
interface Props {
interface Props extends React.ComponentProps<typeof AccessibleTooltipButton> {
isExpanded: boolean;
onClick: () => void;
}
const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
return <AccessibleButton
export const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
const label = isExpanded ? _t('Hide details') : _t('Show details');
return <AccessibleTooltipButton
{...rest}
aria-label={_t('Toggle device details')}
aria-label={label}
title={label}
kind='icon'
className={classNames('mx_DeviceExpandDetailsButton', {
mx_DeviceExpandDetailsButton_expanded: isExpanded,
@ -37,7 +39,5 @@ const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...re
onClick={onClick}
>
<CaretIcon className='mx_DeviceExpandDetailsButton_icon' />
</AccessibleButton>;
</AccessibleTooltipButton>;
};
export default DeviceExpandDetailsButton;

2
src/components/views/settings/devices/FilteredDeviceList.tsx
View file

@ -23,7 +23,7 @@ import { _t } from '../../../../languageHandler';
import AccessibleButton from '../../elements/AccessibleButton';
import { FilterDropdown, FilterDropdownOption } from '../../elements/FilterDropdown';
import DeviceDetails from './DeviceDetails';
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
import { DeviceExpandDetailsButton } from './DeviceExpandDetailsButton';
import DeviceSecurityCard from './DeviceSecurityCard';
import {
filterDevicesBySecurityRecommendation,

3
src/i18n/strings/en_EN.json
View file

@ -1778,7 +1778,8 @@
"Push notifications": "Push notifications",
"Receive push notifications on this session.": "Receive push notifications on this session.",
"Sign out of this session": "Sign out of this session",
"Toggle device details": "Toggle device details",
"Hide details": "Hide details",
"Show details": "Show details",
"Verified sessions": "Verified sessions",
"Verified sessions are anywhere you are using this account after entering your passphrase or confirming your identity with another verified session.": "Verified sessions are anywhere you are using this account after entering your passphrase or confirming your identity with another verified session.",
"This means that you have all the keys needed to unlock your encrypted messages and confirm to other users that you trust this session.": "This means that you have all the keys needed to unlock your encrypted messages and confirm to other users that you trust this session.",