filling About in QML, button still disabled

using Loader, can be reused for other widgets conversion
leave onClick example with full path, commneted out
title text for About is hardcoded, discuss option to make this configurable in welcome.conf
background color hardcoded, tested to work well in dark themes too

src/modules/welcomeq/about.qml

@@ -0,0 +1,121 @@
+/* === This file is part of Calamares - <https://github.com/calamares> ===
+ *
+ *   Copyright 2020, Anke Boersma <demm@kaosx.us>
+ *
+ *   Calamares 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 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   Calamares 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 Calamares. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import io.calamares.ui 1.0
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+Item {
+    width: parent.width
+    height: parent.height
+    focus: true
+    
+    property var appName: "Calamares"
+    property var appVersion: "3.2.22"
+
+    Rectangle {
+        id: textArea
+        x: 28
+        y: 14
+        anchors.fill: parent
+        color: "#f2f2f2"
+        
+        Column {
+            id: column
+            x: 130
+            y: 40
+
+            
+            Rectangle {
+                width: 560
+                height: 250
+                radius: 10
+                border.width: 0
+                
+                Text {
+                    width: 400
+                    height: 250
+                    anchors.centerIn: parent
+                    text: qsTr("<h1>%1</h1><br/>
+                        <strong>%2<br/>
+                        for %3</strong><br/><br/>
+                        Copyright 2014-2017 Teo Mrnjavac &lt;teo@kde.org&gt;<br/>
+                        Copyright 2017-2020 Adriaan de Groot &lt;groot@kde.org&gt;<br/>
+                        Thanks to <a href='https://calamares.io/team/'>the Calamares team</a> 
+                        and the <a href='https://www.transifex.com/calamares/calamares/'>Calamares 
+                        translators team</a>.<br/><br/>
+                        <a href='https://calamares.io/'>Calamares</a> 
+                        development is sponsored by <br/>
+                        <a href='http://www.blue-systems.com/'>Blue Systems</a> - 
+                        Liberating Software." )
+                        .arg(appName)
+                        .arg(appVersion)
+                        .arg(Branding.string(Branding.VersionedName))
+                        
+                        onLinkActivated: Qt.openUrlExternally(link)
+                        
+                        MouseArea {
+                            anchors.fill: parent
+                            acceptedButtons: Qt.NoButton
+                            cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+                        }
+                        
+                    font.pointSize: 10
+                    anchors.verticalCenterOffset: 10
+                    anchors.horizontalCenterOffset: 40
+                    wrapMode: Text.WordWrap
+                }
+
+                Image {
+                    id: image
+                    x: 8
+                    y: 12
+                    height: 100
+                    fillMode: Image.PreserveAspectFit
+                    source: "img/squid.png"
+                }
+
+            }
+
+        }
+
+        ToolButton {
+            id: toolButton
+            x: 19
+            y: 29
+            width: 105
+            height: 48
+            text: qsTr("Back")
+            hoverEnabled: true
+            onClicked: load.source = ""
+
+            Image {
+                id: image1
+                x: 0
+                y: 13
+                width: 22
+                height: 22
+                source: "img/chevron-left-solid.svg"
+                fillMode: Image.PreserveAspectFit
+            }
+        }
+    }
+
+}

src/modules/welcomeq/img/chevron-left-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>

src/modules/welcomeq/welcomeq.qml

@@ -1,6 +1,7 @@
 /* === This file is part of Calamares - <https://github.com/calamares> ===
  *
  *   Copyright 2020, Adriaan de Groot <groot@kde.org>
+ *   Copyright 2020, Anke Boersma <demm@kaosx.us>
  *
  *   Calamares is free software: you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
@@ -32,7 +33,7 @@ Page
     {
         width: parent.width
         height: parent.height
-
+        
         Text
         {
             id: welcomeTopText
@@ -75,9 +76,12 @@ Page
                 icon.name: "dialog-information"
                 Kirigami.Theme.backgroundColor: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.4)
                 Kirigami.Theme.textColor: Kirigami.Theme.textColor
-
-                visible: false
-                onClicked: { } // TODO: show an about-Calamares window
+                
+                visible: true
+                onClicked: { 
+                    //onClicked: load.source = "file:/usr/share/calamares/branding/kaos_branding/show.qml"
+                    onClicked: load.source = "about.qml"
+                }
             }
             Button
             {
@@ -124,5 +128,10 @@ Page
                 onClicked: Qt.openUrlExternally(config.donateUrl)
             }
         }
+        Loader
+        { 
+            id:load 
+            anchors.fill: parent
+        }
     }
 }

src/modules/welcomeq/welcomeq.qrc

@@ -1,5 +1,8 @@
 <!DOCTYPE RCC><RCC version="1.0">
 <qresource>
   <file alias="welcomeq.qml">welcomeq.qml</file>
+  <file alias="about.qml">about.qml</file>
+  <file>img/squid.png</file>
+  <file>img/chevron-left-solid.svg</file>
 </qresource>
 </RCC>