Pierre/shipheart-wasm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chantier responsive : responsive.js (police proportionnelle, colonnes selon largeur minimale de bouton), appliqué aux 5 pages (home + 4 détails) - sélecteurs de domaine/famille/variable adaptatifs, hauteurs tactiles garanties, polices du résumé Max/Moyen/Min/Delta et des boutons de période corrigées

Browse Source
This commit is contained in:
Pierre
2026-08-27 11:55:10 +02:00
parent 5ff19d5f0f
commit 2810a53c90
7 changed files with 170 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qml/detail_circuit.qml
+29 -22
View File
@@ -4,6 +4,8 @@ import QtQuick.Layouts 1.12
import qt.koriolan.shipheart 1.0
import "responsive.js" as Responsive
// ============================================================================
// detail_circuit.qml - page de détail d'un circuit (valeur + historique).
// ----------------------------------------------------------------------------
@@ -93,20 +95,24 @@ Shipheart_page {
Text {
text: nomElement
font.pixelSize: 22
font.pixelSize: Responsive.police(22, page_detail_circuit.width)
font.bold: true
color: couleur_gris_pale
}
// Sélecteur de variable (propre aux circuits/batteries) :
Row {
// Sélecteur de variable (propre aux circuits/batteries) - 4 colonnes
// normalement, 2x2 si écran étroit :
GridLayout {
Layout.fillWidth: true
spacing: 8
columns: Responsive.colonnesSelonLargeur(page_detail_circuit.width, variablesLibelles.length)
rowSpacing: 8
columnSpacing: 8
Repeater {
model: variablesLibelles
delegate: Rectangle {
width: (page_detail_circuit.width - 40 - 3 * 8) / 4
height: 36
Layout.fillWidth: true
Layout.preferredHeight: Responsive.HAUTEUR_MIN_TACTILE
radius: 8
color: (index === variableIndex) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton
@@ -114,7 +120,7 @@ Shipheart_page {
anchors.centerIn: parent
text: modelData
color: couleur_blanc_casse
font.pixelSize: 13
font.pixelSize: Responsive.police(13, page_detail_circuit.width)
font.bold: (index === variableIndex)
}
@@ -139,13 +145,13 @@ Shipheart_page {
spacing: 4
Text {
text: valeurActuelle.toFixed(precisionAffichage)
font.pixelSize: 64
font.pixelSize: Responsive.police(64, page_detail_circuit.width)
font.bold: true
color: couleur_blanc_casse
}
Text {
text: uniteAffichage
font.pixelSize: 20
font.pixelSize: Responsive.police(20, page_detail_circuit.width)
color: couleur_gris_pale
Layout.alignment: Qt.AlignTop
}
@@ -156,22 +162,22 @@ Shipheart_page {
ColumnLayout {
spacing: 10
RowLayout {
Text { text: qsTr("Max"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
Text { text: valeurMax.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
Text { text: "[" + formater_date(tempsMax) + "]"; color: couleur_gris_moyen }
Text { text: qsTr("Max"); color: couleur_gris_pale; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 90 }
Text { text: valeurMax.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 100 }
Text { text: "[" + formater_date(tempsMax) + "]"; color: couleur_gris_moyen; font.pixelSize: Responsive.police(13, page_detail_circuit.width) }
}
RowLayout {
Text { text: qsTr("Moyen"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
Text { text: valeurMoyenne.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
Text { text: qsTr("Moyen"); color: couleur_gris_pale; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 90 }
Text { text: valeurMoyenne.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 100 }
}
RowLayout {
Text { text: qsTr("Min"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
Text { text: valeurMin.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
Text { text: "[" + formater_date(tempsMin) + "]"; color: couleur_gris_moyen }
Text { text: qsTr("Min"); color: couleur_gris_pale; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 90 }
Text { text: valeurMin.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 100 }
Text { text: "[" + formater_date(tempsMin) + "]"; color: couleur_gris_moyen; font.pixelSize: Responsive.police(13, page_detail_circuit.width) }
}
RowLayout {
Text { text: qsTr("Delta (Max - Min)"); color: couleur_gris_pale; Layout.preferredWidth: 160 }
Text { text: (valeurMax - valeurMin).toFixed(precisionAffichage + 1) + " " + uniteAffichage; color: couleur_blanc_casse }
Text { text: qsTr("Delta (Max - Min)"); color: couleur_gris_pale; font.pixelSize: Responsive.police(13, page_detail_circuit.width); Layout.preferredWidth: 160 }
Text { text: (valeurMax - valeurMin).toFixed(precisionAffichage + 1) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_circuit.width) }
}
}
}
@@ -293,7 +299,7 @@ Shipheart_page {
model: periodesLibelles
delegate: Rectangle {
Layout.preferredWidth: 140
Layout.preferredHeight: 40
Layout.preferredHeight: Math.max(40, Responsive.HAUTEUR_MIN_TACTILE)
radius: 8
color: (index === periodeIndex) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton
@@ -301,6 +307,7 @@ Shipheart_page {
anchors.centerIn: parent
text: modelData
color: couleur_blanc_casse
font.pixelSize: Responsive.police(14, page_detail_circuit.width)
font.bold: (index === periodeIndex)
}
@@ -319,14 +326,14 @@ Shipheart_page {
// Bouton retour :
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 44
Layout.preferredHeight: Math.max(44, Responsive.HAUTEUR_MIN_TACTILE)
radius: 8
color: shipheart_couleur_fond_bouton
Text {
anchors.centerIn: parent
text: "↩"
font.pixelSize: 20
font.pixelSize: Responsive.police(20, page_detail_circuit.width)
color: couleur_blanc_casse
}