From 95289a956b966c7a52bfd9a9c977d078c5f8dace Mon Sep 17 00:00:00 2001 From: Raul Metsma Date: Mon, 16 Mar 2026 13:11:40 +0200 Subject: [PATCH 1/2] Update line edit to new UI guidlines WE2-997 Signed-off-by: Raul Metsma --- src/ui/dark.qss | 12 ++++--- src/ui/dialog.ui | 66 ++++++++---------------------------- src/ui/images/alert.svg | 3 ++ src/ui/images/alert_dark.svg | 3 ++ src/ui/webeiddialog.cpp | 11 ++++++ 5 files changed, 38 insertions(+), 57 deletions(-) create mode 100644 src/ui/images/alert.svg create mode 100644 src/ui/images/alert_dark.svg diff --git a/src/ui/dark.qss b/src/ui/dark.qss index 5eb1a4a3..0137366d 100644 --- a/src/ui/dark.qss +++ b/src/ui/dark.qss @@ -30,12 +30,11 @@ CertificateButton #warn, CertificateWidget #warn { color: #F54A67; } QLineEdit { -background-color: rgba(255,255,255,0.1); -border-color: #008EEA; +border-color: #909299; +color: #FFFFFF; } QLineEdit[warning="true"] { -border-color: #F54A67; -color: #F54A67; +border-color: #FF5C79; } QProgressBar { background-color: rgba(255,255,255,0.1); @@ -51,8 +50,11 @@ color: #FFFFFF; #selectCertificateOriginLabel, #pinInputOriginLabel { color: white; } +#pinTitleLabel { +color: white; +} #pinErrorLabel { -color: #F54A67; +color: #FF5C79; } #aboutContent { border-color: #4E4E53; diff --git a/src/ui/dialog.ui b/src/ui/dialog.ui index 1d87fa4a..a186cf58 100644 --- a/src/ui/dialog.ui +++ b/src/ui/dialog.ui @@ -88,24 +88,16 @@ CertificateButton #warn, CertificateWidget #warn { color: #CD2541; } QLineEdit { -border: 2px solid #113F8E; -color: #113F8E; -border-radius: 3px; -min-width: 200px; -min-height: 45px; -max-width: 200px; -max-height: 45px; -font-size: 26px; -font-weight: bold; -padding-right: 14px; -padding-left: 14px; -padding-top: 0px; -padding-bottom: 0px; +border: 1px solid #C4CBD8; +color: #607496; +border-radius: 8px; +font-size: 16px; +padding: 10px 14px; lineedit-password-character: 42; } QLineEdit[warning="true"] { -border: 2px solid #CD2541; -color: #CD2541; +border: 1px solid #BE7884; +color: #07142A; } QProgressBar { height: 30px; @@ -132,11 +124,13 @@ color: #003168; font-weight: bold; max-height: 20px; } -#pinTitleLabel, #pinErrorLabel { -max-height: 20px; +#pinTitleLabel { +font-size: 14px; +color: #07142A; } #pinErrorLabel { -color: #CD2541; +font-size: 14px; +color: #AD2A45; } #fatalError { border: 1px solid rgba(240,78,35,0.1); @@ -569,29 +563,19 @@ border-radius: 4px; - 10 + 6 - - - Roboto - -1 - true - - Enter PIN1 for authentication - - Qt::AlignCenter - pinInput - + 12 @@ -603,21 +587,12 @@ border-radius: 4px; - - - 0 - 36 - - Qt::TabFocus 2 tries left - - Qt::AlignCenter - true @@ -640,19 +615,6 @@ border-radius: 4px; - - - - Qt::Vertical - - - - 20 - 5 - - - - diff --git a/src/ui/images/alert.svg b/src/ui/images/alert.svg new file mode 100644 index 00000000..02cd30dc --- /dev/null +++ b/src/ui/images/alert.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/ui/images/alert_dark.svg b/src/ui/images/alert_dark.svg new file mode 100644 index 00000000..82f693a7 --- /dev/null +++ b/src/ui/images/alert_dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/ui/webeiddialog.cpp b/src/ui/webeiddialog.cpp index 8798eb03..b62d3fd9 100644 --- a/src/ui/webeiddialog.cpp +++ b/src/ui/webeiddialog.cpp @@ -51,6 +51,7 @@ using namespace electronic_id; class WebEidDialog::Private : public Ui::WebEidDialog { public: + observer_ptr pinInputAlert; observer_ptr pinInputValidator; observer_ptr pinTimeoutTimer; observer_ptr selectionGroup; @@ -92,6 +93,15 @@ WebEidDialog::WebEidDialog(QWidget* parent) : WebEidUI(parent), ui(new Private) auto pinInputFont = ui->pinInput->font(); pinInputFont.setLetterSpacing(QFont::AbsoluteSpacing, 2); ui->pinInput->setFont(pinInputFont); + ui->pinInputAlert = new QSvgWidget(ui->pinInput); + ui->pinInputAlert->load(Application::isDarkTheme() ? u":/images/alert_dark.svg"_s + : u":/images/alert.svg"_s); + ui->pinInputAlert->setFixedSize(20, 20); + ui->pinInputAlert->hide(); + auto *pinInputLayout = new QHBoxLayout(ui->pinInput); + pinInputLayout->setContentsMargins(14, 10, 14, 10); + pinInputLayout->setSpacing(0); + pinInputLayout->addWidget(ui->pinInputAlert, 0, Qt::AlignRight); ui->waitingSpinner->load(Application::isDarkTheme() ? u":/images/wait_dark.svg"_s : u":/images/wait.svg"_s); @@ -690,6 +700,7 @@ void WebEidDialog::showPinInputWarning(bool show) { style()->unpolish(ui->pinInput); ui->pinInput->setProperty("warning", show); + ui->pinInputAlert->setVisible(show); style()->polish(ui->pinInput); } From 0ed2dbc1373ed67a35c29ba2940966ff58ef3ae3 Mon Sep 17 00:00:00 2001 From: Raul Metsma Date: Tue, 4 Aug 2026 10:31:12 +0300 Subject: [PATCH 2/2] Adjust labels to new style guidelines WE2-992 Signed-off-by: Raul Metsma --- .../command-handlers/certificatereader.cpp | 11 ++- src/ui/certificatewidget.cpp | 78 +++++++++---------- src/ui/certificatewidget.hpp | 3 +- src/ui/dark.qss | 9 ++- src/ui/dialog.ui | 19 ++++- src/ui/translations/cs.ts | 8 +- src/ui/translations/de.ts | 8 +- src/ui/translations/en.ts | 8 +- src/ui/translations/et.ts | 8 +- src/ui/translations/fi.ts | 8 +- src/ui/translations/fr.ts | 8 +- src/ui/translations/hr.ts | 8 +- src/ui/translations/nl.ts | 8 +- src/ui/translations/ru.ts | 8 +- src/ui/translations/sk.ts | 8 +- 15 files changed, 132 insertions(+), 68 deletions(-) diff --git a/src/controller/command-handlers/certificatereader.cpp b/src/controller/command-handlers/certificatereader.cpp index e377050c..d6df3ba6 100644 --- a/src/controller/command-handlers/certificatereader.cpp +++ b/src/controller/command-handlers/certificatereader.cpp @@ -58,9 +58,6 @@ EidCertificateAndPinInfo getCertificateWithStatusAndInfo(ElectronicID::ptr&& eid subject = QStringLiteral("%1, %2, %3").arg(surName, givenName, serialNumber); } - CertificateInfo certInfo { - certificateType, certificate.expiryDate() < QDateTime::currentDateTimeUtc(), - certificate.effectiveDate() > QDateTime::currentDateTimeUtc(), std::move(subject)}; auto info = certificateType.isAuthentication() ? eid->authPinInfo() : eid->signingPinInfo(); PinInfo pinInfo {.pinMinMaxLength = certificateType.isAuthentication() ? eid->authPinMinMaxLength() @@ -83,7 +80,13 @@ EidCertificateAndPinInfo getCertificateWithStatusAndInfo(ElectronicID::ptr&& eid .eid = std::move(eid), .certificateBytesInDer = std::move(certificateDer), .certificate = certificate, - .certInfo = std::move(certInfo), + .certInfo = + { + .type = certificateType, + .isExpired = certificate.expiryDate() < QDateTime::currentDateTimeUtc(), + .notEffective = certificate.effectiveDate() > QDateTime::currentDateTimeUtc(), + .subject = std::move(subject), + }, .pinInfo = std::move(pinInfo), .pin1Active = pin1Active, .pin2Active = pin2Active, diff --git a/src/ui/certificatewidget.cpp b/src/ui/certificatewidget.cpp index 48a05fe6..2e504f32 100644 --- a/src/ui/certificatewidget.cpp +++ b/src/ui/certificatewidget.cpp @@ -25,39 +25,36 @@ #include "application.hpp" #include -#include +#include #include #include #include -namespace -{ - -inline QString displayInRed(const QString& text) -{ - return QStringLiteral("%1").arg(text); -} - -} // namespace - // We use two separate widgets, CertificateWidget and CertificateButton, for accessibility, to // support screen readers. CertificateWidgetInfo::CertificateWidgetInfo(QWidget* self) : - icon(new QLabel(self)), info(new QLabel(self)), - warn(new QLabel(CertificateWidget::tr("Pin locked"), self)) + icon(new QLabel(self)), info(new QLabel(self)), issuer(new QLabel(self)), + status(new QLabel(self)) { - warn->setObjectName(QStringLiteral("warn")); - warn->hide(); - auto* layout = new QHBoxLayout(self); - layout->setContentsMargins(20, 0, 20, 0); - layout->setSpacing(10); - layout->addWidget(icon); - layout->addWidget(info, 1); - auto* warnLayout = new QHBoxLayout; - warnLayout->setSpacing(6); - warnLayout->addWidget(warn); - layout->addItem(warnLayout); + info->setObjectName(QStringLiteral("certificateName")); + info->setTextFormat(Qt::PlainText); + info->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed); + issuer->setObjectName(QStringLiteral("certificateIssuer")); + issuer->setTextFormat(Qt::PlainText); + issuer->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed); + status->setObjectName(QStringLiteral("certificateStatus")); + status->setTextFormat(Qt::PlainText); + issuer->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Fixed); + auto* layout = new QGridLayout(self); + layout->setContentsMargins(16, 16, 16, 16); + layout->setHorizontalSpacing(16); + layout->setVerticalSpacing(2); + layout->addWidget(icon, 0, 0, 3, 1, Qt::AlignVCenter); + layout->addWidget(info, 0, 1); + layout->addWidget(issuer, 1, 1); + layout->addWidget(status, 2, 1, Qt::AlignLeft); + layout->setColumnStretch(1, 1); } EidCertificateAndPinInfo CertificateWidgetInfo::certificateInfo() const @@ -67,35 +64,36 @@ EidCertificateAndPinInfo CertificateWidgetInfo::certificateInfo() const std::tuple CertificateWidgetInfo::certData() const { - return {certAndPinInfo.certInfo.subject.toHtmlEscaped(), - certAndPinInfo.certificate.issuerInfo(QSslCertificate::CommonName) - .join(' ') - .toHtmlEscaped(), + return {certAndPinInfo.certInfo.subject, + certAndPinInfo.certificate.issuerInfo(QSslCertificate::CommonName).join(' '), certAndPinInfo.certificate.effectiveDate().date().toString(Qt::ISODate), certAndPinInfo.certificate.expiryDate().date().toString(Qt::ISODate)}; } void CertificateWidgetInfo::setCertificateInfo(const EidCertificateAndPinInfo& cardCertPinInfo) { - warn->setText(CertificateWidget::tr("Pin locked")); certAndPinInfo = cardCertPinInfo; const auto& certInfo = cardCertPinInfo.certInfo; QString warning; - auto [subject, issuer, effectiveDate, expiryDate] = certData(); + const auto& [subject, issuerName, effectiveDate, expiryDate] = certData(); + Q_UNUSED(effectiveDate) bool isError = certInfo.notEffective || certInfo.isExpired || cardCertPinInfo.pinInfo.pinIsBlocked(); if (certInfo.notEffective) { - effectiveDate = displayInRed(effectiveDate); - warning = displayInRed(CertificateWidget::tr(" (Not effective)")); + warning = CertificateWidget::tr(" (Not effective)"); } if (certInfo.isExpired) { - expiryDate = displayInRed(expiryDate); - warning = displayInRed(CertificateWidget::tr(" (Expired)")); + warning = CertificateWidget::tr(" (Expired)"); } - info->setText(CertificateWidget::tr("%1
Issuer: %2
Valid: %3 to %4%5") - .arg(subject, issuer, effectiveDate, expiryDate, warning)); + info->setText(subject); + issuer->setText(CertificateWidget::tr("Issuer: %1").arg(issuerName)); + status->setText(cardCertPinInfo.pinInfo.pinIsBlocked() + ? CertificateWidget::tr("Pin locked") + : CertificateWidget::tr("Valid until: %1%2").arg(expiryDate, warning)); + status->setProperty("warning", isError); + status->style()->unpolish(status); + status->style()->polish(status); info->parentWidget()->setDisabled(isError); - warn->setVisible(warning.isEmpty() && cardCertPinInfo.pinInfo.pinIsBlocked()); if (isError) { icon->setPixmap(Application::isDarkTheme() ? QStringLiteral(":/images/id-card-err_dark.svg") : QStringLiteral(":/images/id-card-err.svg")); @@ -132,14 +130,16 @@ CertificateButton::CertificateButton(const EidCertificateAndPinInfo& cardCertPin setAutoExclusive(true); CertificateWidgetInfo::icon->setAttribute(Qt::WA_TransparentForMouseEvents); info->setAttribute(Qt::WA_TransparentForMouseEvents); + issuer->setAttribute(Qt::WA_TransparentForMouseEvents); setCertificateInfo(cardCertPinInfo); } void CertificateButton::setCertificateInfo(const EidCertificateAndPinInfo& cardCertPinInfo) { CertificateWidgetInfo::setCertificateInfo(cardCertPinInfo); - auto [subject, issuer, effectiveDate, expiryDate] = certData(); - setText(tr("%1 Issuer: %2 Valid: %3 to %4").arg(subject, issuer, effectiveDate, expiryDate)); + auto [subject, issuerName, effectiveDate, expiryDate] = certData(); + setText( + tr("%1 Issuer: %2 Valid: %3 to %4").arg(subject, issuerName, effectiveDate, expiryDate)); } void CertificateButton::paintEvent(QPaintEvent* /*event*/) diff --git a/src/ui/certificatewidget.hpp b/src/ui/certificatewidget.hpp index f7b0257c..06fdfa29 100644 --- a/src/ui/certificatewidget.hpp +++ b/src/ui/certificatewidget.hpp @@ -45,7 +45,8 @@ class CertificateWidgetInfo QLabel* icon; QLabel* info; - QLabel* warn; + QLabel* issuer; + QLabel* status; EidCertificateAndPinInfo certAndPinInfo; }; diff --git a/src/ui/dark.qss b/src/ui/dark.qss index 0137366d..43b6e993 100644 --- a/src/ui/dark.qss +++ b/src/ui/dark.qss @@ -26,8 +26,13 @@ CertificateButton:checked { border-color: #008EEA; } /* CertificateButton QWidget:disabled, CertificateWidget QWidget:disabled */ -CertificateButton #warn, CertificateWidget #warn { -color: #F54A67; +#certificateStatus { +color: white; +background-color: #415982; +} +#certificateStatus[warning="true"] { +color: #FF5C79; +background-color: #4A2830; } QLineEdit { border-color: #909299; diff --git a/src/ui/dialog.ui b/src/ui/dialog.ui index a186cf58..092e1ff5 100644 --- a/src/ui/dialog.ui +++ b/src/ui/dialog.ui @@ -84,8 +84,23 @@ background-color: transparent; CertificateButton QWidget:disabled, CertificateWidget QWidget:disabled { color: #76767B; } -CertificateButton #warn, CertificateWidget #warn { -color: #CD2541; +#certificateName { +font-weight: 700; +} +#certificateIssuer { +font-size: 12px; +} +#certificateStatus { +color: #091A36; +background-color: #F3F5F7; +border-radius: 8px; +font-size: 12px; +font-weight: 400; +padding: 2px 8px; +} +#certificateStatus[warning="true"] { +color: #AD2A45; +background-color: #F5EBED; } QLineEdit { border: 1px solid #C4CBD8; diff --git a/src/ui/translations/cs.ts b/src/ui/translations/cs.ts index eac02e98..1aac1eb8 100644 --- a/src/ui/translations/cs.ts +++ b/src/ui/translations/cs.ts @@ -30,8 +30,12 @@ (Platnost vypršela) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Vydavatel: %2<br />Platný: %3 až %4%5 + Issuer: %1 + Vydavatel: %1 + + + Valid until: %1%2 + Platný do: %1%2 Pin locked diff --git a/src/ui/translations/de.ts b/src/ui/translations/de.ts index 3855b16e..3845bc78 100644 --- a/src/ui/translations/de.ts +++ b/src/ui/translations/de.ts @@ -30,8 +30,12 @@ (Abgelaufen) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Aussteller: %2<br />Gültig: %3 bis %4%5 + Issuer: %1 + Aussteller: %1 + + + Valid until: %1%2 + Gültig bis: %1%2 Pin locked diff --git a/src/ui/translations/en.ts b/src/ui/translations/en.ts index 271ec7fa..12f4ad2e 100644 --- a/src/ui/translations/en.ts +++ b/src/ui/translations/en.ts @@ -30,8 +30,12 @@ (Expired) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 + Issuer: %1 + Issuer: %1 + + + Valid until: %1%2 + Valid until: %1%2 Pin locked diff --git a/src/ui/translations/et.ts b/src/ui/translations/et.ts index b1840709..3f2bb4bb 100644 --- a/src/ui/translations/et.ts +++ b/src/ui/translations/et.ts @@ -30,8 +30,12 @@ (Aegunud) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Väljaandja: %2<br />Kehtib: %3 kuni %4%5 + Issuer: %1 + Väljaandja: %1 + + + Valid until: %1%2 + Kehtib kuni: %1%2 Pin locked diff --git a/src/ui/translations/fi.ts b/src/ui/translations/fi.ts index 30169981..69b2d207 100644 --- a/src/ui/translations/fi.ts +++ b/src/ui/translations/fi.ts @@ -30,8 +30,12 @@ (Voimassaoloaika päättynyt) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Myöntäjä: %2<br />Voimassa: %3 – %4%5 + Issuer: %1 + Myöntäjä: %1 + + + Valid until: %1%2 + Voimassa %1 asti%2 Pin locked diff --git a/src/ui/translations/fr.ts b/src/ui/translations/fr.ts index 6e95c1a7..a4bf584e 100644 --- a/src/ui/translations/fr.ts +++ b/src/ui/translations/fr.ts @@ -30,8 +30,12 @@ (Expiré) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Émetteur: %2<br />Valide: %3 jusqu'à %4%5 + Issuer: %1 + Émetteur : %1 + + + Valid until: %1%2 + Valide jusqu’au : %1%2 Pin locked diff --git a/src/ui/translations/hr.ts b/src/ui/translations/hr.ts index 5915662a..85f07434 100644 --- a/src/ui/translations/hr.ts +++ b/src/ui/translations/hr.ts @@ -34,8 +34,12 @@ (Isteklo) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Izdavatelj: %2<br />Vrijedi: %3 do %4%5 + Issuer: %1 + Izdavatelj: %1 + + + Valid until: %1%2 + Vrijedi do: %1%2 diff --git a/src/ui/translations/nl.ts b/src/ui/translations/nl.ts index e33b3164..23171869 100644 --- a/src/ui/translations/nl.ts +++ b/src/ui/translations/nl.ts @@ -30,8 +30,12 @@ (Vervallen) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Uitgever: %2<br />Geldig: %3 tot %4%5 + Issuer: %1 + Uitgever: %1 + + + Valid until: %1%2 + Geldig tot: %1%2 Pin locked diff --git a/src/ui/translations/ru.ts b/src/ui/translations/ru.ts index 3aef1ff1..f867789d 100644 --- a/src/ui/translations/ru.ts +++ b/src/ui/translations/ru.ts @@ -30,8 +30,12 @@ (Истекший) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Выдавший: %2<br />Действительно: с %3 до %4%5 + Issuer: %1 + Выдавший: %1 + + + Valid until: %1%2 + Действителен до: %1%2 Pin locked diff --git a/src/ui/translations/sk.ts b/src/ui/translations/sk.ts index 76c7634a..b64c68d1 100644 --- a/src/ui/translations/sk.ts +++ b/src/ui/translations/sk.ts @@ -30,8 +30,12 @@ (Platnosť vypršala) - <b>%1</b><br />Issuer: %2<br />Valid: %3 to %4%5 - <b>%1</b><br />Vydavateľ: %2<br />Platný: %3 až %4%5 + Issuer: %1 + Vydavateľ: %1 + + + Valid until: %1%2 + Platný do: %1%2 Pin locked