solar_system, add keyboard controls

src/activities/solar_system/PlanetInSolarModel.qml

@@ -43,7 +43,7 @@ Item {
         font.pixelSize: parent.width * 0.18
         color: "white"
         text: planetName
-        
+
         states: [
                 State {
                     name: "hScreen"
@@ -79,9 +79,9 @@ Item {
                         horizontalAlignment: Text.AlignLeft
                     }
                 }
-                
+
         ]
-        
+
         MouseArea {
             id: mouseAreaText
             anchors.fill: planetNameText
@@ -105,7 +105,7 @@ Item {
         fillMode: Image.PreserveAspectFit
         source: planetImageSource
     }
-    
+
     states: [
             State {
                 name: "hover"

src/activities/solar_system/QuizScreen.qml

@@ -30,10 +30,10 @@ Item {
     id: mainQuizScreen
     width: parent.width
     height: parent.height
-    focus: true
 
     property alias score: score
     property alias optionListModel: optionListModel
+    property alias optionListView: optionListView
     property alias restartAssessmentMessage: restartAssessmentMessage
     property alias blockAnswerButtons: optionListView.blockAnswerButtons
     property alias closenessMeter: closenessMeter
@@ -135,6 +135,15 @@ Item {
 
                 property bool blockAnswerButtons: false
 
+                highlight: Rectangle {
+                    scale: 1.2
+                    color:  "#2881C3"
+                    visible: background.keyboardMode
+                    radius: 10 * ApplicationInfo.ratio
+                    Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
+                    Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
+                }
+
                 delegate: AnswerButton {
                     id: optionButton
                     width: parent.width

src/activities/solar_system/SolarSystem.qml

@@ -85,11 +85,71 @@ ActivityBase {
             property bool hintProvided: true
         }
 
-        onStart: {
-            Activity.start(items)
+        onStart: Activity.start(items)
+        onStop: Activity.stop()
+
+        property bool keyboardMode: false
+
+        Keys.onPressed: {
+            if(!mainQuizScreen.visible) {
+                if(event.key === Qt.Key_Down) {
+                    planetView.moveCurrentIndexDown();
+                } else if(event.key === Qt.Key_Right) {
+                    planetView.moveCurrentIndexRight();
+                } else if(event.key === Qt.Key_Up) {
+                    planetView.moveCurrentIndexUp();
+                } else if(event.key === Qt.Key_Left) {
+                    planetView.moveCurrentIndexLeft();
+                } else if(event.key === Qt.Key_Enter || event.key === Qt.Key_Space || event.key === Qt.Key_Return) {
+                    Activity.showQuizScreen(planetView.currentIndex);
+                }
+            } else {
+                if(mainQuizScreen.blockAnswerButtons) {
+                    return;
+                }
+                if(event.key === Qt.Key_Down || event.key === Qt.Key_Right) {
+                    if(mainQuizScreen.optionListView.currentIndex <
+                        mainQuizScreen.optionListView.count - 1) {
+                         mainQuizScreen.optionListView.currentIndex += 1;
+                    } else {
+                        mainQuizScreen.optionListView.currentIndex = 0;
+                    }
+                } else if(event.key === Qt.Key_Up || event.key === Qt.Key_Left) {
+                    if(mainQuizScreen.optionListView.currentIndex > 0) {
+                         mainQuizScreen.optionListView.currentIndex -= 1;
+                    } else {
+                        mainQuizScreen.optionListView.currentIndex =
+                        mainQuizScreen.optionListView.count - 1;
+                    }
+                } else if(event.key === Qt.Key_Enter || event.key === Qt.Key_Space || event.key === Qt.Key_Return) {
+                    mainQuizScreen.optionListView.currentItem.pressed();
+                }
+            }
+        }
+
+        Keys.onTabPressed: {
+            if(items.hintProvided) {
+                if(items.assessmentMode)
+                    solarSystemImageHint.visible = true;
+                else
+                    displayDialog(hintDialog);
+            }
         }
 
-        onStop: Activity.stop()
+
+        Keys.onEscapePressed: {
+            mainQuizScreen.closenessMeter.stopAnimations();
+            if(items.solarSystemVisible || (items.assessmentMode && !solarSystemImageHint.visible))
+                activity.home();
+            else if(solarSystemImageHint.visible)
+                solarSystemImageHint.visible = false
+            else
+                Activity.showSolarModel();
+        }
+
+        Keys.onReleased: {
+            keyboardMode = true
+        }
 
         IntroMessage {
             id: message
@@ -140,6 +200,15 @@ ActivityBase {
             cellWidth: background.itemWidth
             cellHeight: cellWidth
             model: planetsModel
+            keyNavigationWraps: true
+            highlight: Rectangle {
+                scale: 1.2
+                color:  "#80FFFFFF"
+                visible: background.keyboardMode
+                radius: 10 * ApplicationInfo.ratio
+                Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
+                Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
+            }
 
             delegate: PlanetInSolarModel {
                 planetImageSource: realImg
@@ -298,6 +367,7 @@ ActivityBase {
             onClose: {
                 solarSystemImageHint.visible = false
                 home()
+                activity.forceActiveFocus()
             }
 
             button0Text: qsTr("View solar system")

src/core/AnswerButton.qml

@@ -121,7 +121,7 @@ Item {
      * Triggered at the end of wrongAnswerAnimation.
      */
     signal incorrectlyPressed
-    
+
     /**
      * Emitted when answer button is clicked.
      */

src/core/DialogBackground.qml

@@ -41,6 +41,7 @@ Rectangle {
     border.color: "black"
     border.width: 1
     z: 1000
+    focus: visible
     property bool isDialog: true
     property string title
     property string content
@@ -53,6 +54,18 @@ Rectangle {
     signal stop
     signal button0Hit
 
+    Keys.onPressed: {
+        if(event.key === Qt.Key_Down) {
+            scrollItem.down();
+        } else if(event.key === Qt.Key_Up) {
+            scrollItem.up();
+        }
+    }
+
+    Keys.onEscapePressed: {
+        dialogBackground.close();
+    }
+
     Row {
         spacing: 2
         Item { width: 10; height: 1 }
@@ -104,7 +117,7 @@ Rectangle {
                     anchors.margins: 8
                     anchors.fill: parent
                     contentWidth: textContent.contentWidth
-                    contentHeight: iconImage.height + textContent.contentHeight
+                    contentHeight: iconImage.height + button0.height + textContent.contentHeight
                     flickableDirection: Flickable.VerticalFlick
                     clip: true
 
@@ -150,6 +163,7 @@ Rectangle {
                 }
                 // The scroll buttons
                 GCButtonScroll {
+                    id: scrollItem
                     anchors.right: parent.right
                     anchors.rightMargin: 5 * ApplicationInfo.ratio
                     anchors.bottom: flick.bottom
@@ -160,7 +174,6 @@ Rectangle {
                     downVisible: flick.visibleArea.yPosition + flick.visibleArea.heightRatio >= 1 ? false : true
                 }
             }
-            Item { width: 1; height: 10 }
         }
     }
 }

src/core/GCButtonScroll.qml

@@ -34,17 +34,17 @@ Rectangle {
     color: "#00000000"
     width: (isHorizontal ? 110 : 50) * ApplicationInfo.ratio
     height: (isHorizontal ? 50 : 110) * ApplicationInfo.ratio
-    
+
     signal up
     signal down
-    
+
     property bool upVisible: false
     property bool downVisible: false
 
     property bool isHorizontal: false
     property real heightRatio: isHorizontal ? (50 / 110) : (110 / 50)
     property real widthRatio: 1 / heightRatio
-    
+
     BarButton {
         id: scrollUp
         width: isHorizontal ? parent.height : parent.width
@@ -58,7 +58,7 @@ Rectangle {
         onClicked: up()
         visible: upVisible
     }
-    
+
     BarButton {
         id: scrollDown
         width: isHorizontal ? parent.height : parent.width