felixfoertsch/bundesmessenger-ios
1
0
Fork 0
mirror of https://gitlab.opencode.de/bwi/bundesmessenger/clients/bundesmessenger-ios.git synced 2026-05-02 14:16:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6901 from vector-im/mauroromito/wysiwyg_toolbar_design_improvements

Browse Source 
WYSIWYG design improvements
This commit is contained in:
Velin92
2022-10-17 21:10:44 +02:00
committed by GitHub
parent 8c9faf7336 8d6a52bbfd
commit d8aae8dee7
5 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RiotSwiftUI/Modules/Room/Composer/View/Composer.swift
+46 -33
View File
@@ -29,7 +29,7 @@ struct Composer: View {
@State private var isActionButtonEnabled = false
private let horizontalPadding: CGFloat = 12
private let borderHeight: CGFloat = 44
private let borderHeight: CGFloat = 40
private let minTextViewHeight: CGFloat = 20
private var verticalPadding: CGFloat {
(borderHeight - minTextViewHeight) / 2
@@ -40,13 +40,21 @@ struct Composer: View {
}
private var cornerRadius: CGFloat {
viewModel.viewState.shouldDisplayContext ? 14 : borderHeight / 2
if viewModel.viewState.shouldDisplayContext || wysiwygViewModel.idealHeight > minTextViewHeight {
return 14
} else {
return borderHeight / 2
}
}
private var actionButtonAccessibilityIdentifier: String {
viewModel.viewState.sendMode == .edit ? "editButton" : "sendButton"
}
private var borderColor: Color {
focused ? theme.colors.quarterlyContent : theme.colors.quinaryContent
}
private var formatItems: [FormatItem] {
FormatType.allCases.map { type in
FormatItem(
@@ -66,7 +74,7 @@ struct Composer: View {
let showSendMediaActions: () -> Void
var body: some View {
VStack {
VStack(spacing: 8) {
let rect = RoundedRectangle(cornerRadius: cornerRadius)
// TODO: Fix maximise animation bugs before re-enabling
// ZStack(alignment: .topTrailing) {
@@ -123,60 +131,65 @@ struct Composer: View {
.padding(.bottom, verticalPadding)
}
.clipShape(rect)
.overlay(rect.stroke(theme.colors.quinaryContent, lineWidth: 2))
.overlay(rect.stroke(borderColor, lineWidth: 1))
.padding(.horizontal, horizontalPadding)
.padding(.top, 8)
.padding(.bottom, 4)
.onTapGesture {
if !focused {
focused = true
}
}
HStack {
HStack(spacing: 0) {
Button {
showSendMediaActions()
} label: {
Image(Asset.Images.startComposeModule.name)
.resizable()
.foregroundColor(theme.colors.tertiaryContent)
.padding(11)
.background(Circle().fill(theme.colors.system))
.frame(width: 14, height: 14)
}
.frame(width: 36, height: 36)
.background(Circle().fill(theme.colors.system))
.padding(.trailing, 8)
.accessibilityLabel(VectorL10n.create)
FormattingToolbar(formatItems: formatItems) { type in
wysiwygViewModel.apply(type.action)
}
.frame(height: 44)
Spacer()
ZStack {
// TODO: Add support for voice messages
// Button {
//
// } label: {
// Image(Asset.Images.voiceMessageRecordButtonDefault.name)
// .foregroundColor(theme.colors.tertiaryContent)
// }
// .isHidden(showSendButton)
// .isHidden(true)
Button {
sendMessageAction(wysiwygViewModel.content)
wysiwygViewModel.clearContent()
} label: {
if viewModel.viewState.sendMode == .edit {
Image(Asset.Images.saveIcon.name)
} else {
Image(Asset.Images.sendIcon.name)
}
// ZStack {
// TODO: Add support for voice messages
// Button {
//
// } label: {
// Image(Asset.Images.voiceMessageRecordButtonDefault.name)
// .foregroundColor(theme.colors.tertiaryContent)
// }
// .isHidden(showSendButton)
// .isHidden(true)
Button {
sendMessageAction(wysiwygViewModel.content)
wysiwygViewModel.clearContent()
} label: {
if viewModel.viewState.sendMode == .edit {
Image(Asset.Images.saveIcon.name)
} else {
Image(Asset.Images.sendIcon.name)
}
.disabled(!isActionButtonEnabled)
.opacity(isActionButtonEnabled ? 1 : 0.3)
.animation(.easeInOut(duration: 0.15), value: isActionButtonEnabled)
.accessibilityIdentifier(actionButtonAccessibilityIdentifier)
.accessibilityLabel(VectorL10n.send)
}
.frame(width: 36, height: 36)
.padding(.leading, 8)
.disabled(!isActionButtonEnabled)
.opacity(isActionButtonEnabled ? 1 : 0.3)
.animation(.easeInOut(duration: 0.15), value: isActionButtonEnabled)
.accessibilityIdentifier(actionButtonAccessibilityIdentifier)
.accessibilityLabel(VectorL10n.send)
.onChange(of: wysiwygViewModel.isContentEmpty) { empty in
isActionButtonEnabled = !empty
}
}
.padding(.horizontal, 16)
.padding(.horizontal, 12)
.padding(.bottom, 4)
.animation(.none)
}
RiotSwiftUI/Modules/Room/Composer/View/FormattingToolbar.swift
+2 -1
View File
@@ -32,7 +32,7 @@ struct FormattingToolbar: View {
var formatAction: (FormatType) -> Void
var body: some View {
HStack {
HStack(spacing: 4) {
ForEach(formatItems) { item in
Button {
formatAction(item.type)
@@ -42,6 +42,7 @@ struct FormattingToolbar: View {
.foregroundColor(item.active ? theme.colors.accent : theme.colors.tertiaryContent)
}
.disabled(item.disabled)
.frame(width: 44, height: 44)
.background(item.active ? theme.colors.accent.opacity(0.1) : theme.colors.background)
.cornerRadius(8)
.accessibilityIdentifier(item.accessibilityIdentifier)