Skip to content

Commit

Permalink
Merge pull request #5931 from opengisch/relocate-ui-buttons
Browse files Browse the repository at this point in the history 
Ui polish.
  • Loading branch information
@nirvn
nirvn authored Jan 12, 2025
2 parents af71c10 + 1200565 commit 2d0d58c
Show file tree
Hide file tree
Showing 12 changed files with 314 additions and 254 deletions.
4 changes: 4 additions & 0 deletions images/images.qrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,5 +171,9 @@
<file>themes/qfield/nodpi/ic_shutdown_24dp.svg</file>
<file>themes/qfield/nodpi/ic_egeniouss_receiver_black_24dp.svg</file>
<file>themes/qfield/nodpi/ic_location_tracking_white_24dp.svg</file>
<file>themes/qfield/nodpi/ic_tune_24dp.svg</file>
<file>themes/qfield/nodpi/ic_expression_24dp.svg</file>
<file>themes/qfield/nodpi/ic_cloud_border_24dp.svg</file>
<file>themes/qfield/nodpi/ic_alert_black_not_filled_24dp.svg</file>
</qresource>
</RCC>
5 changes: 5 additions & 0 deletions images/themes/qfield/nodpi/ic_alert_black_not_filled_24dp.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/themes/qfield/nodpi/ic_cloud_border_24dp.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/themes/qfield/nodpi/ic_expression_24dp.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/themes/qfield/nodpi/ic_tune_24dp.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
208 changes: 136 additions & 72 deletions src/qml/DashBoard.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ Drawer {

signal showMenu
signal showCloudMenu
signal returnHome
signal measurementClicked
signal printClicked(Item item)
signal projectFolderClicked

property alias allowActiveLayerChange: legend.allowActiveLayerChange
property alias activeLayer: legend.activeLayer
Expand Down Expand Up @@ -79,6 +83,8 @@ Drawer {
height: 56
spacing: 1

property color hoveredColor: Qt.hsla(Theme.mainTextColor.hslHue, Theme.mainTextColor.hslSaturation, Theme.mainTextColor.hslLightness, 0.2)

QfToolButton {
id: closeButton
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -89,12 +95,40 @@ Drawer {
}

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

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 {
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 {
Expand All @@ -120,17 +154,17 @@ Drawer {
case QFieldCloudProjectsModel.Idle:
return cloudProjectsModel.currentProjectData.ProjectFileOutdated ? Theme.getThemeVectorIcon('ic_cloud_attention_24dp') : Theme.getThemeVectorIcon('ic_cloud_active_24dp');
default:
Theme.getThemeVectorIcon('ic_cloud_24dp');
Theme.getThemeVectorIcon('ic_cloud_border_24dp');
}
} else {
return Theme.getThemeVectorIcon('ic_cloud_24dp');
return Theme.getThemeVectorIcon('ic_cloud_border_24dp');
}
iconColor: {
if (iconSource == Theme.getThemeVectorIcon('ic_cloud_24dp')) {
return Theme.mainOverlayColor;
} else {
return "transparent";
}
}
iconColor: {
if (iconSource === Theme.getThemeVectorIcon('ic_cloud_border_24dp')) {
return Theme.mainOverlayColor;
} else {
return "transparent";
}
}
bgcolor: "transparent"
Expand Down Expand Up @@ -167,70 +201,15 @@ Drawer {
}
}
}
}

Switch {
id: modeSwitch
visible: projectInfo.insertRights
height: 56
width: (56 + 36)
anchors.right: parent.right
anchors.verticalCenter: buttonsRow.verticalCenter
indicator: Rectangle {
implicitHeight: 36
implicitWidth: 36 * 2
x: modeSwitch.leftPadding
radius: 4
color: "#66212121"
border.color: "#44FFFFFF"
QfToolButton {
id: settingsButton
anchors.verticalCenter: parent.verticalCenter
Image {
width: 28
height: 28
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
source: Theme.getThemeVectorIcon('ic_map_white_24dp')
sourceSize.width: parent.height * screen.devicePixelRatio
sourceSize.height: parent.width * screen.devicePixelRatio
opacity: 0.4
}
Image {
width: 28
height: 28
anchors.right: parent.right
anchors.rightMargin: 4
anchors.verticalCenter: parent.verticalCenter
source: Theme.getThemeVectorIcon('ic_create_white_24dp')
sourceSize.width: parent.height * screen.devicePixelRatio
sourceSize.height: parent.width * screen.devicePixelRatio
opacity: 0.4
}
Rectangle {
x: modeSwitch.checked ? parent.width - width : 0
width: 36
height: 36
radius: 4
color: Theme.mainColor
border.color: Theme.mainOverlayColor
Image {
width: 28
height: 28
anchors.centerIn: parent
source: modeSwitch.checked ? Theme.getThemeVectorIcon('ic_create_white_24dp') : Theme.getThemeVectorIcon('ic_map_white_24dp')
sourceSize.width: parent.height * screen.devicePixelRatio
sourceSize.height: parent.width * screen.devicePixelRatio
}
Behavior on x {
PropertyAnimation {
duration: 100
easing.type: Easing.OutQuart
}
}
}
iconSource: Theme.getThemeVectorIcon('ic_dot_menu_black_24dp')
iconColor: Theme.mainOverlayColor
bgcolor: "transparent"
onClicked: showMenu()
}

onPositionChanged: mainWindow.toggleDigitizeMode()
}
}

Expand Down Expand Up @@ -370,6 +349,91 @@ Drawer {
}
}

Rectangle {
height: 48 + mainWindow.sceneBottomMargin
width: parent.width
anchors.bottom: parent.bottom
color: Theme.darkTheme ? Theme.mainBackgroundColorSemiOpaque : Theme.lightestGray

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

MenuItem {
id: homeButton
icon.source: Theme.getThemeVectorIcon("ic_home_black_24dp")
text: "Return home"
onClicked: returnHome()
}

Switch {
id: modeSwitch
visible: projectInfo.insertRights
height: 56
width: (56 + 36)
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
indicator: Rectangle {
implicitHeight: 36
implicitWidth: 36 * 2
x: modeSwitch.leftPadding
radius: 4
color: "#24212121"
border.color: "#14FFFFFF"
anchors.verticalCenter: parent.verticalCenter
Image {
width: 28
height: 28
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
source: Theme.getThemeVectorIcon('ic_map_white_24dp')
sourceSize.width: parent.height * screen.devicePixelRatio
sourceSize.height: parent.width * screen.devicePixelRatio
opacity: 0.6
}
Image {
width: 28
height: 28
anchors.right: parent.right
anchors.rightMargin: 4
anchors.verticalCenter: parent.verticalCenter
source: Theme.getThemeVectorIcon('ic_create_white_24dp')
sourceSize.width: parent.height * screen.devicePixelRatio
sourceSize.height: parent.width * screen.devicePixelRatio
opacity: 0.6
}
Rectangle {
x: modeSwitch.checked ? parent.width - width : 0
width: 36
height: 36
radius: 4
color: Theme.mainColor
border.color: Theme.mainOverlayColor
Image {
width: 28
height: 28
anchors.centerIn: parent
source: modeSwitch.checked ? Theme.getThemeVectorIcon('ic_create_white_24dp') : Theme.getThemeVectorIcon('ic_map_white_24dp')
sourceSize.width: parent.height * screen.devicePixelRatio
sourceSize.height: parent.width * screen.devicePixelRatio
}
Behavior on x {
PropertyAnimation {
duration: 100
easing.type: Easing.OutQuart
}
}
}
}

onPositionChanged: mainWindow.toggleDigitizeMode()
}
}
}

TemporalProperties {
id: temporalProperties
mapSettings: dashBoard.mapSettings
Expand Down
2 changes: 1 addition & 1 deletion src/qml/NavigationBar.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -633,7 +633,7 @@ Rectangle {
leftPadding: 2
rightPadding: 2
spacing: 2
height: printItem.height
height: 48
clip: true

property color hoveredColor: Qt.hsla(Theme.mainTextColor.hslHue, Theme.mainTextColor.hslSaturation, Theme.mainTextColor.hslLightness, 0.2)
Expand Down
33 changes: 25 additions & 8 deletions src/qml/WelcomeScreen.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ Page {
property alias model: table.model
signal openLocalDataPicker
signal showQFieldCloudScreen
signal showSettings

visible: false
focus: visible
Expand Down Expand Up @@ -782,20 +783,36 @@ Page {
}
}

QfToolButton {
id: currentProjectButton
visible: qgisProject && !!qgisProject.fileName
Column {
spacing: 4
anchors {
top: parent.top
left: parent.left
topMargin: mainWindow.sceneTopMargin
}
iconSource: Theme.getThemeVectorIcon('ic_chevron_left_white_24dp')
iconColor: Theme.mainTextColor
bgcolor: "transparent"

onClicked: {
welcomeScreen.visible = false;
QfActionButton {
id: currentProjectButton
toolImage: Theme.getThemeVectorIcon('ic_chevron_left_white_24dp')
toolText: welcomeScreen.width > 300 ? qsTr('Return to map') : ""
visible: qgisProject && !!qgisProject.homePath
innerActionIcon.visible: false

onClicked: {
welcomeScreen.visible = false;
}
}

QfToolButton {
id: settingsButton
iconSource: Theme.getThemeVectorIcon('ic_tune_24dp')
iconColor: Theme.toolButtonColor
bgcolor: Theme.toolButtonBackgroundColor
round: true

onClicked: {
showSettings();
}
}
}

Expand Down
19 changes: 12 additions & 7 deletions src/qml/imports/Theme/QfCloseButton.qml → src/qml/imports/Theme/QfActionButton.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,17 @@ ToolButton {

property string toolImage: ''
property string toolText: qsTr("close")

signal close
property alias innerActionIcon: innerAction

height: 48
width: height + buttonText.width + 32 + 24
width: height + (buttonText.visible ? buttonText.width + 24 : 0) + (innerAction.visible ? 32 : 0)
clip: true

Behavior on width {
NumberAnimation {
duration: 200
}
}

background: Rectangle {
width: parent.width
Expand Down Expand Up @@ -51,6 +57,7 @@ ToolButton {
anchors.leftMargin: 48 + 8
spacing: 8
padding: 0
visible: button.toolText !== ""

Text {
id: buttonText
Expand All @@ -62,6 +69,7 @@ ToolButton {
}

Image {
id: innerAction
anchors.verticalCenter: parent.verticalCenter
width: 24
height: 24
Expand All @@ -71,10 +79,7 @@ ToolButton {
source: Theme.getThemeVectorIcon("ic_close_white_24dp")
sourceSize.width: 24 * screen.devicePixelRatio
sourceSize.height: 24 * screen.devicePixelRatio
visible: true
}
}

onClicked: {
close();
}
}
Loading

1 comment on commit 2d0d58c

@qfield-fairy
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Ta-daaa, freshly created APKs are available: arm64-android

Other architectures

Please sign in to comment.