spacecruft
/
nopenpilot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

input dialog design (#21607) 

* style

* eye

* fix spacing

* use two lines
pull/21621/head
Adeeb Shihadeh 2021-07-15 02:56:21 -07:00 committed by GitHub
parent 0df9287b7f
commit 6a62cf7d5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
selfdrive/assets/img_eye_closed.svg 100644
View File

@ -0,0 +1,5 @@
<svg width="81" height="54" viewBox="0 0 81 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M56.4845 7.63065C51.7905 6.01921 46.5684 5 40.8516 5C23.3024 5 10.5368 14.4989 3.27501 21.356C-0.113807 24.5209 -0.113807 29.4791 3.27501 32.644C5.49715 34.7423 8.23466 37.088 11.4669 39.3332L16.0284 36.1208C11.8215 33.3047 8.50721 30.4206 6.47928 28.5297C5.63207 27.6857 5.63207 26.5253 6.47928 25.6813C11.6835 20.7231 25.4809 9.32967 40.8516 9.32967C44.5542 9.32967 48.1656 9.99692 51.5875 11.0793L56.4845 7.63065ZM70.3373 14.7537L65.6283 18.0699C69.8565 20.9236 73.194 23.8528 75.2239 25.7868C75.9501 26.5253 75.9501 27.5802 75.2239 28.3187C70.0197 33.2769 56.3434 44.7758 40.8516 44.7758C37.1452 44.7758 33.5427 44.1237 30.1353 43.0649L25.3547 46.4316C30.0041 48.0071 35.1778 49 40.8516 49C58.4009 49 71.2875 39.5011 78.5492 32.433C81.817 29.2681 81.817 24.5209 78.5492 21.4615C76.3287 19.3647 73.5822 17.0111 70.3373 14.7537Z" fill="#BDBDBD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.1473 14.9103C44.5479 14.113 42.757 13.6667 40.8663 13.6667C34.0916 13.6667 28.5996 19.3974 28.5996 26.4667C28.5996 26.7303 28.6073 26.9922 28.6223 27.2519L46.1473 14.9103ZM36.6377 38.4858C37.9559 38.9909 39.3802 39.2667 40.8663 39.2667C47.5104 39.2667 52.9208 33.7546 53.1269 26.8737L36.6377 38.4858Z" fill="#BDBDBD"/>
<line x1="73.2745" y1="4.18015" x2="7.18015" y2="50.7255" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
selfdrive/assets/img_eye_open.svg 100644
View File

@ -0,0 +1,4 @@
<svg width="81" height="44" viewBox="0 0 81 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="40.8663" cy="21.4667" rx="12.2667" ry="12.8" fill="#BDBDBD"/>
<path d="M40.8516 44C23.3024 44 10.5368 34.5011 3.27501 27.644C-0.113807 24.4791 -0.113807 19.5209 3.27501 16.356C10.5368 9.4989 23.3024 0 40.8516 0C58.4009 0 71.2875 9.6044 78.5492 16.4615C81.817 19.5209 81.817 24.2681 78.5492 27.433C71.2875 34.5011 58.4009 44 40.8516 44ZM6.47928 20.6813C5.63207 21.5253 5.63207 22.6857 6.47928 23.5297C11.6835 28.3824 25.3598 39.7758 40.8516 39.7758C56.3434 39.7758 70.0197 28.2769 75.2239 23.3187C75.9501 22.5802 75.9501 21.5253 75.2239 20.7868C70.0197 15.8286 56.2223 4.32967 40.8516 4.32967C25.4809 4.32967 11.6835 15.7231 6.47928 20.6813Z" fill="#BDBDBD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 775 B

6
selfdrive/ui/qt/offroad/networking.cc
View File

@ -82,7 +82,7 @@ void Networking::connectToNetwork(const Network &n) {
} else if (n.security_type == SecurityType::OPEN) {
wifi->connect(n);
} else if (n.security_type == SecurityType::WPA) {
QString pass = InputDialog::getText("Enter password for \"" + n.ssid + "\"", this, 8);
QString pass = InputDialog::getText("Enter password", this, "for \"" + n.ssid + "\"", true, 8);
if (!pass.isEmpty()) {
wifi->connect(n, pass);
}
@ -92,7 +92,7 @@ void Networking::connectToNetwork(const Network &n) {
void Networking::wrongPassword(const QString &ssid) {
for (Network n : wifi->seen_networks) {
if (n.ssid == ssid) {
QString pass = InputDialog::getText("Wrong password for \"" + n.ssid +"\"", this, 8);
QString pass = InputDialog::getText("Wrong password", this, "for \"" + n.ssid +"\"", true, 8);
if (!pass.isEmpty()) {
wifi->connect(n, pass);
}
@ -135,7 +135,7 @@ AdvancedNetworking::AdvancedNetworking(QWidget* parent, WifiManager* wifi): QWid
// Change tethering password
ButtonControl *editPasswordButton = new ButtonControl("Tethering Password", "EDIT");
connect(editPasswordButton, &ButtonControl::released, [=]() {
QString pass = InputDialog::getText("Enter new tethering password", this, 8, wifi->getTetheringPassword());
QString pass = InputDialog::getText("Enter new tethering password", this, "", true, 8, wifi->getTetheringPassword());
if (!pass.isEmpty()) {
wifi->changeTetheringPassword(pass);
}

91
selfdrive/ui/qt/widgets/input.cc
View File

@ -5,6 +5,7 @@
#include "selfdrive/ui/qt/qt_window.h"
#include "selfdrive/hardware/hw.h"
QDialogBase::QDialogBase(QWidget *parent) : QDialog(parent) {
Q_ASSERT(parent != nullptr);
parent->installEventFilter(this);
@ -17,25 +18,32 @@ bool QDialogBase::eventFilter(QObject *o, QEvent *e) {
return QDialog::eventFilter(o, e);
}
InputDialog::InputDialog(const QString &prompt_text, QWidget *parent) : QDialogBase(parent) {
InputDialog::InputDialog(const QString &title, QWidget *parent, const QString &subtitle, bool secret) : QDialogBase(parent) {
main_layout = new QVBoxLayout(this);
main_layout->setContentsMargins(50, 50, 50, 50);
main_layout->setSpacing(20);
main_layout->setContentsMargins(50, 55, 50, 50);
main_layout->setSpacing(0);
// build header
QHBoxLayout *header_layout = new QHBoxLayout();
label = new QLabel(prompt_text, this);
label->setStyleSheet(R"(font-size: 75px; font-weight: 500;)");
header_layout->addWidget(label, 1, Qt::AlignLeft);
QVBoxLayout *vlayout = new QVBoxLayout;
header_layout->addLayout(vlayout);
label = new QLabel(title, this);
label->setStyleSheet("font-size: 90px; font-weight: bold;");
vlayout->addWidget(label, 1, Qt::AlignTop | Qt::AlignLeft);
if (!subtitle.isEmpty()) {
sublabel = new QLabel(subtitle, this);
sublabel->setStyleSheet("font-size: 55px; font-weight: light; color: #BDBDBD;");
vlayout->addWidget(sublabel, 1, Qt::AlignTop | Qt::AlignLeft);
}
QPushButton* cancel_btn = new QPushButton("Cancel");
cancel_btn->setFixedSize(386, 125);
cancel_btn->setStyleSheet(R"(
padding: 30px;
padding-right: 45px;
padding-left: 45px;
border-radius: 7px;
font-size: 45px;
font-size: 48px;
border-radius: 10px;
color: #E4E4E4;
background-color: #444444;
)");
header_layout->addWidget(cancel_btn, 0, Qt::AlignRight);
@ -45,17 +53,52 @@ InputDialog::InputDialog(const QString &prompt_text, QWidget *parent) : QDialogB
main_layout->addLayout(header_layout);
// text box
main_layout->addSpacing(20);
line = new QLineEdit();
line->setStyleSheet(R"(
border: none;
background-color: #444444;
font-size: 80px;
font-weight: 500;
padding: 10px;
)");
main_layout->addWidget(line, 1, Qt::AlignTop);
main_layout->addStretch(2);
QWidget *textbox_widget = new QWidget;
textbox_widget->setObjectName("textbox");
QHBoxLayout *textbox_layout = new QHBoxLayout(textbox_widget);
textbox_layout->setContentsMargins(50, 0, 50, 0);
textbox_widget->setStyleSheet(R"(
#textbox {
margin-left: 50px;
margin-right: 50px;
border: none;
border-radius: 0;
border-bottom: 3px solid #BDBDBD;
}
* {
font-size: 80px;
font-weight: light;
background-color: transparent;
}
)");
line = new QLineEdit();
textbox_layout->addWidget(line, 1);
if (secret) {
eye_btn = new QPushButton();
eye_btn->setCheckable(true);
QObject::connect(eye_btn, &QPushButton::toggled, [=](bool checked) {
if (checked) {
eye_btn->setIcon(QIcon("../assets/img_eye_closed.svg"));
eye_btn->setIconSize(QSize(81, 54));
line->setEchoMode(QLineEdit::PasswordEchoOnEdit);
} else {
eye_btn->setIcon(QIcon("../assets/img_eye_open.svg"));
eye_btn->setIconSize(QSize(81, 44));
line->setEchoMode(QLineEdit::Normal);
}
});
eye_btn->setChecked(true);
textbox_layout->addWidget(eye_btn);
}
main_layout->addWidget(textbox_widget, 0, Qt::AlignBottom);
main_layout->addSpacing(25);
k = new Keyboard(this);
QObject::connect(k, &Keyboard::emitButton, this, &InputDialog::handleInput);
main_layout->addWidget(k, 2, Qt::AlignBottom);
@ -68,11 +111,11 @@ InputDialog::InputDialog(const QString &prompt_text, QWidget *parent) : QDialogB
background-color: black;
}
)");
}
QString InputDialog::getText(const QString &prompt, QWidget *parent, int minLength, const QString &defaultText) {
InputDialog d = InputDialog(prompt, parent);
QString InputDialog::getText(const QString &prompt, QWidget *parent, const QString &subtitle,
bool secret, int minLength, const QString &defaultText) {
InputDialog d = InputDialog(prompt, parent, subtitle, secret);
d.line->setText(defaultText);
d.setMinLength(minLength);
const int ret = d.exec();

10
selfdrive/ui/qt/widgets/input.h
View File

@ -9,20 +9,22 @@
#include "selfdrive/ui/qt/widgets/keyboard.h"
class QDialogBase : public QDialog {
Q_OBJECT
protected:
QDialogBase(QWidget *parent);
bool eventFilter(QObject *o, QEvent *e) override;
bool eventFilter(QObject *o, QEvent *e) override;
};
class InputDialog : public QDialogBase {
Q_OBJECT
public:
explicit InputDialog(const QString &prompt_text, QWidget *parent);
static QString getText(const QString &prompt, QWidget *parent, int minLength = -1, const QString &defaultText = "");
explicit InputDialog(const QString &title, QWidget *parent, const QString &subtitle = "", bool secret = false);
static QString getText(const QString &title, QWidget *parent, const QString &substitle = "",
bool secret = false, int minLength = -1, const QString &defaultText = "");
QString text();
void setMessage(const QString &message, bool clearInputField = true);
void setMinLength(int length);
@ -33,7 +35,9 @@ private:
QLineEdit *line;
Keyboard *k;
QLabel *label;
QLabel *sublabel;
QVBoxLayout *main_layout;
QPushButton *eye_btn;
public slots:
int exec() override;