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

Show verification status in the room summary card

Browse source 
Fixes https://github.com/vector-im/element-web/issues/15143

Colours are the same for both light and dark theme.
This commit is contained in:
Travis Ralston 2020-09-10 13:48:28 -06:00
parent 017765df24
commit 4cb7381d03
2 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
res/css/views/right_panel/_RoomSummaryCard.scss
View file

@ -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');
}
}
} }
} }

12
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -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>