ui: new drive stats design (#21765)

* new drive stats design

* match design better

* clean up
old-commit-hash: 28ab1bcaca

selfdrive/ui/qt/home.cc

@@ -88,10 +88,11 @@ void HomeWindow::mousePressEvent(QMouseEvent* e) {
 
 OffroadHome::OffroadHome(QWidget* parent) : QFrame(parent) {
   QVBoxLayout* main_layout = new QVBoxLayout(this);
-  main_layout->setMargin(50);
+  main_layout->setContentsMargins(40, 40, 40, 45);
 
   // top header
   QHBoxLayout* header_layout = new QHBoxLayout();
+  header_layout->setContentsMargins(15, 15, 15, 0);
   header_layout->setSpacing(16);
 
   date = new QLabel();
@@ -120,10 +121,9 @@ OffroadHome::OffroadHome(QWidget* parent) : QFrame(parent) {
   QWidget* statsAndSetupWidget = new QWidget(this);
   QHBoxLayout* statsAndSetup = new QHBoxLayout(statsAndSetupWidget);
   statsAndSetup->setMargin(0);
-  DriveStats* drive = new DriveStats();
+  statsAndSetup->setSpacing(30);
-  drive->setFixedSize(800, 800);
+  statsAndSetup->addWidget(new DriveStats, 11);
-  statsAndSetup->addWidget(drive);
+  statsAndSetup->addWidget(new SetupWidget, 8);
-  statsAndSetup->addWidget(new SetupWidget);
 
   center_layout->addWidget(statsAndSetupWidget);
 

selfdrive/ui/qt/widgets/drive_stats.cc

@@ -16,26 +16,34 @@ static QLabel* newLabel(const QString& text, const QString &type) {
   return label;
 }
 
-DriveStats::DriveStats(QWidget* parent) : QWidget(parent) {
+DriveStats::DriveStats(QWidget* parent) : QFrame(parent) {
   metric_ = Params().getBool("IsMetric");
 
-  QGridLayout* main_layout = new QGridLayout(this);
+  QVBoxLayout* main_layout = new QVBoxLayout(this);
-  main_layout->setMargin(0);
+  main_layout->setContentsMargins(50, 50, 50, 60);
 
   auto add_stats_layouts = [=](const QString &title, StatsLabels& labels) {
-    int row = main_layout->rowCount();
+    QGridLayout* grid_layout = new QGridLayout;
-    main_layout->addWidget(newLabel(title, "title"), row++, 0, 1, 3);
+    grid_layout->setVerticalSpacing(10);
+    grid_layout->setContentsMargins(0, 10, 0, 10);
 
-    main_layout->addWidget(labels.routes = newLabel("0", "number"), row, 0, Qt::AlignLeft);
+    int row = 0;
-    main_layout->addWidget(labels.distance = newLabel("0", "number"), row, 1, Qt::AlignLeft);
+    grid_layout->addWidget(newLabel(title, "title"), row++, 0, 1, 3);
-    main_layout->addWidget(labels.hours = newLabel("0", "number"), row, 2, Qt::AlignLeft);
+    grid_layout->addItem(new QSpacerItem(0, 50), row++, 0, 1, 1);
 
-    main_layout->addWidget(newLabel("DRIVES", "unit"), row + 1, 0, Qt::AlignLeft);
+    grid_layout->addWidget(labels.routes = newLabel("0", "number"), row, 0, Qt::AlignLeft);
-    main_layout->addWidget(labels.distance_unit = newLabel(getDistanceUnit(), "unit"), row + 1, 1, Qt::AlignLeft);
+    grid_layout->addWidget(labels.distance = newLabel("0", "number"), row, 1, Qt::AlignLeft);
-    main_layout->addWidget(newLabel("HOURS", "unit"), row + 1, 2, Qt::AlignLeft);
+    grid_layout->addWidget(labels.hours = newLabel("0", "number"), row, 2, Qt::AlignLeft);
+
+    grid_layout->addWidget(newLabel("Drives", "unit"), row + 1, 0, Qt::AlignLeft);
+    grid_layout->addWidget(labels.distance_unit = newLabel(getDistanceUnit(), "unit"), row + 1, 1, Qt::AlignLeft);
+    grid_layout->addWidget(newLabel("Hours ", "unit"), row + 1, 2, Qt::AlignLeft);
+
+    main_layout->addLayout(grid_layout);
   };
 
   add_stats_layouts("ALL TIME", all_);
+  main_layout->addStretch();
   add_stats_layouts("PAST WEEK", week_);
 
   std::string dongle_id = Params().get("DongleId");
@@ -46,9 +54,14 @@ DriveStats::DriveStats(QWidget* parent) : QWidget(parent) {
   }
 
   setStyleSheet(R"(
-    QLabel[type="title"] { font-size: 48px; font-weight: 500; }
+    DriveStats {
-    QLabel[type="number"] { font-size: 80px; font-weight: 600; }
+      background-color: #333333;
-    QLabel[type="unit"] { font-size: 45px; font-weight: 500; }
+      border-radius: 10px;
+    }
+
+    QLabel[type="title"] { font-size: 51px; font-weight: 500; }
+    QLabel[type="number"] { font-size: 78px; font-weight: 500; }
+    QLabel[type="unit"] { font-size: 51px; font-weight: 300; color: #A0A0A0; }
   )");
 }
 

selfdrive/ui/qt/widgets/drive_stats.h

@@ -3,7 +3,7 @@
 #include <QJsonDocument>
 #include <QLabel>
 
-class DriveStats : public QWidget {
+class DriveStats : public QFrame {
   Q_OBJECT
 
 public:
@@ -12,7 +12,7 @@ public:
 private:
   void showEvent(QShowEvent *event) override;
   void updateStats();
-  inline QString getDistanceUnit() const { return metric_ ? "KM" : "MILES"; }
+  inline QString getDistanceUnit() const { return metric_ ? "KM" : "Miles"; }
 
   bool metric_;
   QJsonDocument stats_;