mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-28 23:32:41 +00:00
design improvements!
This commit is contained in:
parent
d59a6ecf54
commit
06d54913d6
2 changed files with 38 additions and 31 deletions
|
@ -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
|
||||
|
@ -122,10 +122,9 @@ struct Composer: View {
|
|||
.padding(.bottom, verticalPadding)
|
||||
}
|
||||
.clipShape(rect)
|
||||
.overlay(rect.stroke(theme.colors.quinaryContent, lineWidth: 2))
|
||||
.overlay(rect.stroke(theme.colors.quinaryContent, lineWidth: 1))
|
||||
.padding(.horizontal, horizontalPadding)
|
||||
.padding(.top, 8)
|
||||
.padding(.bottom, 4)
|
||||
.onTapGesture {
|
||||
if !focused {
|
||||
focused = true
|
||||
|
@ -136,46 +135,53 @@ struct Composer: View {
|
|||
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(.vertical, 8)
|
||||
.padding(.trailing, 8)
|
||||
.accessibilityLabel(VectorL10n.create)
|
||||
FormattingToolbar(formatItems: formatItems) { type in
|
||||
wysiwygViewModel.apply(type.action)
|
||||
}
|
||||
.frame(height: 52)
|
||||
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)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue