mirror of
https://github.com/element-hq/element-web
synced 2024-11-28 20:38:55 +03:00
[Release] Show verification status in the room summary card
https://github.com/matrix-org/matrix-react-sdk/pull/5195 to release - see https://github.com/matrix-org/matrix-react-sdk/pull/5195 for details.
This commit is contained in:
parent
f8324c0dc0
commit
14f6d9e79f
2 changed files with 27 additions and 3 deletions
|
@ -67,12 +67,26 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomSummaryCard_e2ee_secure {
|
.mx_RoomSummaryCard_e2ee_normal {
|
||||||
background-color: #5abff2;
|
background-color: #424446;
|
||||||
&::before {
|
&::before {
|
||||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_RoomSummaryCard_e2ee_verified {
|
||||||
|
background-color: #0dbd8b;
|
||||||
|
&::before {
|
||||||
|
mask-image: url('$(res)/img/e2e/verified.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomSummaryCard_e2ee_warning {
|
||||||
|
background-color: #ff4b55;
|
||||||
|
&::before {
|
||||||
|
mask-image: url('$(res)/img/e2e/warning.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -40,6 +40,7 @@ import TextWithTooltip from "../elements/TextWithTooltip";
|
||||||
import BaseAvatar from "../avatars/BaseAvatar";
|
import BaseAvatar from "../avatars/BaseAvatar";
|
||||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||||
import WidgetStore, {IApp} from "../../../stores/WidgetStore";
|
import WidgetStore, {IApp} from "../../../stores/WidgetStore";
|
||||||
|
import { E2EStatus, shieldStatusForRoom } from "../../../utils/ShieldUtils";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
room: Room;
|
room: Room;
|
||||||
|
@ -200,6 +201,13 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
|
||||||
|
|
||||||
const isRoomEncrypted = useIsEncrypted(cli, room);
|
const isRoomEncrypted = useIsEncrypted(cli, room);
|
||||||
|
|
||||||
|
const [e2eStatus, setE2eStatus] = useState<E2EStatus>();
|
||||||
|
useEffect(() => {
|
||||||
|
if (isRoomEncrypted) {
|
||||||
|
shieldStatusForRoom(cli, room).then(e => setE2eStatus(e));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
|
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
|
||||||
const header = <React.Fragment>
|
const header = <React.Fragment>
|
||||||
<div className="mx_RoomSummaryCard_avatar" role="presentation">
|
<div className="mx_RoomSummaryCard_avatar" role="presentation">
|
||||||
|
@ -207,7 +215,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
|
||||||
<TextWithTooltip
|
<TextWithTooltip
|
||||||
tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
|
tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
|
||||||
class={classNames("mx_RoomSummaryCard_e2ee", {
|
class={classNames("mx_RoomSummaryCard_e2ee", {
|
||||||
mx_RoomSummaryCard_e2ee_secure: isRoomEncrypted,
|
mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
|
||||||
|
mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
|
||||||
|
mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue