diff --git a/changelog.d/7354.misc b/changelog.d/7354.misc
new file mode 100644
index 0000000000..0e146a8e02
--- /dev/null
+++ b/changelog.d/7354.misc
@@ -0,0 +1 @@
+Update WYSIWYG editor designs.
diff --git a/library/ui-strings/src/main/res/values/strings.xml b/library/ui-strings/src/main/res/values/strings.xml
index 47d3d3bda5..c164b0a519 100644
--- a/library/ui-strings/src/main/res/values/strings.xml
+++ b/library/ui-strings/src/main/res/values/strings.xml
@@ -447,7 +447,7 @@
Create DM only on first message
Enable rich text editor
- Use a rich text editor to send formatted messages
+ Try out the rich text editor (plain text mode coming soon)
Invites
@@ -3362,4 +3362,10 @@
Tap top right to see the option to feedback.
Try it out
+
+ Apply bold format
+ Apply italic format
+ Apply strikethrough format
+ Apply underline format
+
diff --git a/library/ui-styles/src/main/res/values/colors.xml b/library/ui-styles/src/main/res/values/colors.xml
index f4384adb40..85646adb42 100644
--- a/library/ui-styles/src/main/res/values/colors.xml
+++ b/library/ui-styles/src/main/res/values/colors.xml
@@ -152,4 +152,9 @@
@color/palette_white
@color/palette_black_950
+
+
+ #EEF8F4
+ #1D292A
+
diff --git a/library/ui-styles/src/main/res/values/dimens.xml b/library/ui-styles/src/main/res/values/dimens.xml
index 0fb03f0ea3..52d16eae7d 100644
--- a/library/ui-styles/src/main/res/values/dimens.xml
+++ b/library/ui-styles/src/main/res/values/dimens.xml
@@ -47,7 +47,8 @@
56dp
52dp
1dp
-
+ 28dp
+ 14dp
28dp
6dp
diff --git a/library/ui-styles/src/main/res/values/styles_edit_text.xml b/library/ui-styles/src/main/res/values/styles_edit_text.xml
index 8de548dd03..b640fc49d9 100644
--- a/library/ui-styles/src/main/res/values/styles_edit_text.xml
+++ b/library/ui-styles/src/main/res/values/styles_edit_text.xml
@@ -11,4 +11,14 @@
- ?vctr_message_text_color
-
\ No newline at end of file
+
+
+
diff --git a/library/ui-styles/src/main/res/values/theme_dark.xml b/library/ui-styles/src/main/res/values/theme_dark.xml
index 9f4e5c1e28..d5aaa88ab8 100644
--- a/library/ui-styles/src/main/res/values/theme_dark.xml
+++ b/library/ui-styles/src/main/res/values/theme_dark.xml
@@ -152,6 +152,9 @@
- @dimen/collapsing_toolbar_layout_medium_size
+
+
+ - @color/vctr_rich_text_editor_menu_button_background_dark
diff --git a/library/ui-styles/src/main/res/values/theme_light.xml b/library/ui-styles/src/main/res/values/theme_light.xml
index c8182abecc..1978db9139 100644
--- a/library/ui-styles/src/main/res/values/theme_light.xml
+++ b/library/ui-styles/src/main/res/values/theme_light.xml
@@ -153,6 +153,9 @@
- @dimen/collapsing_toolbar_layout_medium_size
+
+
+ - @color/vctr_rich_text_editor_menu_button_background_light
diff --git a/vector-app/proguard-rules.pro b/vector-app/proguard-rules.pro
index 7fd72ba895..57559bf7b4 100644
--- a/vector-app/proguard-rules.pro
+++ b/vector-app/proguard-rules.pro
@@ -75,4 +75,8 @@
-keep class org.bouncycastle.** { *; }
-keepnames class org.bouncycastle.** { *; }
--dontwarn org.bouncycastle.**
\ No newline at end of file
+-dontwarn org.bouncycastle.**
+
+# JNA
+-keep class com.sun.jna.** { *; }
+-keep class * implements com.sun.jna.** { *; }
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt
index 76bdcfc9a8..07b7d151ad 100644
--- a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt
+++ b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt
@@ -27,6 +27,7 @@ import android.widget.ImageButton
import android.widget.ImageView
import android.widget.TextView
import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import androidx.core.text.toSpannable
@@ -42,7 +43,10 @@ import im.vector.app.core.animations.SimpleTransitionListener
import im.vector.app.core.extensions.setTextIfDifferent
import im.vector.app.databinding.ComposerRichTextLayoutBinding
import im.vector.app.databinding.ViewRichTextMenuButtonBinding
+import io.element.android.wysiwyg.EditorEditText
import io.element.android.wysiwyg.InlineFormat
+import uniffi.wysiwyg_composer.ComposerAction
+import uniffi.wysiwyg_composer.MenuState
class RichTextComposerLayout @JvmOverloads constructor(
context: Context,
@@ -91,10 +95,18 @@ class RichTextComposerLayout @JvmOverloads constructor(
collapse(false)
views.composerEditText.addTextChangedListener(object : TextWatcher {
+ private var previousTextWasExpanded = false
+
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
override fun afterTextChanged(s: Editable) {
callback?.onTextChanged(s)
+
+ val isExpanded = s.lines().count() > 1
+ if (previousTextWasExpanded != isExpanded) {
+ updateTextFieldBorder(isExpanded)
+ }
+ previousTextWasExpanded = isExpanded
}
})
@@ -116,32 +128,57 @@ class RichTextComposerLayout @JvmOverloads constructor(
}
private fun setupRichTextMenu() {
- addRichTextMenuItem(R.drawable.ic_composer_bold, "Bold") {
+ addRichTextMenuItem(R.drawable.ic_composer_bold, R.string.rich_text_editor_format_bold, ComposerAction.Bold) {
views.composerEditText.toggleInlineFormat(InlineFormat.Bold)
}
- addRichTextMenuItem(R.drawable.ic_composer_italic, "Italic") {
+ addRichTextMenuItem(R.drawable.ic_composer_italic, R.string.rich_text_editor_format_italic, ComposerAction.Italic) {
views.composerEditText.toggleInlineFormat(InlineFormat.Italic)
}
- addRichTextMenuItem(R.drawable.ic_composer_underlined, "Underline") {
+ addRichTextMenuItem(R.drawable.ic_composer_underlined, R.string.rich_text_editor_format_underline, ComposerAction.Underline) {
views.composerEditText.toggleInlineFormat(InlineFormat.Underline)
}
- addRichTextMenuItem(R.drawable.ic_composer_strikethrough, "Strikethrough") {
+ addRichTextMenuItem(R.drawable.ic_composer_strikethrough, R.string.rich_text_editor_format_strikethrough, ComposerAction.StrikeThrough) {
views.composerEditText.toggleInlineFormat(InlineFormat.StrikeThrough)
}
+
+ views.composerEditText.menuStateChangedListener = EditorEditText.OnMenuStateChangedListener { state ->
+ if (state is MenuState.Update) {
+ updateMenuStateFor(ComposerAction.Bold, state)
+ updateMenuStateFor(ComposerAction.Italic, state)
+ updateMenuStateFor(ComposerAction.Underline, state)
+ updateMenuStateFor(ComposerAction.StrikeThrough, state)
+ }
+ }
}
- private fun addRichTextMenuItem(@DrawableRes iconId: Int, description: String, action: () -> Unit) {
+ private fun addRichTextMenuItem(@DrawableRes iconId: Int, @StringRes description: Int, action: ComposerAction, onClick: () -> Unit) {
val inflater = LayoutInflater.from(context)
val button = ViewRichTextMenuButtonBinding.inflate(inflater, views.richTextMenu, true)
+ button.root.tag = action
with(button.root) {
- contentDescription = description
+ contentDescription = resources.getString(description)
setImageResource(iconId)
setOnClickListener {
- action()
+ onClick()
}
}
}
+ private fun updateMenuStateFor(action: ComposerAction, menuState: MenuState.Update) {
+ val button = findViewWithTag(action) ?: return
+ button.isEnabled = !menuState.disabledActions.contains(action)
+ button.isSelected = menuState.reversedActions.contains(action)
+ }
+
+ private fun updateTextFieldBorder(isExpanded: Boolean) {
+ val borderResource = if (isExpanded) {
+ R.drawable.bg_composer_rich_edit_text_expanded
+ } else {
+ R.drawable.bg_composer_rich_edit_text_single_line
+ }
+ views.composerEditTextOuterBorder.setBackgroundResource(borderResource)
+ }
+
override fun replaceFormattedContent(text: CharSequence) {
views.composerEditText.setHtml(text.toString())
}
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/voice/VoiceMessageViews.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/voice/VoiceMessageViews.kt
index 1eac3b440a..cd41219371 100644
--- a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/voice/VoiceMessageViews.kt
+++ b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/voice/VoiceMessageViews.kt
@@ -260,7 +260,7 @@ class VoiceMessageViews(
fun resetMicButtonUi() {
views.voiceMessageMicButton.isVisible = true
- views.voiceMessageMicButton.setImageResource(R.drawable.ic_voice_mic)
+ views.voiceMessageMicButton.setImageResource(R.drawable.ic_microphone)
views.voiceMessageMicButton.setAttributeBackground(android.R.attr.selectableItemBackgroundBorderless)
views.voiceMessageMicButton.updateLayoutParams {
if (rtlXMultiplier == -1) {
diff --git a/vector/src/main/res/color/selector_rich_text_menu_icon.xml b/vector/src/main/res/color/selector_rich_text_menu_icon.xml
new file mode 100644
index 0000000000..0d8789d6c5
--- /dev/null
+++ b/vector/src/main/res/color/selector_rich_text_menu_icon.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/vector/src/main/res/drawable/bg_composer_rich_edit_text_expanded.xml b/vector/src/main/res/drawable/bg_composer_rich_edit_text_expanded.xml
new file mode 100644
index 0000000000..26d997e7db
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_composer_rich_edit_text_expanded.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/vector/src/main/res/drawable/bg_composer_rich_edit_text_single_line.xml b/vector/src/main/res/drawable/bg_composer_rich_edit_text_single_line.xml
new file mode 100644
index 0000000000..7e2745a137
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_composer_rich_edit_text_single_line.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/vector/src/main/res/drawable/bg_rich_text_menu_button.xml b/vector/src/main/res/drawable/bg_rich_text_menu_button.xml
new file mode 100644
index 0000000000..7ac477e9f3
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_rich_text_menu_button.xml
@@ -0,0 +1,18 @@
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
diff --git a/vector/src/main/res/drawable/ic_microphone.xml b/vector/src/main/res/drawable/ic_microphone.xml
new file mode 100644
index 0000000000..270fe456fa
--- /dev/null
+++ b/vector/src/main/res/drawable/ic_microphone.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/vector/src/main/res/drawable/ic_voice_mic.xml b/vector/src/main/res/drawable/ic_voice_mic.xml
deleted file mode 100644
index fef5fb9dcf..0000000000
--- a/vector/src/main/res/drawable/ic_voice_mic.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
diff --git a/vector/src/main/res/layout/composer_rich_text_layout.xml b/vector/src/main/res/layout/composer_rich_text_layout.xml
index 3130061c10..09e4b03887 100644
--- a/vector/src/main/res/layout/composer_rich_text_layout.xml
+++ b/vector/src/main/res/layout/composer_rich_text_layout.xml
@@ -91,6 +91,7 @@
android:id="@+id/attachmentButton"
android:layout_width="0dp"
android:layout_height="0dp"
+ android:paddingTop="2dp"
android:background="?android:attr/selectableItemBackground"
android:contentDescription="@string/option_send_files"
android:src="@drawable/ic_attachment"
@@ -100,16 +101,17 @@
android:id="@+id/composerEditTextOuterBorder"
android:layout_width="0dp"
android:layout_height="0dp"
- android:background="@drawable/bg_composer_edit_text" />
+ android:background="@drawable/bg_composer_rich_edit_text_single_line" />
+ android:layout_marginHorizontal="12dp"
+ android:background="@drawable/bg_composer_rich_edit_text_single_line"
+ app:layout_constraintVertical_bias="0"
+ app:layout_constraintTop_toTopOf="parent"
+ app:layout_constraintBottom_toTopOf="@id/sendButton"
+ app:layout_constraintStart_toStartOf="parent"
+ app:layout_constraintEnd_toEndOf="parent" />
+ app:layout_constraintBottom_toTopOf="@id/sendButton"
+ app:layout_constraintStart_toStartOf="parent"
+ app:layout_constraintEnd_toEndOf="parent" />
diff --git a/vector/src/main/res/layout/view_rich_text_menu_button.xml b/vector/src/main/res/layout/view_rich_text_menu_button.xml
index a63a01e7c2..24b19c10b5 100644
--- a/vector/src/main/res/layout/view_rich_text_menu_button.xml
+++ b/vector/src/main/res/layout/view_rich_text_menu_button.xml
@@ -1,10 +1,11 @@
-
-
-
+ android:background="@drawable/bg_rich_text_menu_button"
+ app:tint="@color/selector_rich_text_menu_icon"
+ tools:src="@drawable/ic_composer_bold"
+ tools:ignore="ContentDescription" />
diff --git a/vector/src/main/res/layout/view_voice_message_recorder.xml b/vector/src/main/res/layout/view_voice_message_recorder.xml
index f7b5f5da1d..ee20c2eea1 100644
--- a/vector/src/main/res/layout/view_voice_message_recorder.xml
+++ b/vector/src/main/res/layout/view_voice_message_recorder.xml
@@ -23,11 +23,13 @@
android:id="@+id/voiceMessageMicButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
+ android:minWidth="32dp"
+ android:minHeight="32dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="?android:attr/selectableItemBackground"
android:contentDescription="@string/a11y_start_voice_message"
- android:src="@drawable/ic_voice_mic"
+ android:src="@drawable/ic_microphone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />