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_reservoir.qml
+19 -16
View File
@@ -4,6 +4,8 @@ import QtQuick.Layouts 1.12
import qt.koriolan.shipheart 1.0
import "responsive.js" as Responsive
// ============================================================================
// detail_reservoir.qml - page de détail d'un réservoir (valeur + historique).
// ----------------------------------------------------------------------------
@@ -90,7 +92,7 @@ Shipheart_page {
Text {
text: nomElement
font.pixelSize: 22
font.pixelSize: Responsive.police(22, page_detail_reservoir.width)
font.bold: true
color: couleur_gris_pale
}
@@ -105,13 +107,13 @@ Shipheart_page {
spacing: 4
Text {
text: valeurActuelle.toFixed(precisionAffichage)
font.pixelSize: 64
font.pixelSize: Responsive.police(64, page_detail_reservoir.width)
font.bold: true
color: couleur_blanc_casse
}
Text {
text: uniteAffichage
font.pixelSize: 20
font.pixelSize: Responsive.police(20, page_detail_reservoir.width)
color: couleur_gris_pale
Layout.alignment: Qt.AlignTop
}
@@ -122,22 +124,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_reservoir.width); Layout.preferredWidth: 90 }
Text { text: valeurMax.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_reservoir.width); Layout.preferredWidth: 100 }
Text { text: "[" + formater_date(tempsMax) + "]"; color: couleur_gris_moyen; font.pixelSize: Responsive.police(13, page_detail_reservoir.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_reservoir.width); Layout.preferredWidth: 90 }
Text { text: valeurMoyenne.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_reservoir.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_reservoir.width); Layout.preferredWidth: 90 }
Text { text: valeurMin.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_reservoir.width); Layout.preferredWidth: 100 }
Text { text: "[" + formater_date(tempsMin) + "]"; color: couleur_gris_moyen; font.pixelSize: Responsive.police(13, page_detail_reservoir.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_reservoir.width); Layout.preferredWidth: 160 }
Text { text: (valeurMax - valeurMin).toFixed(precisionAffichage + 1) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_reservoir.width) }
}
}
}
@@ -262,7 +264,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
@@ -270,6 +272,7 @@ Shipheart_page {
anchors.centerIn: parent
text: modelData
color: couleur_blanc_casse
font.pixelSize: Responsive.police(14, page_detail_reservoir.width)
font.bold: (index === periodeIndex)
}
@@ -288,14 +291,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_reservoir.width)
color: couleur_blanc_casse
}