From aea925096173ce711c610adb5d09b9a4490e660b Mon Sep 17 00:00:00 2001 From: Hannes Date: Sun, 8 Mar 2026 00:14:59 +0100 Subject: [PATCH] JLearner Theming --- modules/japanese/JLearner.qml | 18 +++--- modules/japanese/modules/JLearnerResult.qml | 68 ++++++++++++++++----- modules/japanese/modules/KanaVoicing.qml | 27 +++++--- modules/japanese/modules/ModeChooser.qml | 24 ++++++-- modules/japanese/modules/VoicingKana.qml | 30 ++++++--- 5 files changed, 118 insertions(+), 49 deletions(-) diff --git a/modules/japanese/JLearner.qml b/modules/japanese/JLearner.qml index c397e42..1f207cd 100644 --- a/modules/japanese/JLearner.qml +++ b/modules/japanese/JLearner.qml @@ -17,7 +17,7 @@ PanelWindow { Component.onCompleted: { semiJLoader.all_invisible() - languageChooser.visible = true + semiJLoader.switchModeChooser() } FocusScope { @@ -40,9 +40,7 @@ PanelWindow { Rectangle { anchors.fill: parent radius: 10 - // color: Qt.alpha(Colors.surfaceContainerLowest, 0.5) - - color: "blue" + color: Qt.alpha(Colors.surfaceContainerLowest, 0.5) border.width: 2 border.color: Colors.outlineVariant @@ -53,7 +51,7 @@ PanelWindow { width: parent.width - 20 height: parent.height - 20 anchors.centerIn: parent - color: "pink" + color: "transparent" Column { id: learnerWindow @@ -64,13 +62,17 @@ PanelWindow { id: head width: parent.width height: parent.height * 0.1 - color: "#FFFFFF" + color: Colors.tertiaryContainer + + radius: 10 + border.width: 2 + border.color: Colors.tertiaryContainer_fg Text { text: "Language Learner" anchors.centerIn: parent font.pixelSize: parent.height * 0.8 - color: "black" + color: Colors.tertiary } } @@ -79,7 +81,7 @@ PanelWindow { width: parent.width height: parent.height * 0.9 - parent.spacing - color: "orange" + color: "transparent" function all_invisible() { languageChooser.visible = false diff --git a/modules/japanese/modules/JLearnerResult.qml b/modules/japanese/modules/JLearnerResult.qml index ecd729e..4f24b6d 100644 --- a/modules/japanese/modules/JLearnerResult.qml +++ b/modules/japanese/modules/JLearnerResult.qml @@ -39,16 +39,20 @@ Item { // Chooser Rectangle { id: learnerResultUpperText - color: "#FFFFFF" + color: Colors.primaryContainer width: parent.width height: parent.height * 0.1 + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: mainText text: "Ergebnisse:" anchors.centerIn: parent font.pixelSize: parent.height * 0.6 - color: "black" + color: Colors.primary } } @@ -76,7 +80,11 @@ Item { // Chooser Rectangle{ width: parent.height height: parent.height - color: "white" + color: Colors.primaryContainer + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text{ text: modelData.kana @@ -84,6 +92,7 @@ Item { // Chooser height: parent.height anchors.centerIn: parent anchors.verticalCenterOffset: -parent.height * 0.125 + anchors.horizontalCenterOffset: parent.width * 0.1 font.pixelSize: parent.height * 0.8 color: modelData.correctness ? "green" : "red" } @@ -92,7 +101,11 @@ Item { // Chooser Rectangle{ width: parent.height height: parent.height - color: "white" + color: Colors.primaryContainer + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Image { source: modelData.correctness ? "../../../colors/icons/correct.svg" : "../../../colors/icons/wrong.svg" @@ -109,7 +122,11 @@ Item { // Chooser Rectangle{ width: parent.width - parent.height *2 - parent.spacing*2 height: parent.height - color: "white" + color: Colors.primaryContainer + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text{ text: "[" + modelData.correct + "]" @@ -147,9 +164,13 @@ Item { // Chooser Rectangle { id: learnerLastResultKanaBG - color: "#FFFFFF" + color: results[results.length-1].correctness ? "green" : "red" width: parent.height - parent.spacing height: parent.height + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: learnerLastResultKana @@ -159,31 +180,40 @@ Item { // Chooser anchors.centerIn: parent anchors.verticalCenterOffset: -parent.height * 0.1 font.pixelSize: parent.height * 0.8 - color: results[results.length-1].correctness ? "green" : "red" + color: Colors.primary } } Rectangle { id: learnerLastResultTextBG - color: "#FFFFFF" + color: results[results.length-1].correctness ? "green" : "red" width: learnerLastResultText.width + 2 * parent.spacing height: parent.height + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: learnerLastResultText text: "[" + results[results.length-1].correct + "]" anchors.centerIn: parent font.pixelSize: learnerLastResultKana.font.pixelSize/2 - color: results[results.length-1].correctness ? "green" : "red" + color: Colors.primary } } } Rectangle { id: learnerResultTextBG - color: "#FFFFFF" + color: Colors.primaryContainer + anchors.horizontalCenter: parent.horizontalCenter width: parent.width height: parent.height * 3 / 10 - parent.spacing * 2 / 3 + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: learnerResultText @@ -191,7 +221,7 @@ Item { // Chooser width: parent.width horizontalAlignment: Text.AlignHCenter font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) - color: "black" + color: Colors.primary } } @@ -213,13 +243,17 @@ Item { // Chooser Rectangle { anchors.fill: parent - color: "#FFFFFF" + color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer + + radius: 10 + border.width: 2 + border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg Text { text: "Again" anchors.centerIn: parent font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) - color: "black" + color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary } } } @@ -237,13 +271,17 @@ Item { // Chooser Rectangle { anchors.fill: parent - color: "#000000" + color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer + + radius: 10 + border.width: 2 + border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg Text { text: "Menu" anchors.centerIn: parent font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) - color: "white" + color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary } } } diff --git a/modules/japanese/modules/KanaVoicing.qml b/modules/japanese/modules/KanaVoicing.qml index b64c5b6..a223344 100644 --- a/modules/japanese/modules/KanaVoicing.qml +++ b/modules/japanese/modules/KanaVoicing.qml @@ -82,34 +82,41 @@ Item { // Kana_Try Rectangle { id: kanaVoicingTextRectangale - color: "#FFFFFF" + color: Colors.primaryContainer width: kanaVoicingText.width + 20 height: parent.height * 0.1 anchors.horizontalCenter: parent.horizontalCenter + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: kanaVoicingText text: "Im Spiel - Runde: " + kanaVoicing.roundNum anchors.centerIn: parent font.pixelSize: parent.height * 0.6 - color: "black" + color: Colors.primary } } Rectangle { id: kanaVoicingKanaRectangle - color: "#000000" + color: Colors.primaryContainer height: (parent.height - kanaVoicingTextRectangale.height)*0.75 width: height anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenterOffset: -parent.height * 0.125 + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: kanaVoicingKana text: typeof kanaVoicing.currentKana.hira === "undefined" ? "" : kanaVoicing.currentKana.hira anchors.centerIn: parent font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) - color: "white" + color: Colors.primary } } @@ -125,14 +132,14 @@ Item { // Kana_Try font.pixelSize: height * 0.8 - color: "white" - placeholderTextColor: "#888" + color: Colors.secondary_fg + placeholderTextColor: Colors.secondary background: Rectangle { id: kanaVoicingAnswerBackground - radius: 12 - color: kanaVoicingAnswer.activeFocus ? Colors.tertiary_fg : Colors.primary_fg - border.color: kanaVoicingAnswer.activeFocus ? Colors.tertiary : Colors.primary + radius: 10 + color: kanaVoicingAnswer.activeFocus ? Colors.secondaryContainer : Colors.secondaryContainer_fg + border.color: kanaVoicingAnswer.activeFocus ? Colors.secondaryContainer_fg : Colors.secondaryContainer border.width: 1 } diff --git a/modules/japanese/modules/ModeChooser.qml b/modules/japanese/modules/ModeChooser.qml index d9c31f3..3581b57 100644 --- a/modules/japanese/modules/ModeChooser.qml +++ b/modules/japanese/modules/ModeChooser.qml @@ -15,17 +15,21 @@ Item { // Chooser Rectangle { id: modeChooserUpperText - color: "#FFFFFF" + color: Colors.primaryContainer width: mainText.width + 20 height: parent.height * 0.1 anchors.horizontalCenter: parent.horizontalCenter + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: mainText text: "Wähle ein Modus:" anchors.centerIn: parent font.pixelSize: parent.height * 0.6 - color: "black" + color: Colors.primary } } @@ -47,13 +51,17 @@ Item { // Chooser Rectangle { anchors.fill: parent - color: "#FFFFFF" + color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer + + radius: 10 + border.width: 2 + border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg Text { text: "Kana to Voicing" anchors.centerIn: parent font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) - color: "black" + color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary } } } @@ -71,13 +79,17 @@ Item { // Chooser Rectangle { anchors.fill: parent - color: "#000000" + color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer + + radius: 10 + border.width: 2 + border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg Text { text: "Voicing to Kana" anchors.centerIn: parent font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) - color: "white" + color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary } } } diff --git a/modules/japanese/modules/VoicingKana.qml b/modules/japanese/modules/VoicingKana.qml index 9f4dc68..bbdb742 100644 --- a/modules/japanese/modules/VoicingKana.qml +++ b/modules/japanese/modules/VoicingKana.qml @@ -127,17 +127,21 @@ Item { // Kana_Try Rectangle { id: voicingKanaTextRectangale - color: "#FFFFFF" + color: Colors.primaryContainer width: mainText.width + 20 height: parent.height * 0.1 anchors.horizontalCenter: parent.horizontalCenter + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: mainText text: "Runde: " + roundNum + " - [" + targetKana.voice.join("|") + "]:" anchors.centerIn: parent font.pixelSize: parent.height * 0.6 - color: "black" + color: Colors.primary } } @@ -170,10 +174,10 @@ Item { // Kana_Try if (modelData.hira === targetKana.hira) { console.log("Correct") correct = correct + 1 - voicingKanaResult.color = "green" + voicingKanaResultRectangale.color = "green" } else { console.log("Wrong: [" + targetKana.hira + "]") - voicingKanaResult.color = "red" + voicingKanaResultRectangale.color = "red" } pastCorrectness.push({ kana: targetKana.hira, @@ -188,16 +192,18 @@ Item { // Kana_Try Rectangle { width: parent.width height: parent.height - color: "white" - border.width: 1 - radius: 4 + color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer + + radius: 10 + border.width: 2 + border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg Text{ text: modelData.hira anchors.centerIn: parent anchors.verticalCenterOffset: -parent.height * 0.1 font.pixelSize: parent.height * 0.8 - color: "black" + color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary } } } @@ -207,17 +213,21 @@ Item { // Kana_Try Rectangle { id: voicingKanaResultRectangale - color: "#FFFFFF" + color: Colors.primaryContainer width: voicingKanaResult.width + 20 height: parent.height * 0.1 anchors.horizontalCenter: parent.horizontalCenter + + radius: 10 + border.width: 2 + border.color: Colors.primaryContainer_fg Text { id: voicingKanaResult text: "Wähle das richtige Zeichen" anchors.centerIn: parent font.pixelSize: parent.height * 0.6 - color: "black" + color: Colors.primary } } }