Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI followup to have the improved dashboard behave better on tiny, minuscule screens #5938

Merged
merged 3 commits into from
Jan 12, 2025
Merged

UI followup to have the improved dashboard behave better on tiny, minuscule screens #5938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5df253a
Insure that the return home label gets ... when available width in mi…
nirvn Jan 12, 2025
6efc96e
Insure that the top button row can be flicked to reach all content on…
nirvn Jan 12, 2025
6c21b2e
Relocate the cloud button to insure it stays visible on tiny screens
nirvn Jan 12, 2025
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
260 changes: 142 additions & 118 deletions src/qml/DashBoard.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Drawer {
signal printClicked(Item item)
signal projectFolderClicked

property bool allowInteractive: true
property alias allowActiveLayerChange: legend.allowActiveLayerChange
property alias activeLayer: legend.activeLayer
property alias layerTree: legend.model
Expand All @@ -33,19 +34,20 @@ Drawer {
}
}

width: Math.min(300, mainWindow.width)
width: Math.min(330, mainWindow.width)
height: parent.height
edge: Qt.LeftEdge
dragMargin: 10
padding: 0
interactive: allowInteractive && buttonsRowContainer.width >= buttonsRow.width

property bool preventFromOpening: overlayFeatureFormDrawer.visible

position: 0
focus: visible
clip: true

onShowMenu: mainMenu.popup(settingsButton.x + 2, mainWindow.sceneTopMargin + settingsButton.y + 2)
onShowMenu: mainMenu.popup(menuButton.x + menuButton.width - mainMenu.width - 2, mainWindow.sceneTopMargin + menuButton.y - 2)
onShowCloudMenu: qfieldCloudPopup.show()

onActiveLayerChanged: {
Expand Down Expand Up @@ -74,142 +76,161 @@ Drawer {

color: mainColor

Row {
id: buttonsRow
anchors.top: parent.top
QfToolButton {
id: closeButton
anchors.left: parent.left
anchors.topMargin: mainWindow.sceneTopMargin
width: parent.width
height: 56
spacing: 1

property color hoveredColor: Qt.hsla(Theme.mainTextColor.hslHue, Theme.mainTextColor.hslSaturation, Theme.mainTextColor.hslLightness, 0.2)
anchors.verticalCenter: buttonsRowContainer.verticalCenter
iconSource: Theme.getThemeVectorIcon('ic_arrow_left_white_24dp')
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: close()
}

QfToolButton {
id: closeButton
anchors.verticalCenter: parent.verticalCenter
iconSource: Theme.getThemeVectorIcon('ic_arrow_left_white_24dp')
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: close()
Flickable {
id: buttonsRowContainer
anchors.left: closeButton.right
anchors.right: menuButton.left
anchors.top: parent.top
anchors.topMargin: mainWindow.sceneTopMargin
height: buttonsRow.height
contentWidth: buttonsRow.width
contentHeight: buttonsRow.height
flickableDirection: Flickable.HorizontalFlick
clip: true

ScrollBar.horizontal: QfScrollBar {
visible: !dashBoard.interactive
color: Theme.mainOverlayColor
backgroundColor: Theme.mainColor
_minSize: 2
_maxSize: 2
}

QfToolButton {
id: measurementButton
anchors.verticalCenter: parent.verticalCenter
round: true
iconSource: Theme.getThemeVectorIcon("ic_measurement_black_24dp")
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: {
measurementClicked();
highlighted = false;
}
}
Row {
id: buttonsRow
anchors.topMargin: mainWindow.sceneTopMargin
height: 56
spacing: 1

QfToolButton {
id: printItem
anchors.verticalCenter: parent.verticalCenter
round: true
iconSource: Theme.getThemeVectorIcon("ic_print_black_24dp")
iconColor: Theme.mainOverlayColor
onClicked: {
printClicked(printItem);
highlighted = false;
QfToolButton {
id: measurementButton
anchors.verticalCenter: parent.verticalCenter
round: true
iconSource: Theme.getThemeVectorIcon("ic_measurement_black_24dp")
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: {
measurementClicked();
highlighted = false;
}
}
}

QfToolButton {
text: qsTr("Project Folder")
anchors.verticalCenter: parent.verticalCenter
font: Theme.defaultFont
iconSource: Theme.getThemeVectorIcon("ic_project_folder_black_24dp")
iconColor: Theme.mainOverlayColor
round: true
onClicked: {
projectFolderClicked();
QfToolButton {
id: printItem
anchors.verticalCenter: parent.verticalCenter
round: true
iconSource: Theme.getThemeVectorIcon("ic_print_black_24dp")
iconColor: Theme.mainOverlayColor
onClicked: {
printClicked(printItem);
highlighted = false;
}
}
}

QfToolButton {
id: cloudButton
anchors.verticalCenter: parent.verticalCenter
iconSource: {
if (cloudConnection.status === QFieldCloudConnection.LoggedIn) {
switch (cloudProjectsModel.currentProjectData.Status) {
case QFieldCloudProjectsModel.Downloading:
switch (cloudProjectsModel.currentProjectData.PackagingStatus) {
case QFieldCloudProjectsModel.PackagingFinishedStatus:
return Theme.getThemeVectorIcon('ic_cloud_download_24dp');
default:
return Theme.getThemeVectorIcon('ic_cloud_active_24dp');
}
case QFieldCloudProjectsModel.Uploading:
switch (cloudProjectsModel.currentProjectData.UploadDeltaStatus) {
case QFieldCloudProjectsModel.DeltaFileLocalStatus:
return Theme.getThemeVectorIcon('ic_cloud_upload_24dp');
QfToolButton {
id: cloudButton
anchors.verticalCenter: parent.verticalCenter
iconSource: {
if (cloudConnection.status === QFieldCloudConnection.LoggedIn) {
switch (cloudProjectsModel.currentProjectData.Status) {
case QFieldCloudProjectsModel.Downloading:
switch (cloudProjectsModel.currentProjectData.PackagingStatus) {
case QFieldCloudProjectsModel.PackagingFinishedStatus:
return Theme.getThemeVectorIcon('ic_cloud_download_24dp');
default:
return Theme.getThemeVectorIcon('ic_cloud_active_24dp');
}
case QFieldCloudProjectsModel.Uploading:
switch (cloudProjectsModel.currentProjectData.UploadDeltaStatus) {
case QFieldCloudProjectsModel.DeltaFileLocalStatus:
return Theme.getThemeVectorIcon('ic_cloud_upload_24dp');
default:
return Theme.getThemeVectorIcon('ic_cloud_active_24dp');
}
case QFieldCloudProjectsModel.Idle:
return cloudProjectsModel.currentProjectData.ProjectFileOutdated ? Theme.getThemeVectorIcon('ic_cloud_attention_24dp') : Theme.getThemeVectorIcon('ic_cloud_active_24dp');
default:
return Theme.getThemeVectorIcon('ic_cloud_active_24dp');
return Theme.getThemeVectorIcon('ic_cloud_white_24dp');
}
case QFieldCloudProjectsModel.Idle:
return cloudProjectsModel.currentProjectData.ProjectFileOutdated ? Theme.getThemeVectorIcon('ic_cloud_attention_24dp') : Theme.getThemeVectorIcon('ic_cloud_active_24dp');
default:
} else {
return Theme.getThemeVectorIcon('ic_cloud_white_24dp');
}
} else {
return Theme.getThemeVectorIcon('ic_cloud_white_24dp');
}
}
iconColor: {
if (iconSource === Theme.getThemeVectorIcon('ic_cloud_white_24dp')) {
return Theme.mainOverlayColor;
} else {
return "transparent";
iconColor: {
if (iconSource === Theme.getThemeVectorIcon('ic_cloud_white_24dp')) {
return Theme.mainOverlayColor;
} else {
return "transparent";
}
}
}
bgcolor: "transparent"
bgcolor: "transparent"

onClicked: {
if (featureForm.state == "FeatureFormEdit") {
featureForm.requestCancel();
return;
onClicked: {
if (featureForm.state == "FeatureFormEdit") {
featureForm.requestCancel();
return;
}
if (featureForm.visible) {
featureForm.hide();
}
showCloudMenu();
}
if (featureForm.visible) {
featureForm.hide();
bottomRightIndicatorText: cloudProjectsModel.layerObserver.deltaFileWrapper.count > 0 ? cloudProjectsModel.layerObserver.deltaFileWrapper.count : cloudProjectsModel.layerObserver.deltaFileWrapper.count >= 10 ? '+' : ''

SequentialAnimation {
OpacityAnimator {
from: 1
to: 0.2
duration: 2000
target: cloudButton
}
OpacityAnimator {
from: 0.2
to: 1
duration: 2000
target: cloudButton
}
running: cloudProjectsModel.currentProjectData.Status === QFieldCloudProjectsModel.Downloading || cloudProjectsModel.currentProjectData.Status === QFieldCloudProjectsModel.Uploading
loops: Animation.Infinite

onStopped: {
cloudButton.opacity = 1;
}
}
showCloudMenu();
}
bottomRightIndicatorText: cloudProjectsModel.layerObserver.deltaFileWrapper.count > 0 ? cloudProjectsModel.layerObserver.deltaFileWrapper.count : cloudProjectsModel.layerObserver.deltaFileWrapper.count >= 10 ? '+' : ''

SequentialAnimation {
OpacityAnimator {
from: 1
to: 0.2
duration: 2000
target: cloudButton
}
OpacityAnimator {
from: 0.2
to: 1
duration: 2000
target: cloudButton
}
running: cloudProjectsModel.currentProjectData.Status === QFieldCloudProjectsModel.Downloading || cloudProjectsModel.currentProjectData.Status === QFieldCloudProjectsModel.Uploading
loops: Animation.Infinite
onStopped: {
cloudButton.opacity = 1;

QfToolButton {
text: qsTr("Project Folder")
anchors.verticalCenter: parent.verticalCenter
font: Theme.defaultFont
iconSource: Theme.getThemeVectorIcon("ic_project_folder_black_24dp")
iconColor: Theme.mainOverlayColor
round: true
onClicked: {
projectFolderClicked();
}
}
}
}

QfToolButton {
id: settingsButton
anchors.verticalCenter: parent.verticalCenter
iconSource: Theme.getThemeVectorIcon('ic_dot_menu_black_24dp')
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: showMenu()
}
QfToolButton {
id: menuButton
anchors.right: parent.right
anchors.verticalCenter: buttonsRowContainer.verticalCenter
iconSource: Theme.getThemeVectorIcon('ic_dot_menu_black_24dp')
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: showMenu()
}
}

Expand Down Expand Up @@ -358,23 +379,26 @@ Drawer {
color: Theme.darkTheme ? Theme.mainBackgroundColorSemiOpaque : Theme.lightestGray

Item {
height: 48
width: parent.width
height: 48
anchors.bottom: parent.bottom
anchors.bottomMargin: mainWindow.sceneBottomMargin

MenuItem {
id: homeButton
width: parent.width - modeSwitch.width
height: 48
icon.source: Theme.getThemeVectorIcon("ic_home_black_24dp")
text: "Return home"

onClicked: returnHome()
}

Switch {
id: modeSwitch
visible: projectInfo.insertRights
height: 56
width: (56 + 36)
width: 56 + 36
height: 48
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
indicator: Rectangle {
Expand Down
9 changes: 5 additions & 4 deletions src/qml/imports/Theme/QfScrollBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ T.ScrollBar {
id: control

property color color: Theme.mainColor
property color backgroundColor: Theme.scrollBarBackgroundColor
property real _maxSize: 8
property real _minSize: 4

Expand All @@ -17,7 +18,7 @@ T.ScrollBar {
background: Rectangle {
id: background
radius: _minSize
color: Theme.scrollBarBackgroundColor
color: control.backgroundColor
opacity: {
if (vertical) {
return handle.width === _maxSize;
Expand All @@ -39,7 +40,7 @@ T.ScrollBar {
Rectangle {
id: handle
width: vertical ? _minSize : parent.width
height: Math.max(10, horizontal ? _minSize : parent.height)
height: horizontal ? _minSize : Math.max(10, parent.height)
color: control.color
anchors {
right: vertical ? parent.right : undefined
Expand All @@ -56,7 +57,7 @@ T.ScrollBar {
PropertyChanges {
target: handle
width: vertical ? _maxSize : parent.width
height: Math.max(10, horizontal ? _maxSize : parent.height)
height: horizontal ? _maxSize : Math.max(10, parent.height)
}
},
State {
Expand All @@ -65,7 +66,7 @@ T.ScrollBar {
PropertyChanges {
target: handle
width: vertical ? _minSize : parent.width
height: Math.max(10, horizontal ? _minSize : parent.height)
height: horizontal ? _minSize : Math.max(10, parent.height)
}
}
]
Expand Down
3 changes: 2 additions & 1 deletion src/qml/qgismobileapp.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2305,9 +2305,10 @@ ApplicationWindow {
DashBoard {
id: dashBoard
objectName: "dashBoard"

allowActiveLayerChange: !digitizingToolbar.isDigitizing
allowInteractive: !welcomeScreen.visible && !qfieldSettings.visible && !qfieldCloudScreen.visible && !qfieldLocalDataPickerScreen.visible && !codeReader.visible && !screenLocker.enabled
mapSettings: mapCanvas.mapSettings
interactive: !welcomeScreen.visible && !qfieldSettings.visible && !qfieldCloudScreen.visible && !qfieldLocalDataPickerScreen.visible && !codeReader.visible && !screenLocker.enabled

Component.onCompleted: focusstack.addFocusTaker(this)

Expand Down
Loading