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>pull/28217/head
Suguru Hirahara
GitHub
parent
ad2d3a3683
commit
cea75fde27
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in New Issue