Prettier styles for the about page. Changed the search field to a SearchField.

qml/pages/About.qml

@@ -66,71 +66,86 @@ Page {
         font.bold: true
         text: "SailOTP " + Qt.application.version
       }
-      TextArea {
+      Label {
-        id: desc
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width
         horizontalAlignment: TextEdit.Center
-        readOnly: true
+        text:  qsTr("A simple Sailfish OTP generator")
-        text:  qsTr("A Simple Sailfish OTP Generator\n(RFC 6238/4226 compatible)")
         color: Theme.primaryColor
       }
-      TextArea {
+      Label {
-        id: copyright
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width
         horizontalAlignment: TextEdit.Center
-        readOnly: true
+        font.pixelSize: Theme.fontSizeSmall
-        text: qsTr("Copyright: Stefan Brand\nLicense: BSD (3-clause)")
+        text:  qsTr("(RFC 6238/4226 compatible)")
         color: Theme.primaryColor
       }
       Button {
-        id: manual
+        text: qsTr("Online Manual")
         anchors.horizontalCenter: parent.horizontalCenter
-        text: "<a href=\"https://www.seiichiro0185.org/sailfish:apps:sailotp:manual\">Online Manual</a>"
         onClicked: {
           Qt.openUrlExternally("https://www.seiichiro0185.org/sailfish:apps:sailotp:manual")
         }
       }
       Button {
-        id: homepage
+        text: qsTr("Source Code & Issue Tracker")
         anchors.horizontalCenter: parent.horizontalCenter
-        text: "<a href=\"https://github.com/seiichiro0185/sailotp/\">Source Code & Issue Tracker</a>"
         onClicked: {
           Qt.openUrlExternally("https://github.com/seiichiro0185/sailotp/")
         }
       }
-      TextArea {
+      DetailItem {
-        id: acknowledgement
+          width: parent.width
-        anchors.horizontalCenter: parent.horizontalCenter
+          label: qsTr("Copyright")
-        width: parent.width
+          value: "Stefan Brand"
-        font.pixelSize: Theme.fontSizeSmall
-        horizontalAlignment: TextEdit.Center
-        readOnly: true
-        text: "\n"+qsTr("SailOTP uses the following third party libs:")+"\n\nhttp://caligatio.github.io/jsSHA/\nhttps://code.google.com/archive/p/crypto-js/\nhttp://sourceforge.net/projects/qzxing/\nhttp://fukuchi.org/works/qrencode/"
-        color: Theme.primaryColor
       }
-
+      DetailItem {
-      TextArea {
+          width: parent.width
-        id: contributors
+          label: qsTr("License")
-        anchors.horizontalCenter: parent.horizontalCenter
+          value: qsTr("BSD (3-clause)")
-        width: parent.width
-        font.pixelSize: Theme.fontSizeSmall
-        horizontalAlignment: TextEdit.Center
-        readOnly: true
-        text: qsTr("Contributors:")+"\n\nRobin Appelman: SteamGuard "+qsTr("Support")
-        color: Theme.primaryColor
       }
-
+      Label {
-      TextArea {
-        id: translators
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width
         font.pixelSize: Theme.fontSizeSmall
         horizontalAlignment: TextEdit.Center
-        readOnly: true
+        wrapMode: Text.WordWrap
-        text: qsTr("Translators:")+"\n\nChinese: BirdZhang\nFinnish: Johan Heikkilä\nFrench: Romain Tartière\nItalian: Tichy\nDutch: JSEHV\nRussian: moorchegue\nSpanish: p4moedo\nSwedish: Åke Engelbrektson\nEnglish: Stefan Brand\nGerman: Stefan Brand"
+        text: qsTr("Contributors:")
-        color: Theme.primaryColor
+        color: Theme.secondaryHighlightColor
+      }
+      DetailItem {
+          label: qsTr("SteamGuard support")
+          value: "Robin Appelman"
+      }
+      Label {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        font.pixelSize: Theme.fontSizeSmall
+        horizontalAlignment: Text.Center
+        wrapMode: Text.WordWrap
+        text: qsTr("Translators:")
+        color: Theme.secondaryHighlightColor
+      }
+      Label {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width * 0.8
+        font.pixelSize: Theme.fontSizeSmall
+        wrapMode: Text.WordWrap
+        text: "Chinese: BirdZhang\nFinnish: Johan Heikkilä\nFrench: Romain Tartière\nItalian: Tichy\nDutch: JSEHV\nRussian: moorchegue\nSpanish: p4moedo\nSwedish: Åke Engelbrektson\nEnglish: Stefan Brand\nGerman: Stefan Brand"
+        color: Theme.highlightColor
+      }
+      LinkedLabel {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        font.pixelSize: Theme.fontSizeSmall
+        horizontalAlignment: TextEdit.Center
+        plainText: "\n"+qsTr("SailOTP uses the following third party libs:")+'
+            http://caligatio.github.io/jsSHA/
+            https://code.google.com/archive/p/crypto-js/
+            http://sourceforge.net/projects/qzxing/
+            http://fukuchi.org/works/qrencode/'
+        color: Theme.secondaryHighlightColor
       }
     }
     VerticalScrollDecorator { }

qml/pages/MainView.qml

@@ -159,10 +159,12 @@ Page {
         Row {
           id: searchRow
           width: parent.width
-          TextField {
+          SearchField {
             id: searchField
             font.pixelSize: Theme.fontSizeMedium
-            width: parent.width - clearIcon.width
+            width: parent.width
+// This would be useful, but seems to break the button altogether. Perhaps it'll work later?
+//            canHide: true
             EnterKey.enabled: false
             inputMethodHints: Qt.ImhNoPredictiveText // Qt.ImhPreferUppercase | Qt.ImhNoAutoUppercase
             placeholderText: qsTr("Search")
@@ -172,12 +174,6 @@ Page {
               }
             }
           }
-          IconButton {
-            id: clearIcon
-            icon.source: "image://theme/icon-m-backspace"
-            onClicked: searchField.text = ""
-            enabled: searchField.text.length > 0
-          }
         }
       }