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
This commit is contained in:
+28
-24
@@ -4,6 +4,8 @@ import QtQuick.Layouts 1.12
|
||||
|
||||
import qt.koriolan.shipheart 1.0
|
||||
|
||||
import "responsive.js" as Responsive
|
||||
|
||||
// ============================================================================
|
||||
// detail_batterie.qml - page de détail d'une batterie (valeur + historique).
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -110,15 +112,16 @@ Shipheart_page {
|
||||
|
||||
Text {
|
||||
text: nomElement
|
||||
font.pixelSize: 22
|
||||
font.pixelSize: Responsive.police(22, page_detail_batterie.width)
|
||||
font.bold: true
|
||||
color: couleur_gris_pale
|
||||
}
|
||||
|
||||
// Sélecteur de variable (8 valeurs simples + énergie) :
|
||||
// Sélecteur de variable (8 valeurs simples + énergie) - 4 colonnes
|
||||
// normalement, 2 si écran étroit :
|
||||
GridLayout {
|
||||
Layout.fillWidth: true
|
||||
columns: 4
|
||||
columns: Responsive.colonnesSelonLargeur(page_detail_batterie.width, variablesLibelles.length)
|
||||
columnSpacing: 8
|
||||
rowSpacing: 8
|
||||
|
||||
@@ -126,7 +129,7 @@ Shipheart_page {
|
||||
model: variablesLibelles
|
||||
delegate: Rectangle {
|
||||
Layout.fillWidth: true
|
||||
height: 34
|
||||
height: Math.max(34, Responsive.HAUTEUR_MIN_TACTILE)
|
||||
radius: 8
|
||||
color: (index === variableIndex) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton
|
||||
|
||||
@@ -134,7 +137,7 @@ Shipheart_page {
|
||||
anchors.centerIn: parent
|
||||
text: modelData
|
||||
color: couleur_blanc_casse
|
||||
font.pixelSize: 12
|
||||
font.pixelSize: Responsive.police(12, page_detail_batterie.width)
|
||||
font.bold: (index === variableIndex)
|
||||
}
|
||||
|
||||
@@ -161,13 +164,13 @@ Shipheart_page {
|
||||
text: modeEnergie
|
||||
? (totalWh >= 1000 ? (totalWh / 1000).toFixed(2) : totalWh.toFixed(1))
|
||||
: valeurActuelle.toFixed(precisionAffichage)
|
||||
font.pixelSize: 64
|
||||
font.pixelSize: Responsive.police(64, page_detail_batterie.width)
|
||||
font.bold: true
|
||||
color: couleur_blanc_casse
|
||||
}
|
||||
Text {
|
||||
text: modeEnergie ? (totalWh >= 1000 ? "kWh" : "Wh") : uniteAffichage
|
||||
font.pixelSize: 20
|
||||
font.pixelSize: Responsive.police(20, page_detail_batterie.width)
|
||||
color: couleur_gris_pale
|
||||
Layout.alignment: Qt.AlignTop
|
||||
}
|
||||
@@ -179,22 +182,22 @@ Shipheart_page {
|
||||
visible: !modeEnergie
|
||||
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_batterie.width); Layout.preferredWidth: 90 }
|
||||
Text { text: valeurMax.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_batterie.width); Layout.preferredWidth: 100 }
|
||||
Text { text: "[" + formater_date(tempsMax) + "]"; color: couleur_gris_moyen; font.pixelSize: Responsive.police(13, page_detail_batterie.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_batterie.width); Layout.preferredWidth: 90 }
|
||||
Text { text: valeurMoyenne.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_batterie.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_batterie.width); Layout.preferredWidth: 90 }
|
||||
Text { text: valeurMin.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_batterie.width); Layout.preferredWidth: 100 }
|
||||
Text { text: "[" + formater_date(tempsMin) + "]"; color: couleur_gris_moyen; font.pixelSize: Responsive.police(13, page_detail_batterie.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_batterie.width); Layout.preferredWidth: 160 }
|
||||
Text { text: (valeurMax - valeurMin).toFixed(precisionAffichage + 1) + " " + uniteAffichage; color: couleur_blanc_casse; font.pixelSize: Responsive.police(13, page_detail_batterie.width) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,7 +205,7 @@ Shipheart_page {
|
||||
visible: modeEnergie
|
||||
text: qsTr("Consommation totale sur la période - détail par circuit ci-dessous")
|
||||
color: couleur_gris_pale
|
||||
font.pixelSize: 13
|
||||
font.pixelSize: Responsive.police(13, page_detail_batterie.width)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -412,20 +415,20 @@ Shipheart_page {
|
||||
Text {
|
||||
text: modelData.nom
|
||||
color: (modelData.consigne > 0) ? couleur_blanc_casse : couleur_gris_moyen
|
||||
font.pixelSize: 13
|
||||
font.pixelSize: Responsive.police(13, page_detail_batterie.width)
|
||||
Layout.preferredWidth: parent.width * 0.4
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
Text {
|
||||
text: modelData.energie_wh.toFixed(2) + " Wh"
|
||||
color: couleur_blanc_casse
|
||||
font.pixelSize: 13
|
||||
font.pixelSize: Responsive.police(13, page_detail_batterie.width)
|
||||
Layout.preferredWidth: parent.width * 0.3
|
||||
}
|
||||
Text {
|
||||
text: modelData.pourcentage.toFixed(1) + " %"
|
||||
color: couleur_gris_pale
|
||||
font.pixelSize: 13
|
||||
font.pixelSize: Responsive.police(13, page_detail_batterie.width)
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
@@ -439,7 +442,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
|
||||
|
||||
@@ -447,6 +450,7 @@ Shipheart_page {
|
||||
anchors.centerIn: parent
|
||||
text: modelData
|
||||
color: couleur_blanc_casse
|
||||
font.pixelSize: Responsive.police(14, page_detail_batterie.width)
|
||||
font.bold: (index === periodeIndex)
|
||||
}
|
||||
|
||||
@@ -465,14 +469,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_batterie.width)
|
||||
color: couleur_blanc_casse
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user