qml: refactor Setting and ExternalLink controls to be AbstractButtons

This will allow us to make the entire setting clickable, engaging the
action item. Will also allow for color interaction states.

Author: jarolrod

src/qml/controls/ExternalLink.qml

@@ -6,7 +6,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
-Control {
+AbstractButton {
     id: root
     required property string link
     property string description: ""
@@ -29,7 +29,6 @@ Control {
                 color: Theme.color.neutral7
                 textFormat: Text.RichText
                 text: "<style>a:link { color: " + Theme.color.neutral7 + "; text-decoration: none;}</style>" + "<a href=\"" + link + "\">" + root.description + "</a>"
-                onLinkActivated: Qt.openUrlExternally(link)
             }
         }
         Loader {
@@ -42,8 +41,9 @@ Control {
                 icon.height: root.iconHeight
                 icon.width: root.iconWidth
                 background: null
-                onClicked: Qt.openUrlExternally(link)
+                onClicked: root.clicked()
             }
         }
     }
+    onClicked: Qt.openUrlExternally(link)
 }

src/qml/controls/Setting.qml

@@ -6,39 +6,42 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
-ColumnLayout {
+AbstractButton {
     id: root
     property bool last: parent && root === parent.children[parent.children.length - 1]
     required property string header
     property alias actionItem: action_loader.sourceComponent
     property string description
 
-    spacing: 20
-    RowLayout {
-        Header {
-            Layout.fillWidth: true
-            center: false
-            header: root.header
-            headerSize: 18
-            description: root.description
-            descriptionSize: 15
-            descriptionMargin: 0
+    contentItem: ColumnLayout {
+        spacing: 20
+        width: parent.width
+        RowLayout {
+            Header {
+                Layout.fillWidth: true
+                center: false
+                header: root.header
+                headerSize: 18
+                description: root.description
+                descriptionSize: 15
+                descriptionMargin: 0
+            }
+            Loader {
+                id: action_loader
+                active: true
+                visible: active
+                sourceComponent: root.actionItem
+            }
         }
         Loader {
-            id: action_loader
-            active: true
+            Layout.fillWidth: true
+            Layout.columnSpan: 2
+            active: !last
             visible: active
-            sourceComponent: root.actionItem
-        }
-    }
-    Loader {
-        Layout.fillWidth: true
-        Layout.columnSpan: 2
-        active: !last
-        visible: active
-        sourceComponent: Rectangle {
-            height: 1
-            color: Theme.color.neutral5
+            sourceComponent: Rectangle {
+                height: 1
+                color: Theme.color.neutral5
+            }
         }
     }
 }