Create DeviceAvatarView.

2026-05-01 21:56:58 +02:00 · 2022-09-05 10:40:03 +02:00
parent f07083fd3c
commit cdbf773cde
2 changed files with 123 additions and 0 deletions
@@ -0,0 +1,97 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+import DesignKit
+
+/// Avatar view for device
+struct DeviceAvatarView: View {
+    
+    @Environment(\.theme) var theme: ThemeSwiftUI
+    
+    var viewData: DeviceAvatarViewData
+        
+    var avatarSize: Float = 40.0
+    var badgeSize: Float {
+        return 24
+    }
+    
+    var body: some View {
+        ZStack {
+            VStack {
+                VStack(alignment: .center) {
+                    viewData.deviceType.image
+                }
+                .padding()
+            }
+            .frame(maxWidth: CGFloat(avatarSize), maxHeight: CGFloat(avatarSize))
+            .background(theme.colors.system)
+            .clipShape(Circle())
+            
+            if let isVerified = viewData.isVerified {
+                
+                VStack(alignment: .trailing) {
+                    Spacer()
+                    HStack(alignment: .bottom) {
+                        Spacer()
+                        VStack() {
+                            Image(isVerified ? Asset.Images.userSessionVerified.name : Asset.Images.userSessionUnverified.name)
+                        }
+                        .frame(maxWidth: CGFloat(badgeSize), maxHeight: CGFloat(badgeSize))
+                        .shapedBorder(color: theme.colors.system, borderWidth: 1, shape: Circle())
+                        .background(theme.colors.background)
+                        .clipShape(Circle())
+                    }
+                    .offset(x: 10, y: 8)
+                }
+            }
+        }
+        .frame(maxWidth: CGFloat(avatarSize), maxHeight: CGFloat(avatarSize))
+    }
+}
+
+struct DeviceAvatarViewListPreview: View {
+    
+    var viewDataList: [DeviceAvatarViewData] {
+        return [
+            DeviceAvatarViewData(deviceType: .desktop, isVerified: true),
+            DeviceAvatarViewData(deviceType: .web, isVerified: true),
+            DeviceAvatarViewData(deviceType: .mobile, isVerified: true),
+            DeviceAvatarViewData(deviceType: .unknown, isVerified: true)
+        ]
+    }
+    
+    var body: some View {
+        HStack {
+            VStack(alignment: .center, spacing: 20) {
+                DeviceAvatarView(viewData: DeviceAvatarViewData.init(deviceType: .web, isVerified: true))
+                DeviceAvatarView(viewData: DeviceAvatarViewData(deviceType: .desktop, isVerified: false))
+                DeviceAvatarView(viewData: DeviceAvatarViewData(deviceType: .mobile, isVerified: true))
+                DeviceAvatarView(viewData: DeviceAvatarViewData(deviceType: .unknown, isVerified: false))
+            }
+        }
+    }
+}
+
+struct DeviceAvatarView_Previews: PreviewProvider {
+    
+    static var previews: some View {
+        Group {
+            DeviceAvatarViewListPreview().theme(.light).preferredColorScheme(.light)
+            DeviceAvatarViewListPreview().theme(.dark).preferredColorScheme(.dark)
+        }
+    }
+}