Merge pull request #1392 from moodlemobile/app-docs

dpalou · web-flow · commit c253cd684058 · 2025-07-02T13:31:56.000Z
Moodle mobile app 5.0 docs update
diff --git a/general/app/customisation/remote-themes.md b/general/app/customisation/remote-themes.md
@@ -23,7 +23,7 @@ Once you have everything ready, you can configure your theme by going to "Site a
 You can get started with the following example, and you should see the background of the top bar change to red once you log into the app:
 
 ```css
-html {
+:root {
     --core-header-toolbar-background: red;
 }
 ```
@@ -76,23 +76,23 @@ Each of these also define other variants: `rgb`, `contrast`, `contrast-rgb`, `sh
 For example, if you want to override the primary color, you'll need to override the following variables:
 
 ```css
-html {
-    --ion-color-primary: #006600;
+:root {
+    --primary: #006600;
 
     /* RGB list of the color */
     --ion-color-primary-rgb: 0,102,0;
 
     /* Black or white, depending on which color gives more contrast */
-    --ion-color-primary-contrast: #ffffff;
+    --primary-contrast: #ffffff;
 
     /* RGB version of the contrast color */
     --ion-color-primary-contrast-rgb: 255,255,255;
 
     /* Slightly darker color. (mix 12% of black) */
-    --ion-color-primary-shade: #005a00;
+    --primary-shade: #005a00;
 
     /* Slightly lighter color. (mix 10% of white) */
-    --ion-color-primary-tint: #1a751a;
+    --primary-tint: #1a751a;
 }
 ```
 
@@ -101,7 +101,7 @@ html {
 Other than the basic and semantic colors, other components and pages define their own variables that you can override. You can look at the source code to find more, but these are some of the most relevant:
 
 ```css
-html {
+:root {
     /* Page background */
     --background-color: white;
     --ion-background-color-rgb: 255, 255, 255;
@@ -120,27 +120,27 @@ html {
 
 ### Targeting different environments
 
-The `html` element contains classes that indicate the environment the app is running on.
+The `:root` element contains classes that indicate the environment the app is running on.
 
 #### Platform
 
-You can specify styles that will only apply to iOS by prepending them with `html.ios`, or `html.md` for Android:
+You can specify styles that will only apply to iOS by prepending them with `:root.ios`, or `:root.md` for Android:
 
 ```css
 /* Red toolbar in iOS */
-html.ios {
+:root.ios {
     --core-header-toolbar-background: red;
 }
 
 /* Green toolbar in Android */
-html.md {
+:root.md {
     --core-header-toolbar-background: green;
 }
 ```
 
 #### Moodle App and Moodle site versions
 
-You can restrict CSS rules to a specific version using one of these classes. For example, when accessing a 3.11.2 site using the 3.9.5 app the following classes will be present in the `html` element:
+You can restrict CSS rules to a specific version using one of these classes. For example, when accessing a 3.11.2 site using the 3.9.5 app the following classes will be present in the `:root` element:
 
 - `version-3`
 - `version-3-11`
@@ -153,12 +153,12 @@ And here's how to use them:
 
 ```css
 /* Red toolbar for Moodle App version 4.1.X */
-html.moodleapp-4-1 {
+:root.moodleapp-4-1 {
     --core-header-toolbar-background: red;
 }
 
 /* Green toolbar for all other versions */
-html {
+:root {
     --core-header-toolbar-background: green;
 }
 ```
@@ -170,16 +170,16 @@ Starting on Moodle App 4.4 you can restrict CSS rules to a specific site theme.
 
 #### Application theme
 
-The application uses a light theme by default, but it adds the `dark` class to the `html` element when it is using a dark theme:
+The application uses a light theme by default, but it adds the `dark` class to the `:root` element when it is using a dark theme:
 
 ```css
 /* Red toolbar for the Light Theme */
-html {
+:root {
     --core-header-toolbar-background: red;
 }
 
 /* Green toolbar for the Dark Theme */
-html.dark {
+:root.dark {
     --core-header-toolbar-background: green;
 }
 ```
@@ -193,7 +193,7 @@ Of course, you can combine any of these classes to create more granular styles.
 Let's say you want to have a red toolbar only in iOS, with the Dark Theme, for a Moodle site running 3.11.X:
 
 ```css
-html.ios.version-3-11.dark {
+:root.ios.version-3-11.dark {
     --core-header-toolbar-background: red;
 }
 ```
@@ -305,7 +305,7 @@ core-tabs, core-tabs-outlet {
 ### Items
 
 ```css
-html {
+:root {
     /* Background */
     --ion-item-background: green;
 
@@ -354,7 +354,7 @@ page-core-mainmenu-more {
 You can personalise some colors in the Login page, but keep in mind that this only includes the credentials page (the one after you select the site).
 
 ```css
-html {
+:root {
     --core-login-background: red;
     --core-login-text-color: blue;
     --core-login-input-background: green;
@@ -365,16 +365,12 @@ html {
 ### Messages page
 
 ```css
-html {
-    --addon-messages-message-bg: white;
-    --addon-messages-message-activated-bg: gray-light;
-    --addon-messages-message-note-text: gray-dark;
-    --addon-messages-message-mine-bg: gray-light;
-    --addon-messages-message-mine-activated-bg: gray;
-    --addon-messages-discussion-badge: orange;
-    --addon-messages-discussion-badge-text: white;
-    --core-send-message-input-background: gray-light;
-    --core-send-message-input-color: black;
+:root {
+    --core-messages-message-bg: white;
+    --core-messages-message-activated-bg: gray-light;
+    --core-messages-message-note-text: gray-dark;
+    --core-messages-message-mine-bg: gray-light;
+    --core-messages-message-mine-activated-bg: gray;
 }
 ```
 
diff --git a/general/app/development/plugins-development-guide/api-reference.md b/general/app/development/plugins-development-guide/api-reference.md
@@ -79,7 +79,7 @@ These are the configuration options common to most handlers, you can find specif
 | `styles.version`            | Required    | Version number used to determine if the file needs to be downloaded again. You should change the version number every time you change the contents of the CSS file. |
 | `moodlecomponent`           | Plugin name | Name of the component implemented by the handler. <br /> <br /> Most of the time, this can be ignored because mobile support is usually included in the same plugin where custom components are defined, but it may be different in some cases. For example, imagine a local plugin called `local_myactivitymobile` is implementing mobile support for a `mod_myactivity` component. In that case, you would set this option to `"mod_myactivity"`. |
 | `restricttocurrentuser`     | `false`     | Restricts the handler to appear only for the current user. For more advanced restrictions, you can use the `restrict` and `disabled` properties returned during [JavaScript initialisation](./index.md#javascript-initialisation). |
-| `restricttoenrolledcourses` | `false`     | Restricts the handler to appear only for courses the user is enrolled in. For more advanced restrictions, you can use the `restrict` and `disabled` properties returned during [JavaScript initialisation](./index.md#javascript-initialisation). |
+| `restricttoenrolledcourses` | `true`      | Restricts the handler to appear only for courses the user is enrolled in. For more advanced restrictions, you can use the `restrict` and `disabled` properties returned during [JavaScript initialisation](./index.md#javascript-initialisation). |
 
 ### CoreMainMenuDelegate
 
diff --git a/general/app/overview.md b/general/app/overview.md
@@ -24,6 +24,14 @@ The app can also be compiled to work with a single site, or a list of approved s
 
 Keep in mind that the application only works with moodle sites that allow it, and this is disabled by default in some sites. If you want to allow users to log into your site using the app, make sure to check that it's [enabled in the settings](https://docs.moodle.org/en/Moodle_app_guide_for_admins#Enable_mobile_services_on_your_site). If you are not the site owner, reach out to the administrators.
 
+### Technologies used
+
+The Moodle app is a hybrid app built using [Angular](https://angular.io/) and [Ionic Framework](https://ionicframework.com/). The main coding language used in the app is [Typescript](https://www.typescriptlang.org/).
+
+The [Cordova framework](https://cordova.apache.org/) is used to use native features and to compile the Android and iOS apps.
+
+The official app from MoodleHQ uses a server with [Airnotifier](https://github.com/dcai/airnotifier) to deliver push notifications to the app. The Moodle site sends the notifications to the Airnotifier server, and this server uses [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) to deliver the notifications to the devices using Google Cloud Messaging and Apple Push Notification service.
+
 ### Architecture
 
 The code of the application follows an [hexagonal architecture](https://en.wikipedia.org/wiki/Hexagonal_architecture_(software)), with core modules that include the main functionality and addon modules that provide additional features.
diff --git a/general/app/upgrading/plugins-upgrade-guide.md b/general/app/upgrading/plugins-upgrade-guide.md
@@ -16,15 +16,15 @@ As you can see in that repository, the JS and the templates are duplicated in or
 
 Depending on which version of the app you're upgrading from, you'll need to go through multiple version upgrades. This guide is divided by version ranges, so you should be able to start with your current version and build up from there.
 
-Other than the changes outlined in this document, there may be smaller API changes that aren't highlighted here. Make sure to check the [upgrade.txt](https://github.com/moodlehq/moodleapp/blob/latest/upgrade.txt) file for an exhaustive list with all the changes.
+Other than the changes outlined in this document, there may be smaller API changes that aren't highlighted here. Make sure to check the [UPGRADE.md](https://github.com/moodlehq/moodleapp/blob/latest/UPGRADE.md) file for an exhaustive list with all the changes.
 
 ## 4.4 to 4.5
 
 The Ionic version has been upgraded to v8 (from v7), make sure to check the relevant upgrade guides for [v8](https://ionicframework.com/docs/updating/8-0). In particular, the legacy syntax to declare input labels that was deprecated on Ionic7 now has been removed.
 
 ## 4.3 to 4.4
 
-Starting with this release, the changes listed in [upgrade.txt](https://github.com/moodlehq/moodleapp/blob/latest/upgrade.txt) will only document breaking changes for APIs exposed to site plugins. Internal changes will no longer be documented. Make sure to check out the file to learn about the changes in this version.
+Starting with this release, the changes listed in [UPGRADE.md](https://github.com/moodlehq/moodleapp/blob/latest/UPGRADE.md) will only document breaking changes for APIs exposed to site plugins. Internal changes will no longer be documented. Make sure to check out the file to learn about the changes in this version.
 
 Also, the Ionic version has been upgraded to v7 (from v5), make sure to check the relevant upgrade guides for [v6](https://ionicframework.com/docs/updating/6-0) and [v7](https://ionicframework.com/docs/updating/7-0). In particular, the syntax to declare input labels has been refactored. The legacy syntax will continue working for the time being, but we recommend migrating to the [modern syntax](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax) as soon as possible.
 
@@ -36,7 +36,7 @@ Finally, the application now needs to run in a secure context (https://). This c
 
 Font Awesome icons have been updated to version 6.4.0, so make sure that all the icons you're using in your plugin are still supported.
 
-Other than that, there have been some changes in the APIs related to analytics. Check out [upgrade.txt](https://github.com/moodlehq/moodleapp/blob/latest/upgrade.txt) to learn about the specifics.
+Other than that, there have been some changes in the APIs related to analytics. Check out [UPGRADE.md](https://github.com/moodlehq/moodleapp/blob/latest/UPGRADE.md) to learn about the specifics.
 
 ## 4.1 to 4.2
 
@@ -84,7 +84,7 @@ In order to avoid breaking existing styles, version 4.1 will continue adding ver
 
 ## 3.9.5 to 4.0
 
-There haven't been any breaking changes from 3.9.5 to 4.0, but the UI of the application has changed drastically so we recommend taking special care that the UI of your plugin is still working properly. Also, remember to double check all the changes listed in [upgrade.txt](https://github.com/moodlehq/moodleapp/blob/latest/upgrade.txt).
+There haven't been any breaking changes from 3.9.5 to 4.0, but the UI of the application has changed drastically so we recommend taking special care that the UI of your plugin is still working properly. Also, remember to double check all the changes listed in [UPGRADE.md](https://github.com/moodlehq/moodleapp/blob/latest/UPGRADE.md).
 
 Other than that, everything should continue working as expected. If you find something that doesn't, please [let us know](https://moodle.atlassian.net/projects/MOBILE).
 
diff --git a/general/app_releases.md b/general/app_releases.md
@@ -6,6 +6,12 @@ tags:
   - Release notes
 ---
 
+## Moodle App 5.x
+
+| **Version name** | **Date** |
+|---|---|
+| [Moodle App 5.0.0](./app_releases/v5/v5.0.0) |  27 June 2025 |
+
 ## Moodle App 4.x
 
 | **Version name** | **Date** |
diff --git a/general/app_releases/v1.x.md b/general/app_releases/v1.x.md
@@ -1,7 +1,7 @@
 ---
 title: Moodle Mobile 1.x release notes
 sidebar_label: Moodle Mobile 1
-sidebar_position: 4
+sidebar_position: 5
 tags:
   - Moodle App
   - Release notes
diff --git a/general/app_releases/v2/index.md b/general/app_releases/v2/index.md
@@ -1,6 +1,6 @@
 ---
 title: Moodle Mobile 2
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 <!-- markdownlint-disable no-inline-html -->
diff --git a/general/app_releases/v3/index.md b/general/app_releases/v3/index.md
@@ -1,6 +1,6 @@
 ---
 title: Moodle App 3
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 <!-- markdownlint-disable no-inline-html -->
diff --git a/general/app_releases/v4/index.md b/general/app_releases/v4/index.md
@@ -1,6 +1,6 @@
 ---
 title: Moodle App 4
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 <!-- markdownlint-disable no-inline-html -->
diff --git a/general/app_releases/v5/index.md b/general/app_releases/v5/index.md
@@ -0,0 +1,10 @@
+---
+title: Moodle App 5
+sidebar_position: 1
+---
+
+<!-- markdownlint-disable no-inline-html -->
+
+import { Redirect } from '@docusaurus/router';
+
+<Redirect to="v5/v5.0.0" />
diff --git a/general/app_releases/v5/v5.0.0.md b/general/app_releases/v5/v5.0.0.md
diff --git a/general/development/process-moodleapp/release.md b/general/development/process-moodleapp/release.md
diff --git a/general/development/tracker/tips/index.md b/general/development/tracker/tips/index.md
diff --git a/project-words.txt b/project-words.txt
