diff --git a/DesignKit/Sources/Colors/ElementColors.swift b/DesignKit/Sources/Colors/ElementColors.swift index ae12781fa..13dc1342c 100644 --- a/DesignKit/Sources/Colors/ElementColors.swift +++ b/DesignKit/Sources/Colors/ElementColors.swift @@ -21,6 +21,7 @@ import SwiftUI public extension Color { static let element = ElementColors() + static let global = Color.global } public struct ElementColors { @@ -128,25 +129,6 @@ public extension UIColor { let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count)) return contentAndAvatars[colorIndex % contentAndAvatars.count] } - - // MARK: - Temp - - private var tempActionBlack: UIColor { UIColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1.0) } - - public var tempActionBackground: UIColor { - UIColor { collection in - collection.userInterfaceStyle == .light ? self.tempActionBlack : .white - } - } - - public var tempActionForeground: UIColor { - UIColor { collection in - collection.userInterfaceStyle == .light ? .white : self.tempActionBlack - } - } - - public var tempActionBackgroundTint: UIColor { tempActionBackground.withAlphaComponent(0.2) } - public var tempActionForegroundTint: UIColor { tempActionForeground.withAlphaComponent(0.2) } } private extension String { diff --git a/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift b/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift index 4b790c98a..b30c3b605 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift @@ -29,7 +29,7 @@ struct MessageComposer: View { var body: some View { let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius) - VStack(alignment: .leading, spacing: 0) { + VStack(alignment: .leading, spacing: -6) { header HStack(alignment: .bottom) { MessageComposerTextField(placeholder: ElementL10n.roomMessagePlaceholder, @@ -47,7 +47,7 @@ struct MessageComposer: View { submitButtonImage .symbolVariant(.fill) .font(.element.body) - .foregroundColor(sendingDisabled ? .element.quaternaryContent : .element.background) + .foregroundColor(sendingDisabled ? .element.quaternaryContent : .global.white) .padding(5) .background { Circle() @@ -57,8 +57,7 @@ struct MessageComposer: View { .disabled(sendingDisabled) .animation(.elementDefault, value: sendingDisabled) .keyboardShortcut(.return, modifiers: [.command]) - .padding(.trailing, 8) - .padding(.vertical, 6) + .padding([.vertical, .trailing], 6) } } .padding(.leading, 12.0) @@ -70,7 +69,6 @@ struct MessageComposer: View { .stroke(Color.element.quinaryContent, lineWidth: 1) .opacity(focused ? 1 : 0) } - .animation(.easeOut(duration: 0.25), value: isMultiline) } .animation(.elementDefault, value: type) } @@ -93,17 +91,21 @@ struct MessageComposer: View { Image(systemName: "checkmark") .opacity(type.isEdit ? 1 : 0) .fontWeight(.medium) + .accessibilityLabel(ElementL10n.actionConfirm) + .accessibilityHidden(!type.isEdit) Image(systemName: "paperplane") + .offset(x: -1, y: 0) .opacity(type.isEdit ? 0 : 1) + .accessibilityHidden(type.isEdit) } } private var borderRadius: CGFloat { switch type { case .default: - return isMultiline ? 8 : 28 + return isMultiline ? 20 : 28 case .reply, .edit: - return 8 + return 20 } } } @@ -115,13 +117,9 @@ private struct MessageComposerReplyHeader: View { var body: some View { HStack(alignment: .center) { Label(ElementL10n.roomTimelineReplyingTo(displayName), systemImage: "arrowshape.turn.up.left") - .font(.element.caption1) - .foregroundColor(.element.secondaryContent) - .lineLimit(1) + .labelStyle(MessageComposerHeaderLabelStyle()) Spacer() - Button { - action() - } label: { + Button(action: action) { Image(systemName: "xmark") .font(.element.caption2.weight(.medium)) .foregroundColor(.element.secondaryContent) @@ -137,13 +135,9 @@ private struct MessageComposerEditHeader: View { var body: some View { HStack(alignment: .center) { Label(ElementL10n.roomTimelineEditing, systemImage: "pencil.line") - .font(.element.caption1) - .foregroundColor(.element.secondaryContent) - .lineLimit(1) + .labelStyle(MessageComposerHeaderLabelStyle()) Spacer() - Button { - action() - } label: { + Button(action: action) { Image(systemName: "xmark") .font(.element.caption2.weight(.medium)) .foregroundColor(.element.secondaryContent) @@ -153,6 +147,18 @@ private struct MessageComposerEditHeader: View { } } +private struct MessageComposerHeaderLabelStyle: LabelStyle { + func makeBody(configuration: Configuration) -> some View { + HStack(alignment: .firstTextBaseline, spacing: 5) { + configuration.icon + configuration.title + } + .font(.element.caption1) + .foregroundColor(.element.secondaryContent) + .lineLimit(1) + } +} + struct MessageComposer_Previews: PreviewProvider { static var previews: some View { VStack { diff --git a/changelog.d/430.change b/changelog.d/430.change index a33c0e54c..9b8652a4c 100644 --- a/changelog.d/430.change +++ b/changelog.d/430.change @@ -1 +1 @@ -Add missing shimmer effect on home screen. \ No newline at end of file +Add missing shimmer effect on home screen and tweak the message composer. \ No newline at end of file