fixup! Reworked styles for chat message views

Address PR comments. Added method for applying Theme.Layer style for UIView MOB-2501
salemove · Aug 18, 2023 · 2188e60 · 2188e60
1 parent d6fe2d7
commit 2188e60
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 60 deletions.
diff --git a/GliaWidgets.xcodeproj/project.pbxproj b/GliaWidgets.xcodeproj/project.pbxproj
@@ -375,15 +375,16 @@
 		8491AF022A6FBBBA00CC3E72 /* GvaGalleryListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF012A6FBBBA00CC3E72 /* GvaGalleryListView.swift */; };
 		8491AF062A77F16D00CC3E72 /* GvaGalleryCardStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF052A77F16D00CC3E72 /* GvaGalleryCardStyle.swift */; };
 		8491AF0A2A78FED700CC3E72 /* GvaGalleryListViewStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF092A78FED700CC3E72 /* GvaGalleryListViewStyle.swift */; };
-		8491AF192A7C140F00CC3E72 /* GvaGalleryCardView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF182A7C140F00CC3E72 /* GvaGalleryCardView.swift */; };
-		8491AF212A7D1F7900CC3E72 /* ChatView.GvaGallery.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF202A7D1F7900CC3E72 /* ChatView.GvaGallery.swift */; };
 		8491AF0D2A7A9CB900CC3E72 /* Theme.VisitorChatMessageStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF0C2A7A9CB900CC3E72 /* Theme.VisitorChatMessageStyle.swift */; };
 		8491AF132A7ACC5400CC3E72 /* Theme.OperatorChatMessageStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF122A7ACC5400CC3E72 /* Theme.OperatorChatMessageStyle.swift */; };
 		8491AF152A7ACDB000CC3E72 /* Theme.SystemMessageStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF142A7ACDB000CC3E72 /* Theme.SystemMessageStyle.swift */; };
 		8491AF172A7AD1D300CC3E72 /* Theme.ChoiceCardStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF162A7AD1D300CC3E72 /* Theme.ChoiceCardStyle.swift */; };
+		8491AF192A7C140F00CC3E72 /* GvaGalleryCardView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF182A7C140F00CC3E72 /* GvaGalleryCardView.swift */; };
 		8491AF1D2A7D01BF00CC3E72 /* Theme.ChatMessageStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF1C2A7D01BF00CC3E72 /* Theme.ChatMessageStyle.swift */; };
 		8491AF1F2A7D027D00CC3E72 /* Theme.ChatTextContentStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF1E2A7D027D00CC3E72 /* Theme.ChatTextContentStyle.swift */; };
+		8491AF212A7D1F7900CC3E72 /* ChatView.GvaGallery.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF202A7D1F7900CC3E72 /* ChatView.GvaGallery.swift */; };
 		8491AF232A8A3EA800CC3E72 /* ChatStyle.Deprecated.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF222A8A3EA800CC3E72 /* ChatStyle.Deprecated.swift */; };
+		8491AF272A8E3F6A00CC3E72 /* CGColor+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8491AF262A8E3F6A00CC3E72 /* CGColor+Extensions.swift */; };
 		84A318A12869ECFC00CA1DE5 /* Unavailable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84A318A02869ECFC00CA1DE5 /* Unavailable.swift */; };
 		84CFB7732822700000167258 /* Theme.Button.Accessibility.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84CFB7722822700000167258 /* Theme.Button.Accessibility.swift */; };
 		84D2292B28C61C8D00F64FE7 /* WKNavigationPolicyProvider.CustomResponseCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84D2292A28C61C8D00F64FE7 /* WKNavigationPolicyProvider.CustomResponseCard.swift */; };
@@ -1078,15 +1079,16 @@
 		8491AF012A6FBBBA00CC3E72 /* GvaGalleryListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GvaGalleryListView.swift; sourceTree = "<group>"; };
 		8491AF052A77F16D00CC3E72 /* GvaGalleryCardStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GvaGalleryCardStyle.swift; sourceTree = "<group>"; };
 		8491AF092A78FED700CC3E72 /* GvaGalleryListViewStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GvaGalleryListViewStyle.swift; sourceTree = "<group>"; };
-		8491AF182A7C140F00CC3E72 /* GvaGalleryCardView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GvaGalleryCardView.swift; sourceTree = "<group>"; };
-		8491AF202A7D1F7900CC3E72 /* ChatView.GvaGallery.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatView.GvaGallery.swift; sourceTree = "<group>"; };
 		8491AF0C2A7A9CB900CC3E72 /* Theme.VisitorChatMessageStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.VisitorChatMessageStyle.swift; sourceTree = "<group>"; };
 		8491AF122A7ACC5400CC3E72 /* Theme.OperatorChatMessageStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.OperatorChatMessageStyle.swift; sourceTree = "<group>"; };
 		8491AF142A7ACDB000CC3E72 /* Theme.SystemMessageStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.SystemMessageStyle.swift; sourceTree = "<group>"; };
 		8491AF162A7AD1D300CC3E72 /* Theme.ChoiceCardStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.ChoiceCardStyle.swift; sourceTree = "<group>"; };
+		8491AF182A7C140F00CC3E72 /* GvaGalleryCardView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GvaGalleryCardView.swift; sourceTree = "<group>"; };
 		8491AF1C2A7D01BF00CC3E72 /* Theme.ChatMessageStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.ChatMessageStyle.swift; sourceTree = "<group>"; };
 		8491AF1E2A7D027D00CC3E72 /* Theme.ChatTextContentStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.ChatTextContentStyle.swift; sourceTree = "<group>"; };
+		8491AF202A7D1F7900CC3E72 /* ChatView.GvaGallery.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatView.GvaGallery.swift; sourceTree = "<group>"; };
 		8491AF222A8A3EA800CC3E72 /* ChatStyle.Deprecated.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatStyle.Deprecated.swift; sourceTree = "<group>"; };
+		8491AF262A8E3F6A00CC3E72 /* CGColor+Extensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "CGColor+Extensions.swift"; sourceTree = "<group>"; };
 		84A318A02869ECFC00CA1DE5 /* Unavailable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Unavailable.swift; sourceTree = "<group>"; };
 		84CFB7722822700000167258 /* Theme.Button.Accessibility.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.Button.Accessibility.swift; sourceTree = "<group>"; };
 		84D2292A28C61C8D00F64FE7 /* WKNavigationPolicyProvider.CustomResponseCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WKNavigationPolicyProvider.CustomResponseCard.swift; sourceTree = "<group>"; };
@@ -2203,6 +2205,7 @@
 			isa = PBXGroup;
 			children = (
 				C08D775F28F583D7000461E5 /* Array+Extensions.swift */,
+				8491AF262A8E3F6A00CC3E72 /* CGColor+Extensions.swift */,
 				1A0C9AC725C9493D00815406 /* Int+Extensions.swift */,
 				1A4AF5C625AEEA42002CD0F4 /* Operator+Extensions.swift */,
 				844D3C6B29142C17002887A9 /* Optional+Extensions.swift */,
@@ -3149,6 +3152,19 @@
 			path = Gallery;
 			sourceTree = "<group>";
 		};
+		8491AF0B2A7A9C9200CC3E72 /* Chat */ = {
+			isa = PBXGroup;
+			children = (
+				8491AF1C2A7D01BF00CC3E72 /* Theme.ChatMessageStyle.swift */,
+				8491AF0C2A7A9CB900CC3E72 /* Theme.VisitorChatMessageStyle.swift */,
+				8491AF122A7ACC5400CC3E72 /* Theme.OperatorChatMessageStyle.swift */,
+				8491AF142A7ACDB000CC3E72 /* Theme.SystemMessageStyle.swift */,
+				8491AF162A7AD1D300CC3E72 /* Theme.ChoiceCardStyle.swift */,
+				8491AF1E2A7D027D00CC3E72 /* Theme.ChatTextContentStyle.swift */,
+			);
+			path = Chat;
+			sourceTree = "<group>";
+		};
 		8491AF1A2A7C142100CC3E72 /* GalleryList */ = {
 			isa = PBXGroup;
 			children = (
@@ -3168,19 +3184,6 @@
 			path = GalleryCard;
 			sourceTree = "<group>";
 		};
-		8491AF0B2A7A9C9200CC3E72 /* Chat */ = {
-			isa = PBXGroup;
-			children = (
-				8491AF1C2A7D01BF00CC3E72 /* Theme.ChatMessageStyle.swift */,
-				8491AF0C2A7A9CB900CC3E72 /* Theme.VisitorChatMessageStyle.swift */,
-				8491AF122A7ACC5400CC3E72 /* Theme.OperatorChatMessageStyle.swift */,
-				8491AF142A7ACDB000CC3E72 /* Theme.SystemMessageStyle.swift */,
-				8491AF162A7AD1D300CC3E72 /* Theme.ChoiceCardStyle.swift */,
-				8491AF1E2A7D027D00CC3E72 /* Theme.ChatTextContentStyle.swift */,
-			);
-			path = Chat;
-			sourceTree = "<group>";
-		};
 		84D2292C28C61DE000F64FE7 /* WKNavigationPolicyProvider */ = {
 			isa = PBXGroup;
 			children = (
@@ -4357,6 +4360,7 @@
 				AF3D520D2983B3DD00AD8E69 /* FileUploader.Environment.Interface.swift in Sources */,
 				1ABD6C5925B5758000D56EFA /* BubbleStyle.swift in Sources */,
 				C0D2F08B29A4E95700803B47 /* ConnectView.Mock.swift in Sources */,
+				8491AF272A8E3F6A00CC3E72 /* CGColor+Extensions.swift in Sources */,
 				C0175A252A66A431001FACDE /* GvaPersistentButtonOptionView.swift in Sources */,
 				AF10ED9129BF85C700E85309 /* UnreadMessageDividerStyle.swift in Sources */,
 				75AF8CF127DBB1F9009EEE2C /* SurveyViewController.View.swift in Sources */,

diff --git a/GliaWidgets/Sources/Extensions/CGColor+Extensions.swift b/GliaWidgets/Sources/Extensions/CGColor+Extensions.swift
@@ -0,0 +1,7 @@
+import UIKit
+
+extension CGColor {
+    static var clear: CGColor {
+        UIColor.clear.cgColor
+    }
+}
diff --git a/GliaWidgets/Sources/Extensions/UIColor+Hex.swift b/GliaWidgets/Sources/Extensions/UIColor+Hex.swift
@@ -27,7 +27,7 @@ extension UIColor {
         self.init(red: components.R, green: components.G, blue: components.B, alpha: components.a)
     }
 
-    func toHex(alpha: Bool = true) -> String? {
+    func toRGBAHex(alpha: Bool = true) -> String? {
         guard let components = cgColor.components, components.count >= 3 else {
             return nil
         }
@@ -48,9 +48,3 @@ extension UIColor {
         }
     }
 }
-
-extension CGColor {
-    static var clear: CGColor {
-        UIColor.clear.cgColor
-    }
-}
diff --git a/GliaWidgets/Sources/Extensions/UIView+Extensions.swift b/GliaWidgets/Sources/Extensions/UIView+Extensions.swift
@@ -26,4 +26,24 @@ extension UIView {
 
         return l
     }
+
+    @discardableResult
+    func applyBackground(_ background: Theme.Layer?) -> UIView {
+        guard let background else { return self }
+        background.background.unwrap {
+            switch $0 {
+            case let .fill(color):
+                backgroundColor = color
+            case let .gradient(colors):
+                makeGradientBackground(
+                    colors: colors,
+                    cornerRadius: background.cornerRadius
+                )
+            }
+        }
+        layer.cornerRadius = background.cornerRadius
+        layer.borderColor = background.borderColor
+        layer.borderWidth = background.borderWidth
+        return self
+    }
 }
diff --git a/GliaWidgets/Sources/Theme/Theme+Chat.swift b/GliaWidgets/Sources/Theme/Theme+Chat.swift
@@ -259,7 +259,7 @@ extension Theme {
             ),
             cornerRadius: 4,
             borderWidth: 1,
-            borderColor: Color.baseShade.toHex(),
+            borderColor: Color.baseShade.toRGBAHex(),
             accessibility: .init(
                 label: Accessibility.Message.ChoiceCard.ButtonState.disabled,
                 isFontScalingEnabled: true

diff --git a/GliaWidgets/Sources/View/Chat/ChatStyle.Deprecated.swift b/GliaWidgets/Sources/View/Chat/ChatStyle.Deprecated.swift
@@ -1,7 +1,7 @@
 import UIKit
 
 extension ChatStyle {
-    /// Style of the message sent by the operator.
+    /// Deprecated. Style of the message sent by the operator.
     @available(*, deprecated, message: "Deprecated, use ``ChatStyle.operatorMessageStyle`` instead.")
     public var operatorMessage: OperatorChatMessageStyle {
         get {
@@ -12,7 +12,7 @@ extension ChatStyle {
         }
     }
 
-    /// Style of the system message
+    /// Deprecated. Style of the system message
     @available(*, deprecated, message: "Deprecated, use ``ChatStyle.systemMessageStyle`` instead.")
     public var systemMessage: SystemMessageStyle {
         get {
@@ -23,7 +23,7 @@ extension ChatStyle {
         }
     }
 
-    /// Style of the message sent by the visitor.
+    /// Deprecated. Style of the message sent by the visitor.
     @available(*, deprecated, message: "Deprecated, use ``ChatStyle.visitorMessageStyle`` instead.")
     public var visitorMessage: VisitorChatMessageStyle {
         get {
@@ -34,7 +34,7 @@ extension ChatStyle {
         }
     }
 
-    /// Style of the choice card sent to the visitor by the AI engine.
+    /// Deprecated. Style of the choice card sent to the visitor by the AI engine.
     @available(*, deprecated, message: "Deprecated, use ``ChatStyle.choiceCardStyle`` instead.")
     public var choiceCard: ChoiceCardStyle {
         get {
@@ -45,7 +45,7 @@ extension ChatStyle {
         }
     }
 
-    ///
+    /// Deprecated.
     /// - Parameters:
     ///   - header: Style of the view's header (navigation bar area) when the screen is displaying live chat.
     ///   - connect: Styles for different engagement connection states.

diff --git a/GliaWidgets/Sources/View/Chat/Message/Content/ChoiceCard/ChoiceCardStyle.swift b/GliaWidgets/Sources/View/Chat/Message/Content/ChoiceCard/ChoiceCardStyle.swift
@@ -1,6 +1,6 @@
 import UIKit
 
-/// Style of the choice card sent to the visitor by the AI engine.
+/// Deprecated. Style of the choice card sent to the visitor by the AI engine.
 @available(*, deprecated, message: "Deprecated, use ``Theme.ChoiceCardStyle`` instead.")
 public final class ChoiceCardStyle: OperatorChatMessageStyle {
     /// Color of the choice card's border.
@@ -94,6 +94,7 @@ public final class ChoiceCardStyle: OperatorChatMessageStyle {
         operatorImage.apply(configuration: configuration?.userImage)
     }
 
+    // swiftlint:disable function_body_length
     func toNewChoiceCardStyle() -> Theme.ChoiceCardStyle {
         .init(
             text: .init(
@@ -164,4 +165,5 @@ public final class ChoiceCardStyle: OperatorChatMessageStyle {
             accessibility: .init(imageLabel: accessibility.imageLabel)
         )
     }
+    // swiftlint:enable function_body_length
 }
diff --git a/GliaWidgets/Sources/View/Chat/Message/Content/ChoiceCard/ChoiceCardView.swift b/GliaWidgets/Sources/View/Chat/Message/Content/ChoiceCard/ChoiceCardView.swift
@@ -47,17 +47,7 @@ final class ChoiceCardView: OperatorChatMessageView {
 
     private func contentView(for choiceCard: ChoiceCard) -> UIView {
         let containerView = UIView()
-        viewStyle.background.background.unwrap {
-            switch $0 {
-            case let .fill(color):
-                containerView.backgroundColor = color
-            case let .gradient(colors):
-                containerView.makeGradientBackground(colors: colors)
-            }
-        }
-        containerView.layer.cornerRadius = viewStyle.background.cornerRadius
-        containerView.layer.borderWidth = viewStyle.background.borderWidth
-        containerView.layer.borderColor = viewStyle.background.borderColor
+        containerView.applyBackground(viewStyle.background)
 
         let stackView = UIStackView()
         stackView.axis = .vertical

diff --git a/GliaWidgets/Sources/View/Chat/Message/Content/Text/ChatTextContentView.swift b/GliaWidgets/Sources/View/Chat/Message/Content/Text/ChatTextContentView.swift
@@ -55,26 +55,12 @@ class ChatTextContentView: BaseView {
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        style.background.background.unwrap {
-            switch $0 {
-            case let .fill(color):
-                contentView.backgroundColor = color
-            case let .gradient(colors):
-                contentView.makeGradientBackground(
-                    colors: colors,
-                    cornerRadius: style.background.cornerRadius
-                )
-            }
-        }
+        contentView.applyBackground(style.background)
     }
 
     override func setup() {
         super.setup()
 
-        contentView.layer.cornerRadius = style.background.cornerRadius
-        contentView.layer.borderWidth = style.background.borderWidth
-        contentView.layer.borderColor = style.background.borderColor
-
         textView.delegate = self
         textView.isScrollEnabled = false
         textView.isUserInteractionEnabled = true

diff --git a/GliaWidgets/Sources/View/Chat/Message/OperatorChatMessageStyle.swift b/GliaWidgets/Sources/View/Chat/Message/OperatorChatMessageStyle.swift
@@ -1,6 +1,6 @@
 import UIKit
 
-/// Style of an operator's message.
+/// Deprecated. Style of an operator's message.
 @available(*, deprecated, message: "Deprecated, use ``Theme.OperatorMessageStyle`` instead.")
 public class OperatorChatMessageStyle: ChatMessageStyle {
     /// Style of the operator's image.

diff --git a/GliaWidgets/Sources/View/Chat/Message/SystemMessageStyle.swift b/GliaWidgets/Sources/View/Chat/Message/SystemMessageStyle.swift
@@ -1,6 +1,6 @@
 import UIKit
 
-/// Style of a system message.
+/// Deprecated. Style of a system message.
 @available(*, deprecated, message: "Deprecated, use ``Theme.SystemMessageStyle`` instead.")
 final public class SystemMessageStyle: ChatMessageStyle {
     /// - Parameters:

diff --git a/GliaWidgets/Sources/View/Chat/Message/VisitorChatMessageStyle.swift b/GliaWidgets/Sources/View/Chat/Message/VisitorChatMessageStyle.swift
@@ -1,6 +1,6 @@
 import UIKit
 
-/// Style of a visitor's message.
+/// Deprecated. Style of a visitor's message.
 @available(*, deprecated, message: "Deprecated, use ``Theme.VisitorMessageStyle`` instead.")
 public class VisitorChatMessageStyle: ChatMessageStyle {
     /// Font of the message status text.