[Rich text editor] Update design #1332

jonnyandrew · 2023-09-14T14:10:16Z

Type of change

Feature
Bugfix
Technical
Other :

Content

Various design tweaks (see commit history and screenshot tests for details).

Motivation and context

[Design review] Improve rich text editor UI #1315

Screenshots / GIFs

Tests

Ensure rich text editor is enabled
Open formatting menu

Tested devices

Physical
Emulator
OS version(s): Android 13

Checklist

Changes have been tested on an Android device or Android emulator with API 23
UI change has been tested on both light and dark themes
Accessibility has been taken into account. See https://github.com/vector-im/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
Pull request is based on the develop branch
Pull request includes a new file under ./changelog.d. See https://github.com/vector-im/element-x-android/blob/develop/CONTRIBUTING.md#changelog
Pull request includes screenshots or videos if containing UI changes
Pull request includes a sign off
You've made a self review of your PR

github-actions · 2023-09-14T14:28:50Z

📱 Scan the QR code below to install the build (arm64 only) for this PR.

If you can't scan the QR code you can install the build via this link: https://i.diawi.com/br728L

codecov · 2023-09-14T14:39:12Z

Codecov Report

Patch coverage: 87.50% and project coverage change: +0.03% 🎉

Comparison is base (9cb8b69) 57.88% compared to head (c1390f3) 57.91%.
Report is 4 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1332      +/-   ##
===========================================
+ Coverage    57.88%   57.91%   +0.03%     
===========================================
  Files         1109     1109              
  Lines        29238    29256      +18     
  Branches      5974     5976       +2     
===========================================
+ Hits         16924    16945      +21     
+ Misses        9684     9683       -1     
+ Partials      2630     2628       -2

Files Changed	Coverage Δ
...ent/android/libraries/textcomposer/TextComposer.kt	`54.47% <70.00%> (-0.28%)`	⬇️
...raries/textcomposer/components/FormattingOption.kt	`77.14% <91.66%> (+29.31%)`	⬆️
...ment/android/libraries/designsystem/VectorIcons.kt	`100.00% <100.00%> (ø)`
...droid/libraries/designsystem/theme/ColorAliases.kt	`82.35% <100.00%> (+2.35%)`	⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

julioromano

LGTM For me, just calling in @jmartinesp too coz he's got a better picture of all our themeing infra.

jmartinesp

I think we should double check a couple of points. Other than that, it looks good.

.../textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

… jonny/rte-design

jmartinesp

LGTM. It could be nice to double check with design in the future if there's a way to make the vector icons less complex, since the linter is complaining about a lot of them.

sonarqubecloud · 2023-09-15T09:03:22Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_bold.xml

  <path
-      android:pathData="M8.8,19C8.25,19 7.779,18.804 7.388,18.413C6.996,18.021 6.8,17.55 6.8,17V7C6.8,6.45 6.996,5.979 7.388,5.588C7.779,5.196 8.25,5 8.8,5H12.325C13.408,5 14.408,5.333 15.325,6C16.242,6.667 16.7,7.592 16.7,8.775C16.7,9.625 16.508,10.279 16.125,10.738C15.742,11.196 15.383,11.525 15.05,11.725C15.467,11.908 15.929,12.25 16.438,12.75C16.946,13.25 17.2,14 17.2,15C17.2,16.483 16.658,17.521 15.575,18.112C14.492,18.704 13.475,19 12.525,19H8.8ZM9.825,16.2H12.425C13.225,16.2 13.712,15.996 13.887,15.587C14.063,15.179 14.15,14.883 14.15,14.7C14.15,14.517 14.063,14.221 13.887,13.813C13.712,13.404 13.2,13.2 12.35,13.2H9.825V16.2ZM9.825,10.5H12.15C12.7,10.5 13.1,10.358 13.35,10.075C13.6,9.792 13.725,9.475 13.725,9.125C13.725,8.725 13.583,8.4 13.3,8.15C13.017,7.9 12.65,7.775 12.2,7.775H9.825V10.5Z"
+      android:pathData="M7.333,15.833C6.875,15.833 6.483,15.67 6.156,15.343C5.83,15.017 5.667,14.624 5.667,14.166V5.833C5.667,5.374 5.83,4.982 6.156,4.656C6.483,4.329 6.875,4.166 7.333,4.166H10.271C11.174,4.166 12.007,4.444 12.771,4.999C13.535,5.555 13.917,6.326 13.917,7.312C13.917,8.02 13.757,8.565 13.438,8.947C13.118,9.329 12.819,9.604 12.542,9.77C12.889,9.923 13.274,10.208 13.698,10.624C14.122,11.041 14.333,11.666 14.333,12.499C14.333,13.736 13.882,14.6 12.979,15.093C12.076,15.586 11.229,15.833 10.438,15.833H7.333ZM8.188,13.499H10.354C11.021,13.499 11.427,13.329 11.573,12.989C11.719,12.649 11.792,12.402 11.792,12.249C11.792,12.097 11.719,11.85 11.573,11.51C11.427,11.17 11,10.999 10.292,10.999H8.188V13.499ZM8.188,8.749H10.125C10.583,8.749 10.917,8.631 11.125,8.395C11.333,8.159 11.438,7.895 11.438,7.604C11.438,7.27 11.319,6.999 11.083,6.791C10.847,6.583 10.542,6.479 10.167,6.479H8.188V8.749Z"


⚠️ Very long vector path (881 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_bullet_list.xml

  <path
-      android:pathData="M10,19C9.717,19 9.479,18.904 9.288,18.712C9.096,18.521 9,18.283 9,18C9,17.717 9.096,17.479 9.288,17.288C9.479,17.096 9.717,17 10,17H20C20.283,17 20.521,17.096 20.712,17.288C20.904,17.479 21,17.717 21,18C21,18.283 20.904,18.521 20.712,18.712C20.521,18.904 20.283,19 20,19H10ZM10,13C9.717,13 9.479,12.904 9.288,12.712C9.096,12.521 9,12.283 9,12C9,11.717 9.096,11.479 9.288,11.288C9.479,11.096 9.717,11 10,11H20C20.283,11 20.521,11.096 20.712,11.288C20.904,11.479 21,11.717 21,12C21,12.283 20.904,12.521 20.712,12.712C20.521,12.904 20.283,13 20,13H10ZM10,7C9.717,7 9.479,6.904 9.288,6.713C9.096,6.521 9,6.283 9,6C9,5.717 9.096,5.479 9.288,5.287C9.479,5.096 9.717,5 10,5H20C20.283,5 20.521,5.096 20.712,5.287C20.904,5.479 21,5.717 21,6C21,6.283 20.904,6.521 20.712,6.713C20.521,6.904 20.283,7 20,7H10ZM5,20C4.45,20 3.979,19.804 3.588,19.413C3.196,19.021 3,18.55 3,18C3,17.45 3.196,16.979 3.588,16.587C3.979,16.196 4.45,16 5,16C5.55,16 6.021,16.196 6.412,16.587C6.804,16.979 7,17.45 7,18C7,18.55 6.804,19.021 6.412,19.413C6.021,19.804 5.55,20 5,20ZM5,14C4.45,14 3.979,13.804 3.588,13.413C3.196,13.021 3,12.55 3,12C3,11.45 3.196,10.979 3.588,10.587C3.979,10.196 4.45,10 5,10C5.55,10 6.021,10.196 6.412,10.587C6.804,10.979 7,11.45 7,12C7,12.55 6.804,13.021 6.412,13.413C6.021,13.804 5.55,14 5,14ZM5,8C4.45,8 3.979,7.804 3.588,7.412C3.196,7.021 3,6.55 3,6C3,5.45 3.196,4.979 3.588,4.588C3.979,4.196 4.45,4 5,4C5.55,4 6.021,4.196 6.412,4.588C6.804,4.979 7,5.45 7,6C7,6.55 6.804,7.021 6.412,7.412C6.021,7.804 5.55,8 5,8Z"
+      android:pathData="M8.333,15.834C8.097,15.834 7.899,15.754 7.74,15.594C7.58,15.435 7.5,15.237 7.5,15.001C7.5,14.764 7.58,14.567 7.74,14.407C7.899,14.247 8.097,14.167 8.333,14.167H16.667C16.903,14.167 17.101,14.247 17.26,14.407C17.42,14.567 17.5,14.764 17.5,15.001C17.5,15.237 17.42,15.435 17.26,15.594C17.101,15.754 16.903,15.834 16.667,15.834H8.333ZM8.333,10.834C8.097,10.834 7.899,10.754 7.74,10.594C7.58,10.435 7.5,10.237 7.5,10.001C7.5,9.765 7.58,9.567 7.74,9.407C7.899,9.247 8.097,9.167 8.333,9.167H16.667C16.903,9.167 17.101,9.247 17.26,9.407C17.42,9.567 17.5,9.765 17.5,10.001C17.5,10.237 17.42,10.435 17.26,10.594C17.101,10.754 16.903,10.834 16.667,10.834H8.333ZM8.333,5.834C8.097,5.834 7.899,5.754 7.74,5.594C7.58,5.435 7.5,5.237 7.5,5.001C7.5,4.765 7.58,4.567 7.74,4.407C7.899,4.247 8.097,4.167 8.333,4.167H16.667C16.903,4.167 17.101,4.247 17.26,4.407C17.42,4.567 17.5,4.765 17.5,5.001C17.5,5.237 17.42,5.435 17.26,5.594C17.101,5.754 16.903,5.834 16.667,5.834H8.333ZM4.167,16.667C3.708,16.667 3.316,16.504 2.99,16.178C2.663,15.851 2.5,15.459 2.5,15.001C2.5,14.542 2.663,14.15 2.99,13.824C3.316,13.497 3.708,13.334 4.167,13.334C4.625,13.334 5.017,13.497 5.344,13.824C5.67,14.15 5.833,14.542 5.833,15.001C5.833,15.459 5.67,15.851 5.344,16.178C5.017,16.504 4.625,16.667 4.167,16.667ZM4.167,11.667C3.708,11.667 3.316,11.504 2.99,11.178C2.663,10.851 2.5,10.459 2.5,10.001C2.5,9.542 2.663,9.15 2.99,8.824C3.316,8.497 3.708,8.334 4.167,8.334C4.625,8.334 5.017,8.497 5.344,8.824C5.67,9.15 5.833,9.542 5.833,10.001C5.833,10.459 5.67,10.851 5.344,11.178C5.017,11.504 4.625,11.667 4.167,11.667ZM4.167,6.667C3.708,6.667 3.316,6.504 2.99,6.178C2.663,5.851 2.5,5.459 2.5,5.001C2.5,4.542 2.663,4.15 2.99,3.824C3.316,3.497 3.708,3.334 4.167,3.334C4.625,3.334 5.017,3.497 5.344,3.824C5.67,4.15 5.833,4.542 5.833,5.001C5.833,5.459 5.67,5.851 5.344,6.178C5.017,6.504 4.625,6.667 4.167,6.667Z"


⚠️ Very long vector path (1863 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_cancel.xml

+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M4.393,4.393C-1.464,10.251 -1.464,19.749 4.393,25.607C10.251,31.465 19.749,31.465 25.607,25.607C31.465,19.749 31.465,10.251 25.607,4.393C19.749,-1.464 10.251,-1.464 4.393,4.393ZM11.465,19.95L15,16.414L18.535,19.95C18.736,20.15 18.972,20.25 19.243,20.25C19.514,20.25 19.749,20.15 19.95,19.95C20.15,19.749 20.25,19.514 20.25,19.243C20.25,18.972 20.15,18.736 19.95,18.535L16.414,15L19.95,11.465C20.15,11.264 20.25,11.028 20.25,10.757C20.25,10.486 20.15,10.251 19.95,10.05C19.749,9.85 19.514,9.75 19.243,9.75C18.972,9.75 18.736,9.85 18.535,10.05L15,13.586L11.465,10.05C11.264,9.85 11.028,9.75 10.757,9.75C10.486,9.75 10.251,9.85 10.05,10.05C9.85,10.251 9.75,10.486 9.75,10.757C9.75,11.028 9.85,11.264 10.05,11.465L13.586,15L10.05,18.535C9.85,18.736 9.75,18.972 9.75,19.243C9.75,19.514 9.85,19.749 10.05,19.95C10.251,20.15 10.486,20.25 10.757,20.25C11.028,20.25 11.264,20.15 11.465,19.95Z"


⚠️ Very long vector path (883 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_cancel.xml

+  <path
+      android:pathData="M4.393,4.393C-1.464,10.251 -1.464,19.749 4.393,25.607C10.251,31.465 19.749,31.465 25.607,25.607C31.465,19.749 31.465,10.251 25.607,4.393C19.749,-1.464 10.251,-1.464 4.393,4.393ZM11.465,19.95L15,16.414L18.535,19.95C18.736,20.15 18.972,20.25 19.243,20.25C19.514,20.25 19.749,20.15 19.95,19.95C20.15,19.749 20.25,19.514 20.25,19.243C20.25,18.972 20.15,18.736 19.95,18.535L16.414,15L19.95,11.465C20.15,11.264 20.25,11.028 20.25,10.757C20.25,10.486 20.15,10.251 19.95,10.05C19.749,9.85 19.514,9.75 19.243,9.75C18.972,9.75 18.736,9.85 18.535,10.05L15,13.586L11.465,10.05C11.264,9.85 11.028,9.75 10.757,9.75C10.486,9.75 10.251,9.85 10.05,10.05C9.85,10.251 9.75,10.486 9.75,10.757C9.75,11.028 9.85,11.264 10.05,11.465L13.586,15L10.05,18.535C9.85,18.736 9.75,18.972 9.75,19.243C9.75,19.514 9.85,19.749 10.05,19.95C10.251,20.15 10.486,20.25 10.757,20.25C11.028,20.25 11.264,20.15 11.465,19.95Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>


⚠️ Attribute fillType is only used in API level 24 and higher (current min is 23)

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_code_block.xml

  <path
-      android:pathData="M8.825,12L10.3,10.525C10.5,10.325 10.6,10.092 10.6,9.825C10.6,9.558 10.5,9.325 10.3,9.125C10.1,8.925 9.863,8.825 9.587,8.825C9.313,8.825 9.075,8.925 8.875,9.125L6.7,11.3C6.6,11.4 6.529,11.508 6.488,11.625C6.446,11.742 6.425,11.867 6.425,12C6.425,12.133 6.446,12.258 6.488,12.375C6.529,12.492 6.6,12.6 6.7,12.7L8.875,14.875C9.075,15.075 9.313,15.175 9.587,15.175C9.863,15.175 10.1,15.075 10.3,14.875C10.5,14.675 10.6,14.442 10.6,14.175C10.6,13.908 10.5,13.675 10.3,13.475L8.825,12ZM15.175,12L13.7,13.475C13.5,13.675 13.4,13.908 13.4,14.175C13.4,14.442 13.5,14.675 13.7,14.875C13.9,15.075 14.137,15.175 14.413,15.175C14.688,15.175 14.925,15.075 15.125,14.875L17.3,12.7C17.4,12.6 17.471,12.492 17.513,12.375C17.554,12.258 17.575,12.133 17.575,12C17.575,11.867 17.554,11.742 17.513,11.625C17.471,11.508 17.4,11.4 17.3,11.3L15.125,9.125C15.025,9.025 14.913,8.95 14.788,8.9C14.663,8.85 14.538,8.825 14.413,8.825C14.288,8.825 14.163,8.85 14.038,8.9C13.913,8.95 13.8,9.025 13.7,9.125C13.5,9.325 13.4,9.558 13.4,9.825C13.4,10.092 13.5,10.325 13.7,10.525L15.175,12ZM5,21C4.45,21 3.979,20.804 3.588,20.413C3.196,20.021 3,19.55 3,19V5C3,4.45 3.196,3.979 3.588,3.588C3.979,3.196 4.45,3 5,3H19C19.55,3 20.021,3.196 20.413,3.588C20.804,3.979 21,4.45 21,5V19C21,19.55 20.804,20.021 20.413,20.413C20.021,20.804 19.55,21 19,21H5ZM5,19H19V5H5V19Z"
+      android:pathData="M7.354,10L8.583,8.771C8.75,8.604 8.833,8.41 8.833,8.188C8.833,7.965 8.75,7.771 8.583,7.604C8.417,7.438 8.219,7.354 7.99,7.354C7.76,7.354 7.563,7.438 7.396,7.604L5.583,9.417C5.5,9.5 5.441,9.59 5.406,9.688C5.372,9.785 5.354,9.889 5.354,10C5.354,10.111 5.372,10.215 5.406,10.313C5.441,10.41 5.5,10.5 5.583,10.583L7.396,12.396C7.563,12.563 7.76,12.646 7.99,12.646C8.219,12.646 8.417,12.563 8.583,12.396C8.75,12.229 8.833,12.035 8.833,11.813C8.833,11.59 8.75,11.396 8.583,11.229L7.354,10ZM12.646,10L11.417,11.229C11.25,11.396 11.167,11.59 11.167,11.813C11.167,12.035 11.25,12.229 11.417,12.396C11.583,12.563 11.781,12.646 12.01,12.646C12.24,12.646 12.438,12.563 12.604,12.396L14.417,10.583C14.5,10.5 14.559,10.41 14.594,10.313C14.628,10.215 14.646,10.111 14.646,10C14.646,9.889 14.628,9.785 14.594,9.688C14.559,9.59 14.5,9.5 14.417,9.417L12.604,7.604C12.521,7.521 12.427,7.458 12.323,7.417C12.219,7.375 12.115,7.354 12.01,7.354C11.906,7.354 11.802,7.375 11.698,7.417C11.594,7.458 11.5,7.521 11.417,7.604C11.25,7.771 11.167,7.965 11.167,8.188C11.167,8.41 11.25,8.604 11.417,8.771L12.646,10ZM4.167,17.5C3.708,17.5 3.316,17.337 2.99,17.01C2.663,16.684 2.5,16.292 2.5,15.833V4.167C2.5,3.708 2.663,3.316 2.99,2.99C3.316,2.663 3.708,2.5 4.167,2.5H15.833C16.292,2.5 16.684,2.663 17.01,2.99C17.337,3.316 17.5,3.708 17.5,4.167V15.833C17.5,16.292 17.337,16.684 17.01,17.01C16.684,17.337 16.292,17.5 15.833,17.5H4.167ZM4.167,15.833H15.833V4.167H4.167V15.833Z"


⚠️ Very long vector path (1442 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_link.xml

  <path
-      android:pathData="M12,19.071C11.022,20.049 9.843,20.538 8.464,20.538C7.086,20.538 5.907,20.049 4.929,19.071C3.951,18.093 3.462,16.914 3.462,15.536C3.462,14.157 3.951,12.978 4.929,12L7.05,9.879C7.251,9.678 7.486,9.578 7.757,9.578C8.028,9.578 8.264,9.678 8.464,9.879C8.665,10.079 8.765,10.315 8.765,10.586C8.765,10.857 8.665,11.093 8.464,11.293L6.343,13.414C5.754,14.003 5.459,14.711 5.459,15.536C5.459,16.361 5.754,17.068 6.343,17.657C6.932,18.246 7.639,18.541 8.464,18.541C9.289,18.541 9.997,18.246 10.586,17.657L12.707,15.536C12.907,15.335 13.143,15.235 13.414,15.235C13.685,15.235 13.921,15.335 14.121,15.536C14.322,15.736 14.422,15.972 14.422,16.243C14.422,16.514 14.322,16.749 14.121,16.95L12,19.071ZM10.586,14.828C10.385,15.029 10.15,15.129 9.879,15.129C9.608,15.129 9.372,15.029 9.172,14.828C8.971,14.628 8.871,14.392 8.871,14.121C8.871,13.85 8.971,13.615 9.172,13.414L13.414,9.172C13.615,8.971 13.85,8.871 14.121,8.871C14.392,8.871 14.628,8.971 14.828,9.172C15.029,9.372 15.129,9.608 15.129,9.879C15.129,10.15 15.029,10.385 14.828,10.586L10.586,14.828ZM16.95,14.121C16.749,14.322 16.514,14.422 16.243,14.422C15.972,14.422 15.736,14.322 15.535,14.121C15.335,13.921 15.235,13.685 15.235,13.414C15.235,13.143 15.335,12.908 15.535,12.707L17.657,10.586C18.246,9.997 18.541,9.289 18.541,8.465C18.541,7.64 18.246,6.932 17.657,6.343C17.068,5.754 16.361,5.459 15.535,5.459C14.711,5.459 14.003,5.754 13.414,6.343L11.293,8.465C11.092,8.665 10.857,8.765 10.586,8.765C10.315,8.765 10.079,8.665 9.879,8.465C9.678,8.264 9.578,8.028 9.578,7.757C9.578,7.486 9.678,7.251 9.879,7.05L12,4.929C12.978,3.951 14.157,3.462 15.535,3.462C16.914,3.462 18.093,3.951 19.071,4.929C20.049,5.907 20.538,7.086 20.538,8.465C20.538,9.843 20.049,11.022 19.071,12L16.95,14.121Z"
+      android:pathData="M10,15.893C9.185,16.708 8.203,17.115 7.054,17.115C5.905,17.115 4.923,16.708 4.107,15.893C3.292,15.077 2.885,14.095 2.885,12.946C2.885,11.797 3.292,10.815 4.107,10L5.875,8.232C6.042,8.065 6.239,7.982 6.464,7.982C6.69,7.982 6.887,8.065 7.054,8.232C7.221,8.399 7.304,8.596 7.304,8.822C7.304,9.047 7.221,9.244 7.054,9.411L5.286,11.179C4.795,11.67 4.549,12.259 4.549,12.946C4.549,13.634 4.795,14.223 5.286,14.714C5.777,15.205 6.366,15.451 7.054,15.451C7.741,15.451 8.33,15.205 8.822,14.714L10.589,12.946C10.756,12.779 10.953,12.696 11.179,12.696C11.404,12.696 11.601,12.779 11.768,12.946C11.935,13.113 12.018,13.31 12.018,13.536C12.018,13.761 11.935,13.958 11.768,14.125L10,15.893ZM8.822,12.357C8.655,12.524 8.458,12.608 8.232,12.608C8.006,12.608 7.81,12.524 7.643,12.357C7.476,12.19 7.393,11.994 7.393,11.768C7.393,11.542 7.476,11.345 7.643,11.179L11.179,7.643C11.345,7.476 11.542,7.393 11.768,7.393C11.994,7.393 12.19,7.476 12.357,7.643C12.524,7.81 12.608,8.006 12.608,8.232C12.608,8.458 12.524,8.655 12.357,8.822L8.822,12.357ZM14.125,11.768C13.958,11.935 13.761,12.018 13.536,12.018C13.31,12.018 13.113,11.935 12.946,11.768C12.779,11.601 12.696,11.404 12.696,11.179C12.696,10.953 12.779,10.756 12.946,10.589L14.714,8.822C15.205,8.33 15.451,7.741 15.451,7.054C15.451,6.366 15.205,5.777 14.714,5.286C14.223,4.795 13.634,4.549 12.946,4.549C12.259,4.549 11.67,4.795 11.179,5.286L9.411,7.054C9.244,7.221 9.047,7.304 8.822,7.304C8.596,7.304 8.399,7.221 8.232,7.054C8.065,6.887 7.982,6.69 7.982,6.464C7.982,6.239 8.065,6.042 8.232,5.875L10,4.107C10.815,3.292 11.797,2.885 12.946,2.885C14.095,2.885 15.077,3.292 15.893,4.107C16.708,4.923 17.115,5.905 17.115,7.054C17.115,8.203 16.708,9.185 15.893,10L14.125,11.768Z"


⚠️ Very long vector path (1704 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_numbered_list.xml

  <path
-      android:pathData="M3.75,22C3.533,22 3.354,21.929 3.213,21.788C3.071,21.646 3,21.467 3,21.25C3,21.033 3.071,20.854 3.213,20.712C3.354,20.571 3.533,20.5 3.75,20.5H5.5V19.75H4.75C4.533,19.75 4.354,19.679 4.213,19.538C4.071,19.396 4,19.217 4,19C4,18.783 4.071,18.604 4.213,18.462C4.354,18.321 4.533,18.25 4.75,18.25H5.5V17.5H3.75C3.533,17.5 3.354,17.429 3.213,17.288C3.071,17.146 3,16.967 3,16.75C3,16.533 3.071,16.354 3.213,16.212C3.354,16.071 3.533,16 3.75,16H6C6.283,16 6.521,16.096 6.713,16.288C6.904,16.479 7,16.717 7,17V18C7,18.283 6.904,18.521 6.713,18.712C6.521,18.904 6.283,19 6,19C6.283,19 6.521,19.096 6.713,19.288C6.904,19.479 7,19.717 7,20V21C7,21.283 6.904,21.521 6.713,21.712C6.521,21.904 6.283,22 6,22H3.75ZM3.75,15C3.533,15 3.354,14.929 3.213,14.788C3.071,14.646 3,14.467 3,14.25V12.25C3,11.967 3.096,11.729 3.287,11.538C3.479,11.346 3.717,11.25 4,11.25H5.5V10.5H3.75C3.533,10.5 3.354,10.429 3.213,10.288C3.071,10.146 3,9.967 3,9.75C3,9.533 3.071,9.354 3.213,9.212C3.354,9.071 3.533,9 3.75,9H6C6.283,9 6.521,9.096 6.713,9.288C6.904,9.479 7,9.717 7,10V11.75C7,12.033 6.904,12.271 6.713,12.462C6.521,12.654 6.283,12.75 6,12.75H4.5V13.5H6.25C6.467,13.5 6.646,13.571 6.787,13.712C6.929,13.854 7,14.033 7,14.25C7,14.467 6.929,14.646 6.787,14.788C6.646,14.929 6.467,15 6.25,15H3.75ZM5.25,8C5.033,8 4.854,7.929 4.713,7.787C4.571,7.646 4.5,7.467 4.5,7.25V3.5H3.75C3.533,3.5 3.354,3.429 3.213,3.287C3.071,3.146 3,2.967 3,2.75C3,2.533 3.071,2.354 3.213,2.213C3.354,2.071 3.533,2 3.75,2H5.25C5.467,2 5.646,2.071 5.787,2.213C5.929,2.354 6,2.533 6,2.75V7.25C6,7.467 5.929,7.646 5.787,7.787C5.646,7.929 5.467,8 5.25,8ZM10,19C9.717,19 9.479,18.904 9.288,18.712C9.096,18.521 9,18.283 9,18C9,17.717 9.096,17.479 9.288,17.288C9.479,17.096 9.717,17 10,17H20C20.283,17 20.521,17.096 20.712,17.288C20.904,17.479 21,17.717 21,18C21,18.283 20.904,18.521 20.712,18.712C20.521,18.904 20.283,19 20,19H10ZM10,13C9.717,13 9.479,12.904 9.288,12.712C9.096,12.521 9,12.283 9,12C9,11.717 9.096,11.479 9.288,11.288C9.479,11.096 9.717,11 10,11H20C20.283,11 20.521,11.096 20.712,11.288C20.904,11.479 21,11.717 21,12C21,12.283 20.904,12.521 20.712,12.712C20.521,12.904 20.283,13 20,13H10ZM10,7C9.717,7 9.479,6.904 9.288,6.713C9.096,6.521 9,6.283 9,6C9,5.717 9.096,5.479 9.288,5.287C9.479,5.096 9.717,5 10,5H20C20.283,5 20.521,5.096 20.712,5.287C20.904,5.479 21,5.717 21,6C21,6.283 20.904,6.521 20.712,6.713C20.521,6.904 20.283,7 20,7H10Z"
+      android:pathData="M3.125,18.333C2.944,18.333 2.795,18.274 2.677,18.156C2.559,18.038 2.5,17.888 2.5,17.708C2.5,17.527 2.559,17.378 2.677,17.26C2.795,17.142 2.944,17.083 3.125,17.083H4.583V16.458H3.958C3.778,16.458 3.628,16.399 3.51,16.281C3.392,16.163 3.333,16.013 3.333,15.833C3.333,15.652 3.392,15.503 3.51,15.385C3.628,15.267 3.778,15.208 3.958,15.208H4.583V14.583H3.125C2.944,14.583 2.795,14.524 2.677,14.406C2.559,14.288 2.5,14.138 2.5,13.958C2.5,13.777 2.559,13.628 2.677,13.51C2.795,13.392 2.944,13.333 3.125,13.333H5C5.236,13.333 5.434,13.413 5.594,13.572C5.753,13.732 5.833,13.93 5.833,14.166V14.999C5.833,15.236 5.753,15.433 5.594,15.593C5.434,15.753 5.236,15.833 5,15.833C5.236,15.833 5.434,15.913 5.594,16.072C5.753,16.232 5.833,16.43 5.833,16.666V17.499C5.833,17.736 5.753,17.933 5.594,18.093C5.434,18.253 5.236,18.333 5,18.333H3.125ZM3.125,12.499C2.944,12.499 2.795,12.44 2.677,12.322C2.559,12.204 2.5,12.055 2.5,11.874V10.208C2.5,9.972 2.58,9.774 2.74,9.614C2.899,9.454 3.097,9.374 3.333,9.374H4.583V8.749H3.125C2.944,8.749 2.795,8.69 2.677,8.572C2.559,8.454 2.5,8.305 2.5,8.124C2.5,7.944 2.559,7.794 2.677,7.676C2.795,7.558 2.944,7.499 3.125,7.499H5C5.236,7.499 5.434,7.579 5.594,7.739C5.753,7.899 5.833,8.097 5.833,8.333V9.791C5.833,10.027 5.753,10.225 5.594,10.385C5.434,10.545 5.236,10.624 5,10.624H3.75V11.249H5.208C5.389,11.249 5.538,11.308 5.656,11.426C5.774,11.545 5.833,11.694 5.833,11.874C5.833,12.055 5.774,12.204 5.656,12.322C5.538,12.44 5.389,12.499 5.208,12.499H3.125ZM4.375,6.666C4.194,6.666 4.045,6.607 3.927,6.489C3.809,6.371 3.75,6.222 3.75,6.041V2.916H3.125C2.944,2.916 2.795,2.857 2.677,2.739C2.559,2.621 2.5,2.472 2.5,2.291C2.5,2.11 2.559,1.961 2.677,1.843C2.795,1.725 2.944,1.666 3.125,1.666H4.375C4.556,1.666 4.705,1.725 4.823,1.843C4.941,1.961 5,2.11 5,2.291V6.041C5,6.222 4.941,6.371 4.823,6.489C4.705,6.607 4.556,6.666 4.375,6.666ZM8.333,15.833C8.097,15.833 7.899,15.753 7.74,15.593C7.58,15.433 7.5,15.236 7.5,14.999C7.5,14.763 7.58,14.565 7.74,14.406C7.899,14.246 8.097,14.166 8.333,14.166H16.667C16.903,14.166 17.101,14.246 17.26,14.406C17.42,14.565 17.5,14.763 17.5,14.999C17.5,15.236 17.42,15.433 17.26,15.593C17.101,15.753 16.903,15.833 16.667,15.833H8.333ZM8.333,10.833C8.097,10.833 7.899,10.753 7.74,10.593C7.58,10.433 7.5,10.236 7.5,9.999C7.5,9.763 7.58,9.565 7.74,9.406C7.899,9.246 8.097,9.166 8.333,9.166H16.667C16.903,9.166 17.101,9.246 17.26,9.406C17.42,9.565 17.5,9.763 17.5,9.999C17.5,10.236 17.42,10.433 17.26,10.593C17.101,10.753 16.903,10.833 16.667,10.833H8.333ZM8.333,5.833C8.097,5.833 7.899,5.753 7.74,5.593C7.58,5.433 7.5,5.235 7.5,4.999C7.5,4.763 7.58,4.565 7.74,4.406C7.899,4.246 8.097,4.166 8.333,4.166H16.667C16.903,4.166 17.101,4.246 17.26,4.406C17.42,4.565 17.5,4.763 17.5,4.999C17.5,5.235 17.42,5.433 17.26,5.593C17.101,5.753 16.903,5.833 16.667,5.833H8.333Z"


⚠️ Very long vector path (2808 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:06Z

libraries/designsystem/src/main/res/drawable/ic_plus.xml

+  <path
+      android:pathData="M0,15C0,23.284 6.716,30 15,30C23.284,30 30,23.284 30,15C30,6.716 23.284,0 15,0C6.716,0 0,6.716 0,15ZM16,21V16H21C21.283,16 21.521,15.904 21.712,15.712C21.904,15.521 22,15.283 22,15C22,14.717 21.904,14.479 21.712,14.288C21.521,14.096 21.283,14 21,14H16V9C16,8.717 15.904,8.479 15.712,8.288C15.521,8.096 15.283,8 15,8C14.717,8 14.479,8.096 14.288,8.288C14.096,8.479 14,8.717 14,9L14,14L9,14C8.717,14 8.479,14.096 8.288,14.288C8.096,14.479 8,14.717 8,15C8,15.283 8.096,15.521 8.288,15.712C8.479,15.904 8.717,16 9,16H14V21C14,21.283 14.096,21.521 14.288,21.712C14.479,21.904 14.717,22 15,22C15.283,22 15.521,21.904 15.712,21.712C15.904,21.521 16,21.283 16,21Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>


⚠️ Attribute fillType is only used in API level 24 and higher (current min is 23)

ElementBot · 2023-09-15T09:07:07Z

libraries/designsystem/src/main/res/drawable/ic_strikethrough.xml

  <path
-      android:pathData="M12.15,20C10.883,20 9.758,19.625 8.775,18.875C7.792,18.125 7.083,17.1 6.65,15.8L8.85,14.85C9.083,15.65 9.488,16.308 10.063,16.825C10.637,17.342 11.35,17.6 12.2,17.6C12.9,17.6 13.533,17.433 14.1,17.1C14.667,16.767 14.95,16.233 14.95,15.5C14.95,15.2 14.892,14.925 14.775,14.675C14.658,14.425 14.5,14.2 14.3,14H17.1C17.183,14.233 17.246,14.471 17.288,14.712C17.329,14.954 17.35,15.217 17.35,15.5C17.35,16.933 16.837,18.042 15.813,18.825C14.788,19.608 13.567,20 12.15,20ZM3,12C2.717,12 2.479,11.904 2.287,11.712C2.096,11.521 2,11.283 2,11C2,10.717 2.096,10.479 2.287,10.288C2.479,10.096 2.717,10 3,10H21C21.283,10 21.521,10.096 21.712,10.288C21.904,10.479 22,10.717 22,11C22,11.283 21.904,11.521 21.712,11.712C21.521,11.904 21.283,12 21,12H3ZM12.05,3.85C13.15,3.85 14.113,4.121 14.938,4.662C15.762,5.204 16.4,6.033 16.85,7.15L14.65,8.125C14.5,7.642 14.221,7.208 13.813,6.825C13.404,6.442 12.833,6.25 12.1,6.25C11.417,6.25 10.85,6.404 10.4,6.713C9.95,7.021 9.7,7.45 9.65,8H7.25C7.283,6.85 7.738,5.871 8.613,5.063C9.488,4.254 10.633,3.85 12.05,3.85Z"
+      android:pathData="M10.125,16.665C9.07,16.665 8.132,16.353 7.313,15.728C6.493,15.103 5.903,14.249 5.542,13.165L7.375,12.374C7.57,13.04 7.906,13.589 8.385,14.019C8.865,14.45 9.458,14.665 10.167,14.665C10.75,14.665 11.278,14.526 11.75,14.249C12.222,13.971 12.458,13.526 12.458,12.915C12.458,12.665 12.41,12.436 12.313,12.228C12.215,12.019 12.083,11.832 11.917,11.665H14.25C14.319,11.86 14.372,12.058 14.406,12.259C14.441,12.46 14.458,12.679 14.458,12.915C14.458,14.11 14.031,15.033 13.177,15.686C12.323,16.339 11.306,16.665 10.125,16.665ZM2.5,9.999C2.264,9.999 2.066,9.919 1.906,9.759C1.747,9.599 1.667,9.401 1.667,9.165C1.667,8.929 1.747,8.731 1.906,8.572C2.066,8.412 2.264,8.332 2.5,8.332H17.5C17.736,8.332 17.934,8.412 18.094,8.572C18.254,8.731 18.333,8.929 18.333,9.165C18.333,9.401 18.254,9.599 18.094,9.759C17.934,9.919 17.736,9.999 17.5,9.999H2.5ZM10.042,3.207C10.958,3.207 11.76,3.433 12.448,3.884C13.135,4.335 13.667,5.026 14.042,5.957L12.208,6.77C12.083,6.367 11.851,6.006 11.51,5.686C11.17,5.367 10.694,5.207 10.083,5.207C9.514,5.207 9.042,5.335 8.667,5.592C8.292,5.849 8.083,6.207 8.042,6.665H6.042C6.07,5.707 6.448,4.891 7.177,4.217C7.906,3.544 8.861,3.207 10.042,3.207Z"


⚠️ Very long vector path (1162 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

ElementBot · 2023-09-15T09:07:07Z

libraries/designsystem/src/main/res/drawable/ic_underline.xml

  <path
-      android:pathData="M6,21C5.717,21 5.479,20.904 5.287,20.712C5.096,20.521 5,20.283 5,20C5,19.717 5.096,19.479 5.287,19.288C5.479,19.096 5.717,19 6,19H18C18.283,19 18.521,19.096 18.712,19.288C18.904,19.479 19,19.717 19,20C19,20.283 18.904,20.521 18.712,20.712C18.521,20.904 18.283,21 18,21H6ZM12,17C10.317,17 9.008,16.475 8.075,15.425C7.142,14.375 6.675,12.983 6.675,11.25V4.275C6.675,3.925 6.804,3.625 7.063,3.375C7.321,3.125 7.625,3 7.975,3C8.325,3 8.625,3.125 8.875,3.375C9.125,3.625 9.25,3.925 9.25,4.275V11.4C9.25,12.333 9.483,13.092 9.95,13.675C10.417,14.258 11.1,14.55 12,14.55C12.9,14.55 13.583,14.258 14.05,13.675C14.517,13.092 14.75,12.333 14.75,11.4V4.275C14.75,3.925 14.879,3.625 15.137,3.375C15.396,3.125 15.7,3 16.05,3C16.4,3 16.7,3.125 16.95,3.375C17.2,3.625 17.325,3.925 17.325,4.275V11.25C17.325,12.983 16.858,14.375 15.925,15.425C14.992,16.475 13.683,17 12,17Z"
+      android:pathData="M5,17.5C4.764,17.5 4.566,17.42 4.406,17.26C4.247,17.101 4.167,16.903 4.167,16.667C4.167,16.431 4.247,16.233 4.406,16.073C4.566,15.913 4.764,15.833 5,15.833H15C15.236,15.833 15.434,15.913 15.594,16.073C15.754,16.233 15.833,16.431 15.833,16.667C15.833,16.903 15.754,17.101 15.594,17.26C15.434,17.42 15.236,17.5 15,17.5H5ZM10,14.167C8.597,14.167 7.507,13.729 6.729,12.854C5.951,11.979 5.563,10.819 5.563,9.375V3.563C5.563,3.271 5.67,3.021 5.885,2.813C6.101,2.604 6.354,2.5 6.646,2.5C6.938,2.5 7.188,2.604 7.396,2.813C7.604,3.021 7.708,3.271 7.708,3.563V9.5C7.708,10.278 7.903,10.91 8.292,11.396C8.681,11.882 9.25,12.125 10,12.125C10.75,12.125 11.319,11.882 11.708,11.396C12.097,10.91 12.292,10.278 12.292,9.5V3.563C12.292,3.271 12.399,3.021 12.615,2.813C12.83,2.604 13.083,2.5 13.375,2.5C13.667,2.5 13.917,2.604 14.125,2.813C14.333,3.021 14.438,3.271 14.438,3.563V9.375C14.438,10.819 14.049,11.979 13.271,12.854C12.493,13.729 11.403,14.167 10,14.167Z"


⚠️ Very long vector path (947 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.

jonnyandrew and others added 11 commits September 14, 2023 12:53

Fix composer height and padding

2549b99

Update plus and cancel icons with design system icons

29fa7a7

Update border so that it is always visible

6c11d36

Update placeholder color

55fe620

Update send and tick icons

6473aae

Update spacing around formatting buttons

a3aa51c

Update design of formatting buttons

8342a7a

Update screenshots

c035999

Update RTE icons

1e45db1

Reduce bottom padding

800f340

Update screenshots

620e9ba

Fix lint errors

d004405

jonnyandrew marked this pull request as ready for review September 14, 2023 15:13

jonnyandrew requested a review from a team as a code owner September 14, 2023 15:13

jonnyandrew requested review from julioromano and removed request for a team September 14, 2023 15:13

jonnyandrew mentioned this pull request Sep 14, 2023

[Design review] Improve rich text editor UI #1315

Closed

4 tasks

julioromano requested a review from jmartinesp September 15, 2023 07:07

julioromano approved these changes Sep 15, 2023

View reviewed changes

jmartinesp reviewed Sep 15, 2023

View reviewed changes

.../textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt Show resolved Hide resolved

.../textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt Show resolved Hide resolved

jonnyandrew added 2 commits September 15, 2023 09:25

Add changelog

9cf2135

Merge branch 'develop' of github.com:vector-im/element-x-android into…

cdbb43e

… jonny/rte-design

jmartinesp approved these changes Sep 15, 2023

View reviewed changes

Update screenshots

c1390f3

ElementBot reviewed Sep 15, 2023

View reviewed changes

jonnyandrew merged commit 6563dca into develop Sep 15, 2023

jonnyandrew deleted the jonny/rte-design branch September 15, 2023 10:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Rich text editor] Update design #1332

[Rich text editor] Update design #1332

jonnyandrew commented Sep 14, 2023 •

edited

Loading

github-actions bot commented Sep 14, 2023 •

edited

Loading

codecov bot commented Sep 14, 2023 •

edited

Loading

julioromano left a comment •

edited

Loading

jmartinesp left a comment

jmartinesp left a comment

sonarqubecloud bot commented Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

ElementBot Sep 15, 2023

[Rich text editor] Update design #1332

[Rich text editor] Update design #1332

Conversation

jonnyandrew commented Sep 14, 2023 • edited Loading

Type of change

Content

Motivation and context

Screenshots / GIFs

Tests

Tested devices

Checklist

github-actions bot commented Sep 14, 2023 • edited Loading

codecov bot commented Sep 14, 2023 • edited Loading

Codecov Report

julioromano left a comment • edited Loading

Choose a reason for hiding this comment

jmartinesp left a comment

Choose a reason for hiding this comment

jmartinesp left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Sep 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonnyandrew commented Sep 14, 2023 •

edited

Loading

github-actions bot commented Sep 14, 2023 •

edited

Loading

codecov bot commented Sep 14, 2023 •

edited

Loading

julioromano left a comment •

edited

Loading