From 67f5088fbfd3404a093f0ece2a19d4a2d67bac8e Mon Sep 17 00:00:00 2001 From: Oskar Date: Tue, 5 Nov 2024 09:07:39 +0100 Subject: [PATCH] Update documentation references to gui-directory --- BuildInstructions.md | 40 ++++++++++--------- README.md | 26 ++++++------ .../assets/images/menubar-icons/README.md | 4 +- .../packages/mullvad-vpn/locales/README.md | 38 +++++++++--------- .../packages/mullvad-vpn/scripts/README.md | 2 +- graphics/README.md | 2 +- 6 files changed, 58 insertions(+), 54 deletions(-) diff --git a/BuildInstructions.md b/BuildInstructions.md index c3431fd678c1..560ce9ce9050 100644 --- a/BuildInstructions.md +++ b/BuildInstructions.md @@ -11,7 +11,7 @@ on your platform please submit an issue or a pull request. - Get the latest **stable** Rust toolchain via [rustup.rs](https://rustup.rs/). - You need Node.js and npm. You can find the exact versions in the `volta` section of - `gui/package.json`. The toolchain is managed by volta. + `desktop/package.json`. The toolchain is managed by volta. - Linux & macOS @@ -186,17 +186,21 @@ To build the management interface proto files there is a script (execute it on a ARM64 Linux): ```bash -cd gui/scripts -npm ci -./build-proto.sh +cd desktop +npm ci -w mullvad-vpn +npm run -w mullvad-vpn build-proto ``` -After that copy the files from `gui/src/main/management_interface/` and -`gui/build/src/main/management_interface/` directories into a single directory, and set the value -of `MANAGEMENT_INTERFACE_PROTO_BUILD_DIR` to that directory while running the main build. +After that copy the files from the following directories into a single directory: +``` +desktop/packages/mullvad-vpn/src/main/management_interface/ +desktop/packages/mullvad-vpn/build/src/main/management_interface/ +``` +Set the value of `MANAGEMENT_INTERFACE_PROTO_BUILD_DIR` to that directory while running the main +build. -When all is done, run the main build. Assuming that you copied the proto files into `/tmp/management_interface_proto` -directory, the build command will look as follows: +When all is done, run the main build. Assuming that you copied the proto files into +`/tmp/management_interface_proto` directory, the build command will look as follows: ```bash MANAGEMENT_INTERFACE_PROTO_BUILD_DIR=/tmp/management_interface_proto ./build.sh --dev-build @@ -246,28 +250,28 @@ This section is for building the system service individually. Leave out `sudo` on Windows. The daemon must run as root since it modifies the firewall and sets up virtual network interfaces etc. -# Building and running the GUI app +# Building and running the desktop app -This section is for building the GUI app individually. +This section is for building the desktop app individually. -1. Go to the `gui` directory +1. Go to the `desktop` directory ```bash - cd gui + cd desktop ``` 1. Install all the JavaScript dependencies by running: ```bash - npm install + npm install -w mullvad-vpn ``` -1. Start the GUI in development mode by running: +1. Start the Electron app in development mode by running: ```bash - npm run develop + npm run -w mullvad-vpn develop ``` If you change any javascript file while the development mode is running it will automatically transpile and reload the file so that the changes are visible almost immediately. -Please note that the GUI needs a running daemon to connect to in order to work. See +Please note that the Electron app needs a running daemon to connect to in order to work. See [Building and running mullvad-daemon](#building-and-running-mullvad-daemon) for instructions -on how to do that before starting the GUI. +on how to do that before starting the Electron app. diff --git a/README.md b/README.md index 9676940fc3f7..3346e35066a5 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,10 @@ For more information about the service, please visit our website, This repository contains all the source code for the desktop and mobile versions of the app. For desktop this includes the system service/daemon -([`mullvad-daemon`](mullvad-daemon/)), a graphical user interface ([GUI](gui/)) and a -command line interface ([CLI](mullvad-cli/)). The Android app uses the same backing -system service for the tunnel and security but has a dedicated frontend in [android/](android/). -iOS consists of a completely standalone implementation that resides in [ios/](ios/). +([`mullvad-daemon`](mullvad-daemon/)), a graphical user interface ([GUI](desktop/)) and a command +line interface ([CLI](mullvad-cli/)). The Android app uses the same backing system service for the +tunnel and security but has a dedicated frontend in [android/](android/). iOS consists of a +completely standalone implementation that resides in [ios/](ios/). ## Releases @@ -234,15 +234,15 @@ launchctl unload -w /Library/LaunchDaemons/net.mullvad.daemon.plist launchctl load -w /Library/LaunchDaemons/net.mullvad.daemon.plist ``` -## Environment variables used by the GUI frontend +## Environment variables used by the desktop frontend * `MULLVAD_PATH` - Allows changing the path to the folder with the `mullvad-problem-report` tool when running in development mode. Defaults to: `/target/debug/`. -* `MULLVAD_DISABLE_UPDATE_NOTIFICATION` - If set to `1`, GUI notification will be disabled when +* `MULLVAD_DISABLE_UPDATE_NOTIFICATION` - If set to `1`, notification will be disabled when an update is available. -## Command line tools for Electron GUI app development +## Command line tools for Electron app development - `$ npm run develop` - develop app with live-reload enabled - `$ npm run lint` - lint code @@ -266,8 +266,8 @@ If you're using GNOME, try installing one of these GNOME Shell extensions: ## Repository structure -### Electron GUI app and electron-builder packaging assets -- **gui/** +### Electron app and electron-builder packaging assets +- **desktop/packages/mullvad-vpn/** - **assets/** - Graphical assets and stylesheets - **src/** - **main/** @@ -386,10 +386,10 @@ environment variable. | Windows | `//./pipe/Mullvad VPN` | | Android | [`getNoBackupFilesDir()`](https://developer.android.com/reference/android/content/ContextWrapper#getNoBackupFilesDir()) | -### GUI +### Desktop Electron app -The GUI has a specific settings file that is configured for each user. The path is set in the -`gui/packages/desktop/main/gui-settings.ts` file. +The desktop Electron app has a specific settings file that is configured for each user. The path is +set in the `desktop/packages/mullvad-vpn/src/main/gui-settings.ts` file. | Platform | Path | |----------|------| @@ -405,7 +405,7 @@ See [graphics README](graphics/README.md) for information about icons. ## Locales and translations Instructions for how to handle locales and translations are found -[here](./gui/locales/README.md). +[here](./desktop/packages/mullvad-vpn/locales/README.md). For instructions specific to the Android app, see [here](./android/README.md). diff --git a/desktop/packages/mullvad-vpn/assets/images/menubar-icons/README.md b/desktop/packages/mullvad-vpn/assets/images/menubar-icons/README.md index 818d0b60291f..ca8b2eee48e5 100644 --- a/desktop/packages/mullvad-vpn/assets/images/menubar-icons/README.md +++ b/desktop/packages/mullvad-vpn/assets/images/menubar-icons/README.md @@ -4,8 +4,8 @@ This directory contains the images for the menubar/traybar. The content consists manually. ## Build script -The png/ico files are generated using the script `gui/scripts/build-menubar-icons.sh` which can be -run from the `gui`-directory using +The png/ico files are generated using the script `../../scripts/build-menubar-icons.sh` which can be +run from the `desktop/packages/mullvad-vpn`-directory using ```sh ./scripts/build-menubar-icons.sh ``` diff --git a/desktop/packages/mullvad-vpn/locales/README.md b/desktop/packages/mullvad-vpn/locales/README.md index a4713e3ac1b3..2b1a44cbc0df 100644 --- a/desktop/packages/mullvad-vpn/locales/README.md +++ b/desktop/packages/mullvad-vpn/locales/README.md @@ -2,38 +2,38 @@ This is a folder with gettext translations for Mullvad VPN app. ## Adding new translations -1. Create a new sub-folder under `gui/locales`, use the locale identifier for the folder name. - +1. Create a new sub-folder under `../locales`, use the locale identifier for the folder name. + The complete list of supported locale identifiers can be found at: - + https://electronjs.org/docs/api/locales -1. Add a new language on Crowdin under Settings -> Translations -> Target languages menu. - +1. Add a new language on Crowdin under Settings -> Translations -> Target languages menu. + By default the file structure is configured to produce folders with translations using two-letter - language code (defined under Settings -> Files -> -> ... [ellipsis] -> Settings). - - If you wish to add a dialect (i.e: `pt-BR`), you have to provide a custom mapping + language code (defined under Settings -> Files -> -> ... [ellipsis] -> Settings). + + If you wish to add a dialect (i.e: `pt-BR`), you have to provide a custom mapping to tell Crowdin to output Portuguese (Brazil) as `pt-BR` instead of `pt`. - - In order to add a language mapping, go to Settings -> General Settings -> Language mapping + + In order to add a language mapping, go to Settings -> General Settings -> Language mapping (three faders icon on the left hand side of the "Translations" menu). -1. Follow the procedure as described in `gui/scripts/README.md`. +1. Follow the procedure as described in `../scripts/README.md`. + +1. Optional: Upload the automatically translated `/relay-locations.po` to + Crowdin. -1. Optional: Upload the automatically translated `/relay-locations.po` to - Crowdin. - *Note: Replace `` with the identifier of a newly added language.* - + 1. ZIP file with the following command: - + ``` - cd gui/locales + cd ../locales zip payload.zip /relay-locations.po ``` - - 1. Upload `payload.zip` to Crowdin via web interface (Settings -> Translations -> Upload + + 1. Upload `payload.zip` to Crowdin via web interface (Settings -> Translations -> Upload translations). 1. Add the language to `SUPPORTED_LOCALE_LIST` in `app.tsx`. diff --git a/desktop/packages/mullvad-vpn/scripts/README.md b/desktop/packages/mullvad-vpn/scripts/README.md index 8556bb85fbd7..a4607c322732 100644 --- a/desktop/packages/mullvad-vpn/scripts/README.md +++ b/desktop/packages/mullvad-vpn/scripts/README.md @@ -21,7 +21,7 @@ and `integrate-relay-locations.py` in this directory. * `fetch-relay-locations.py` fetches the relay list and extracts all country and city names. * `intregrate-relay-locations.py` integrates the fetched relay locations into -`/gui/locales/relay-locations.pot`. +`../locales/relay-locations.pot`. ### Locking Python dependencies diff --git a/graphics/README.md b/graphics/README.md index 5403476c1445..683ad2a2a7f2 100644 --- a/graphics/README.md +++ b/graphics/README.md @@ -16,7 +16,7 @@ feature graphics in the app's Google Play Store listing. The PNG image should be The main and official mole logo. Used to generate icons on a bunch of platforms. If `icon.svg` is changed. You need to run the following to generate new assets: -* Desktop: `gui/scripts/build-logo-icons.sh` +* Desktop: `desktop/packages/mullvad-vpn/scripts/build-logo-icons.sh` * Android: `android/scripts/generate-pngs.sh` ### `icon-square.svg`