diff --git a/VoltAir/VoltAir.pro b/VoltAir/VoltAir.pro index 1e4b2fa..02c6b6b 100644 --- a/VoltAir/VoltAir.pro +++ b/VoltAir/VoltAir.pro @@ -93,3 +93,6 @@ RESOURCES += \ resources/voltair.qrc cache() + +DISTFILES += \ + qml/ui/VoltairImage.qml diff --git a/VoltAir/assets/images/UI/exit.png b/VoltAir/assets/images/UI/exit.png new file mode 100644 index 0000000..73690c0 Binary files /dev/null and b/VoltAir/assets/images/UI/exit.png differ diff --git a/VoltAir/assets/images/UI/finish.png b/VoltAir/assets/images/UI/finish.png new file mode 100644 index 0000000..5bc5a6c Binary files /dev/null and b/VoltAir/assets/images/UI/finish.png differ diff --git a/VoltAir/assets/images/UI/next.png b/VoltAir/assets/images/UI/next.png new file mode 100644 index 0000000..16e8a40 Binary files /dev/null and b/VoltAir/assets/images/UI/next.png differ diff --git a/VoltAir/assets/images/UI/play.png b/VoltAir/assets/images/UI/play.png new file mode 100644 index 0000000..7344830 Binary files /dev/null and b/VoltAir/assets/images/UI/play.png differ diff --git a/VoltAir/assets/images/UI/powerOnOff.png b/VoltAir/assets/images/UI/powerOnOff.png new file mode 100644 index 0000000..e9825fb Binary files /dev/null and b/VoltAir/assets/images/UI/powerOnOff.png differ diff --git a/VoltAir/assets/images/UI/retry.png b/VoltAir/assets/images/UI/retry.png new file mode 100644 index 0000000..c8ba8ec Binary files /dev/null and b/VoltAir/assets/images/UI/retry.png differ diff --git a/VoltAir/assets/images/UI/setLevel.png b/VoltAir/assets/images/UI/setLevel.png new file mode 100644 index 0000000..b7d0d9e Binary files /dev/null and b/VoltAir/assets/images/UI/setLevel.png differ diff --git a/VoltAir/qml/Ui.qml b/VoltAir/qml/Ui.qml index 88883e0..028faa1 100644 --- a/VoltAir/qml/Ui.qml +++ b/VoltAir/qml/Ui.qml @@ -424,8 +424,12 @@ UiInternal { anchors.centerIn: parent questionText: TR.value("quit.question") - cancelText: TR.value("no") - confirmText: TR.value("yes") + questionIcon: Util.getPathToImage("UI/exit.png") + cancelSelectedIconSource: Util.getPathToImage("UI/play.png") + cancelUnselectedIconSource: Util.getPathToImage("UI/play.png") + + confirmSelectedIconSource: Util.getPathToImage("UI/powerOnOff.png") + confirmUnselectedIconSource: Util.getPathToImage("UI/powerOnOff.png") onHideCompleted: { if (root.state == "PAUSE_MENU") { diff --git a/VoltAir/qml/ui/ConfirmDialog.qml b/VoltAir/qml/ui/ConfirmDialog.qml index 9a73305..94c0dac 100644 --- a/VoltAir/qml/ui/ConfirmDialog.qml +++ b/VoltAir/qml/ui/ConfirmDialog.qml @@ -29,14 +29,25 @@ UiComponent { * @brief Question to ask the user to confirm whether they want to perform the action or not. */ property string questionText + property string questionIcon + /** * @brief type:string Text that indicates to the user that the action should not be performed. */ - property alias cancelText: cancelButton.buttonText + //property alias cancelText: cancelButton.buttonText// + //property string cancelText// + + property alias cancelUnselectedIconSource: cancelButton.unselectedIconSource + property alias cancelSelectedIconSource: cancelButton.selectedIconSource + /** * @brief type:string Text that indicates to the user that the action should be performed. */ - property alias confirmText: confirmButton.buttonText + //property alias confirmText: confirmButton.buttonText + //property string confirmText + + property alias confirmUnselectedIconSource: confirmButton.unselectedIconSource + property alias confirmSelectedIconSource: confirmButton.selectedIconSource /** * @brief Emitted when the cancel button is activated. @@ -91,8 +102,8 @@ UiComponent { id: frame anchors.fill: parent - VoltAirText { - id: question + SimpleFrame { + id: frame1 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top @@ -101,10 +112,36 @@ UiComponent { width: 0.8 * parent.width height: 0.3 * parent.height - textElement.text: questionText + /*VoltairImage { + id: questionImage + + //anchors. .horizontalCenter: parent.left + anchors.top: parent.top + anchors.leftMargin: 0.1 * parent.width + anchors.topMargin: 0 /*.15 * parent.height *-/ + + width: 0.3 * parent.width + height: 0.9 * parent.height + + sourceImage: questionIcon + }*/ + + VoltAirText { + id: question + + anchors.horizontalCenter: parent.horizontalCenter// + 0.1 * parent.width + anchors.top: parent.top + anchors.topMargin: /*0.15 * parent.height*/ 0 + + width: 0.6 * parent.width + height: /*0.3 * */parent.height + + textElement.text: questionText + } + } - MenuButton { + MenuIcon { id: cancelButton anchors.left: parent.left @@ -124,7 +161,7 @@ UiComponent { } } - MenuButton { + MenuIcon { id: confirmButton anchors.right: parent.right @@ -137,10 +174,14 @@ UiComponent { focusLeft: cancelButton + unselectedIconSource: Util.getPathToImage("UI/back.png") + selectedIconSource: Util.getPathToImage("UI/back_h.png") + onReleased: { root.confirmed() } } + } onEscaped: { diff --git a/VoltAir/qml/ui/MenuIcon.qml b/VoltAir/qml/ui/MenuIcon.qml index 6b57bb2..cd28c8b 100644 --- a/VoltAir/qml/ui/MenuIcon.qml +++ b/VoltAir/qml/ui/MenuIcon.qml @@ -24,6 +24,8 @@ import VoltAir 1.0 KeyNavFocusArea { id: root + property string menuOption + /** * @brief Source to the graphic that displays when the MenuIcon is not selected. */ @@ -51,10 +53,11 @@ KeyNavFocusArea { scale: bgIcon.scale - width: 0.5 * parent.width - height: width * sourceSize.height / sourceSize.width + //width: 0.5 * parent.width + //height: width * sourceSize.height / sourceSize.width source: root.activeFocus ? selectedIconSource : unselectedIconSource + fillMode: Image.PreserveAspectFit } MouseArea { diff --git a/VoltAir/qml/ui/PauseMenu.qml b/VoltAir/qml/ui/PauseMenu.qml index 32cc3fb..00fdc00 100644 --- a/VoltAir/qml/ui/PauseMenu.qml +++ b/VoltAir/qml/ui/PauseMenu.qml @@ -119,7 +119,7 @@ UiComponent { // How to handle menu item selection. function onItemSelected(index) { - var menuOption = listView.model.get(index).menuOption + var menuOption = listView.model.get(index).name if (menuOption == "resume") { root.resumeRequested() } else if (menuOption == "main.menu") { @@ -132,26 +132,41 @@ UiComponent { } anchors.fill: parent - listItemWidth: 0.35 * parent.width - listItemHeight: 0.15 * parent.height + listItemWidth: 0.30 * parent.width + listItemHeight: 0.25 * parent.height visibleItemCount: 4 listView.orientation: ListView.Vertical listView.spacing: 0.0 listView.model: ListModel { - ListElement { menuOption: "resume" } - ListElement { menuOption: "main.menu" } - ListElement { menuOption: "change.level" } - ListElement { menuOption: "quit" } + ListElement { + name: "resume" + icon : "UI/play.png" + } + ListElement { + name: "main.menu" + icon : "UI/menu.png" + } + ListElement { + name: "change.level" + icon : "UI/setLevel.png" + } + ListElement { + name: "quit" + icon : "UI/powerOnOff.png" + } } // Template description of a menu item - listView.delegate: MenuButton { - height: pauseMenu.listItemHeight + listView.delegate: /*MenuButton*/ MenuIcon { + height: pauseMenu.listItemHeight * .8 width: pauseMenu.listItemWidth - buttonText: TR.value(menuOption) + menuOption: TR.value(name) + unselectedIconSource: Util.getPathToImage(icon) + selectedIconSource: Util.getPathToImage(icon) + //buttonText: TR.value(menuOption) onPressed: { pauseMenu.listView.currentIndex = index diff --git a/VoltAir/qml/ui/SinglePlayerScoringScreen.qml b/VoltAir/qml/ui/SinglePlayerScoringScreen.qml index d96ba98..e4c7b6b 100644 --- a/VoltAir/qml/ui/SinglePlayerScoringScreen.qml +++ b/VoltAir/qml/ui/SinglePlayerScoringScreen.qml @@ -482,7 +482,7 @@ UiComponent { } } - MenuButton { + /*MenuButton*/ MenuIcon { id: retryButton anchors.left: scoreScreenCard.left @@ -494,7 +494,10 @@ UiComponent { height: 0.3 * scoreScreenCard.height enabled: nextLevelButton.enabled - buttonText: TR.value("retry") + //buttonText: TR.value("retry") + menuOption: TR.value("retry") + selectedIconSource: Util.getPathToImage("UI/retry.png") + unselectedIconSource: Util.getPathToImage("UI/retry.png") focusLeft: muteButton focusUp: muteButton @@ -507,7 +510,7 @@ UiComponent { } } - MenuButton { + /*MenuButton*/ MenuIcon { id: nextLevelButton anchors.right: scoreScreenCard.right @@ -522,7 +525,10 @@ UiComponent { focus: true opacity: 0 - buttonText: TR.value(root.gameCompleted ? "finish" : "next") + //buttonText: TR.value(root.gameCompleted ? "finish" : "next") + menuOption: TR.value(root.gameCompleted ? "finish" : "next") + selectedIconSource: Util.getPathToImage(root.gameCompleted ? "UI/finish.png" : "UI/play.png") + unselectedIconSource: Util.getPathToImage(root.gameCompleted ? "UI/finish.png" : "UI/play.png") focusRight: pgsButton focusUp: pgsButton @@ -533,6 +539,8 @@ UiComponent { } } + + onEscaped: { root.startMenuRequested() } diff --git a/VoltAir/qml/ui/VoltairImage.qml b/VoltAir/qml/ui/VoltairImage.qml new file mode 100644 index 0000000..f179ec9 --- /dev/null +++ b/VoltAir/qml/ui/VoltairImage.qml @@ -0,0 +1,56 @@ +import QtGraphicalEffects 1.0 +import QtQuick 2.0 +import VoltAir 1.0 + +/** + * @ingroup QQuickItem + * @brief Container for Image with default style settings and a drop shadow. +*/ + +Item { + id: root + + property string sourceImage + + /** + * @brief type:Text Reference to the internal @c Text element that is used by this VoltAirText. + */ + //property alias textElement: text + /** + * @brief type:DropShadow Reference to the internal @c DropShadow element that is used by this VoltAirText. + */ + property alias dropShadow: dropShadow + + FontLoader { + id: voltAirFont + source: Util.getPathToFont("AndikaLowerCase-Regular_5dp.ttf") + } + + Image { + id: image + source: sourceImage + + anchors.fill: parent + height: 0.8 * parent.height + + + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + + fillMode: Image.PreserveAspectFit + } + + DropShadow { + id: dropShadow + + anchors.fill: image + source: image + + horizontalOffset: 1 + verticalOffset: 2 + radius: 6.0 + spread: 0.6 + samples: 16 + color: "white" + } +}