Fix text link buttons on UserInfo panel (#8247)

* Fix text link buttons on UserInfo (right) panel

- Fix link button styling
  - Replace className="mx_linkButton" with kind="link"
  - Remove style rules required for mx_linkButton
- Align E2E icon and devices on the device list
  - Replace margin with gap

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace link_inline with link

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a redundant rule

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Wrap verifyButton

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
t3chguy/dedup-icons-17oct
Suguru Hirahara 2022-05-02 01:08:42 +00:00 committed by GitHub
parent ad2d3a3683
commit cea75fde27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 26 deletions

View File

@ -52,6 +52,10 @@ limitations under the License.
.mx_UserInfo_container {
padding: 8px 16px;
.mx_UserInfo_container_verifyButton {
margin-top: $spacing-8;
}
}
.mx_UserInfo_separator {
@ -193,10 +197,7 @@ limitations under the License.
}
.mx_UserInfo_field {
cursor: pointer;
color: $accent;
line-height: $font-16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
color: $alert;
@ -228,14 +229,18 @@ limitations under the License.
padding-bottom: 0;
> :not(h3) {
margin-left: 8px;
margin-inline-start: $spacing-8;
display: flex;
flex-flow: column;
align-items: flex-start;
row-gap: $spacing-8;
}
}
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: 8px 0;
margin: $spacing-8 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
@ -250,7 +255,7 @@ limitations under the License.
.mx_UserInfo_device_name {
flex: 1;
margin-right: 5px;
margin: 0 5px;
word-break: break-word;
}
}
@ -259,20 +264,16 @@ limitations under the License.
.mx_E2EIcon {
// don't squeeze
flex: 0 0 auto;
margin: 2px 5px 0 0;
margin: 0;
width: 12px;
height: 12px;
}
.mx_UserInfo_expand {
display: flex;
margin-top: 11px;
column-gap: 5px; // cf: mx_UserInfo_device_name
margin-bottom: 11px;
}
}
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
padding: 8px 18px;
}
}
.mx_UserInfo.mx_UserInfo_smallAvatar {

View File

@ -292,13 +292,17 @@ function DevicesSection({ devices, userId, loading }: { devices: IDevice[], user
let expandButton;
if (expandSectionDevices.length) {
if (isExpanded) {
expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
expandButton = (<AccessibleButton
kind="link"
className="mx_UserInfo_expand"
onClick={() => setExpanded(false)}
>
<div>{ expandHideCaption }</div>
</AccessibleButton>);
} else {
expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
expandButton = (<AccessibleButton
kind="link"
className="mx_UserInfo_expand"
onClick={() => setExpanded(true)}
>
<div className={expandIconClasses} />
@ -331,6 +335,7 @@ const MessageButton = ({ userId }: { userId: string }) => {
return (
<AccessibleButton
kind="link"
onClick={async (ev) => {
if (busy) return;
setBusy(true);
@ -383,6 +388,7 @@ const UserOptionsSection: React.FC<{
ignoreButton = (
<AccessibleButton
kind="link"
onClick={onIgnoreToggle}
className={classNames("mx_UserInfo_field", { mx_UserInfo_destructive: !isIgnored })}
>
@ -413,14 +419,22 @@ const UserOptionsSection: React.FC<{
const room = cli.getRoom(member.roomId);
if (room?.getEventReadUpTo(member.userId)) {
readReceiptButton = (
<AccessibleButton onClick={onReadReceiptButton} className="mx_UserInfo_field">
<AccessibleButton
kind="link"
onClick={onReadReceiptButton}
className="mx_UserInfo_field"
>
{ _t('Jump to read receipt') }
</AccessibleButton>
);
}
insertPillButton = (
<AccessibleButton onClick={onInsertPillButton} className="mx_UserInfo_field">
<AccessibleButton
kind="link"
onClick={onInsertPillButton}
className="mx_UserInfo_field"
>
{ _t('Mention') }
</AccessibleButton>
);
@ -448,7 +462,11 @@ const UserOptionsSection: React.FC<{
};
inviteUserButton = (
<AccessibleButton onClick={onInviteUserButton} className="mx_UserInfo_field">
<AccessibleButton
kind="link"
onClick={onInviteUserButton}
className="mx_UserInfo_field"
>
{ _t('Invite') }
</AccessibleButton>
);
@ -456,7 +474,11 @@ const UserOptionsSection: React.FC<{
}
const shareUserButton = (
<AccessibleButton onClick={onShareUserClick} className="mx_UserInfo_field">
<AccessibleButton
kind="link"
onClick={onShareUserClick}
className="mx_UserInfo_field"
>
{ _t('Share Link to User') }
</AccessibleButton>
);
@ -624,7 +646,11 @@ const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit<IBas
member.membership === "invite" ? _t("Disinvite from space") : _t("Remove from space")
: member.membership === "invite" ? _t("Disinvite from room") : _t("Remove from room");
return <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onKick}>
return <AccessibleButton
kind="link"
className="mx_UserInfo_field mx_UserInfo_destructive"
onClick={onKick}
>
{ kickLabel }
</AccessibleButton>;
};
@ -642,7 +668,11 @@ const RedactMessagesButton: React.FC<IBaseProps> = ({ member }) => {
});
};
return <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onRedactAllMessages}>
return <AccessibleButton
kind="link"
className="mx_UserInfo_field mx_UserInfo_destructive"
onClick={onRedactAllMessages}
>
{ _t("Remove recent messages") }
</AccessibleButton>;
};
@ -739,7 +769,11 @@ const BanToggleButton = ({ room, member, startUpdating, stopUpdating }: Omit<IBa
mx_UserInfo_destructive: !isBanned,
});
return <AccessibleButton className={classes} onClick={onBanOrUnban}>
return <AccessibleButton
kind="link"
className={classes}
onClick={onBanOrUnban}
>
{ label }
</AccessibleButton>;
};
@ -809,7 +843,11 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({ member, room, powerLevels,
});
const muteLabel = muted ? _t("Unmute") : _t("Mute");
return <AccessibleButton className={classes} onClick={onMuteToggle}>
return <AccessibleButton
kind="link"
className={classes}
onClick={onMuteToggle}
>
{ muteLabel }
</AccessibleButton>;
};
@ -1212,7 +1250,11 @@ const BasicUserInfo: React.FC<{
// FIXME this should be using cli instead of MatrixClientPeg.matrixClient
if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
synapseDeactivateButton = (
<AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
<AccessibleButton
kind="link"
className="mx_UserInfo_field mx_UserInfo_destructive"
onClick={onSynapseDeactivate}
>
{ _t("Deactivate user") }
</AccessibleButton>
);
@ -1290,8 +1332,9 @@ const BasicUserInfo: React.FC<{
if (canVerify) {
if (hasCrossSigningKeys !== undefined) {
// Note: mx_UserInfo_verifyButton is for the end-to-end tests
verifyButton = (
verifyButton = (<div className="mx_UserInfo_container_verifyButton">
<AccessibleButton
kind="link"
className="mx_UserInfo_field mx_UserInfo_verifyButton"
onClick={() => {
if (hasCrossSigningKeys) {
@ -1303,7 +1346,7 @@ const BasicUserInfo: React.FC<{
>
{ _t("Verify") }
</AccessibleButton>
);
</div>);
} else if (!showDeviceListSpinner) {
// HACK: only show a spinner if the device section spinner is not shown,
// to avoid showing a double spinner
@ -1316,6 +1359,7 @@ const BasicUserInfo: React.FC<{
if (member.userId == cli.getUserId()) {
editDevices = (<div>
<AccessibleButton
kind="link"
className="mx_UserInfo_field"
onClick={() => {
dis.dispatch({