Change interaction row

This commit is contained in:
Marcin Czachursk 2023-01-08 11:32:39 +01:00
parent 7a7012004c
commit 660eaa2819
5 changed files with 151 additions and 92 deletions

View File

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

View File

@ -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")
}

View File

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

View File

@ -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,15 +20,15 @@ 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()
.size(width: UIScreen.main.bounds.width, height: 4)
.fill(Color.mainTextColor)
.opacity(0.2)
Divider()
.foregroundColor(.mainTextColor)
.padding(0)
}
HStack (alignment: .top) {
@ -52,9 +53,9 @@ struct CommentsSection: View {
}
}
VStack (alignment: .leading) {
VStack (alignment: .leading, spacing: 0) {
HStack (alignment: .top) {
Text(status.account?.displayName ?? status.account?.acct ?? status.account?.username ?? "")
Text(self.getUserName(status: status))
.foregroundColor(.mainTextColor)
.font(.footnote)
.fontWeight(.bold)
@ -67,33 +68,33 @@ struct CommentsSection: View {
}
HTMLFormattedText(status.content, withFontSize: 14, andWidth: contentWidth)
.padding(.top, -10)
.padding(.top, -4)
.padding(.leading, -4)
if status.mediaAttachments.count > 0 {
LazyVGrid(columns: Array(repeating: .init(.flexible()), count: status.mediaAttachments.count == 1 ? 1 : 2), 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)
}
// 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)) {
@ -105,11 +106,11 @@ struct CommentsSection: View {
}
}
}
.padding(.horizontal, 8)
.padding(.bottom, 8)
.padding(8)
.background(self.getSelectedRowColor(status: status))
if self.applicationState.showInteractionStatusId == status.id {
VStack (alignment: .leading) {
VStack (alignment: .leading, spacing: 0) {
InteractionRow(statusId: status.id,
repliesCount: status.repliesCount,
reblogged: status.reblogged,
@ -119,10 +120,11 @@ struct CommentsSection: View {
bookmarked: status.bookmarked) {
onNewStatus(status)
}
.foregroundColor(self.getInteractionRowTextColor())
.padding(.horizontal, 16)
.padding(.vertical, 8)
}
.background(Color.mainTextColor.opacity(0.08))
.background(Color.lightGrayColor.opacity(0.5))
.transition(AnyTransition.move(edge: .top).combined(with: .opacity))
}
@ -132,6 +134,7 @@ struct CommentsSection: View {
}
}
}
}
.task {
do {
if let accountData = applicationState.accountData {
@ -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 {

View File

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