Merge pull request #485 from Yubico/new-gridview-behaviour

changed gridview alignment and scrolling behaviour

.github/workflows/windows-x64.yml

@@ -1,4 +1,4 @@
-name: windows
+name: windows 64 bit
 
 on: [push, pull_request]
 
@@ -51,6 +51,7 @@ jobs:
           qmake
           jom
           jom install
+        shell: cmd
 
       - name: Build app
         run: |
@@ -58,6 +59,7 @@ jobs:
           call C:\"Program Files (x86)\Microsoft Visual Studio"\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat x64
           qmake
           jom
+        shell: cmd
 
       - name: Copy ykpers and libusb dll files
         run: |
@@ -76,6 +78,7 @@ jobs:
           set PATH=D:\a\yubioath-desktop\yubioath-desktop\Qt5.13.1\5.13.1\msvc2017_64\bin;D:\a\yubioath-desktop\yubioath-desktop;%PATH%
           call C:\"Program Files (x86)\Microsoft Visual Studio"\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat x64
           windeployqt .\release\yubioath-desktop.exe --qmldir=qml --no-translations --angle --release
+        shell: cmd
 
       - name: Copy over files and create .zip archive
         run: |

.github/workflows/windows-x86.yml

@@ -55,6 +55,7 @@ jobs:
           qmake
           jom
           jom install
+        shell: cmd
 
       - name: Build app
         run: |
@@ -62,6 +63,7 @@ jobs:
           call C:\"Program Files (x86)\Microsoft Visual Studio"\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat x86
           qmake
           jom
+        shell: cmd
 
       - name: Copy ykpers and libusb dll files
         run: |
@@ -80,6 +82,7 @@ jobs:
           set PATH=D:\a\yubioath-desktop\yubioath-desktop\Qt5.13.1\5.13.1\msvc2017\bin;D:\a\yubioath-desktop\yubioath-desktop;%PATH%
           call C:\"Program Files (x86)\Microsoft Visual Studio"\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat x86
           windeployqt .\release\yubioath-desktop.exe --qmldir=.\qml --no-translations --angle --release
+        shell: cmd
 
       - name: Copy over files and create .zip archive
         run: |

qml/CredentialCard.qml

@@ -9,11 +9,12 @@ Pane {
 
     id: credentialCard
 
-    implicitWidth: app.width <= 360 ? app.width : 360
+    Layout.minimumWidth: 300
-
+    Layout.minimumHeight: 82
-    implicitHeight: 80
+    width: 300
-
+    height: 82
-    Material.elevation: 0
+    implicitWidth: 300
+    implicitHeight: 82
 
     property var code
     property var credential
@@ -33,6 +34,15 @@ Pane {
     property bool favoriteDefault: settings.favoriteDefault === credential.key
 
     background: Rectangle {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        Layout.minimumWidth: 298
+        Layout.minimumHeight: 80
+        width: parent.width - 2
+        implicitWidth: parent.width - 2
+        height: 80
+        implicitHeight: 80
+
         color: if (credentialCard.GridView.isCurrentItem) {
                    return credentialCardCurrentItem
                } else if (cardMouseArea.containsMouse) {
@@ -348,7 +358,7 @@ Pane {
             Label {
                 id: nameLbl
                 text: formattedName()
-                Layout.maximumWidth: app.width <= 360 ? app.width - 100 : 260
+                Layout.maximumWidth: credentialCard.width - 100
                 font.pixelSize: 14
                 elide: Text.ElideRight
                 color: credentialCardIssuer

qml/CredentialsView.qml

@@ -4,25 +4,14 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import QtGraphicalEffects 1.0
 
-ScrollView {
+Pane {
     id: pane
     objectName: 'credentialsView'
 
+    anchors.fill: parent
     Accessible.ignored: true
-
+    padding: 0
-    property var filtered: 0
+    spacing: 0
-
-    contentHeight: filteredCredentials().count > 0 ? grid.contentHeight : app.height - toolBar.height
-
-    ScrollBar.vertical: ScrollBar {
-        id: paneScrollBar
-        width: 8
-        anchors.top: pane.top
-        anchors.right: pane.right
-        anchors.bottom: pane.bottom
-        hoverEnabled: true
-        z: 2
-    }
 
     property string title: ""
 
@@ -58,14 +47,6 @@ ScrollView {
         }
     }
 
-    MouseArea {
-        onClicked: grid.currentIndex = -1
-        height: app.height
-        width: app.width
-        enabled: entries.count > 0
-        Accessible.ignored: true
-    }
-
     NoCredentialsSection {
         visible: entries.count === 0 && !!yubiKey.currentDevice && yubiKey.currentDeviceValidated
         enabled: visible
@@ -87,34 +68,54 @@ ScrollView {
 
     GridView {
         id: grid
-        displayMarginBeginning: cellHeight
+        property var columnWidth: app.width/model.count
-        displayMarginEnd: cellHeight
+        property var idealCellHeight: 82
-        width: (Math.min(model.count, Math.floor(parent.width / cellWidth)) * cellWidth) || cellWidth
+        property var idealCellWidth: columnWidth > 300 ? columnWidth : 300
-        height: (Math.min(model.count, Math.floor((parent.height - toolBar.height) / cellHeight)) * cellHeight) || cellHeight
+        anchors.fill: parent
-        anchors.horizontalCenter: parent.horizontalCenter
+        ScrollBar.vertical: ScrollBar {
+            id: paneScrollBar
+            width: 8
             anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            hoverEnabled: true
+        }
+        displayMarginBeginning: cellHeight
         onCurrentItemChanged: app.currentCredentialCard = currentItem
         visible: entries.count > 0
         enabled: visible
         keyNavigationWraps: false
         model: filteredCredentials()
-        cellWidth: app.width <= 360 ? app.width + 2 : 362
+        cellHeight: idealCellHeight
-        cellHeight: 82
+        cellWidth: width / Math.floor(width / idealCellWidth)
         Accessible.role: Accessible.MenuItem
         Accessible.focusable: true
         delegate: CredentialCard {
             credential: model.credential
             code: model.code
+            // The delegate size is equal to the cell size...
+            height: GridView.view.cellHeight
+            width: GridView.view.cellWidth
+            Rectangle {
+                // ... but visible part is not. Here the width is set to the ideal size.
+                // The visible part of the delegate is centered in the delegate, which means
+                // the grid appears centered
+                anchors.centerIn: parent
+                width: parent.GridView.view ? parent.GridView.view.idealCellWidth : 0
+                height: parent.height
+            }
+        }
+        boundsBehavior: Flickable.StopAtBounds
+        move: Transition {
+            NumberAnimation { properties: "x,y"; duration: 250 }
         }
         focus: visible
         Component.onCompleted: currentIndex = -1
         KeyNavigation.backtab: toolBar.addCredentialBtn
         KeyNavigation.tab: toolBar.settingsBtn
         KeyNavigation.up: paneScrollBar.position === 0 ? toolBar.searchField : null
-        interactive: false
+        interactive: true
-        highlightFollowsCurrentItem: false
+        highlightFollowsCurrentItem: true
-        Keys.onPressed: interactive = true
-        Keys.onReleased: interactive = false
         Keys.onEscapePressed: {
             toolBar.searchField.text = ""
             navigator.forceActiveFocus()

qml/EnterPasswordView.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import QtGraphicalEffects 1.0
 
-ScrollView {
+Flickable {
 
     readonly property int dynamicWidth: 864
     readonly property int dynamicMargin: 32
@@ -13,8 +13,15 @@ ScrollView {
     objectName: 'enterPasswordView'
     property string title: qsTr("Unlock YubiKey")
 
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical: ScrollBar {
-    ScrollBar.vertical.width: 8
+        width: 8
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        hoverEnabled: true
+        z: 2
+    }
+    boundsBehavior: Flickable.StopAtBounds
 
     contentWidth: app.width
 
@@ -43,9 +50,6 @@ ScrollView {
         }
     }
 
-    spacing: 0
-    padding: 0
-
     Component.onCompleted: {
         passwordField.textField.forceActiveFocus()
     }

qml/NewCredentialView.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import QtGraphicalEffects 1.0
 
-ScrollView {
+Flickable {
 
     readonly property int dynamicWidth: 864
     readonly property int dynamicMargin: 32
@@ -13,8 +13,15 @@ ScrollView {
     objectName: 'newCredentialView'
     property string title: qsTr("Add Account")
 
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical: ScrollBar {
-    ScrollBar.vertical.width: 8
+        width: 8
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        hoverEnabled: true
+        z: 2
+    }
+    boundsBehavior: Flickable.StopAtBounds
 
     property var credential
     property bool manualEntry
@@ -106,9 +113,6 @@ ScrollView {
 
     Keys.onEscapePressed: navigator.home()
 
-    spacing: 8
-    padding: 0
-
     function getEnabledOtpSlots() {
         var res = []
         if (settings.slot1digits) {

qml/SettingsView.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import QtGraphicalEffects 1.0
 
-ScrollView {
+Flickable {
 
     readonly property int dynamicWidth: 864
     readonly property int dynamicMargin: 32
@@ -14,8 +14,15 @@ ScrollView {
     contentWidth: app.width
     contentHeight: content.implicitHeight
 
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical: ScrollBar {
-    ScrollBar.vertical.width: 8
+        width: 8
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        hoverEnabled: true
+        z: 2
+    }
+    boundsBehavior: Flickable.StopAtBounds
 
     Keys.onEscapePressed: navigator.home()
 
@@ -163,9 +170,6 @@ ScrollView {
         }
     }
 
-    spacing: 8
-    padding: 0
-
     ColumnLayout {
         id: content
         anchors.fill: parent