JLearner Theming

This commit is contained in:
Hannes
2026-03-08 00:14:59 +01:00
parent 546111c46c
commit aea9250961
5 changed files with 118 additions and 49 deletions
+10 -8
View File
@@ -17,7 +17,7 @@ PanelWindow {
Component.onCompleted: { Component.onCompleted: {
semiJLoader.all_invisible() semiJLoader.all_invisible()
languageChooser.visible = true semiJLoader.switchModeChooser()
} }
FocusScope { FocusScope {
@@ -40,9 +40,7 @@ PanelWindow {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 10 radius: 10
// color: Qt.alpha(Colors.surfaceContainerLowest, 0.5) color: Qt.alpha(Colors.surfaceContainerLowest, 0.5)
color: "blue"
border.width: 2 border.width: 2
border.color: Colors.outlineVariant border.color: Colors.outlineVariant
@@ -53,7 +51,7 @@ PanelWindow {
width: parent.width - 20 width: parent.width - 20
height: parent.height - 20 height: parent.height - 20
anchors.centerIn: parent anchors.centerIn: parent
color: "pink" color: "transparent"
Column { Column {
id: learnerWindow id: learnerWindow
@@ -64,13 +62,17 @@ PanelWindow {
id: head id: head
width: parent.width width: parent.width
height: parent.height * 0.1 height: parent.height * 0.1
color: "#FFFFFF" color: Colors.tertiaryContainer
radius: 10
border.width: 2
border.color: Colors.tertiaryContainer_fg
Text { Text {
text: "Language Learner" text: "Language Learner"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: parent.height * 0.8 font.pixelSize: parent.height * 0.8
color: "black" color: Colors.tertiary
} }
} }
@@ -79,7 +81,7 @@ PanelWindow {
width: parent.width width: parent.width
height: parent.height * 0.9 - parent.spacing height: parent.height * 0.9 - parent.spacing
color: "orange" color: "transparent"
function all_invisible() { function all_invisible() {
languageChooser.visible = false languageChooser.visible = false
+53 -15
View File
@@ -39,16 +39,20 @@ Item { // Chooser
Rectangle { Rectangle {
id: learnerResultUpperText id: learnerResultUpperText
color: "#FFFFFF" color: Colors.primaryContainer
width: parent.width width: parent.width
height: parent.height * 0.1 height: parent.height * 0.1
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: mainText id: mainText
text: "Ergebnisse:" text: "Ergebnisse:"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: parent.height * 0.6 font.pixelSize: parent.height * 0.6
color: "black" color: Colors.primary
} }
} }
@@ -76,7 +80,11 @@ Item { // Chooser
Rectangle{ Rectangle{
width: parent.height width: parent.height
height: parent.height height: parent.height
color: "white" color: Colors.primaryContainer
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text{ Text{
text: modelData.kana text: modelData.kana
@@ -84,6 +92,7 @@ Item { // Chooser
height: parent.height height: parent.height
anchors.centerIn: parent anchors.centerIn: parent
anchors.verticalCenterOffset: -parent.height * 0.125 anchors.verticalCenterOffset: -parent.height * 0.125
anchors.horizontalCenterOffset: parent.width * 0.1
font.pixelSize: parent.height * 0.8 font.pixelSize: parent.height * 0.8
color: modelData.correctness ? "green" : "red" color: modelData.correctness ? "green" : "red"
} }
@@ -92,7 +101,11 @@ Item { // Chooser
Rectangle{ Rectangle{
width: parent.height width: parent.height
height: parent.height height: parent.height
color: "white" color: Colors.primaryContainer
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Image { Image {
source: modelData.correctness ? "../../../colors/icons/correct.svg" : "../../../colors/icons/wrong.svg" source: modelData.correctness ? "../../../colors/icons/correct.svg" : "../../../colors/icons/wrong.svg"
@@ -109,7 +122,11 @@ Item { // Chooser
Rectangle{ Rectangle{
width: parent.width - parent.height *2 - parent.spacing*2 width: parent.width - parent.height *2 - parent.spacing*2
height: parent.height height: parent.height
color: "white" color: Colors.primaryContainer
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text{ Text{
text: "[" + modelData.correct + "]" text: "[" + modelData.correct + "]"
@@ -147,10 +164,14 @@ Item { // Chooser
Rectangle { Rectangle {
id: learnerLastResultKanaBG id: learnerLastResultKanaBG
color: "#FFFFFF" color: results[results.length-1].correctness ? "green" : "red"
width: parent.height - parent.spacing width: parent.height - parent.spacing
height: parent.height height: parent.height
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: learnerLastResultKana id: learnerLastResultKana
text: results[results.length-1].kana text: results[results.length-1].kana
@@ -159,39 +180,48 @@ Item { // Chooser
anchors.centerIn: parent anchors.centerIn: parent
anchors.verticalCenterOffset: -parent.height * 0.1 anchors.verticalCenterOffset: -parent.height * 0.1
font.pixelSize: parent.height * 0.8 font.pixelSize: parent.height * 0.8
color: results[results.length-1].correctness ? "green" : "red" color: Colors.primary
} }
} }
Rectangle { Rectangle {
id: learnerLastResultTextBG id: learnerLastResultTextBG
color: "#FFFFFF" color: results[results.length-1].correctness ? "green" : "red"
width: learnerLastResultText.width + 2 * parent.spacing width: learnerLastResultText.width + 2 * parent.spacing
height: parent.height height: parent.height
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: learnerLastResultText id: learnerLastResultText
text: "[" + results[results.length-1].correct + "]" text: "[" + results[results.length-1].correct + "]"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: learnerLastResultKana.font.pixelSize/2 font.pixelSize: learnerLastResultKana.font.pixelSize/2
color: results[results.length-1].correctness ? "green" : "red" color: Colors.primary
} }
} }
} }
Rectangle { Rectangle {
id: learnerResultTextBG id: learnerResultTextBG
color: "#FFFFFF" color: Colors.primaryContainer
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width width: parent.width
height: parent.height * 3 / 10 - parent.spacing * 2 / 3 height: parent.height * 3 / 10 - parent.spacing * 2 / 3
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: learnerResultText id: learnerResultText
text: result*100 + "% Richtig" text: result*100 + "% Richtig"
width: parent.width width: parent.width
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) 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 { Rectangle {
anchors.fill: parent 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 {
text: "Again" text: "Again"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) 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 { Rectangle {
anchors.fill: parent 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 {
text: "Menu" text: "Menu"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) 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
} }
} }
} }
+17 -10
View File
@@ -82,34 +82,41 @@ Item { // Kana_Try
Rectangle { Rectangle {
id: kanaVoicingTextRectangale id: kanaVoicingTextRectangale
color: "#FFFFFF" color: Colors.primaryContainer
width: kanaVoicingText.width + 20 width: kanaVoicingText.width + 20
height: parent.height * 0.1 height: parent.height * 0.1
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: kanaVoicingText id: kanaVoicingText
text: "Im Spiel - Runde: " + kanaVoicing.roundNum text: "Im Spiel - Runde: " + kanaVoicing.roundNum
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: parent.height * 0.6 font.pixelSize: parent.height * 0.6
color: "black" color: Colors.primary
} }
} }
Rectangle { Rectangle {
id: kanaVoicingKanaRectangle id: kanaVoicingKanaRectangle
color: "#000000" color: Colors.primaryContainer
height: (parent.height - kanaVoicingTextRectangale.height)*0.75 height: (parent.height - kanaVoicingTextRectangale.height)*0.75
width: height width: height
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenterOffset: -parent.height * 0.125
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: kanaVoicingKana id: kanaVoicingKana
text: typeof kanaVoicing.currentKana.hira === "undefined" ? "" : kanaVoicing.currentKana.hira text: typeof kanaVoicing.currentKana.hira === "undefined" ? "" : kanaVoicing.currentKana.hira
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) 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 font.pixelSize: height * 0.8
color: "white" color: Colors.secondary_fg
placeholderTextColor: "#888" placeholderTextColor: Colors.secondary
background: Rectangle { background: Rectangle {
id: kanaVoicingAnswerBackground id: kanaVoicingAnswerBackground
radius: 12 radius: 10
color: kanaVoicingAnswer.activeFocus ? Colors.tertiary_fg : Colors.primary_fg color: kanaVoicingAnswer.activeFocus ? Colors.secondaryContainer : Colors.secondaryContainer_fg
border.color: kanaVoicingAnswer.activeFocus ? Colors.tertiary : Colors.primary border.color: kanaVoicingAnswer.activeFocus ? Colors.secondaryContainer_fg : Colors.secondaryContainer
border.width: 1 border.width: 1
} }
+18 -6
View File
@@ -15,17 +15,21 @@ Item { // Chooser
Rectangle { Rectangle {
id: modeChooserUpperText id: modeChooserUpperText
color: "#FFFFFF" color: Colors.primaryContainer
width: mainText.width + 20 width: mainText.width + 20
height: parent.height * 0.1 height: parent.height * 0.1
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: mainText id: mainText
text: "Wähle ein Modus:" text: "Wähle ein Modus:"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: parent.height * 0.6 font.pixelSize: parent.height * 0.6
color: "black" color: Colors.primary
} }
} }
@@ -47,13 +51,17 @@ Item { // Chooser
Rectangle { Rectangle {
anchors.fill: parent 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 {
text: "Kana to Voicing" text: "Kana to Voicing"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) 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 { Rectangle {
anchors.fill: parent 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 {
text: "Voicing to Kana" text: "Voicing to Kana"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8) 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
} }
} }
} }
+20 -10
View File
@@ -127,17 +127,21 @@ Item { // Kana_Try
Rectangle { Rectangle {
id: voicingKanaTextRectangale id: voicingKanaTextRectangale
color: "#FFFFFF" color: Colors.primaryContainer
width: mainText.width + 20 width: mainText.width + 20
height: parent.height * 0.1 height: parent.height * 0.1
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: mainText id: mainText
text: "Runde: " + roundNum + " - [" + targetKana.voice.join("|") + "]:" text: "Runde: " + roundNum + " - [" + targetKana.voice.join("|") + "]:"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: parent.height * 0.6 font.pixelSize: parent.height * 0.6
color: "black" color: Colors.primary
} }
} }
@@ -170,10 +174,10 @@ Item { // Kana_Try
if (modelData.hira === targetKana.hira) { if (modelData.hira === targetKana.hira) {
console.log("Correct") console.log("Correct")
correct = correct + 1 correct = correct + 1
voicingKanaResult.color = "green" voicingKanaResultRectangale.color = "green"
} else { } else {
console.log("Wrong: [" + targetKana.hira + "]") console.log("Wrong: [" + targetKana.hira + "]")
voicingKanaResult.color = "red" voicingKanaResultRectangale.color = "red"
} }
pastCorrectness.push({ pastCorrectness.push({
kana: targetKana.hira, kana: targetKana.hira,
@@ -188,16 +192,18 @@ Item { // Kana_Try
Rectangle { Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "white" color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
border.width: 1
radius: 4 radius: 10
border.width: 2
border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg
Text{ Text{
text: modelData.hira text: modelData.hira
anchors.centerIn: parent anchors.centerIn: parent
anchors.verticalCenterOffset: -parent.height * 0.1 anchors.verticalCenterOffset: -parent.height * 0.1
font.pixelSize: parent.height * 0.8 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 { Rectangle {
id: voicingKanaResultRectangale id: voicingKanaResultRectangale
color: "#FFFFFF" color: Colors.primaryContainer
width: voicingKanaResult.width + 20 width: voicingKanaResult.width + 20
height: parent.height * 0.1 height: parent.height * 0.1
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
radius: 10
border.width: 2
border.color: Colors.primaryContainer_fg
Text { Text {
id: voicingKanaResult id: voicingKanaResult
text: "Wähle das richtige Zeichen" text: "Wähle das richtige Zeichen"
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: parent.height * 0.6 font.pixelSize: parent.height * 0.6
color: "black" color: Colors.primary
} }
} }
} }