keyboard improvements (#21502)

* design

* period

* one more

* blue

* cleanup

selfdrive/ui/qt/offroad/settings.cc

@@ -172,7 +172,7 @@ DevicePanel::DevicePanel(QWidget* parent) : QWidget(parent) {
   power_layout->setSpacing(30);
 
   QPushButton *reboot_btn = new QPushButton("Reboot");
-  reboot_btn->setStyleSheet("height: 120px;border-radius: 15px;background-color: #393939;");
+  reboot_btn->setStyleSheet("height: 120px;border-radius: 15px; background-color: #393939;");
   power_layout->addWidget(reboot_btn);
   QObject::connect(reboot_btn, &QPushButton::released, [=]() {
     if (ConfirmationDialog::confirm("Are you sure you want to reboot?", this)) {
@@ -181,7 +181,7 @@ DevicePanel::DevicePanel(QWidget* parent) : QWidget(parent) {
   });
 
   QPushButton *poweroff_btn = new QPushButton("Power Off");
-  poweroff_btn->setStyleSheet("height: 120px;border-radius: 15px;background-color: #E22C2C;");
+  poweroff_btn->setStyleSheet("height: 120px;border-radius: 15px; background-color: #E22C2C;");
   power_layout->addWidget(poweroff_btn);
   QObject::connect(poweroff_btn, &QPushButton::released, [=]() {
     if (ConfirmationDialog::confirm("Are you sure you want to power off?", this)) {

selfdrive/ui/qt/widgets/input.cc

@@ -62,7 +62,9 @@ InputDialog::InputDialog(const QString &prompt_text, QWidget *parent) : QDialogB
 
   setStyleSheet(R"(
     * {
+      outline: none;
       color: white;
+      font-family: Inter;
       background-color: black;
     }
   )");
@@ -93,25 +95,16 @@ void InputDialog::show() {
 void InputDialog::handleInput(const QString &s) {
   if (!QString::compare(s,"⌫")) {
     line->backspace();
-  }
-
-  if (!QString::compare(s,"⏎")) {
+  } else if (!QString::compare(s,"⏎")) {
     if (line->text().length() >= minLength) {
       done(QDialog::Accepted);
       emitText(line->text());
     } else {
       setMessage("Need at least "+QString::number(minLength)+" characters!", false);
     }
+  } else {
+    line->insert(s.left(1));
   }
-
-  QVector<QString> control_buttons {"⇧", "↑", "ABC", "⏎", "#+=", "⌫", "123"};
-  for(QString c : control_buttons) {
-    if (!QString::compare(s, c)) {
-      return;
-    }
-  }
-
-  line->insert(s.left(1));
 }
 
 void InputDialog::setMessage(const QString &message, bool clearInputField) {

selfdrive/ui/qt/widgets/keyboard.cc

@@ -1,7 +1,6 @@
 #include "selfdrive/ui/qt/widgets/keyboard.h"
 
 #include <QButtonGroup>
-#include <QDebug>
 #include <QHBoxLayout>
 #include <QPushButton>
 #include <QVBoxLayout>
@@ -9,17 +8,22 @@
 const int DEFAULT_STRETCH = 1;
 const int SPACEBAR_STRETCH = 3;
 
+const QString BACKSPACE_KEY = "⌫";
+const QString ENTER_KEY = "⏎";
+
+const QStringList CONTROL_BUTTONS = {"↑", "↓", "ABC", "#+=", "123"};
+
 KeyboardLayout::KeyboardLayout(QWidget* parent, const std::vector<QVector<QString>>& layout) : QWidget(parent) {
   QVBoxLayout* main_layout = new QVBoxLayout(this);
   main_layout->setMargin(0);
-  main_layout->setSpacing(35);
+  main_layout->setSpacing(20);
 
   QButtonGroup* btn_group = new QButtonGroup(this);
   QObject::connect(btn_group, SIGNAL(buttonClicked(QAbstractButton*)), parent, SLOT(handleButton(QAbstractButton*)));
 
   for (const auto &s : layout) {
     QHBoxLayout *hlayout = new QHBoxLayout;
-    hlayout->setSpacing(25);
+    hlayout->setSpacing(15);
 
     if (main_layout->count() == 1) {
       hlayout->addSpacing(90);
@@ -27,8 +31,10 @@ KeyboardLayout::KeyboardLayout(QWidget* parent, const std::vector<QVector<QStrin
 
     for (const QString &p : s) {
       QPushButton* btn = new QPushButton(p);
-      if (p == QString("⌫")) {
+      if (p == BACKSPACE_KEY) {
         btn->setAutoRepeat(true);
+      } else if (p == ENTER_KEY) {
+        btn->setStyleSheet("background-color: #465BEA;");
       }
       btn->setFixedHeight(135);
       btn_group->addButton(btn);
@@ -43,19 +49,16 @@ KeyboardLayout::KeyboardLayout(QWidget* parent, const std::vector<QVector<QStrin
   }
 
   setStyleSheet(R"(
-    * {
-      outline: none;
-    }
     QPushButton {
-      font-size: 65px;
+      font-size: 75px;
       margin: 0px;
       padding: 0px;
-      border-radius: 30px;
+      border-radius: 10px;
       color: #dddddd;
       background-color: #444444;
     }
     QPushButton:pressed {
-      background-color: #000000;
+      background-color: #333333;
     }
   )");
 }
@@ -68,8 +71,8 @@ Keyboard::Keyboard(QWidget *parent) : QFrame(parent) {
   std::vector<QVector<QString>> lowercase = {
     {"q","w","e","r","t","y","u","i","o","p"},
     {"a","s","d","f","g","h","j","k","l"},
-    {"⇧","z","x","c","v","b","n","m","⌫"},
-    {"123","  ","⏎"},
+    {"↑","z","x","c","v","b","n","m",BACKSPACE_KEY},
+    {"123","  ",".",ENTER_KEY},
   };
   main_layout->addWidget(new KeyboardLayout(this, lowercase));
 
@@ -77,8 +80,8 @@ Keyboard::Keyboard(QWidget *parent) : QFrame(parent) {
   std::vector<QVector<QString>> uppercase = {
     {"Q","W","E","R","T","Y","U","I","O","P"},
     {"A","S","D","F","G","H","J","K","L"},
-    {"↑","Z","X","C","V","B","N","M","⌫"},
-    {"123","  ","⏎"},
+    {"↓","Z","X","C","V","B","N","M",BACKSPACE_KEY},
+    {"123","  ",".",ENTER_KEY},
   };
   main_layout->addWidget(new KeyboardLayout(this, uppercase));
 
@@ -86,8 +89,8 @@ Keyboard::Keyboard(QWidget *parent) : QFrame(parent) {
   std::vector<QVector<QString>> numbers = {
     {"1","2","3","4","5","6","7","8","9","0"},
     {"-","/",":",";","(",")","$","&&","@","\""},
-    {"#+=",".",",","?","!","`","⌫"},
-    {"ABC","  ","⏎"},
+    {"#+=",".",",","?","!","`",BACKSPACE_KEY},
+    {"ABC","  ",".",ENTER_KEY},
   };
   main_layout->addWidget(new KeyboardLayout(this, numbers));
 
@@ -95,33 +98,37 @@ Keyboard::Keyboard(QWidget *parent) : QFrame(parent) {
   std::vector<QVector<QString>> specials = {
     {"[","]","{","}","#","%","^","*","+","="},
     {"_","\\","|","~","<",">","€","£","¥","•"},
-    {"123",".",",","?","!","`","⌫"},
-    {"ABC","  ","⏎"},
+    {"123",".",",","?","!","`",BACKSPACE_KEY},
+    {"ABC","  ",".",ENTER_KEY},
   };
   main_layout->addWidget(new KeyboardLayout(this, specials));
 
   main_layout->setCurrentIndex(0);
 }
 
-void Keyboard::handleButton(QAbstractButton* m_button) {
-  QString id = m_button->text();
-  if (!QString::compare(m_button->text(), "↑") || !QString::compare(m_button->text(), "ABC")) {
+void Keyboard::handleButton(QAbstractButton* btn) {
+  const QString key = btn->text();
+  if (!QString::compare(key, "↓") || !QString::compare(key, "ABC")) {
     main_layout->setCurrentIndex(0);
   }
-  if (!QString::compare(m_button->text(), "⇧")) {
+  if (!QString::compare(key, "↑")) {
     main_layout->setCurrentIndex(1);
   }
-  if (!QString::compare(m_button->text(), "123")) {
+  if (!QString::compare(key, "123")) {
     main_layout->setCurrentIndex(2);
   }
-  if (!QString::compare(m_button->text(), "#+=")) {
+  if (!QString::compare(key, "#+=")) {
     main_layout->setCurrentIndex(3);
   }
-  if (!QString::compare(m_button->text(), "⏎")) {
+  if (!QString::compare(key, BACKSPACE_KEY)) {
     main_layout->setCurrentIndex(0);
   }
-  if ("A" <= id && id <= "Z") {
+  if ("A" <= key && key <= "Z") {
     main_layout->setCurrentIndex(0);
   }
-  emit emitButton(m_button->text());
+
+  // TODO: break up into separate signals
+  if (!CONTROL_BUTTONS.contains(key)) {
+    emit emitButton(key);
+  }
 }