Change interaction row

Vernissage/Assets.xcassets/SelectedRowColor.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "248",
+          "green" : "248",
+          "red" : "248"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "25",
+          "green" : "25",
+          "red" : "25"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Vernissage/Extensions/Color+Assets.swift

@@ -12,4 +12,6 @@ extension Color {
     static let dangerColor = Color("DangerColor")
     static let lightGrayColor = Color("LightGrayColor")
     static let mainTextColor = Color("MainTextColor")
+    static let selectedRowColor = Color("SelectedRowColor")
+    
 }

Vernissage/Views/StatusView.swift

@@ -64,6 +64,7 @@ struct StatusView: View {
                                        bookmarked: statusData.bookmarked) {
                             self.showCompose.toggle()
                         }
+                        .foregroundColor(.accentColor)
                         .padding(8)
                     }
                     .padding(8)

Vernissage/Widgets/CommentsSection.swift

@@ -8,6 +8,7 @@ import SwiftUI
 import MastodonSwift
 
 struct CommentsSection: View {
+    @Environment(\.colorScheme) var colorScheme
     @EnvironmentObject var applicationState: ApplicationState
 
     @State public var statusId: String
@@ -19,115 +20,117 @@ struct CommentsSection: View {
     private let contentWidth = Int(UIScreen.main.bounds.width) - 50
     
     var body: some View {
-        VStack {
+        VStack(alignment: .leading, spacing: 0) {
             if let context = context {
                 ForEach(context.descendants, id: \.id) { status in
-                    
+                    VStack(alignment: .leading, spacing: 0) {
-                    if withDivider {
+
-                        Rectangle()
+                        if withDivider {
-                            .size(width: UIScreen.main.bounds.width, height: 4)
+                            Divider()
-                            .fill(Color.mainTextColor)
+                                .foregroundColor(.mainTextColor)
-                            .opacity(0.2)
+                                .padding(0)
-                    }
-                    
-                    HStack (alignment: .top) {
-                        
-                        if let account = status.account {
-                            NavigationLink(destination: UserProfileView(
-                                accountId: account.id,
-                                accountDisplayName: account.displayName,
-                                accountUserName: account.acct)
-                                .environmentObject(applicationState)) {
-                                    AsyncImage(url: account.avatar) { image in
-                                        image
-                                            .resizable()
-                                            .clipShape(Circle())
-                                            .aspectRatio(contentMode: .fit)
-                                    } placeholder: {
-                                        Image(systemName: "person.circle")
-                                            .resizable()
-                                            .foregroundColor(.mainTextColor)
-                                    }
-                                    .frame(width: 32.0, height: 32.0)
-                                }
                         }
-                        
+                                                
-                        VStack (alignment: .leading) {
+                        HStack (alignment: .top) {
-                            HStack (alignment: .top) {
-                                Text(status.account?.displayName ?? status.account?.acct ?? status.account?.username ?? "")
-                                    .foregroundColor(.mainTextColor)
-                                    .font(.footnote)
-                                    .fontWeight(.bold)
-                                
-                                Spacer()
-                                
-                                Text(status.createdAt.toRelative(.isoDateTimeMilliSec))
-                                    .foregroundColor(.lightGrayColor)
-                                    .font(.footnote)
-                            }
                             
-                            HTMLFormattedText(status.content, withFontSize: 14, andWidth: contentWidth)
+                            if let account = status.account {
-                                .padding(.top, -10)
+                                NavigationLink(destination: UserProfileView(
-                                .padding(.leading, -4)
+                                    accountId: account.id,
-                            
+                                    accountDisplayName: account.displayName,
-                            if status.mediaAttachments.count > 0 {
+                                    accountUserName: account.acct)
-                                LazyVGrid(columns: Array(repeating: .init(.flexible()), count: status.mediaAttachments.count == 1 ? 1 : 2), alignment: .center, spacing: 4) {
+                                    .environmentObject(applicationState)) {
-                                    ForEach(status.mediaAttachments, id: \.id) { attachment in
+                                        AsyncImage(url: account.avatar) { image in
-                                        AsyncImage(url: status.mediaAttachments[0].url) { image in
                                             image
                                                 .resizable()
-                                                .scaledToFill()
+                                                .clipShape(Circle())
-                                                .frame(minWidth: 0, maxWidth: .infinity)
+                                                .aspectRatio(contentMode: .fit)
-                                                .frame(height: status.mediaAttachments.count == 1 ? 200 : 100)
-                                                .cornerRadius(10)
-                                                .shadow(color: .mainTextColor.opacity(0.3), radius: 2)
                                         } placeholder: {
-                                            Image(systemName: "photo")
+                                            Image(systemName: "person.circle")
                                                 .resizable()
-                                                .scaledToFit()
-                                                .frame(minWidth: 0, maxWidth: .infinity)
-                                                .frame(height: status.mediaAttachments.count == 1 ? 200 : 100)
                                                 .foregroundColor(.mainTextColor)
-                                                .opacity(0.05)
                                         }
+                                        .frame(width: 32.0, height: 32.0)
+                                    }
+                            }
+                            
+                            VStack (alignment: .leading, spacing: 0) {
+                                HStack (alignment: .top) {
+                                    Text(self.getUserName(status: status))
+                                        .foregroundColor(.mainTextColor)
+                                        .font(.footnote)
+                                        .fontWeight(.bold)
+                                    
+                                    Spacer()
+                                    
+                                    Text(status.createdAt.toRelative(.isoDateTimeMilliSec))
+                                        .foregroundColor(.lightGrayColor)
+                                        .font(.footnote)
+                                }
+                                
+                                HTMLFormattedText(status.content, withFontSize: 14, andWidth: contentWidth)
+                                    .padding(.top, -4)
+                                    .padding(.leading, -4)
+                                
+//                                if status.mediaAttachments.count > 0 {
+//                                    LazyVGrid(columns: self.getColumns(status: status), alignment: .center, spacing: 4) {
+//                                        ForEach(status.mediaAttachments, id: \.id) { attachment in
+//                                            AsyncImage(url: status.mediaAttachments[0].url) { image in
+//                                                image
+//                                                    .resizable()
+//                                                    .scaledToFill()
+//                                                    .frame(minWidth: 0, maxWidth: .infinity)
+//                                                    .frame(height: status.mediaAttachments.count == 1 ? 200 : 100)
+//                                                    .cornerRadius(10)
+//                                                    .shadow(color: .mainTextColor.opacity(0.3), radius: 2)
+//                                            } placeholder: {
+//                                                Image(systemName: "photo")
+//                                                    .resizable()
+//                                                    .scaledToFit()
+//                                                    .frame(minWidth: 0, maxWidth: .infinity)
+//                                                    .frame(height: status.mediaAttachments.count == 1 ? 200 : 100)
+//                                                    .foregroundColor(.mainTextColor)
+//                                                    .opacity(0.05)
+//                                            }
+//                                        }
+//                                    }
+//                                    .padding(.bottom, 8)
+//                                }
+                            }
+                            .onTapGesture {
+                                withAnimation(.linear(duration: 0.3)) {
+                                    if status.id == self.applicationState.showInteractionStatusId {
+                                        self.applicationState.showInteractionStatusId = ""
+                                    } else {
+                                        self.applicationState.showInteractionStatusId = status.id
                                     }
                                 }
-                                .padding(.bottom, 8)
                             }
                         }
-                        .onTapGesture {
+                        .padding(8)
-                            withAnimation(.linear(duration: 0.3)) {
+                        .background(self.getSelectedRowColor(status: status))
-                                if status.id == self.applicationState.showInteractionStatusId {
+                        
-                                    self.applicationState.showInteractionStatusId = ""
+                        if self.applicationState.showInteractionStatusId == status.id {
-                                } else {
+                            VStack (alignment: .leading, spacing: 0) {
-                                    self.applicationState.showInteractionStatusId = status.id
+                                InteractionRow(statusId: status.id,
+                                               repliesCount: status.repliesCount,
+                                               reblogged: status.reblogged,
+                                               reblogsCount: status.reblogsCount,
+                                               favourited: status.favourited,
+                                               favouritesCount: status.favouritesCount,
+                                               bookmarked: status.bookmarked) {
+                                    onNewStatus(status)
                                 }
+                                .foregroundColor(self.getInteractionRowTextColor())
+                                .padding(.horizontal, 16)
+                                .padding(.vertical, 8)
                             }
+                            .background(Color.lightGrayColor.opacity(0.5))
+                            .transition(AnyTransition.move(edge: .top).combined(with: .opacity))
                         }
-                    }
+                        
-                    .padding(.horizontal, 8)
+                        CommentsSection(statusId: status.id, withDivider: false)  { context in
-                    .padding(.bottom, 8)
+                            onNewStatus(context)
-                    
-                    if self.applicationState.showInteractionStatusId == status.id {
-                        VStack (alignment: .leading) {
-                            InteractionRow(statusId: status.id,
-                                           repliesCount: status.repliesCount,
-                                           reblogged: status.reblogged,
-                                           reblogsCount: status.reblogsCount,
-                                           favourited: status.favourited,
-                                           favouritesCount: status.favouritesCount,
-                                           bookmarked: status.bookmarked) {
-                                onNewStatus(status)
-                            }
-                            .padding(.horizontal, 16)
-                            .padding(.vertical, 8)
                         }
-                        .background(Color.mainTextColor.opacity(0.08))
-                        .transition(AnyTransition.move(edge: .top).combined(with: .opacity))
-                    }
-
-                    CommentsSection(statusId: status.id, withDivider: false)  { context in
-                        onNewStatus(context)
                     }
                 }
             }
@@ -144,6 +147,22 @@ struct CommentsSection: View {
             }
         }
     }
+    
+    private func getUserName(status: Status) -> String {
+        return status.account?.displayName ?? status.account?.acct ?? status.account?.username ?? ""
+    }
+    
+    private func getColumns(status: Status) -> [GridItem.Size] {
+        return Array(repeating: .flexible(), count: status.mediaAttachments.count == 1 ? 1 : 2)
+    }
+    
+    private func getInteractionRowTextColor() -> Color {
+        return self.colorScheme == .dark ? Color.black : Color.white
+    }
+    
+    private func getSelectedRowColor(status: Status) -> Color {
+        return self.applicationState.showInteractionStatusId == status.id ? Color.selectedRowColor : Color.systemBackground
+    }
 }
 
 struct CommentsSection_Previews: PreviewProvider {

Vernissage/Widgets/InteractionRow.swift

@@ -122,7 +122,6 @@ struct InteractionRow: View {
         }
         .font(.title3)
         .fontWeight(.semibold)
-        .foregroundColor(.accentColor)
     }
 }