diff --git a/src/activities/letter-in-word/Card.qml b/src/activities/letter-in-word/Card.qml --- a/src/activities/letter-in-word/Card.qml +++ b/src/activities/letter-in-word/Card.qml @@ -28,7 +28,7 @@ Item { id: cardItem //width: cardImage.width - height: wordPic.height + cardImage.height - 30 * ApplicationInfo.ratio + height: wordPic.height property bool mouseActive: true Image { @@ -43,32 +43,15 @@ Image { id: cardImage - anchors.top: wordPic.bottom + anchors.centerIn: wordPic anchors.topMargin: -30 * ApplicationInfo.ratio - sourceSize.width: cardItem.width - 10 + sourceSize.width: cardItem.width - 20 + sourceSize.height: width fillMode: Image.PreserveAspectFit source: Activity.resUrl2 + "cloud.svg" z: (state == 'scaled') ? 1 : -1 //visible: index % 2 != 0 ? false : true - - GCText { - id: textItem - z: 11 - // textFound is the rich text with letter found, spelling is the text in the dataset - text:"" + (selected ? textFound : spelling) + "" - property string textFound: spelling - textFormat: Text.RichText - font.pointSize: NaN // need to clear font.pointSize explicitly - font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30 - font.bold: true - style: Text.Outline - width: cardImage.width - height: cardImage.height - wrapMode: spelling.indexOf(' ') === -1 ? Text.WrapAnywhere : Text.WordWrap - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - styleColor: "white" - } + opacity: 0.4 states: State { @@ -89,13 +72,13 @@ running: selected loops: 2 NumberAnimation { - target: cardImage + targets: [cardImage,textItem] easing.type: Easing.InOutQuad property: "rotation" to: 20; duration: 500 } NumberAnimation { - target: cardImage + targets: [cardImage,textItem] easing.type: Easing.InOutQuad property: "rotation"; to: -20 duration: 500 @@ -112,14 +95,14 @@ NumberAnimation { target: cardImage property: "opacity" - to: 1; duration: 400 + to: 0.4; duration: 400 } } NumberAnimation { id: rotationStop running: !selected - target: cardImage + targets: [cardImage,textItem] property: "rotation" to: 0 duration: 500 @@ -128,9 +111,28 @@ } + GCText { + id: textItem + z: 11 + // textFound is the rich text with letter found, spelling is the text in the dataset + text:"" + (selected ? textFound : spelling) + "" + property string textFound: spelling + textFormat: Text.RichText + font.pointSize: NaN // need to clear font.pointSize explicitly + font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30 + font.bold: true + style: Text.Outline + width: cardImage.width + height: cardImage.height + wrapMode: spelling.indexOf(' ') === -1 ? Text.WrapAnywhere : Text.WordWrap + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + styleColor: "white" + } + MouseArea { id: mouseArea - anchors.fill: parent + anchors.fill: textItem hoverEnabled: ApplicationInfo.isMobile ? false : true onClicked: { select();