Skip to content

Commit

Permalink
Chat list item layout (fixes #126) (#132)
Browse files Browse the repository at this point in the history
* refactor: VisualEffect is now VisualEffectView

* feat: vastly improved how incoming message bubbles are rendered

* cleanup: remove MockChatPhoto which was here from really old times of the app

* Revert "cleanup: remove MockChatPhoto which was here from really old times of the app"

This reverts commit e1438ac.

* fix: button design for the about window

* fix: about window styling

* fix: message bubble internal padding

* fix: spacing inside of items in the chat list

* fix: coloring of the message sender
  • Loading branch information
ggoraa committed Aug 20, 2022
1 parent 247643f commit d0083df
Show file tree
Hide file tree
Showing 12 changed files with 130 additions and 94 deletions.
24 changes: 18 additions & 6 deletions Moc.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,8 @@
43C0F4A0285A69AA009F2419 /* FolderLayout.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43C0F49F285A69AA009F2419 /* FolderLayout.swift */; };
43C29C04287D8D9E00D10AB8 /* Animation+FastStartSlowStop.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43C29C03287D8D9E00D10AB8 /* Animation+FastStartSlowStop.swift */; };
43EC18E22856782F00FCAD43 /* SearchField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43EC18E12856782F00FCAD43 /* SearchField.swift */; platformFilter = ios; };
43F610FB28AFB8AE0098C3BD /* VisualEffect.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43F610FA28AFB8AE0098C3BD /* VisualEffect.swift */; };
43F610FB28AFB8AE0098C3BD /* VisualEffectView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43F610FA28AFB8AE0098C3BD /* VisualEffectView.swift */; };
43F610FE28B01E830098C3BD /* MessageBubbleShape.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43F610FD28B01E830098C3BD /* MessageBubbleShape.swift */; };
43F7C504287DCFB40083E9E9 /* ScrollOffsetPreferenceKey.swift in Sources */ = {isa = PBXBuildFile; fileRef = 43F7C503287DCFB40083E9E9 /* ScrollOffsetPreferenceKey.swift */; };
/* End PBXBuildFile section */

Expand Down Expand Up @@ -283,7 +284,8 @@
43EC18D92856207C00FCAD43 /* libSystem.B.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libSystem.B.tbd; path = Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS16.0.sdk/usr/lib/libSystem.B.tbd; sourceTree = DEVELOPER_DIR; };
43EC18DB285620A800FCAD43 /* libc++abi.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++abi.tbd"; path = "Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS16.0.sdk/usr/lib/libc++abi.tbd"; sourceTree = DEVELOPER_DIR; };
43EC18E12856782F00FCAD43 /* SearchField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SearchField.swift; sourceTree = "<group>"; };
43F610FA28AFB8AE0098C3BD /* VisualEffect.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VisualEffect.swift; sourceTree = "<group>"; };
43F610FA28AFB8AE0098C3BD /* VisualEffectView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VisualEffectView.swift; sourceTree = "<group>"; };
43F610FD28B01E830098C3BD /* MessageBubbleShape.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageBubbleShape.swift; sourceTree = "<group>"; };
43F7C503287DCFB40083E9E9 /* ScrollOffsetPreferenceKey.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ScrollOffsetPreferenceKey.swift; sourceTree = "<group>"; };
43F871B7283E21C700B6C717 /* Logs */ = {isa = PBXFileReference; lastKnownFileType = wrapper; path = Logs; sourceTree = "<group>"; };
/* End PBXFileReference section */
Expand Down Expand Up @@ -381,10 +383,10 @@
isa = PBXGroup;
children = (
43807D6E27E213350056A3D3 /* FolderItemView.swift */,
43051C8B287791D0003C5CE2 /* RoundedCorners.swift */,
438B2284285E558F000D65C8 /* ProfilePlaceholderView.swift */,
43807D6A27E213350056A3D3 /* ChatItemView.swift */,
435C9C0B28A13FB600E5D682 /* CompactChatItemView.swift */,
43051C8B287791D0003C5CE2 /* RoundedCorners.swift */,
438B2284285E558F000D65C8 /* ProfilePlaceholderView.swift */,
);
path = Common;
sourceTree = "<group>";
Expand Down Expand Up @@ -434,6 +436,7 @@
43807D4A27E213350056A3D3 /* Models */,
43807D7827E213350056A3D3 /* ViewModels */,
43807D5527E213350056A3D3 /* Views */,
43F610FC28B01E6A0098C3BD /* Shapes */,
43807D6C27E213350056A3D3 /* Commands */,
43807D7427E213350056A3D3 /* SwiftGen */,
43807D5027E213350056A3D3 /* MocApp+Injection.swift */,
Expand Down Expand Up @@ -590,7 +593,7 @@
43807D7227E213350056A3D3 /* SearchField.swift */,
43A0AF7A2864A33800C0A8EF /* SplitViewAccessor.swift */,
434A07162869003200A2BBA5 /* AVPlayerViewWrapper.swift */,
43F610FA28AFB8AE0098C3BD /* VisualEffect.swift */,
43F610FA28AFB8AE0098C3BD /* VisualEffectView.swift */,
);
path = Views;
sourceTree = "<group>";
Expand Down Expand Up @@ -669,6 +672,14 @@
path = iOS;
sourceTree = "<group>";
};
43F610FC28B01E6A0098C3BD /* Shapes */ = {
isa = PBXGroup;
children = (
43F610FD28B01E830098C3BD /* MessageBubbleShape.swift */,
);
path = Shapes;
sourceTree = "<group>";
};
43F7C502287DCF8B0083E9E9 /* Keys */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -882,8 +893,9 @@
43807D9527E213350056A3D3 /* ChatView.swift in Sources */,
43807D8327E213350056A3D3 /* MocApp+Injection.swift in Sources */,
43807D8C27E213350056A3D3 /* FoldersPrefView.swift in Sources */,
43F610FE28B01E830098C3BD /* MessageBubbleShape.swift in Sources */,
43807D9127E213350056A3D3 /* SettingsContent.swift in Sources */,
43F610FB28AFB8AE0098C3BD /* VisualEffect.swift in Sources */,
43F610FB28AFB8AE0098C3BD /* VisualEffectView.swift in Sources */,
43B1029928820A82009FCF53 /* Acknowledgment.swift in Sources */,
43807D9027E213350056A3D3 /* NotificationsAndSoundsPrefView.swift in Sources */,
438B2281285E3077000D65C8 /* LighterDarker.swift in Sources */,
Expand Down

This file was deleted.

Binary file not shown.
Binary file not shown.
Binary file not shown.
9 changes: 5 additions & 4 deletions Shared/Commands/About/AboutView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ struct AboutView: View {
Text("Moc")
.font(.system(size: 40, weight: .medium, design: .default))
Text("Version \(versionString) (\(buildNumberString))")
.foregroundColor(.gray.darker(by: 50))
.foregroundStyle(.secondary)
Divider()
Text(aboutApp)
Spacer()
Expand Down Expand Up @@ -92,7 +92,7 @@ struct AboutView: View {
}
.frame(width: 450, height: 350)
}
.buttonStyle(.automatic)
.background(.ultraThinMaterial)
Button {
Analytics.trackEvent(
"Opened GitHub page of Mock Foundation",
Expand All @@ -103,8 +103,9 @@ struct AboutView: View {
Text("Our GitHub")
Spacer()
}
.buttonStyle(.automatic)
}.padding(.trailing)
.background(.ultraThinMaterial)
}
.padding(.trailing)
}
.padding(.vertical)
}
Expand Down
6 changes: 3 additions & 3 deletions Shared/MocApp+Injection.swift
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ struct MocApp: App {
if #available(macOS 13, *) {
return WindowGroup(id: "about") {
AboutView()
.background(VisualEffect().ignoresSafeArea())
.background(VisualEffectView(material: .popover).ignoresSafeArea())
}
.defaultPosition(.top)
.defaultSize(width: 500, height: 300)
Expand All @@ -77,11 +77,11 @@ struct MocApp: App {
} else {
return WindowGroup(id: "about") {
AboutView()
.background(VisualEffect().ignoresSafeArea())
.onOpenURL { url in
print(url)
}
}.handlesExternalEvents(matching: Set(arrayLiteral: "internal/openAbout"))
}
.handlesExternalEvents(matching: Set(arrayLiteral: "internal/openAbout"))
}
}

Expand Down
46 changes: 46 additions & 0 deletions Shared/Shapes/MessageBubbleShape.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
//
// MessageBubbleShape.swift
// Moc
//
// Created by Егор Яковенко on 19.08.2022.
//

import SwiftUI

struct MessageBubbleShape: Shape {
func path(in rect: CGRect) -> Path {
let width = rect.width
let height = rect.height
let path = Path { p in
p.move(to: CGPoint(x: 25, y: height))
p.addLine(to: CGPoint(x: 20, y: height))
p.addCurve(to: CGPoint(x: 0, y: height - 20),
control1: CGPoint(x: 8, y: height),
control2: CGPoint(x: 0, y: height - 8))
p.addLine(to: CGPoint(x: 0, y: 20))
p.addCurve(to: CGPoint(x: 20, y: 0),
control1: CGPoint(x: 0, y: 8),
control2: CGPoint(x: 8, y: 0))
p.addLine(to: CGPoint(x: width - 21, y: 0))
p.addCurve(to: CGPoint(x: width - 4, y: 20),
control1: CGPoint(x: width - 12, y: 0),
control2: CGPoint(x: width - 4, y: 8))
p.addLine(to: CGPoint(x: width - 4, y: height - 11))
p.addCurve(to: CGPoint(x: width, y: height),
control1: CGPoint(x: width - 4, y: height - 1),
control2: CGPoint(x: width, y: height))
p.addLine(to: CGPoint(x: width + 0.05, y: height - 0.01))
p.addCurve(to: CGPoint(x: width - 11, y: height - 4),
control1: CGPoint(x: width - 4, y: height + 0.5),
control2: CGPoint(x: width - 8, y: height - 1))
p.addCurve(to: CGPoint(x: width - 25, y: height),
control1: CGPoint(x: width - 16, y: height),
control2: CGPoint(x: width - 20, y: height))
}

let flip = CGAffineTransform(scaleX: -1, y: 1)
let position = flip.concatenating(CGAffineTransform(translationX: rect.width, y: 0))

return path.applying(position)
}
}
10 changes: 2 additions & 8 deletions Shared/Views/Chat/Message/MessageView+Bubble.swift
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,14 @@ extension MessageView {
) -> some View {
content()
.if(!isOutgoing) {
$0.padding(.leading, 7)
$0.padding(.leading, 4)
}
.background {
if isOutgoing {
RoundedRectangle(cornerRadius: 16, style: .continuous)
.foregroundColor(Color("MessageFromMeColor"))
} else {
Image("ChatMessageBubbleRecipient")
.resizable(capInsets: EdgeInsets(
top: 18,
leading: 18,
bottom: 18,
trailing: 18
), resizingMode: .stretch)
MessageBubbleShape()
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.foregroundColor(Color("MessageFromRecepientColor"))
}
Expand Down
55 changes: 29 additions & 26 deletions Shared/Views/Common/ChatItemView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -103,47 +103,49 @@ struct ChatItemView: View {
.fixedSize()
Spacer()
}
VStack(alignment: .leading, spacing: 6) {
VStack(alignment: .leading, spacing: 2) {
HStack {
Group {
switch chat.type {
case .private:
EmptyView()
case .basicGroup:
Image(systemName: "person.2")
case .supergroup(let info):
if info.isChannel {
Image(systemName: "megaphone")
} else {
Image(systemName: "person.2.fill")
}
case .secret:
Image(systemName: "lock")
Label {
Text(chat.title)
#if os(macOS)
.fontWeight(.bold)
.font(sidebarSize.mainFont)
#elseif os(iOS)
.fontWeight(.medium)
#endif
} icon: {
Group {
switch chat.type {
case .private:
EmptyView()
case .basicGroup:
Image(systemName: "person.2")
case .supergroup(let info):
if info.isChannel {
Image(systemName: "megaphone")
} else {
Image(systemName: "person.2.fill")
}
case .secret:
Image(systemName: "lock")
}
}
.font(sidebarSize.iconFont)
}
.foregroundColor(isSelected ? .white : .primary)
.font(sidebarSize.iconFont)

Text(chat.title)
#if os(macOS)
.fontWeight(.bold)
.font(sidebarSize.mainFont)
#elseif os(iOS)
.fontWeight(.medium)
#endif
.foregroundColor(isSelected ? .white : .primary)
Spacer()
// Image(/* chat.seen ? */ "MessageSeenIcon" /* : "MessageSentIcon" */)
Text(Date(timeIntervalSince1970: Double(lastMessage?.date ?? 0)).hoursAndMinutes)
.font(sidebarSize == .large ? .body : .caption)
.foregroundColor(isSelected ? .white.darker(by: 20) : .secondary)
}
.padding(.top, 6)
.padding(.top, 4)
VStack(alignment: .leading, spacing: 2) {
if chat.type.isGroup {
if let sender {
Text(sender)
.fontWeight(.medium)
.foregroundColor(isSelected ? .white : .primary)
}
}
Group {
Expand Down Expand Up @@ -217,6 +219,7 @@ struct ChatItemView: View {
}
.foregroundColor(isSelected ? .white.darker(by: 20) : .secondary)
}

// VStack {
// Spacer()
// if chat.isPinned {
Expand Down
21 changes: 0 additions & 21 deletions macOS/Views/VisualEffect.swift

This file was deleted.

27 changes: 27 additions & 0 deletions macOS/Views/VisualEffectView.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
//
// VisualEffect.swift
// Moc
//
// Created by Егор Яковенко on 19.08.2022.
//

import SwiftUI

struct VisualEffectView: NSViewRepresentable {
let material: NSVisualEffectView.Material?

func makeNSView(context: Self.Context) -> NSVisualEffectView {
let view = NSVisualEffectView()
if let material {
view.material = material
}

return view
}

func updateNSView(_ nsView: NSVisualEffectView, context: Context) {
if let material {
nsView.material = material
}
}
}

0 comments on commit d0083df

Please sign in to comment.