Changeset View
Changeset View
Standalone View
Standalone View
src/activities/letter-in-word/Card.qml
| Context not available. | |||||
| 28 | Item { | 28 | Item { | ||
|---|---|---|---|---|---|
| 29 | id: cardItem | 29 | id: cardItem | ||
| 30 | //width: cardImage.width | 30 | //width: cardImage.width | ||
| 31 | height: wordPic.height + cardImage.height - 30 * ApplicationInfo.ratio | 31 | height: wordPic.height | ||
| 32 | property bool mouseActive: true | 32 | property bool mouseActive: true | ||
| 33 | 33 | | |||
| 34 | Image { | 34 | Image { | ||
| Context not available. | |||||
| 43 | 43 | | |||
| 44 | Image { | 44 | Image { | ||
| 45 | id: cardImage | 45 | id: cardImage | ||
| 46 | anchors.top: wordPic.bottom | 46 | anchors.centerIn: wordPic | ||
| 47 | anchors.topMargin: -30 * ApplicationInfo.ratio | 47 | anchors.topMargin: -30 * ApplicationInfo.ratio | ||
| 48 | sourceSize.width: cardItem.width - 10 | 48 | sourceSize.width: cardItem.width - 20 | ||
| 49 | sourceSize.height: width | ||||
| 49 | fillMode: Image.PreserveAspectFit | 50 | fillMode: Image.PreserveAspectFit | ||
| 50 | source: Activity.resUrl2 + "cloud.svg" | 51 | source: Activity.resUrl2 + "cloud.svg" | ||
| 51 | z: (state == 'scaled') ? 1 : -1 | 52 | z: (state == 'scaled') ? 1 : -1 | ||
| 52 | //visible: index % 2 != 0 ? false : true | 53 | //visible: index % 2 != 0 ? false : true | ||
| 53 | 54 | opacity: 0.4 | |||
| 54 | GCText { | | |||
| 55 | id: textItem | | |||
| 56 | z: 11 | | |||
| 57 | // textFound is the rich text with letter found, spelling is the text in the dataset | | |||
| 58 | text:"<font color=\"#2a2a2a\">" + (selected ? textFound : spelling) + "</font>" | | |||
| 59 | property string textFound: spelling | | |||
| 60 | textFormat: Text.RichText | | |||
| 61 | font.pointSize: NaN // need to clear font.pointSize explicitly | | |||
| 62 | font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30 | | |||
| 63 | font.bold: true | | |||
| 64 | style: Text.Outline | | |||
| 65 | width: cardImage.width | | |||
| 66 | height: cardImage.height | | |||
| 67 | wrapMode: spelling.indexOf(' ') === -1 ? Text.WrapAnywhere : Text.WordWrap | | |||
| 68 | verticalAlignment: Text.AlignVCenter | | |||
| 69 | horizontalAlignment: Text.AlignHCenter | | |||
| 70 | styleColor: "white" | | |||
| 71 | } | | |||
| 72 | 55 | | |||
| 73 | states: | 56 | states: | ||
| 74 | State { | 57 | State { | ||
| Context not available. | |||||
| 89 | running: selected | 72 | running: selected | ||
| 90 | loops: 2 | 73 | loops: 2 | ||
| 91 | NumberAnimation { | 74 | NumberAnimation { | ||
| 92 | target: cardImage | 75 | targets: [cardImage,textItem] | ||
| 93 | easing.type: Easing.InOutQuad | 76 | easing.type: Easing.InOutQuad | ||
| 94 | property: "rotation" | 77 | property: "rotation" | ||
| 95 | to: 20; duration: 500 | 78 | to: 20; duration: 500 | ||
| 96 | } | 79 | } | ||
| 97 | NumberAnimation { | 80 | NumberAnimation { | ||
| 98 | target: cardImage | 81 | targets: [cardImage,textItem] | ||
| 99 | easing.type: Easing.InOutQuad | 82 | easing.type: Easing.InOutQuad | ||
| 100 | property: "rotation"; to: -20 | 83 | property: "rotation"; to: -20 | ||
| 101 | duration: 500 | 84 | duration: 500 | ||
| Context not available. | |||||
| 112 | NumberAnimation { | 95 | NumberAnimation { | ||
| 113 | target: cardImage | 96 | target: cardImage | ||
| 114 | property: "opacity" | 97 | property: "opacity" | ||
| 115 | to: 1; duration: 400 | 98 | to: 0.4; duration: 400 | ||
| 116 | } | 99 | } | ||
| 117 | } | 100 | } | ||
| 118 | 101 | | |||
| 119 | NumberAnimation { | 102 | NumberAnimation { | ||
| 120 | id: rotationStop | 103 | id: rotationStop | ||
| 121 | running: !selected | 104 | running: !selected | ||
| 122 | target: cardImage | 105 | targets: [cardImage,textItem] | ||
| 123 | property: "rotation" | 106 | property: "rotation" | ||
| 124 | to: 0 | 107 | to: 0 | ||
| 125 | duration: 500 | 108 | duration: 500 | ||
| Context not available. | |||||
| 128 | 111 | | |||
| 129 | } | 112 | } | ||
| 130 | 113 | | |||
| 114 | GCText { | ||||
| 115 | id: textItem | ||||
| 116 | z: 11 | ||||
| 117 | // textFound is the rich text with letter found, spelling is the text in the dataset | ||||
| 118 | text:"<font color=\"#2a2a2a\">" + (selected ? textFound : spelling) + "</font>" | ||||
| 119 | property string textFound: spelling | ||||
| 120 | textFormat: Text.RichText | ||||
| 121 | font.pointSize: NaN // need to clear font.pointSize explicitly | ||||
| 122 | font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30 | ||||
| 123 | font.bold: true | ||||
| 124 | style: Text.Outline | ||||
| 125 | width: cardImage.width | ||||
| 126 | height: cardImage.height | ||||
| 127 | wrapMode: spelling.indexOf(' ') === -1 ? Text.WrapAnywhere : Text.WordWrap | ||||
| 128 | verticalAlignment: Text.AlignVCenter | ||||
| 129 | horizontalAlignment: Text.AlignHCenter | ||||
| 130 | styleColor: "white" | ||||
| 131 | } | ||||
| 132 | | ||||
| 131 | MouseArea { | 133 | MouseArea { | ||
| 132 | id: mouseArea | 134 | id: mouseArea | ||
| 133 | anchors.fill: parent | 135 | anchors.fill: textItem | ||
| 134 | hoverEnabled: ApplicationInfo.isMobile ? false : true | 136 | hoverEnabled: ApplicationInfo.isMobile ? false : true | ||
| 135 | onClicked: { | 137 | onClicked: { | ||
| 136 | select(); | 138 | select(); | ||
| Context not available. | |||||