src/core/NumberQuestionCard.qml

0001 /* GCompris - NumberQuestionCard.qml
0002  *
0003  * SPDX-FileCopyrightText: 2022 Samarth Raj <mailforsamarth@gmail.com>
0004  * SPDX-FileCopyrightText: 2022 Timothée Giet <animtim@gmail.com>
0005  * SPDX-License-Identifier: GPL-3.0-or-later
0006  */
0007 import QtQuick 2.12
0008 import GCompris 1.0
0009
0010 /**
0011  * A QML component used in tens_complement_find and tens_complement_use
0012  *
0013  * It's meant to be used in a Flickable (GridView, ListView ...) with a ListModel
0014  * containing the following properties:
0015  *     "value": a string to display on the card
0016  *     "visibility": a bool telling if the card is visible or hidden
0017  *     "clickable": a bool telling if the card is clickable or not
0018  *     "isSignSymbol": a bool set to true if the value is a math symbol and not a number
0019  */
0020
0021 Item {
0022     id: numberCard
0023     visible: visibility
0024
0025     property bool selected: false
0026     property int cardSize: Math.min(width, height)
0027
0028     signal clicked
0029
0030     Rectangle {
0031         id: cardBg
0032         height: selected ? cardSize * 0.9 : cardSize * 0.7
0033         width: height
0034         color: isSignSymbol || !clickable ? "transparent" : "white"
0035         border.color: isSignSymbol || !clickable ? "transparent" : "#9FB8E3"
0036         border.width: selected ? 12 : 3
0037         radius: 15
0038         anchors.centerIn: parent
0039     }
0040     GCText {
0041         id: numberText
0042         width: isSignSymbol ? numberCard.height : cardBg.height
0043         height: isSignSymbol ? numberCard.width : cardBg.height
0044         anchors.centerIn: parent
0045         color: "#373737"
0046         text: value
0047         fontSize: Math.max(1, height) // avoid value of 0 during init
0048         fontSizeMode: Text.Fit
0049         verticalAlignment: Text.AlignVCenter
0050         horizontalAlignment: Text.AlignHCenter
0051     }
0052
0053     MouseArea {
0054         width: numberCard.height
0055         height: numberCard.height
0056         anchors.centerIn: parent
0057         enabled: clickable
0058         onClicked: {
0059             numberCard.clicked();
0060         }
0061     }
0062 }