scrolling improvements (#20524)

* fix scrolling problem

* continue

* set panel margin in one place&add stretch to prevent title flicker

* adjust padding

* remove stretch

* no border

* fix padding

* better padding

* cleanup

* continue

* add stretch to prevent flicker

* reduce padding

* typo

* revert taht

* no background

* pretty good

* remove

Co-authored-by: deanlee <deanlee3@gmail.com>
Co-authored-by: Comma Device <device@comma.ai>
old-commit-hash: c73781f840

selfdrive/ui/qt/offroad/settings.cc

@@ -20,7 +20,6 @@
 QWidget * toggles_panel() {
   QVBoxLayout *toggles_list = new QVBoxLayout();
 
-  toggles_list->setMargin(50);
   toggles_list->addWidget(new ParamControl("OpenpilotEnabledToggle",
                                             "Enable openpilot",
                                             "Use the openpilot system for adaptive cruise control and lane keep driver assistance. Your attention is required at all times to use this feature. Changing this setting takes effect when the car is powered off.",
@@ -72,7 +71,6 @@ QWidget * toggles_panel() {
 
 DevicePanel::DevicePanel(QWidget* parent) : QWidget(parent) {
   QVBoxLayout *device_layout = new QVBoxLayout;
-  device_layout->setMargin(100);
 
   Params params = Params();
 
@@ -154,7 +152,6 @@ DevicePanel::DevicePanel(QWidget* parent) : QWidget(parent) {
 
 DeveloperPanel::DeveloperPanel(QWidget* parent) : QFrame(parent) {
   QVBoxLayout *main_layout = new QVBoxLayout(this);
-  main_layout->setMargin(100);
   setLayout(main_layout);
   setStyleSheet(R"(QLabel {font-size: 50px;})");
 }
@@ -188,7 +185,6 @@ void DeveloperPanel::showEvent(QShowEvent *event) {
 QWidget * network_panel(QWidget * parent) {
 #ifdef QCOM
   QVBoxLayout *layout = new QVBoxLayout;
-  layout->setMargin(100);
   layout->setSpacing(30);
 
   // wifi + tethering buttons
@@ -220,6 +216,10 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
   QVBoxLayout *sidebar_layout = new QVBoxLayout();
   sidebar_layout->setMargin(0);
   panel_widget = new QStackedWidget();
+  panel_widget->setStyleSheet(R"(
+    border-radius: 30px;
+    background-color: #292929;
+  )");
 
   // close button
   QPushButton *close_btn = new QPushButton("X");
@@ -252,7 +252,7 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
     QPushButton *btn = new QPushButton(name);
     btn->setCheckable(true);
     btn->setStyleSheet(R"(
-      * {
+      QPushButton {
         color: grey;
         border: none;
         background: none;
@@ -269,8 +269,24 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
     nav_btns->addButton(btn);
     sidebar_layout->addWidget(btn, 0, Qt::AlignRight);
 
-    panel_widget->addWidget(panel);
+    panel->setContentsMargins(50, 25, 50, 25);
-    QObject::connect(btn, &QPushButton::released, [=, w = panel]() {
+    QScrollArea *panel_frame = new QScrollArea;
+    panel_frame->setWidget(panel);
+    panel_frame->setWidgetResizable(true);
+    panel_frame->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    panel_frame->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    panel_frame->setStyleSheet("background-color:transparent;");
+
+    QScroller *scroller = QScroller::scroller(panel_frame);
+    auto sp = scroller->scrollerProperties();
+    sp.setScrollMetric(QScrollerProperties::FrameRate, QVariant::fromValue<QScrollerProperties::FrameRates>(QScrollerProperties::Fps30));
+    sp.setScrollMetric(QScrollerProperties::VerticalOvershootPolicy, QVariant::fromValue<QScrollerProperties::OvershootPolicy>(QScrollerProperties::OvershootAlwaysOff));
+    scroller->setScrollerProperties(sp);
+    scroller->grabGesture(panel_frame->viewport(), QScroller::LeftMouseButtonGesture);
+
+    panel_widget->addWidget(panel_frame);
+
+    QObject::connect(btn, &QPushButton::released, [=, w = panel_frame]() {
       panel_widget->setCurrentWidget(w);
     });
   }
@@ -284,25 +300,7 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
   sidebar_widget->setLayout(sidebar_layout);
   sidebar_widget->setFixedWidth(500);
   settings_layout->addWidget(sidebar_widget);
-
+  settings_layout->addWidget(panel_widget);
-  panel_frame = new QScrollArea;
-  panel_frame->setWidget(panel_widget);
-  panel_frame->setWidgetResizable(true);
-  panel_frame->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-  panel_frame->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-  panel_frame->setStyleSheet(R"(
-    border-radius: 30px;
-    background-color: #292929;
-  )");
-  settings_layout->addWidget(panel_frame);
-
-  // setup panel scrolling
-  QScroller *scroller = QScroller::scroller(panel_frame);
-  auto sp = scroller->scrollerProperties();
-  sp.setScrollMetric(QScrollerProperties::FrameRate, QVariant::fromValue<QScrollerProperties::FrameRates>(QScrollerProperties::Fps30));
-  sp.setScrollMetric(QScrollerProperties::VerticalOvershootPolicy, QVariant::fromValue<QScrollerProperties::OvershootPolicy>(QScrollerProperties::OvershootAlwaysOff));
-  scroller->setScrollerProperties(sp);
-  scroller->grabGesture(panel_frame->viewport(), QScroller::LeftMouseButtonGesture);
 
   setLayout(settings_layout);
   setStyleSheet(R"(

selfdrive/ui/qt/offroad/settings.hpp

@@ -47,5 +47,4 @@ private:
   QWidget *sidebar_widget;
   QButtonGroup *nav_btns;
   QStackedWidget *panel_widget;
-  QScrollArea *panel_frame;
 };

selfdrive/ui/qt/widgets/controls.cc

@@ -20,7 +20,7 @@ AbstractControl::AbstractControl(const QString &title, const QString &desc, cons
 
   hlayout = new QHBoxLayout;
   hlayout->setMargin(0);
-  hlayout->setSpacing(50);
+  hlayout->setSpacing(20);
 
   // left icon
   if (!icon.isEmpty()) {
@@ -33,7 +33,7 @@ AbstractControl::AbstractControl(const QString &title, const QString &desc, cons
 
   // title
   title_label = new QPushButton(title);
-  title_label->setStyleSheet("font-size: 50px; font-weight: 400; text-align: left; background: none;");
+  title_label->setStyleSheet("font-size: 50px; font-weight: 400; text-align: left;");
   hlayout->addWidget(title_label);
 
   vlayout->addLayout(hlayout);
@@ -53,4 +53,5 @@ AbstractControl::AbstractControl(const QString &title, const QString &desc, cons
   }
 
   setLayout(vlayout);
+  setStyleSheet("background-color: transparent;");
 }