Enable WYSIWYG plain text support

This commit is contained in:
aringenbach
2022-10-25 16:40:52 +02:00
committed by aringenbach
parent 94d9dc6366
commit ac77fb97da
26 changed files with 284 additions and 83 deletions
@@ -22,11 +22,17 @@ struct ComposerCreateActionList: View {
// MARK: Private
@Environment(\.theme) private var theme: ThemeSwiftUI
private var textFormattingIcon: String {
viewModel.textFormattingEnabled
? Asset.Images.actionFormattingEnabled.name
: Asset.Images.actionFormattingDisabled.name
}
// MARK: Public
@ObservedObject var viewModel: ComposerCreateActionListViewModel.Context
var body: some View {
VStack {
VStack(alignment: .leading) {
@@ -48,6 +54,29 @@ struct ComposerCreateActionList: View {
.padding(.horizontal, 16)
.padding(.vertical, 12)
}
if viewModel.viewState.wysiwygEnabled {
SeparatorLine()
HStack(spacing: 16) {
Image(textFormattingIcon)
.renderingMode(.template)
.foregroundColor(theme.colors.accent)
Text(VectorL10n.wysiwygComposerStartActionTextFormatting)
.foregroundColor(theme.colors.primaryContent)
.font(theme.fonts.body)
.accessibilityIdentifier("textFormatting")
Spacer()
Toggle("", isOn: $viewModel.textFormattingEnabled)
.toggleStyle(ComposerToggleActionStyle())
.labelsHidden()
.onChange(of: viewModel.textFormattingEnabled) { isOn in
viewModel.send(viewAction: .toggleTextFormatting(isOn))
}
}
.contentShape(Rectangle())
.padding(.horizontal, 16)
.padding(.vertical, 12)
}
}
.padding(.top, 8)
Spacer()
@@ -63,3 +92,35 @@ struct ComposerCreateActionList_Previews: PreviewProvider {
stateRenderer.screenGroup()
}
}
struct ComposerToggleActionStyle: ToggleStyle {
@Environment(\.theme) private var theme
func makeBody(configuration: Configuration) -> some View {
HStack {
Rectangle()
.foregroundColor(.clear)
.frame(width: 50, height: 30, alignment: .center)
.overlay(
Rectangle()
.foregroundColor(configuration.isOn
? theme.colors.accent.opacity(0.5)
: theme.colors.primaryContent.opacity(0.25))
.cornerRadius(7)
.padding(.all, 8)
)
.overlay(
Circle()
.foregroundColor(configuration.isOn
? theme.colors.accent
: theme.colors.background)
.padding(.all, 3)
.offset(x: configuration.isOn ? 11 : -11, y: 0)
.shadow(radius: configuration.isOn ? 0.0 : 2.0)
.animation(Animation.linear(duration: 0.1))
).cornerRadius(20)
.onTapGesture { configuration.isOn.toggle() }
}
}
}