Rewrite AboutPage, add GitHub and Ko-Fi links

direc85 · Nov 17, 2020 · 8e5fded · 8e5fded
1 parent a38f5d3
commit 8e5fded
Show file tree

Hide file tree

Showing 13 changed files with 222 additions and 145 deletions.
diff --git a/images/Ko-fi_Icon_RGB_rounded.png b/images/Ko-fi_Icon_RGB_rounded.png
diff --git a/qml/AboutLabel.qml b/qml/AboutLabel.qml
@@ -0,0 +1,29 @@
+/*
+    ThumbTerm Copyright Olli Vanhoja
+    FingerTerm Copyright 2011-2012 Heikki Holstila <[email protected]>
+    ToeTerm Copyright 2018 ROZZ, 2019-2020 Matti Viljanen <[email protected]>
+
+    This file is part of ToeTerm.
+
+    ToeTerm is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 2 of the License, or
+    (at your option) any later version.
+
+    ToeTerm is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with ToeTerm.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+Label {
+    anchors.horizontalCenter: parent.horizontalCenter
+    width: parent.width - 2*Theme.horizontalPageMargin
+    horizontalAlignment: Text.AlignHCenter
+    wrapMode: Text.Wrap
+}
diff --git a/qml/AboutPage.qml b/qml/AboutPage.qml
@@ -24,127 +24,129 @@ import Sailfish.Silica 1.0
 
 Page {
     id: aboutPage
-    allowedOrientations: Orientation.All
+
+    allowedOrientations: Orientation.Portrait | Orientation.Landscape | Orientation.LandscapeInverted
+
     SilicaFlickable {
+        id: aboutFlickable
         anchors.fill: parent
-        contentHeight: column.height + Theme.paddingLarge
+        contentHeight: header.height + column.height
+
+        VerticalScrollDecorator {
+            flickable: aboutFlickable
+        }
+
+        PageHeader {
+            id: header
+            title: qsTr("About")
+        }
+
         Column {
             id: column
-            width: parent.width
-            spacing: Theme.paddingLarge
-            PageHeader {
-                title: qsTr("About")
+            anchors {
+                top: header.bottom
+                horizontalCenter: parent.horizontalCenter
             }
+            width: Math.min(Screen.width, aboutFlickable.width)
+            spacing: Theme.paddingLarge
+
             Image {
                 anchors.horizontalCenter: parent.horizontalCenter
                 source: "file:///usr/share/icons/hicolor/172x172/apps/toeterm.png"
-                width: Screen.width / 3
-                height: Screen.width / 3
+                width: Theme.iconSizeExtraLarge
+                height: Theme.iconSizeExtraLarge
+                smooth: true
+                asynchronous: true
             }
-            Column {
-                width: parent.width
-                spacing: Theme.paddingSmall
-                Label {
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    text: "ToeTerm " + util.versionString()
-                    color: Theme.highlightColor
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: Theme.fontSizeLarge
-                }
-                Label {
-                    anchors.right: parent.right
-                    anchors.left: parent.left
-                    text: "by ROZZ & direc85"
-                    color: Theme.rgba(Theme.highlightColor, 0.5)
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: Theme.fontSizeSmall
 
-                }
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeLarge
+                color: Theme.highlightColor
+                text: "ToeTerm" + util.versionString()
             }
-            Column {
-                width: parent.width
-                spacing: Theme.paddingSmall
-                Rectangle {
-                    width: parent.width
-                    height: nameText1.height
-                    color: "transparent"
-                    Label {
-                        id: nameText1
-                        x: 0
-                        width: parent.width/2 - Theme.paddingMedium/2
-                        text: qsTr("Terminal size")
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.rgba(Theme.highlightColor, 0.5)
-                        horizontalAlignment: Text.AlignRight
-                    }
-                    Label {
-                        x: parent.width/2 + Theme.paddingMedium/2
-                        width: parent.width/2 - Theme.paddingMedium/2
-                        text: term.termSize().width + "×" + term.termSize().height
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.highlightColor
-                        horizontalAlignment: Text.AlignLeft
-                    }
-                }
-                Rectangle {
-                    width: parent.width
-                    height: nameText1.height
-                    color: "transparent"
-                    Label {
-                        id: nameText2
-                        x: 0
-                        width: parent.width/2 - Theme.paddingMedium/2
-                        text: qsTr("Charset")
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.rgba(Theme.highlightColor, 0.5)
-                        horizontalAlignment: Text.AlignRight
-                    }
-                    Label {
-                        x: parent.width/2 + Theme.paddingMedium/2
-                        width: parent.width/2 - Theme.paddinMedium/2
-                        text: util.settingsValue("terminal/charset")
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.highlightColor
-                        horizontalAlignment: Text.AlignLeft
-                    }
-                }
+
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.secondaryHighlightColor
+                text: "by ROZZ & direc85"
             }
-            Label {
-                x: Theme.paddingLarge
-                width: parent.width - Theme.paddingLarge * 2
+
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeMedium
                 text: qsTr("Based on ThumbTerm by Olli Vanhoja, which is fork of FingerTerm by Heikki Holstila")
-                horizontalAlignment: Text.AlignLeft
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: Theme.fontSizeExtraSmall
-                wrapMode: Text.Wrap
+            }
+
+            DetailItem {
+                label: qsTr("Terminal size")
+                value: term.termSize().width + "×" + term.termSize().height
+            }
+
+            DetailItem {
+                label: qsTr("Charset")
+                value: util.settingsValue("terminal/charset")
+            }
+
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeSmall
                 color: Theme.highlightColor
+                text: qsTr("Config files for adjusting settings are at:")
             }
-            Column {
-                width: parent.width
-                Label {
-                    x: Theme.paddingLarge
-                    width: parent.width - Theme.paddingLarge * 2
-                    text: qsTr("Config files for adjusting settings are at:")
-                    horizontalAlignment: Text.AlignLeft
-                    verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: Theme.fontSizeExtraSmall
-                    wrapMode: Text.Wrap
-                    color: Theme.highlightColor
-                }
-                Label {
-                    x: Theme.paddingLarge
-                    width: parent.width - Theme.paddingLarge * 2
-                    text: util.configPath()
-                    horizontalAlignment: Text.AlignLeft
-                    verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: Theme.fontSizeExtraSmall
-                    wrapMode: Text.Wrap
-                    color: Theme.rgba(Theme.highlightColor, 0.5)
+
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.secondaryHighlightColor
+                text: util.configPath() + "/"
+            }
+
+            BackgroundItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: Theme.iconSizeExtraLarge * 1.2
+                height: Theme.iconSizeExtraLarge * 1.2
+                onClicked: Qt.openUrlExternally("https://ko-fi.com/direc85")
+                contentItem.radius: Theme.paddingSmall
+
+                Image {
+                    anchors.centerIn: parent
+                    source: "file:///usr/share/toeterm/images/Ko-fi_Icon_RGB_rounded.png"
+                    width: Theme.iconSizeExtraLarge
+                    height: Theme.iconSizeExtraLarge
+                    smooth: true
+                    asynchronous: true
                 }
             }
+
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.secondaryColor
+                text: qsTr("If you like my work and would like to support me, you can buy me a coffee!")
+            }
+
+/*
+
+            // Translations credits will be added in a later release
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.primaryColor
+                text: qsTr("Translations")
+            }
+
+            AboutLabel {
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.secondaryColor
+                text: "Suomi: Matti Viljanen"
+            }
+*/
+
+            Button {
+                text: "GitHub"
+                anchors.horizontalCenter: parent.horizontalCenter
+                onClicked: Qt.openUrlExternally("https://github.com/direc85/toeterm")
+            }
+
+            Item {
+                width: parent.width
+                height: Theme.paddingMedium
+            }
         }
     }
 }
diff --git a/resources.qrc b/resources.qrc
@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/">
+        <file>qml/AboutLabel.qml</file>
         <file>qml/AboutPage.qml</file>
         <file>qml/Key.qml</file>
         <file>qml/Keyboard.qml</file>

diff --git a/toeterm.pro b/toeterm.pro
@@ -34,7 +34,11 @@ RESOURCES += \
     resources.qrc
 
 target.path = /usr/bin
-INSTALLS += target
+
+images.files = images
+images.path = /usr/share/$${TARGET}
+
+INSTALLS += target images
 
 SAILFISHAPP_ICONS = 86x86 108x108 128x128 172x172
 
@@ -49,6 +53,7 @@ TRANSLATIONS += translations/toeterm-ru.ts \
     translations/toeterm-zh_CN.ts
 
 DISTFILES += \
+    qml/AboutLabel.qml \
     translations/toeterm-nl.ts \
     translations/toeterm-ru.ts \
     rpm/toeterm.yaml \

diff --git a/translations/toeterm-es.ts b/translations/toeterm-es.ts
@@ -4,30 +4,35 @@
 <context>
     <name>AboutPage</name>
     <message>
-        <location filename="../qml/AboutPage.qml" line="36"/>
+        <location filename="../qml/AboutPage.qml" line="41"/>
         <source>About</source>
         <translation>Acerca de</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="78"/>
+        <location filename="../qml/AboutPage.qml" line="80"/>
         <source>Terminal size</source>
         <translation>Tamaño del terminal</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="100"/>
+        <location filename="../qml/AboutPage.qml" line="85"/>
         <source>Charset</source>
         <translation>Juego de caracteres</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="118"/>
+        <location filename="../qml/AboutPage.qml" line="76"/>
         <source>Based on ThumbTerm by Olli Vanhoja, which is fork of FingerTerm by Heikki Holstila</source>
         <translation>Basado en ThumbTerm de Olli Vanhoja, un fork de FingerTerm desarrollado por Heikki Holstila</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="130"/>
+        <location filename="../qml/AboutPage.qml" line="92"/>
         <source>Config files for adjusting settings are at:</source>
         <translation>Los archivos de configuración se almacenan en:</translation>
     </message>
+    <message>
+        <location filename="../qml/AboutPage.qml" line="121"/>
+        <source>If you like my work and would like to support me, you can buy me a coffee!</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>MainPage</name>

diff --git a/translations/toeterm-fi_FI.ts b/translations/toeterm-fi_FI.ts
@@ -4,30 +4,35 @@
 <context>
     <name>AboutPage</name>
     <message>
-        <location filename="../qml/AboutPage.qml" line="36"/>
+        <location filename="../qml/AboutPage.qml" line="41"/>
         <source>About</source>
         <translation>Tietoja</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="78"/>
+        <location filename="../qml/AboutPage.qml" line="80"/>
         <source>Terminal size</source>
         <translation>Päätteen koko</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="100"/>
+        <location filename="../qml/AboutPage.qml" line="85"/>
         <source>Charset</source>
         <translation>Merkistö</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="118"/>
+        <location filename="../qml/AboutPage.qml" line="76"/>
         <source>Based on ThumbTerm by Olli Vanhoja, which is fork of FingerTerm by Heikki Holstila</source>
         <translation>Perustuu Olli Vanhojan ThumbTerm-sovellukseen, joka perustuu Heikki Holstilan FingerTerm-sovellukseen</translation>
     </message>
     <message>
-        <location filename="../qml/AboutPage.qml" line="130"/>
+        <location filename="../qml/AboutPage.qml" line="92"/>
         <source>Config files for adjusting settings are at:</source>
         <translation>Muokattavien asetustiedostojen sijainti:</translation>
     </message>
+    <message>
+        <location filename="../qml/AboutPage.qml" line="121"/>
+        <source>If you like my work and would like to support me, you can buy me a coffee!</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>MainPage</name>