mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-28 15:22:39 +00:00
Update UX/UI implementation
This commit is contained in:
parent
d4a0f8cb21
commit
3cef74378d
4 changed files with 58 additions and 21 deletions
|
@ -1529,6 +1529,9 @@ Tap the + to start adding people.";
|
|||
"device_verification_cancelled" = "The other party cancelled the verification.";
|
||||
"device_verification_cancelled_by_me" = "The verification has been cancelled. Reason: %@";
|
||||
"device_verification_error_cannot_load_device" = "Cannot load session information.";
|
||||
"device_verification_scan_qr_code_title" = "Scan QR code";
|
||||
"device_verification_scan_qr_code_information" = "Point your camera at the QR code displayed on your other device to verify this session";
|
||||
|
||||
|
||||
// MARK: Incoming
|
||||
"device_verification_incoming_title" = "Incoming Verification Request";
|
||||
|
|
|
@ -1851,6 +1851,14 @@ public class VectorL10n: NSObject {
|
|||
public static var deviceVerificationIncomingTitle: String {
|
||||
return VectorL10n.tr("Vector", "device_verification_incoming_title")
|
||||
}
|
||||
/// Point your camera at the QR code displayed on your other device to verify this session
|
||||
public static var deviceVerificationScanQrCodeInformation: String {
|
||||
return VectorL10n.tr("Vector", "device_verification_scan_qr_code_information")
|
||||
}
|
||||
/// Scan QR code
|
||||
public static var deviceVerificationScanQrCodeTitle: String {
|
||||
return VectorL10n.tr("Vector", "device_verification_scan_qr_code_title")
|
||||
}
|
||||
/// Compare the unique emoji, ensuring they appear in the same order.
|
||||
public static var deviceVerificationSecurityAdviceEmoji: String {
|
||||
return VectorL10n.tr("Vector", "device_verification_security_advice_emoji")
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
|
||||
<subviews>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fyB-h5-5v2">
|
||||
<rect key="frame" x="0.0" y="0.0" width="375" height="806"/>
|
||||
<rect key="frame" x="0.0" y="0.0" width="375" height="443"/>
|
||||
<subviews>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="D7P-C8-cqw">
|
||||
<rect key="frame" x="0.0" y="0.0" width="375" height="113"/>
|
||||
|
@ -61,6 +61,25 @@
|
|||
<constraint firstAttribute="trailing" secondItem="1PP-lU-Ags" secondAttribute="trailing" constant="13" id="xNP-5O-bnD"/>
|
||||
</constraints>
|
||||
</view>
|
||||
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="JWN-4v-RUi">
|
||||
<rect key="frame" x="0.0" y="50" width="375" height="20"/>
|
||||
<subviews>
|
||||
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="253" verticalCompressionResistancePriority="751" text="Scan QR Code" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4Vv-12-J2A">
|
||||
<rect key="frame" x="20" y="20" width="335" height="0.0"/>
|
||||
<fontDescription key="fontDescription" type="boldSystem" pointSize="28"/>
|
||||
<nil key="textColor"/>
|
||||
<nil key="highlightedColor"/>
|
||||
</label>
|
||||
</subviews>
|
||||
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
|
||||
<constraints>
|
||||
<constraint firstItem="4Vv-12-J2A" firstAttribute="leading" secondItem="JWN-4v-RUi" secondAttribute="leading" constant="20" id="4Bf-hJ-6wD"/>
|
||||
<constraint firstAttribute="height" priority="750" id="Elw-li-szT"/>
|
||||
<constraint firstAttribute="bottom" secondItem="4Vv-12-J2A" secondAttribute="bottom" id="j1X-c8-tCi"/>
|
||||
<constraint firstAttribute="trailing" secondItem="4Vv-12-J2A" secondAttribute="trailing" constant="20" id="sAb-CX-1dL"/>
|
||||
<constraint firstItem="4Vv-12-J2A" firstAttribute="top" secondItem="JWN-4v-RUi" secondAttribute="top" constant="20" id="wPc-io-mBg"/>
|
||||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="SLA-sa-fBw">
|
||||
<rect key="frame" x="0.0" y="50" width="375" height="63"/>
|
||||
<subviews>
|
||||
|
@ -97,7 +116,7 @@
|
|||
</constraints>
|
||||
</view>
|
||||
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="bQd-8A-8hf">
|
||||
<rect key="frame" x="0.0" y="113" width="375" height="693"/>
|
||||
<rect key="frame" x="0.0" y="113" width="375" height="330"/>
|
||||
<subviews>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="vrz-UO-PDk">
|
||||
<rect key="frame" x="0.0" y="0.0" width="375" height="200"/>
|
||||
|
@ -117,11 +136,11 @@
|
|||
<constraint firstItem="NFT-6Y-5rt" firstAttribute="top" secondItem="vrz-UO-PDk" secondAttribute="top" id="Sfi-ob-xej"/>
|
||||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="NG7-qS-njl">
|
||||
<rect key="frame" x="0.0" y="200" width="375" height="363"/>
|
||||
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="NG7-qS-njl">
|
||||
<rect key="frame" x="0.0" y="200" width="375" height="28"/>
|
||||
<subviews>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="yMt-yE-2HC">
|
||||
<rect key="frame" x="18" y="6" width="40" height="40"/>
|
||||
<rect key="frame" x="185.5" y="6" width="40" height="40"/>
|
||||
<color key="backgroundColor" red="0.050980392156862744" green="0.74117647058823533" blue="0.54509803921568623" alpha="1" colorSpace="calibratedRGB"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" constant="40" id="aE1-Fg-abK"/>
|
||||
|
@ -129,28 +148,28 @@
|
|||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="IUM-L7-fqo">
|
||||
<rect key="frame" x="317" y="6" width="40" height="40"/>
|
||||
<rect key="frame" x="149.5" y="6" width="40" height="40"/>
|
||||
<color key="backgroundColor" red="0.050980392159999999" green="0.74117647060000003" blue="0.5450980392" alpha="1" colorSpace="calibratedRGB"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" secondItem="IUM-L7-fqo" secondAttribute="height" id="i5Y-Jl-e2K"/>
|
||||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Xt1-wB-5jN">
|
||||
<rect key="frame" x="18" y="305" width="40" height="40"/>
|
||||
<rect key="frame" x="185.5" y="-30" width="40" height="40"/>
|
||||
<color key="backgroundColor" red="0.050980392159999999" green="0.74117647060000003" blue="0.5450980392" alpha="1" colorSpace="calibratedRGB"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" secondItem="Xt1-wB-5jN" secondAttribute="height" id="ChW-li-1yx"/>
|
||||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="niQ-mw-RBU">
|
||||
<rect key="frame" x="317" y="305" width="40" height="40"/>
|
||||
<rect key="frame" x="149.5" y="-30" width="40" height="40"/>
|
||||
<color key="backgroundColor" red="0.050980392159999999" green="0.74117647060000003" blue="0.5450980392" alpha="1" colorSpace="calibratedRGB"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" secondItem="niQ-mw-RBU" secondAttribute="height" id="qac-f3-yEf"/>
|
||||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="f4V-Zd-iYY">
|
||||
<rect key="frame" x="20" y="8" width="335" height="335"/>
|
||||
<rect key="frame" x="187.5" y="8" width="0.0" height="0.0"/>
|
||||
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" secondItem="f4V-Zd-iYY" secondAttribute="height" id="p2W-BD-0pf"/>
|
||||
|
@ -184,7 +203,7 @@
|
|||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="s4G-bW-EGe">
|
||||
<rect key="frame" x="0.0" y="563" width="375" height="55"/>
|
||||
<rect key="frame" x="0.0" y="200" width="375" height="55"/>
|
||||
<subviews>
|
||||
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="a4h-x5-COe">
|
||||
<rect key="frame" x="20" y="0.0" width="335" height="50"/>
|
||||
|
@ -211,7 +230,7 @@
|
|||
</constraints>
|
||||
</view>
|
||||
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="n73-GU-j8x">
|
||||
<rect key="frame" x="0.0" y="618" width="375" height="75"/>
|
||||
<rect key="frame" x="0.0" y="255" width="375" height="75"/>
|
||||
<subviews>
|
||||
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="bRZ-4Z-DEJ">
|
||||
<rect key="frame" x="20" y="5" width="335" height="50"/>
|
||||
|
@ -280,6 +299,8 @@
|
|||
<outlet property="qrCodeScannerContainerView" destination="NG7-qS-njl" id="xmO-wT-3X5"/>
|
||||
<outlet property="scanButtonContainerView" destination="s4G-bW-EGe" id="TL4-jJ-EDC"/>
|
||||
<outlet property="scanCodeButton" destination="a4h-x5-COe" id="8Cl-iJ-be8"/>
|
||||
<outlet property="scanTitleLabel" destination="4Vv-12-J2A" id="C9X-QH-zC8"/>
|
||||
<outlet property="scanTitleView" destination="JWN-4v-RUi" id="7jz-CL-Zf1"/>
|
||||
<outlet property="titleLabel" destination="VsP-5V-z35" id="t5i-0x-a7m"/>
|
||||
<outlet property="titleView" destination="J1F-ba-sZ7" id="zVT-Mg-8di"/>
|
||||
</connections>
|
||||
|
|
|
@ -36,6 +36,9 @@ final class KeyVerificationVerifyByScanningViewController: UIViewController {
|
|||
@IBOutlet private weak var titleLabel: UILabel!
|
||||
@IBOutlet private weak var informationLabel: UILabel!
|
||||
|
||||
@IBOutlet private weak var scanTitleView: UIView!
|
||||
@IBOutlet private weak var scanTitleLabel: UILabel!
|
||||
|
||||
@IBOutlet private weak var codeImageView: UIImageView!
|
||||
|
||||
@IBOutlet private weak var scanCodeButton: UIButton!
|
||||
|
@ -201,17 +204,24 @@ final class KeyVerificationVerifyByScanningViewController: UIViewController {
|
|||
private func renderLoadedWithoutQRCodeData(viewData: KeyVerificationVerifyByScanningViewData) {
|
||||
self.activityPresenter.removeCurrentActivityIndicator(animated: true)
|
||||
|
||||
self.title = viewData.verificationKind.verificationTitle
|
||||
self.titleLabel.text = VectorL10n.authenticationQrLoginStartTitle
|
||||
// We don't have a QR code to display
|
||||
self.qrCodeContainerView.isHidden = true
|
||||
// We will display a QR code scanner view, so no need to display the scan button
|
||||
self.scanButtonContainerView.isHidden = true
|
||||
|
||||
|
||||
if viewData.showScanAction == false {
|
||||
self.title = viewData.verificationKind.verificationTitle
|
||||
self.titleLabel.text = viewData.verificationKind.verificationTitle
|
||||
// Update the copy if QR code scanning is not possible at all
|
||||
self.informationLabel.text = VectorL10n.keyVerificationVerifyQrCodeEmojiInformation
|
||||
self.cannotScanButton.setTitle(VectorL10n.keyVerificationVerifyQrCodeStartEmojiAction, for: .normal)
|
||||
} else {
|
||||
self.informationLabel.text = VectorL10n.authenticationQrLoginStartSubtitle
|
||||
// For this case, we don't want a navtitle
|
||||
self.title = nil
|
||||
self.titleView.isHidden = true
|
||||
self.scanTitleLabel.text = VectorL10n.deviceVerificationScanQrCodeTitle
|
||||
self.scanTitleView.isHidden = false
|
||||
self.informationLabel.text = VectorL10n.deviceVerificationScanQrCodeInformation
|
||||
|
||||
addQRCodeReaderView()
|
||||
}
|
||||
|
@ -219,10 +229,7 @@ final class KeyVerificationVerifyByScanningViewController: UIViewController {
|
|||
|
||||
private func renderLoaded(viewData: KeyVerificationVerifyByScanningViewData) {
|
||||
self.activityPresenter.removeCurrentActivityIndicator(animated: true)
|
||||
|
||||
self.qrCodeContainerView.isHidden = false
|
||||
self.scanButtonContainerView.isHidden = false
|
||||
|
||||
|
||||
let hideQRCodeImage: Bool
|
||||
|
||||
if let qrCodePayloadData = viewData.qrCodeData {
|
||||
|
@ -256,8 +263,6 @@ final class KeyVerificationVerifyByScanningViewController: UIViewController {
|
|||
self.scanCodeButton.isHidden = false
|
||||
self.informationLabel.text = informationText
|
||||
}
|
||||
|
||||
removeQRCodeReaderView()
|
||||
}
|
||||
|
||||
private func render(error: Error) {
|
||||
|
|
Loading…
Reference in a new issue