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/home.qml
+27 -16
View File
@@ -4,6 +4,8 @@ import QtQuick.Layouts 1.12
import qt.koriolan.shipheart 1.0
import "responsive.js" as Responsive
// ============================================================================
// home.qml (client shipheart_wasm) - 4 domaines (circuit/batterie/capteur/
// reservoir), via l'API réelle (DataProvider). Écriture (consigne) sur
@@ -210,7 +212,7 @@ Shipheart_page {
Text {
anchors.centerIn: parent
color: couleur_orange
font.pixelSize: 13
font.pixelSize: Responsive.police(13, page_accueil.width)
font.bold: true
text: dataProvider.aDejaEteConnecte
? qsTr("⚠ Bateau non connecté depuis le %1").arg(
@@ -220,17 +222,19 @@ Shipheart_page {
}
//-----------------------------------------------------------
// Sélecteur de domaine :
Row {
// Sélecteur de domaine - 4 colonnes normalement, 2x2 si écran étroit
// (téléphone en portrait, typiquement) :
GridLayout {
Layout.fillWidth: true
height: shipheart_hauteur_bandeau_haut
spacing: espace_onglets
columns: Responsive.colonnesSelonLargeur(page_accueil.width, domaines_libelles.length)
rowSpacing: espace_onglets
columnSpacing: espace_onglets
Repeater {
model: domaines_libelles
delegate: Rectangle {
width: (page_accueil.width - 3 * espace_onglets) / 4
height: shipheart_hauteur_bandeau_haut
Layout.fillWidth: true
Layout.preferredHeight: Math.max(shipheart_hauteur_bandeau_haut, Responsive.HAUTEUR_MIN_TACTILE)
radius: rayon_onglets
color: (index === domaine_actif_index) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton
@@ -238,7 +242,7 @@ Shipheart_page {
anchors.centerIn: parent
text: modelData
color: couleur_blanc_casse
font.pixelSize: 13
font.pixelSize: Responsive.police(13, page_accueil.width)
font.bold: (index === domaine_actif_index)
}
@@ -253,18 +257,25 @@ Shipheart_page {
}
//-----------------------------------------------------------
// Onglets (familles du domaine actif) :
// Onglets (familles du domaine actif) - nombre de colonnes limité
// selon la largeur d'écran (2 si étroit, 5 sinon), hauteur du
// conteneur calculée pour s'adapter au nombre de lignes nécessaires
// (peut donc passer sur 2+ lignes sur un écran étroit) :
Rectangle {
id: zone_onglets_familles
readonly property int colonnesOnglets: Responsive.colonnesSelonLargeur(page_accueil.width, modele_onglets_actuel.count)
readonly property int lignesOnglets: Math.ceil(modele_onglets_actuel.count / colonnesOnglets)
Layout.fillWidth: true
height: shipheart_hauteur_bandeau_haut
Layout.preferredHeight: lignesOnglets * Math.max(shipheart_hauteur_bandeau_haut, Responsive.HAUTEUR_MIN_TACTILE)
color: "transparent"
visible: modele_onglets_actuel.count > 1
GridView {
id: grille_onglets
anchors.fill: parent
cellWidth: width / Math.max(1, Math.min(modele_onglets_actuel.count, 5))
cellHeight: shipheart_hauteur_bandeau_haut
cellWidth: width / zone_onglets_familles.colonnesOnglets
cellHeight: Math.max(shipheart_hauteur_bandeau_haut, Responsive.HAUTEUR_MIN_TACTILE)
model: modele_onglets_actuel
clip: true
@@ -280,7 +291,7 @@ Shipheart_page {
text: model.libelle
anchors.centerIn: parent
color: couleur_blanc_casse
font.pixelSize: 14
font.pixelSize: Responsive.police(14, page_accueil.width)
font.bold: model.actif
}
@@ -333,7 +344,7 @@ Shipheart_page {
Text {
text: model.nom
color: couleur_blanc_casse
font.pixelSize: 16
font.pixelSize: Responsive.police(16, page_accueil.width)
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
@@ -362,7 +373,7 @@ Shipheart_page {
}
}
color: couleur_blanc_casse
font.pixelSize: 12
font.pixelSize: Responsive.police(12, page_accueil.width)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
@@ -378,7 +389,7 @@ Shipheart_page {
text: (model.consigne > 0) ? qsTr("On") : qsTr("Off")
color: (model.consigne > 0) ? couleur_green_yellow : couleur_blanc_casse
font.pixelSize: 18
font.pixelSize: Responsive.police(18, page_accueil.width)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}