qt settings style (#19588)

* dark mode

* inter

* frame

* this looks pretty good

* revert that

* fix bg hack

* don't override style sheet

selfdrive/ui/qt/offroad/settings.cc

@@ -20,50 +20,37 @@
 
 
 ParamsToggle::ParamsToggle(QString param, QString title, QString description, QString icon_path, QWidget *parent): QFrame(parent) , param(param) {
-  QHBoxLayout *hlayout = new QHBoxLayout;
+  QHBoxLayout *layout = new QHBoxLayout;
+  layout->setSpacing(50);
 
   // Parameter image
-  hlayout->addSpacing(25);
   if (icon_path.length()) {
     QPixmap pix(icon_path);
     QLabel *icon = new QLabel();
-    icon->setPixmap(pix.scaledToWidth(100, Qt::SmoothTransformation));
+    icon->setPixmap(pix.scaledToWidth(80, Qt::SmoothTransformation));
     icon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
-    hlayout->addWidget(icon);
+    layout->addWidget(icon);
   } else {
-    hlayout->addSpacing(100);
+    layout->addSpacing(80);
   }
-  hlayout->addSpacing(25);
 
   // Name of the parameter
   QLabel *label = new QLabel(title);
-  label->setWordWrap(true);
+  label->setStyleSheet(R"(font-size: 50px;)");
+  layout->addWidget(label);
 
   // toggle switch
-  Toggle* toggle_switch = new Toggle(this);
-  toggle_switch->setFixedSize(150, 100);
+  Toggle *toggle = new Toggle(this);
+  toggle->setFixedSize(150, 100);
+  layout->addWidget(toggle);
+  QObject::connect(toggle, SIGNAL(stateChanged(int)), this, SLOT(checkboxClicked(int)));
 
-  // TODO: show descriptions on tap
-  hlayout->addWidget(label);
-  hlayout->addSpacing(50);
-  hlayout->addWidget(toggle_switch);
-  hlayout->addSpacing(20);
-
-  setLayout(hlayout);
+  // set initial state from param
   if (Params().read_db_bool(param.toStdString().c_str())) {
-    toggle_switch->togglePosition();
+    toggle->togglePosition();
   }
 
-  setStyleSheet(R"(
-    QLabel {
-      font-size: 50px;
-    }
-    * {
-      background-color: #114265;
-    }
-  )");
-
-  QObject::connect(toggle_switch, SIGNAL(stateChanged(int)), this, SLOT(checkboxClicked(int)));
+  setLayout(layout);
 }
 
 void ParamsToggle::checkboxClicked(int state) {
@@ -72,8 +59,8 @@ void ParamsToggle::checkboxClicked(int state) {
 }
 
 QWidget * toggles_panel() {
-
   QVBoxLayout *toggles_list = new QVBoxLayout();
+  toggles_list->setMargin(50);
   toggles_list->setSpacing(25);
 
   toggles_list->addWidget(new ParamsToggle("OpenpilotEnabledToggle",
@@ -120,6 +107,7 @@ QWidget * toggles_panel() {
 QWidget * device_panel() {
 
   QVBoxLayout *device_layout = new QVBoxLayout;
+  device_layout->setMargin(100);
   device_layout->setSpacing(50);
 
   Params params = Params();
@@ -164,7 +152,10 @@ QWidget * device_panel() {
   widget->setLayout(device_layout);
   widget->setStyleSheet(R"(
     QPushButton {
-      padding: 60px;
+      padding: 0;
+      height: 120px;
+      border-radius: 15px;
+      background-color: #393939;
     }
   )");
   return widget;
@@ -172,6 +163,7 @@ QWidget * device_panel() {
 
 QWidget * developer_panel() {
   QVBoxLayout *main_layout = new QVBoxLayout;
+  main_layout->setMargin(100);
 
   // TODO: enable SSH toggle and github keys
 
@@ -217,67 +209,84 @@ void SettingsWindow::setActivePanel() {
   panel_layout->setCurrentWidget(panels[btn->text()]);
 }
 
-SettingsWindow::SettingsWindow(QWidget *parent) : QWidget(parent) {
-  // two main layouts
+SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
+  // setup two main layouts
   QVBoxLayout *sidebar_layout = new QVBoxLayout();
+  sidebar_layout->setMargin(0);
   panel_layout = new QStackedLayout();
 
   // close button
-  QPushButton *close_button = new QPushButton("X");
-  close_button->setStyleSheet(R"(
-    QPushButton {
-      padding: 50px;
-      font-weight: bold;
-      font-size: 110px;
-    }
+  QPushButton *close_btn = new QPushButton("X");
+  close_btn->setStyleSheet(R"(
+    font-size: 65px;
+    font-weight: bold;
+    border 1px grey solid;
+    border-radius: 75px;
+    background-color: #393939;
   )");
-  sidebar_layout->addWidget(close_button);
-  QObject::connect(close_button, SIGNAL(released()), this, SIGNAL(closeSettings()));
+  close_btn->setFixedSize(150, 150);
+  sidebar_layout->addSpacing(45);
+  sidebar_layout->addWidget(close_btn, 0, Qt::AlignHCenter);
+  QObject::connect(close_btn, SIGNAL(released()), this, SIGNAL(closeSettings()));
 
   // setup panels
   panels = {
-    {"developer", developer_panel()},
-    {"device", device_panel()},
-    {"network", network_panel(this)},
-    {"toggles", toggles_panel()},
+    {"Developer", developer_panel()},
+    {"Device", device_panel()},
+    {"Network", network_panel(this)},
+    {"Toggles", toggles_panel()},
   };
 
+  sidebar_layout->addSpacing(45);
   nav_btns = new QButtonGroup();
   for (auto &panel : panels) {
     QPushButton *btn = new QPushButton(panel.first);
     btn->setCheckable(true);
     btn->setStyleSheet(R"(
       QPushButton {
-        padding-top: 35px;
-        padding-bottom: 35px;
+        color: grey;
         border: none;
         background: none;
-        font-size: 55px;
+        font-size: 65px;
+        font-weight: bold;
+        padding-top: 35px;
+        padding-bottom: 35px;
       }
       QPushButton:checked {
-        font-size: 50px;
-        font-weight: bold;
+        color: white;
       }
     )");
 
     nav_btns->addButton(btn);
-    sidebar_layout->addWidget(btn, 0, Qt::AlignRight);
+    sidebar_layout->addWidget(btn, 0, Qt::AlignRight | Qt::AlignTop);
     panel_layout->addWidget(panel.second);
     QObject::connect(btn, SIGNAL(released()), this, SLOT(setActivePanel()));
   }
   qobject_cast<QPushButton *>(nav_btns->buttons()[0])->setChecked(true);
+  sidebar_layout->addStretch();
 
+  // main settings layout, sidebar + main panel
   QHBoxLayout *settings_layout = new QHBoxLayout();
-  settings_layout->setMargin(0);
-  settings_layout->addSpacing(45);
+  settings_layout->setContentsMargins(150, 50, 150, 50);
 
   sidebar_widget = new QWidget;
   sidebar_widget->setLayout(sidebar_layout);
   settings_layout->addWidget(sidebar_widget);
 
-  settings_layout->addSpacing(45);
-  settings_layout->addLayout(panel_layout);
-  settings_layout->addSpacing(45);
+  settings_layout->addSpacing(25);
+
+  QFrame *panel_frame = new QFrame;
+  panel_frame->setLayout(panel_layout);
+  panel_frame->setStyleSheet(R"(
+    QFrame {
+      border-radius: 30px;
+      background-color: #292929;
+    }
+    * {
+      background-color: none;
+    }
+  )");
+  settings_layout->addWidget(panel_frame, 1, Qt::AlignRight);
 
   setLayout(settings_layout);
   setStyleSheet(R"(
@@ -285,6 +294,9 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QWidget(parent) {
       color: white;
       font-size: 50px;
     }
+    SettingsWindow {
+      background-color: black;
+    }
   )");
 }
 

selfdrive/ui/qt/offroad/settings.hpp

@@ -28,7 +28,7 @@ public slots:
 
 // *** settings window ***
 
-class SettingsWindow : public QWidget {
+class SettingsWindow : public QFrame {
   Q_OBJECT
 
 public:

selfdrive/ui/qt/qt_window.cc

@@ -1,4 +1,6 @@
 #include <string>
+
+#include <QFontDatabase>
 #include <QApplication>
 
 #ifdef QCOM2
@@ -14,6 +16,9 @@ void setMainWindow(QWidget *w) {
   w->setFixedSize(vwp_w*scale, vwp_h*scale);
   w->show();
 
+  QFontDatabase::addApplicationFont("../assets/fonts/inter.ttf");
+  QApplication::setFont(QFont("Inter"));
+
 #ifdef QCOM2
   QPlatformNativeInterface *native = QGuiApplication::platformNativeInterface();
   wl_surface *s = reinterpret_cast<wl_surface*>(native->nativeResourceForWindow("surface", w->windowHandle()));

selfdrive/ui/qt/widgets/toggle.cc

@@ -21,9 +21,10 @@ void Toggle::paintEvent(QPaintEvent *e) {
   // Draw toggle background left
   p.setBrush(QColor(0x33ab4c));
   p.drawRoundedRect(QRect(0, _y_rect, _x_circle + _radius, _height_rect), _height_rect/2, _height_rect/2);
+
   // Draw toggle background right
-  p.setBrush(QColor(0x0a1a26));
-  p.drawRoundedRect(QRect(_x_circle - _radius, _y_rect, width() -(_x_circle - _radius), _height_rect), _height_rect/2, _height_rect/2);
+  p.setBrush(QColor(0x393939));
+  p.drawRoundedRect(QRect(_x_circle - _radius, _y_rect, width() - (_x_circle - _radius), _height_rect), _height_rect/2, _height_rect/2);
 
   // Draw toggle circle
   p.setBrush(QColor(0xfafafa));

selfdrive/ui/qt/window.cc

@@ -24,8 +24,7 @@ MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {
 
   setStyleSheet(R"(
     * {
-      color: white;
-      background-color: #072339;
+      font-family: Inter;
     }
   )");
 }