Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 26 additions & 30 deletions general/app/customisation/remote-themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```
Expand Down Expand Up @@ -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;
}
```

Expand All @@ -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;
Expand All @@ -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`
Expand All @@ -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;
}
```
Expand All @@ -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;
}
```
Expand All @@ -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;
}
```
Expand Down Expand Up @@ -305,7 +305,7 @@ core-tabs, core-tabs-outlet {
### Items

```css
html {
:root {
/* Background */
--ion-item-background: green;

Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 8 additions & 0 deletions general/app/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions general/app/upgrading/plugins-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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

Expand Down Expand Up @@ -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).

Expand Down
6 changes: 6 additions & 0 deletions general/app_releases.md
Original file line number Diff line number Diff line change
Expand Up @@ -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** |
Expand Down
2 changes: 1 addition & 1 deletion general/app_releases/v1.x.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion general/app_releases/v2/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Moodle Mobile 2
sidebar_position: 3
sidebar_position: 4
---

<!-- markdownlint-disable no-inline-html -->
Expand Down
2 changes: 1 addition & 1 deletion general/app_releases/v3/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Moodle App 3
sidebar_position: 2
sidebar_position: 3
---

<!-- markdownlint-disable no-inline-html -->
Expand Down
2 changes: 1 addition & 1 deletion general/app_releases/v4/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Moodle App 4
sidebar_position: 1
sidebar_position: 2
---

<!-- markdownlint-disable no-inline-html -->
Expand Down
10 changes: 10 additions & 0 deletions general/app_releases/v5/index.md
Original file line number Diff line number Diff line change
@@ -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" />
Loading
Loading