Add project creation ui and new welcome screen. #6656
Conversation
|
🎉 Ta-daaa, freshly created APKs are available for 009e318: arm64-android |
| import Theme | ||
|
|
||
| Page { | ||
| id: createNewProject |
There was a problem hiding this comment.
| id: createNewProject | |
| id: projectCreation |
| onCreate: projectConfig => { | ||
| console.log(JSON.stringify(projectConfig)); | ||
| } |
There was a problem hiding this comment.
We will go down a different path, you can remove that.
| Page { | ||
| id: createNewProject | ||
|
|
||
| signal create(var projectConfig) |
| header: QfPageHeader { | ||
| title: qsTr("Create a new project") | ||
|
|
||
| backgroundFill: false |
| anchors.top: parent.top | ||
| anchors.left: parent.left | ||
| anchors.right: parent.right | ||
| anchors.bottom: createProjectButton.top |
There was a problem hiding this comment.
You can go for anchors.fill: parent
What we want here is for the create project button container to sit on top of the flickable view, with a semi transparent background that's opaque enough not to be distracting but transparent enough to see any content that's not in the visible part (like we do with the dashboard)
| TextField { | ||
| id: baseMapURL | ||
| font: Theme.defaultFont | ||
| placeholderText: text == "" && !focus ? "e.g., https://your-map-service.com/{z}/" : "" |
There was a problem hiding this comment.
| placeholderText: text == "" && !focus ? "e.g., https://your-map-service.com/{z}/" : "" | |
| placeholderText: text == "" && !focus ? "e.g., https://your-map-service.com/{z}/{x}/{y}.png" : "" |
| anchors.right: parent.right | ||
|
|
||
| Label { | ||
| text: qsTr("Quickly capture notes with date, time, and comments. Optionally, attach images to enrich your notes.") |
There was a problem hiding this comment.
| text: qsTr("Quickly capture notes with date, time, and comments. Optionally, attach images to enrich your notes.") | |
| text: qsTr("Quickly capture notes with date, time, and comments. Optionally, attach multimedia items such as images and videos to enrich your notes.") |
| } | ||
| } | ||
|
|
||
| QfButton { |
There was a problem hiding this comment.
Here we'll want a floating Rectangle {} over the configuration layout with a semi opaque background, within which this single QfButton will exist.
| "name": projectName.text, | ||
| "isCustomBasemapSelected": isCustomBasemap, | ||
| "basemap": selectedBasemap, | ||
| "takeNotes": takeNotesGroupBox.checked, | ||
| "takeMediaAttachments": takeMediaCheckBox.checked, | ||
| "trackPosition": trackPositionGroupBox.checked, | ||
| "autoTrackPosition": autoTrackPositionCheckBox.checked, | ||
| "useCloud": qfieldCloudGroupBox.checked |
There was a problem hiding this comment.
Please align the keys with that: #6652
For cloud, name is "use_cloud"
| "iconColor": Theme.mainColor, | ||
| "action": function () { | ||
| platformUtilities.requestStoragePermission(); | ||
| openLocalDataPicker(); |
There was a problem hiding this comment.
For the sake of harmonizing function names, let's go for showLocalDataPicker();
🚀 Description
This pull request introduces major enhancements to QField, focusing on improving the user experience and the project creation workflow.
⚠️ Note: It's not fully functional yet; upcoming PRs will connect the core logic to this UI.
✨ Key Changes
Redesigned Welcome Screen
Updated to include the new "Create new project" button for easier access.
Project Creation UI
Provides an intuitive interface for creating new projects with the following options:
Introduce
QfExpandableGroupBox.qmlCollapsible and expandable group box with check property and automatic height, used across the project creation UI.
🎬 Demo
Screencast.From.2025-09-19.17-38-19.webm