Overlay project details on top of preview image

opengisch · Jul 15, 2023 · f957cdd · f957cdd
1 parent ace6289
commit f957cdd
Showing 1 changed file with 111 additions and 112 deletions.
diff --git a/src/qml/WelcomeScreen.qml b/src/qml/WelcomeScreen.qml
@@ -457,130 +457,129 @@ Page {
  property var type: ProjectType
 
  width: parent ? parent.width : undefined
- height: line.height
+ height: line.height + 8
  color: "transparent"
 
- Column {
+ Rectangle {
+ id: lineMask
+ width: line.width
+ height: line.height
+ radius: 10
+ color: "white"
+ visible: false
+ layer.enabled: true
+ }
+
+ Rectangle {
  id: line
  width: parent.width
- leftPadding: 0
- rightPadding: 0
- topPadding: 9
- bottomPadding: 3
- spacing: 0
-
- Rectangle {
- visible: previewImage.status === Image.Ready
- width: parent.width - parent.leftPadding - parent.rightPadding
- height: 95
- clip: true
- color: "transparent"
-
- Rectangle {
- id: previewImageMask
- width: previewImage.width
- height: previewImage.height
- radius: 10
- color: "white"
- visible: false
- layer.enabled: true
- }
- Image {
- id: previewImage
- width: parent.width
- height: parent.height - 4
- source: welcomeScreen.visible ? 'image://projects/' + ProjectPath : ''
- fillMode: Image.PreserveAspectCrop
-
- layer.enabled: true
- layer.effect: QfOpacityMask {
- maskSource: previewImageMask
- }
- }
- Ripple {
- clip: true
- width: previewImage.width
- height: previewImage.height
- pressed: rectangle.isPressed
- active: rectangle.isPressed
- color: Qt.hsla(Theme.mainColor.hslHue, Theme.mainColor.hslSaturation, Theme.mainColor.hslLightness, 0.15)
-
- layer.enabled: true
- layer.effect: QfOpacityMask {
- maskSource: previewImageMask
- }
- }
+ height: previewImage.status === Image.Ready ? 120 : detailsContainer.height
+ anchors.verticalCenter: parent.verticalCenter
+ color: "transparent"
+ clip: true
+
+ layer.enabled: true
+ layer.effect: QfOpacityMask {
+ maskSource: lineMask
  }
 
- Row {
+ Image {
+ id: previewImage
  width: parent.width
- spacing: 0
-
- Image {
- id: type
- anchors.verticalCenter: parent.verticalCenter
- source: switch(ProjectType) {
- case 0: return Theme.getThemeVectorIcon('ic_map_green_48dp'); // local project
- case 1: return Theme.getThemeVectorIcon('ic_cloud_project_48dp'); // cloud project
- case 2: return Theme.getThemeVectorIcon('ic_file_green_48dp'); // local dataset
- default: return '';
- }
- sourceSize.width: 80
- sourceSize.height: 80
- width: 40
- height: 40
- }
- ColumnLayout {
- id: inner
- anchors.verticalCenter: parent.verticalCenter
- width: rectangle.width - type.width - 20
- clip: true
-
- Text {
- id: projectTitle
- topPadding: 5
- leftPadding: 3
- bottomPadding: projectNote.visible ? 0 : 5
- text: ProjectTitle
- font.pointSize: Theme.tipFont.pointSize
- font.underline: true
- color: Theme.mainColor
- opacity: rectangle.isPressed ? 0.8 : 1
- wrapMode: Text.WordWrap
- Layout.fillWidth: true
- }
- Text {
- id: projectNote
- leftPadding: 3
- bottomPadding: 5
- text: {
- var notes = [];
-
- if ( index == 0 ) {
- var firstRun = settings && !settings.value( "/QField/FirstRunFlag", false )
- if (!firstRun && firstShown === false) notes.push( qsTr( "Last session" ) );
- }
+ height: parent.height
+ source: welcomeScreen.visible ? 'image://projects/' + ProjectPath : ''
+ fillMode: Image.PreserveAspectCrop
+ }
 
- if ( ProjectPath === registry.defaultProject ) {
- notes.push( qsTr( "Default project" ) );
- }
+ Ripple {
+ clip: true
+ width: line.width
+ height: line.height
+ pressed: rectangle.isPressed
+ active: rectangle.isPressed
+ color: Qt.hsla(Theme.mainColor.hslHue, Theme.mainColor.hslSaturation, Theme.mainColor.hslLightness, 0.15)
+ }
 
- if ( ProjectPath === registry.baseMapProject ) {
- notes.push( qsTr( "Base map" ) );
- }
+ Rectangle {
+ id: detailsContainer
+ color: Qt.hsla(Theme.mainBackgroundColor.hslHue, Theme.mainBackgroundColor.hslSaturation, Theme.mainBackgroundColor.hslLightness, Theme.darkTheme ? 0.75 : 0.9)
+ width: parent.width
+ height: details.childrenRect.height + details.topPadding + details.bottomPadding
+ anchors.bottom: parent.bottom
 
- if ( notes.length > 0 ) {
- return notes.join( '; ' );
- } else {
- return "";
+ Row {
+ id: details
+ width: parent.width
+ topPadding: 3
+ bottomPadding: 3
+ spacing: 0
+
+ Image {
+ id: type
+ anchors.verticalCenter: parent.verticalCenter
+ source: switch(ProjectType) {
+ case 0: return Theme.getThemeVectorIcon('ic_map_green_48dp'); // local project
+ case 1: return Theme.getThemeVectorIcon('ic_cloud_project_48dp'); // cloud project
+ case 2: return Theme.getThemeVectorIcon('ic_file_green_48dp'); // local dataset
+ default: return '';
+ }
+ sourceSize.width: 80
+ sourceSize.height: 80
+ width: 40
+ height: 40
+ }
+ ColumnLayout {
+ id: inner
+ anchors.verticalCenter: parent.verticalCenter
+ width: rectangle.width - type.width - 20
+ clip: true
+
+ Text {
+ id: projectTitle
+ topPadding: 5
+ leftPadding: 3
+ bottomPadding: projectNote.visible ? 0 : 5
+ text: ProjectTitle
+ font.pointSize: Theme.tipFont.pointSize
+ font.underline: true
+ color: Theme.mainColor
+ opacity: rectangle.isPressed ? 0.8 : 1
+ wrapMode: Text.WordWrap
+ Layout.fillWidth: true
+ }
+ Text {
+ id: projectNote
+ leftPadding: 3
+ bottomPadding: 5
+ text: {
+ var notes = [];
+
+ if ( index == 0 ) {
+ var firstRun = settings && !settings.value( "/QField/FirstRunFlag", false )
+ if (!firstRun && firstShown === false) notes.push( qsTr( "Last session" ) );
+ }
+
+ if ( ProjectPath === registry.defaultProject ) {
+ notes.push( qsTr( "Default project" ) );
+ }
+
+ if ( ProjectPath === registry.baseMapProject ) {
+ notes.push( qsTr( "Base map" ) );
+ }
+
+ if ( notes.length > 0 ) {
+ return notes.join( '; ' );
+ } else {
+ return "";
+ }
  }
+ visible: text != ""
+ font.pointSize: Theme.tipFont.pointSize - 2
+ font.italic: true
+ color: Theme.secondaryTextColor
+ wrapMode: Text.WordWrap
+ Layout.fillWidth: true
  }
- visible: text != ""
- font.pointSize: Theme.tipFont.pointSize - 2
- font.italic: true
- color: Theme.secondaryTextColor
- wrapMode: Text.WordWrap
- Layout.fillWidth: true
  }
  }
  }