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,