Add language selection

WE2-718 Signed-off-by: Raul Metsma <[email protected]>
web-eid · Oct 26, 2022 · 4b2daaa · 4b2daaa
1 parent 1c2a19b
commit 4b2daaa
Show file tree

Hide file tree

Showing 15 changed files with 226 additions and 115 deletions.
diff --git a/src/controller/application.cpp b/src/controller/application.cpp
@@ -103,9 +103,12 @@ bool Application::isDarkTheme() const
 void Application::loadTranslations(const QString& lang)
 {
     QLocale locale;
-    static const QStringList SUPPORTED_LANGS {"en", "et", "fi", "ru"};
-    if (SUPPORTED_LANGS.contains(lang)) {
-        locale = QLocale(lang);
+    static const QStringList SUPPORTED_LANGS {QStringLiteral("en"), QStringLiteral("et"),
+                                              QStringLiteral("fi"), QStringLiteral("hr"),
+                                              QStringLiteral("ru")};
+    QString langSetting = QSettings().value(QStringLiteral("lang"), lang).toString();
+    if (SUPPORTED_LANGS.contains(langSetting)) {
+        locale = QLocale(langSetting);
     }
     void(translator->load(locale, QStringLiteral(":/translations/")));
 }

diff --git a/src/ui/CMakeLists.txt b/src/ui/CMakeLists.txt
@@ -12,6 +12,7 @@ qt_add_translation(SOURCES
     translations/en.ts
     translations/et.ts
     translations/fi.ts
+    translations/hr.ts
     translations/ru.ts
 )
 add_library(ui STATIC

diff --git a/src/ui/certificatewidget.cpp b/src/ui/certificatewidget.cpp
@@ -89,6 +89,7 @@ void CertificateWidgetInfo::drawWarnIcon()
 
 void CertificateWidgetInfo::setCertificateInfo(const CardCertificateAndPinInfo& cardCertPinInfo)
 {
+    warn->setText(CertificateWidget::tr("Pin locked"));
     certAndPinInfo = cardCertPinInfo;
     const auto certInfo = cardCertPinInfo.certInfo;
     QString warning, effectiveDate = certInfo.effectiveDate, expiryDate = certInfo.expiryDate;
@@ -110,6 +111,11 @@ void CertificateWidgetInfo::setCertificateInfo(const CardCertificateAndPinInfo&
     }
 }
 
+void CertificateWidgetInfo::languageChange()
+{
+    setCertificateInfo(certAndPinInfo);
+}
+
 CertificateWidget::CertificateWidget(QWidget* parent) : QWidget(parent), CertificateWidgetInfo(this)
 {
     info->setFocusPolicy(Qt::TabFocus);
@@ -143,10 +149,6 @@ CertificateButton::CertificateButton(const CardCertificateAndPinInfo& cardCertPi
     CertificateWidgetInfo::icon->setAttribute(Qt::WA_TransparentForMouseEvents);
     info->setAttribute(Qt::WA_TransparentForMouseEvents);
     setCertificateInfo(cardCertPinInfo);
-    const auto certInfo = cardCertPinInfo.certInfo;
-    setText(
-        tr("%1 Issuer: %2 Valid: %3 to %4")
-            .arg(certInfo.subject, certInfo.issuer, certInfo.effectiveDate, certInfo.expiryDate));
 }
 
 bool CertificateButton::eventFilter(QObject* object, QEvent* event)
@@ -158,6 +160,15 @@ bool CertificateButton::eventFilter(QObject* object, QEvent* event)
     return QAbstractButton::eventFilter(object, event);
 }
 
+void CertificateButton::setCertificateInfo(const CardCertificateAndPinInfo& cardCertPinInfo)
+{
+    CertificateWidgetInfo::setCertificateInfo(cardCertPinInfo);
+    const auto certInfo = cardCertPinInfo.certInfo;
+    setText(
+        tr("%1 Issuer: %2 Valid: %3 to %4")
+            .arg(certInfo.subject, certInfo.issuer, certInfo.effectiveDate, certInfo.expiryDate));
+}
+
 void CertificateButton::paintEvent(QPaintEvent* /*event*/)
 {
     QPainter p(this);

diff --git a/src/ui/certificatewidget.hpp b/src/ui/certificatewidget.hpp
@@ -32,7 +32,8 @@ class CertificateWidgetInfo
 {
 public:
     CardCertificateAndPinInfo certificateInfo() const;
-    void setCertificateInfo(const CardCertificateAndPinInfo& cardCertPinInfo);
+    virtual void setCertificateInfo(const CardCertificateAndPinInfo& cardCertPinInfo);
+    void languageChange();
 
 protected:
     CertificateWidgetInfo(QWidget* self);
@@ -68,5 +69,6 @@ class CertificateButton final : public QAbstractButton, public CertificateWidget
 
 private:
     bool eventFilter(QObject* object, QEvent* event) final;
+    void setCertificateInfo(const CardCertificateAndPinInfo& cardCertPinInfo) final;
     void paintEvent(QPaintEvent* event) final;
 };
diff --git a/src/ui/dark.qss b/src/ui/dark.qss
@@ -2,19 +2,19 @@ QWidget {
 background-color: #232325;
 color: white;
 }
-QPushButton {
+QPushButton, #langButton {
 border-color: #4E4E53;
 background-color: #4E4E53;
 }
-QPushButton::disabled {
+QPushButton::disabled, #langButton::disabled {
 border-color: #27272A;
 background-color: #27272A;
 }
-QPushButton::hover {
+QPushButton::hover, #langButton::hover {
 background-color: #76767B;
 border-color: #76767B;
 }
-QPushButton::focus {
+QPushButton::focus, #langButton::focus {
 background-color: #76767B;
 border-color: #DEDEDE;
 }
@@ -34,6 +34,13 @@ QPushButton:default::focus {
 background-color: #008EEA;
 border-color: #DEDEDE;
 }
+#langButton::menu-indicator {
+image: url(:images/down_dark.svg);
+}
+#langButton > QMenu {
+border-color: #4E4E53;
+background-color: #4E4E53;
+}
 CertificateButton, CertificateWidget {
 border-color: #4E4E53;
 }
@@ -85,3 +92,6 @@ color: white;
 #aboutVersion {
 color: white;
 }
+#selectAnotherCertificate {
+color: white;
+}
diff --git a/src/ui/dialog.ui b/src/ui/dialog.ui
@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>500</width>
-    <height>464</height>
+    <height>495</height>
    </rect>
   </property>
   <property name="minimumSize">
@@ -26,25 +26,25 @@ font-size: 14px;
 font-family: &quot;Roboto&quot;;
 color: black;
 }
-QPushButton {
+QPushButton, #langButton {
 font-size: 17px;
 border: 3px solid #EFEFEF;
 border-radius: 3px;
 height: 39px;
-padding-left: 19px;
-padding-right: 19px;
+padding-left: 17px;
+padding-right: 17px;
 min-width: 30px;
 background-color: #EFEFEF;
 }
-QPushButton::disabled {
+QPushButton::disabled, #langButton::disabled {
 background-color: #FAFAFA;
 border-color: #FAFAFA;
 }
-QPushButton::hover {
+QPushButton::hover, #langButton::hover {
 background-color: #DEDEDE;
 border-color: #DEDEDE;
 }
-QPushButton::focus {
+QPushButton::focus, #langButton::focus {
 background-color: #DEDEDE;
 border-color: #76767B;
 }
@@ -65,6 +65,23 @@ QPushButton:default::focus {
 background-color: #003168;
 border-color: #008EEA;
 }
+#langButton {
+padding-left: 15px;
+padding-right: 30px;
+height: 36px;
+}
+#langButton::menu-indicator {
+image: url(:images/down.svg);
+subcontrol-origin: padding;
+subcontrol-position: right center;
+left: -8px;
+}
+#langButton &gt; QMenu {
+font-size: 17px;
+border: 3px solid #EFEFEF;
+border-radius: 3px;
+background-color: #EFEFEF;
+}
 CertificateButton, CertificateWidget {
 border: 1px solid rgba(0,49,104,0.1);
 border-radius: 4px;
@@ -805,6 +822,9 @@ height: 24px;
    </item>
    <item>
     <layout class="QHBoxLayout" name="buttonLayout">
+     <property name="spacing">
+      <number>6</number>
+     </property>
      <item>
       <widget class="QPushButton" name="cancelButton">
        <property name="cursor">
@@ -818,14 +838,24 @@ height: 24px;
        </property>
       </widget>
      </item>
+     <item>
+      <widget class="QToolButton" name="langButton">
+       <property name="text">
+        <string notr="true">EN</string>
+       </property>
+       <property name="popupMode">
+        <enum>QToolButton::InstantPopup</enum>
+       </property>
+      </widget>
+     </item>
      <item>
       <spacer name="buttonSpacer">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
        </property>
        <property name="sizeHint" stdset="0">
         <size>
-         <width>40</width>
+         <width>0</width>
          <height>20</height>
         </size>
        </property>

diff --git a/src/ui/images/down.svg b/src/ui/images/down.svg
diff --git a/src/ui/images/down_dark.svg b/src/ui/images/down_dark.svg
diff --git a/src/ui/translations/fi.ts b/src/ui/translations/fi.ts
@@ -249,15 +249,15 @@
     </message>
     <message>
         <source>Select another certificate</source>
-        <translation type="unfinished">Valitse toinen varmenne</translation>
+        <translation>Valitse toinen varmenne</translation>
     </message>
     <message>
         <source>Operation failed. Make sure that the driver of the corresponding card reader is used. Read more &lt;a href=&quot;https://www.id.ee/en/article/using-pinpad-card-reader-drivers/&quot;&gt;here&lt;/a&gt;.</source>
-        <translation type="unfinished">Toimenpide epäonnistui. Varmista, että käytetään vastaavan kortinlukijan ajuria. Lue lisää &lt;a href=&quot;https://www.id.ee/en/article/using-pinpad-card-reader-drivers/&quot;&gt;täältä&lt;/a&gt;.</translation>
+        <translation>Toimenpide epäonnistui. Varmista, että käytetään vastaavan kortinlukijan ajuria. Lue lisää &lt;a href=&quot;https://www.id.ee/en/article/using-pinpad-card-reader-drivers/&quot;&gt;täältä&lt;/a&gt;.</translation>
     </message>
     <message>
         <source>The certificate of the ID card in the reader does not match the originally submitted certificate. Please insert the original ID card.</source>
-        <translation type="unfinished">Lukijassa oleva henkilökortin varmenne ei vastaa alun perin lähetettyä varmennetta. Aseta alkuperäinen henkilökortti kortinlukijaan.</translation>
+        <translation>Lukijassa oleva henkilökortin varmenne ei vastaa alun perin lähetettyä varmennetta. Aseta alkuperäinen henkilökortti kortinlukijaan.</translation>
     </message>
 </context>
 </TS>
diff --git a/src/ui/translations/hr.ts b/src/ui/translations/hr.ts
@@ -1,17 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE TS>
 <TS version="2.1" language="hr">
-<context>
-    <name>Application</name>
-    <message>
-        <source>&amp;File</source>
-        <translation>&amp;Datoteka</translation>
-    </message>
-    <message>
-        <source>&amp;About</source>
-        <translation>&amp;O programu</translation>
-    </message>
-</context>
 <context>
     <name>CertificateButton</name>
     <message>
@@ -110,7 +99,7 @@
     </message>
     <message>
         <source>https://www.id.ee/en/article/how-to-check-that-your-id-card-reader-is-working/</source>
-        <translation>https://www.id.ee/en/article/how-to-check-that-your-id-card-reader-is-working/</translation>
+        <translation type="unfinished">https://www.id.ee/en/article/how-to-check-that-your-id-card-reader-is-working/</translation>
     </message>
     <message>
         <source>Time remaining: &lt;b&gt;%1&lt;/b&gt;</source>

diff --git a/src/ui/translations/ru.ts b/src/ui/translations/ru.ts
@@ -259,7 +259,7 @@
     </message>
     <message>
         <source>The certificate of the ID card in the reader does not match the originally submitted certificate. Please insert the original ID card.</source>
-        <translation type="unfinished">Сертификат ID-карты в считывателе не соответствует указанному сертификату. Пожалуйста, вставьте оригинальную ID-карту.</translation>
+        <translation>Сертификат ID-карты в считывателе не соответствует указанному сертификату. Пожалуйста, вставьте оригинальную ID-карту.</translation>
     </message>
 </context>
 </TS>
diff --git a/src/ui/translations/translations.qrc b/src/ui/translations/translations.qrc
@@ -3,6 +3,7 @@
     <file alias="en">en.qm</file>
     <file alias="et">et.qm</file>
     <file alias="fi">fi.qm</file>
+    <file alias="hr">hr.qm</file>
     <file alias="ru">ru.qm</file>
   </qresource>
 </RCC>
diff --git a/src/ui/web-eid-resources.qrc b/src/ui/web-eid-resources.qrc
@@ -4,6 +4,8 @@
         <file>images/arrow.svg</file>
         <file>images/cardreader.svg</file>
         <file>images/cardreader_dark.svg</file>
+        <file>images/down.svg</file>
+        <file>images/down_dark.svg</file>
         <file>images/fatal.svg</file>
         <file>images/fatal_dark.svg</file>
         <file>images/help.svg</file>