kpi is the (frontend) server for KoboToolbox. It includes an API for users to access data and manage their forms, question library, sharing settings, create reports, and export data.
[ ] If you've added code that should be tested, add tests
[ ] If you've changed APIs, update (or create!) the documentation
[x] Ensure the tests pass
[x] Make sure that your code lints and that you've followed our coding style
[x] Write a title and, if necessary, a description of your work suitable for publishing in our release notes
[x] Mention any related issues in this repository (as #ISSUE) and in other repositories (as kobotoolbox/other#ISSUE)
[ ] Open an issue in the docs if there are UI/UX changes
Description
Almost all the places that display user-generated content will now correctly display RTL text (regardless of the app language selected in settings, i.e. Arabic text in English UI will be displayed as RTL).
Basically every place in UI that displays asset name or description, or question name
Added dir="auto" to a lot of places - it makes the browser built-in functionality decide how to render the contents of given HTML node. Some notable components (that will handle RTL out of the box now):
KoboTagsInput
KoboSelect
MultiCheckbox
TextBox (this was already done in #4904)
partially ToggleSwitch: it now works correctly when parent gives it dir="auto"
Migrated few margin-* to margin-inline-*, as the first doesn't changed when RTL direction kicks in, and the latter does it awesomely (Note: we should most probably migrate much more margins in future)
Migrated few text-align: left to text-align: initial, as only the latter supports RTL
KoboSelect component now supports placement (the more generic KoboDropdown already supports placement, so we only had to pass it on)
Fixed few UI issues in the Project → Form → Manage Translations modal
Add language form button was misaligned
Pending status of button was behaving weirdly and inconsistently
Removed accidently duplicated code in jsapp/scss/libs/react-tagsinput.scss
Testing tips:
Create some content using arabic text. I've used https://www.branah.com/arabic to write some random text (note that the tool hijacks the cmd+c shortcut so best to use rightclick→copy). At least have:
A project with submissions
A collection with something inside
Some library items
It would be hard to list all the places touched by this issue, best way for testing would be finding in the UI all the dir="auto" changes. But for sure these places are improved:
Public Collections/My Library/Single collection tables
Checklist
Description
Almost all the places that display user-generated content will now correctly display RTL text (regardless of the app language selected in settings, i.e. Arabic text in English UI will be displayed as RTL).
Notes
Good reading on styling RTL: https://rtlstyling.com/
Things changed:
dir="auto"to a lot of places - it makes the browser built-in functionality decide how to render the contents of given HTML node. Some notable components (that will handle RTL out of the box now):KoboTagsInputKoboSelectMultiCheckboxTextBox(this was already done in #4904)ToggleSwitch: it now works correctly when parent gives itdir="auto"margin-*tomargin-inline-*, as the first doesn't changed when RTL direction kicks in, and the latter does it awesomely (Note: we should most probably migrate much more margins in future)text-align: lefttotext-align: initial, as only the latter supports RTLKoboSelectcomponent now supports placement (the more genericKoboDropdownalready supports placement, so we only had to pass it on)CopyTeamPermissionscomponent (from project sharing modal) now uses ourKoboSelectcomponentjsapp/scss/libs/react-tagsinput.scssTesting tips:
cmd+cshortcut so best to userightclick→copy). At least have:dir="auto"changes. But for sure these places are improved:Related issues
Related to #4904