Update iconography visible in launch video (#1762)

This commit is contained in:
Doug
2023-09-21 12:38:09 +01:00
committed by GitHub
parent 057c33e680
commit 4e6fe278db
198 changed files with 688 additions and 532 deletions
@@ -25,8 +25,7 @@ struct ThreadDecorator: View {
.foregroundColor(.compound.textPrimary)
.font(.compound.bodyXS)
} icon: {
CompoundIcon(\.threads)
.font(.system(size: 16))
CompoundIcon(\.threads, size: .xSmall, relativeTo: .compound.bodyXS)
.foregroundColor(.compound.iconSecondary)
}
.labelStyle(.custom(spacing: 4))
@@ -209,7 +209,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
}
if timelineItem.hasFailedToSend {
Image(systemName: "exclamationmark.circle.fill")
CompoundIcon(\.error, size: .xSmall, relativeTo: .compound.bodyXS)
}
}
.font(.compound.bodyXS)
@@ -14,6 +14,7 @@
// limitations under the License.
//
import Compound
import SwiftUI
struct TimelineItemStatusView: View {
@@ -50,12 +51,10 @@ struct TimelineItemStatusView: View {
TimelineDeliveryStatusView(deliveryStatus: .sent)
}
case .sendingFailed:
// The bubbles handle the failure internally
// Bubbles handle the failure internally, but plain items don't.
if style == .plain {
Image(systemName: "exclamationmark.circle.fill")
.resizable()
CompoundIcon(\.error, size: .xSmall, relativeTo: .compound.bodyMD)
.foregroundColor(.compound.iconCriticalPrimary)
.frame(width: 16, height: 16)
.onTapGesture {
context.sendFailedConfirmationDialogInfo = .init(itemID: timelineItem.id)
}
@@ -156,7 +156,7 @@ struct TimelineReactionAddMoreButtonLabel: View {
var body: some View {
TimelineReactionButtonLabel {
Image(asset: Asset.Images.timelineReactionAddMore)
Image(asset: Asset.Images.addReaction)
.resizable()
.frame(width: addMoreButtonIconSize, height: addMoreButtonIconSize)
// Vertical sizing is done by the layout so that the add more button
@@ -14,6 +14,7 @@
// limitations under the License.
//
import Compound
import SwiftUI
/// The item shown when all previous items are un-decryptable due to
@@ -27,7 +28,7 @@ struct EncryptedHistoryRoomTimelineView: View {
.font(.compound.bodyMDSemibold)
.foregroundColor(.compound.textInfoPrimary)
} icon: {
Image(systemName: "info.circle.fill")
CompoundIcon(\.info, size: .small, relativeTo: .compound.bodyMDSemibold)
.foregroundColor(.compound.iconInfoPrimary)
}
.labelStyle(EncryptedHistoryLabelStyle())
@@ -46,7 +47,7 @@ struct EncryptedHistoryRoomTimelineView: View {
private struct EncryptedHistoryLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
HStack(alignment: .firstTextBaseline, spacing: 16) {
HStack(alignment: .top, spacing: 16) {
configuration.icon
configuration.title
}
@@ -21,8 +21,9 @@ struct EncryptedRoomTimelineView: View {
var body: some View {
TimelineStyler(timelineItem: timelineItem) {
Label(timelineItem.body, systemImage: "lock.shield")
Label(timelineItem.body, iconAsset: Asset.Images.decryptionError, iconSize: .small, relativeTo: .compound.bodyLG)
.labelStyle(RoomTimelineViewLabelStyle())
.font(.compound.bodyLG)
}
}
}
@@ -31,11 +32,10 @@ struct RoomTimelineViewLabelStyle: LabelStyle {
@Environment(\.timelineStyle) private var timelineStyle
func makeBody(configuration: Configuration) -> some View {
HStack(alignment: .firstTextBaseline, spacing: 8) {
HStack(alignment: .center, spacing: 8) {
configuration.icon
.foregroundColor(.compound.iconSecondary)
configuration.title
.font(.body)
.foregroundColor(.compound.textPrimary)
}
.padding(.horizontal, timelineStyle == .bubbles ? 4 : 0)
@@ -63,6 +63,11 @@ struct EncryptedRoomTimelineView_Previews: PreviewProvider, TestablePreview {
timestamp: "Later",
isOutgoing: true,
senderId: "Anne"))
EncryptedRoomTimelineView(timelineItem: itemWith(text: "Some other text that is very long and will wrap onto multiple lines.",
timestamp: "Later",
isOutgoing: true,
senderId: "Anne"))
}
}
@@ -101,27 +101,27 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
var label: some View {
switch self {
case .copy:
Label(L10n.actionCopy, systemImage: "doc.on.doc")
Label(L10n.actionCopy, iconAsset: Asset.Images.copy)
case .edit:
Label(L10n.actionEdit, systemImage: "pencil.line")
Label(L10n.actionEdit, iconAsset: Asset.Images.editOutline)
case .copyPermalink:
Label(L10n.actionCopyLinkToMessage, systemImage: "link")
Label(L10n.actionCopyLinkToMessage, icon: \.link)
case .reply(let isThread):
Label(isThread ? L10n.actionReplyInThread : L10n.actionReply, systemImage: "arrowshape.turn.up.left")
Label(isThread ? L10n.actionReplyInThread : L10n.actionReply, iconAsset: Asset.Images.reply)
case .forward:
Label(L10n.actionForward, systemImage: "arrowshape.turn.up.right")
Label(L10n.actionForward, iconAsset: Asset.Images.forward)
case .redact:
Label(L10n.actionRemove, systemImage: "trash")
Label(L10n.actionRemove, icon: \.delete)
case .viewSource:
Label(L10n.actionViewSource, systemImage: "doc.text.below.ecg")
Label(L10n.actionViewSource, iconAsset: Asset.Images.viewSource)
case .retryDecryption:
Label(L10n.actionRetryDecryption, systemImage: "arrow.down.message")
case .report:
Label(L10n.actionReportContent, systemImage: "exclamationmark.bubble")
Label(L10n.actionReportContent, icon: \.chatProblem)
case .react:
Label(L10n.actionReact, systemImage: "hand.thumbsup")
Label(L10n.actionReact, iconAsset: Asset.Images.addReaction)
case .endPoll:
Label { Text(L10n.actionEndPoll) } icon: { CompoundIcon(customImage: Asset.Images.endedPoll.swiftUIImage) }
Label(L10n.actionEndPoll, iconAsset: Asset.Images.endedPoll)
}
}
}
@@ -227,13 +227,14 @@ public struct TimelineItemMenu: View {
context.send(viewAction: .displayEmojiPicker(itemID: item.id))
}
} label: {
Image(asset: Asset.Images.timelineReactionAddMore)
Image(asset: Asset.Images.addReaction)
.resizable()
.frame(width: addMoreButtonIconSize, height: addMoreButtonIconSize)
.frame(maxHeight: .infinity, alignment: .center)
.foregroundColor(.compound.iconSecondary)
.padding(10)
}
.accessibilityLabel(L10n.actionReact)
}
.padding(.horizontal)
.frame(maxWidth: .infinity, alignment: .center)
@@ -269,10 +270,7 @@ public struct TimelineItemMenu: View {
send(action)
} label: {
action.label
.labelStyle(FixedIconSizeLabelStyle())
.multilineTextAlignment(.leading)
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.labelStyle(.menuSheet)
}
}
}