Updated screen: How you found us

Dynamic title
MerginMaps · Dec 13, 2023 · 3b7685c · 3b7685c
1 parent da109ff
commit 3b7685c
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 171 deletions.
diff --git a/app/qml/components/MMIconCheckBoxHorizontal.qml b/app/qml/components/MMIconCheckBoxHorizontal.qml
@@ -15,7 +15,7 @@ import "."
 CheckBox {
   id: control
 
-  required property var sourceIcon
+  property var sourceIcon: ""
   property bool small: false
 
   height: (control.small ? 50 : 80) * __dp

diff --git a/app/qml/onboarding/MMHowYouFoundUs.qml b/app/qml/onboarding/MMHowYouFoundUs.qml
@@ -15,188 +15,102 @@ import "../components"
 Page {
   id: root
 
+  width: parent.width
+
   signal backClicked
   signal continueClicked
 
-  function uncheck(except, isChecked, items) {
-    if (!isChecked)
-      return;
+  readonly property string headerTitle: qsTr("How did you learn about us?")
+  readonly property real hPadding: width < __style.maxPageWidth
+                                   ? 20 * __dp
+                                   : (20 + (width - __style.maxPageWidth) / 2) * __dp
 
-    items.forEach( function(item) {
-      if (item !== except) {
-        item.checked = false
-      }
-    } )
+  Rectangle {
+    anchors.fill: parent
+    color: __style.lightGreenColor
   }
 
-  function uncheckAllPrimary(except, isChecked) {
-
-    var items = [
-      searchSource,
-      blogSource,
-      mouthSource,
-      qgisSource,
-      applicationStoreSource,
-      teacherSource,
-      conferenceSource,
-      socialMediaSource,
-      otherSource
-    ]
-
-    uncheck(except, isChecked, items)
-  }
+  MMHeader {
+    id: header
 
-  function uncheckAllSocialMedia(except, isChecked) {
-    if (!isChecked)
-      return;
+    x: root.hPadding
+    y: 20 * __dp
+    width: root.width - 2 * root.hPadding
+    headerTitle: listView.contentY > -30 * __dp ? root.headerTitle : ""
+    backVisible: false
+    step: 2
 
-    var items = [
-      youtubeSocialMediaSource,
-      twitterSocialMediaSource,
-      facebookSocialMediaSource,
-      linkedinSocialMediaSource,
-      mastodonSocialMediaSource,
-      redditSocialMediaSource,
-    ]
-
-    uncheck(except, isChecked, items)
+    onBackClicked: root.backClicked()
   }
 
-  Column {
-    MMHeader {
-      headerTitle: qsTr("How did you learn about us")
-      step: 2
-
-      onBackClicked: root.backClicked()
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: searchSource
-      sourceIcon: __style.searchIcon
-      text: qsTr("Search engine (Google, ...)")
-      onToggled: uncheckAllPrimary(searchSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: blogSource
-      sourceIcon: __style.termsIcon
-      text: qsTr("Blog")
-      onToggled: uncheckAllPrimary(blogSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: mouthSource
-      sourceIcon: __style.mouthIcon
-      text: qsTr("Mouth")
-      onToggled: uncheckAllPrimary(mouthSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: qgisSource
-      sourceIcon: __style.qgisIcon
-      text: qsTr("QGIS website")
-      onToggled: uncheckAllPrimary(qgisSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: applicationStoreSource
-      sourceIcon: __style.subscriptionsIcon
-      text: qsTr("Application store")
-      onToggled: uncheckAllPrimary(applicationStoreSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: teacherSource
-      sourceIcon: __style.teacherIcon
-      text: qsTr("Teacher")
-      onToggled: uncheckAllPrimary(teacherSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: conferenceSource
-      sourceIcon: __style.briefcaseIcon
-      text: qsTr("Conference")
-      onToggled: uncheckAllPrimary(conferenceSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: socialMediaSource
-      sourceIcon: __style.socialMediaIcon
-      text: qsTr("Social media")
-      onToggled: uncheckAllPrimary(socialMediaSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: youtubeSocialMediaSource
-      visible: socialMediaSource.checked
-      sourceIcon: __style.youtubeIcon
-      text: qsTr("YouTube")
-      small:true
-      onToggled: uncheckAllSocialMedia(youtubeSocialMediaSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: twitterSocialMediaSource
-      visible: socialMediaSource.checked
-      sourceIcon: __style.xTwitterIcon
-      text: qsTr("Twitter")
-      small:true
-      onToggled: uncheckAllSocialMedia(twitterSocialMediaSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: facebookSocialMediaSource
-      visible: socialMediaSource.checked
-      sourceIcon: __style.facebookIcon
-      text: qsTr("Facebook")
-      small:true
-      onToggled: uncheckAllSocialMedia(facebookSocialMediaSource, checked)
-    }
-
-    MMIconCheckBoxHorizontal {
-      id: linkedinSocialMediaSource
-      visible: socialMediaSource.checked
-      sourceIcon: __style.linkedinIcon
-      text: qsTr("LinkedIn")
-      small:true
-      onToggled: uncheckAllSocialMedia(linkedinSocialMediaSource, checked)
-    }
+  Item {
+    width: parent.width
+    height: parent.height - header.height - 40 * __dp
+    anchors.top: header.bottom
+    anchors.topMargin: 20 * __dp
+
+    ListView {
+      id: listView
+
+      width: parent.width - 2 * root.hPadding
+      anchors.horizontalCenter: parent.horizontalCenter
+      height: parent.height - header.height
+      spacing: 10 * __dp
+      clip: true
+
+      model: ListModel {
+        Component.onCompleted: {
+          listView.model.append({name: qsTr("Search engine (Google, ...)"), icon: __style.searchIcon, submenu: false})
+          listView.model.append({name: qsTr("Blog"), icon: __style.termsIcon, submenu: false})
+          listView.model.append({name: qsTr("Mouth"), icon: __style.mouthIcon, submenu: false})
+          listView.model.append({name: qsTr("QGIS website"), icon: __style.qgisIcon, submenu: false})
+          listView.model.append({name: qsTr("Application store"), icon: __style.subscriptionsIcon, submenu: false})
+          listView.model.append({name: qsTr("Teacher"), icon: __style.teacherIcon, submenu: false})
+          listView.model.append({name: qsTr("Conference"), icon: __style.briefcaseIcon, submenu: false})
+          listView.model.append({name: qsTr("Social media"), icon: __style.socialMediaIcon, submenu: false})
+          listView.model.append({name: qsTr("YouTube"), icon: __style.youtubeIcon, submenu: true})
+          listView.model.append({name: qsTr("Twitter"), icon: __style.xTwitterIcon, submenu: true})
+          listView.model.append({name: qsTr("Facebook"), icon: __style.facebookIcon, submenu: true})
+          listView.model.append({name: qsTr("LinkedIn"), icon: __style.linkedinIcon, submenu: true})
+          listView.model.append({name: qsTr("Mastodon"), icon: __style.mastodonIcon, submenu: true})
+          listView.model.append({name: qsTr("Reddit"), icon: __style.redditIcon, submenu: true})
+          listView.model.append({name: qsTr("Other"), icon: __style.otherIcon, submenu: false})
+        }
+      }
 
-    MMIconCheckBoxHorizontal {
-      id: mastodonSocialMediaSource
-      visible: socialMediaSource.checked
-      sourceIcon: __style.mastodonIcon
-      text: qsTr("Mastodon")
-      small:true
-      onToggled: uncheckAllSocialMedia(mastodonSocialMediaSource, checked)
-    }
+      header: Text {
+        id: listHeader
+
+        width: root.width - 2 * root.hPadding
+        padding: 20 * __dp
+        text: root.headerTitle
+        font: __style.h3
+        color: __style.forestColor
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        lineHeight: 1.2
+      }
 
-    MMIconCheckBoxHorizontal {
-      id: redditSocialMediaSource
-      visible: socialMediaSource.checked
-      sourceIcon: __style.redditIcon
-      text: qsTr("Reddit")
-      small:true
-      onToggled: uncheckAllSocialMedia(redditSocialMediaSource, checked)
-    }
+      delegate: MMIconCheckBoxHorizontal {
+        width: model.submenu ? listView.width - 20 * __dp : listView.width
+        x: model.submenu ? 20 * __dp : 0
+        sourceIcon: model.icon
+        text: model.name
+        small: model.submenu
+        checked: listView.currentIndex === index
 
-    MMIconCheckBoxHorizontal {
-      id: otherSource
-      sourceIcon: __style.otherIcon
-      text: qsTr("Other")
-      onToggled: uncheckAllPrimary(otherSource, checked)
+        onClicked: listView.currentIndex = index
+      }
     }
+  }
 
-    MMInput {
-      id: otherSourceDescription
-      visible: otherSource.checked
-      title: qsTr("Source")
-      placeholderText: qsTr("Please specify the source")
-    }
+  MMButton {
+    width: root.width - 2 * root.hPadding
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.bottom: parent.bottom
+    anchors.bottomMargin: 20 * __dp
+    text: qsTr("Continue")
 
-    MMButton {
-      onClicked: root.continueClicked()
-      text: qsTr("Continue")
-    }
+    onClicked: root.continueClicked()
   }
 }
diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml
@@ -123,15 +123,17 @@ Page {
     onContinueClicked: visible = false
   }
 
-
   MMHowYouFoundUs {
     id: howYouFoundUs
+
     anchors.fill: parent
-    visible: false
+    //visible: false
 
-    onBackClicked: {visible=false}
+    onContinueClicked: visible = false
+    onBackClicked: visible = false
   }
 
+
   MMWhichIndustry {
     id: whichIndustry
     anchors.fill: parent