feat: applet theme - reskinning

[peterpeterparker]

Feature Description

For the cooperation with external studies, it was suggested that applets' design should becomes more flexible to adapt external studies. To limit the scope of the feature, the idea is to introduce themes, so that a theme (a set of predefined style) can be applied to an applet.

Themes have to be configured by the team in the database, there is no GUI to create and handle these.

If no themes are defined, no theme should appear in the administration panel and nothing should change across the platform and apps, UI remains the same.

To the contrary, if themes are defined in the database, upon creating or editing an applet in the admin, user should be able to select a theme. To do so, a dropdown of themes will be presented on the applet' details page.

If a theme is selected and therefore save with the applet data, the UI of the applet should inherits the theming, its options, in the mobile application.

Scope of the theming is limited to following option:

• applet primary color: applied for the header and footer in the applet in the app
• applet background: an image which would be applied instead of the default background image of the applet
• applet logo: a logo which should be displayed in each applet cards in the list of applets of the end user

All theming options are optional and once again, have to be defined by the team.

Screenshots

Logo:

Header and footer with primary color + custom backgroung:

[natalia-muzyka]

@BarrySunderland @WorldImpex how can I test this feature? Are there separate schemas with defined themes or all the schemas should contain themes?

[WorldImpex]

@natalia-muzyka There should be a way to define which skin the editor wants for the applet in the builder

[peterpeterparker]

As documented above:

Themes have to be configured by the team in the database, there is no GUI to create and handle these.

There is an API Endpoint (CRUD) which can be use by the developer or admin to set themes in the database.

If no themes are defined, no theme should appear in the administration panel and nothing should change across the platform and apps, UI remains the same.

If no themes are defined, set in the database, there are no themes available in the administration panel respectively the editor cannot select a theme. If there are themes defined, then a dropdown with a list of themes is made available in the applet builder of the administration console.

[WorldImpex]

@peterpeterparker When will a theme be added so we can QA?

[peterpeterparker]

Do not know. That should probably be discussed between Wil, Anirudh and @BarrySunderland

For QA I guess you can also define "a theme", does not have to be "the theme".

[natalia-muzyka]

Applet themes are applied according to the selected in the applet builder themes: Theme 1 name: mindlogger
logo: https://mindlogger.org/assets/logos/mindlogger-logo-transparent.png
backgroundImage: https://mindlogger.org/assets/img/bg0.jpg
primaryColor: #0067A0
secondaryColor: #FFFFFF
tertiaryColor: #404040
https://www.screencast.com/t/PHkB81Ypuup

Theme 2 name: CRI
logo: https://cri-paris.org/user/themes/cri/images/CRI-sm.png
backgroundImage: https://www.archiliste.fr/sites/default/files/projets/architecture-patrick-mauger/centre-de-recherches-interdisciplinaires-cri-paris/mauger-cri-0918-54.jpg
primaryColor: #82B45F
secondaryColor: #000000
tertiaryColor: #FFFFFF https://www.screencast.com/t/WgVyccAEazI

Few things that I mentioned: 1) all the newly created(manually) applets automatically have the "mindlogger" theme and there is no option to not apply any theme. For the applets uploaded from GitHub schema theme isn't applied but can be edited(selected later): https://www.screencast.com/t/MXy2RTsVx expected: user can create an applet without any theme selected 2) all the old applets (created before the feature was implemented) have no ML logo on the mobile app. In the applet builder, these applets have a dropdown with defined themes and any theme can be applied: https://www.screencast.com/t/jALqwK9BB0dj

---

Question: As per the requirements, as I understand the described #1 actual behavior is an issue. And #2 is correct behavior. Am I right?

Environment: Win 10 // Chrome 92.0.4515.107 macOS 10.15.6 // Safari 13.1.2 (15609.3.5.1.3) Samsung Galaxy S7 Edge SM-G935FD // Android 8.0 ML v0.17.9 (staging) iPhone 6 Plus // iOS 12.3.1 iPad Air 2 Wi-Fi // 1536x2048 // 9.7" // iOS 14.6 Samsung Galaxy Tab S6 SM-T865 // Android 9.0

[WorldImpex]

@natalia-muzyka Yes these are expected behaviors. Thanks for the detailed write up!

[natalia-muzyka]

As per the comment above, the requirements are met. Verified and closed.