Add sorting bar to Peers page

[johnny9]

[johnny9]

Updates from 8ab488f to c059cf3:

• Fix spacing between ToggleButtons
• Fix vertical spacing for ListView items
• Make "ID" checked by default

[johnny9]

ID	Direction	User Agent	Type	Ip	Network

[jarolrod]

toggle button text color doesn't work on light mode

[jarolrod]

Concept ACK

Diff on ToggleButton.qml

diff --git a/src/qml/controls/ToggleButton.qml b/src/qml/controls/ToggleButton.qml
index 05cf54e6a..ea72c5802 100644
--- a/src/qml/controls/ToggleButton.qml
+++ b/src/qml/controls/ToggleButton.qml
@@ -6,38 +6,30 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15

 Button {
-    property color defaultColor: Theme.color.neutral2
-    property color hoverColor: Theme.color.neutral2
-    property color activeColor: Theme.color.neutral5
+    id: root
+    property color bgDefaultColor: Theme.color.neutral2
+    property color bgHoverColor: Theme.color.neutral2
+    property color bgActiveColor: Theme.color.neutral5
     property color textColor: Theme.color.neutral7
     property color textHoverColor: Theme.color.orangeLight1
     property color textActiveColor: Theme.color.neutral9
-    id: root
-    checkable: true
     hoverEnabled: true
-    font.family: "Inter"
-    font.styleName: "Regular"
-    font.pixelSize: 13
+    checkable: true
     leftPadding: 12
     rightPadding: 12
     topPadding: 5
     bottomPadding: 5

-    contentItem: Text {
+    contentItem: Header {
         id: buttonText
-        text: parent.text
-        font: parent.font
-        color: Theme.color.white
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-
-        Behavior on color {
-            ColorAnimation { duration: 150 }
-        }
+        header: root.text
+        headerSize: 13
+        headerColor: root.textColor
     }
+
     background: Rectangle {
         id: bg
-        color: root.defaultColor
+        color: root.bgDefaultColor
         radius: 5

         Behavior on color {
@@ -45,24 +37,22 @@ Button {
         }
     }

-    state:"DEFAULT"
+    state: "DEFAULT"

     states: [
         State {
             name: "DEFAULT"
-            PropertyChanges { target: bg; color: root.defaultColor }
+            PropertyChanges { target: bg; color: root.bgDefaultColor }
         },
         State {
-            name: "CHECKED"
-            when: root.checked
-            PropertyChanges { target: bg; color: root.activeColor }
-            PropertyChanges { target: buttonText; color: root.textActiveColor }
+            name: "CHECKED"; when: root.checked
+            PropertyChanges { target: bg; color: root.bgActiveColor }
+            PropertyChanges { target: buttonText; headerColor: root.textActiveColor }
         },
         State {
-            name: "HOVER"
-            when: root.hovered
-            PropertyChanges { target: bg; color: root.hoverColor }
-            PropertyChanges { target: buttonText; color: root.textHoverColor }
+            name: "HOVER"; when: root.hovered
+            PropertyChanges { target: bg; color: root.bgHoverColor }
+            PropertyChanges { target: buttonText; headerColor: root.textHoverColor }
         }
     ]
 }

diff on Peers.qml

diff --git a/src/qml/pages/node/Peers.qml b/src/qml/pages/node/Peers.qml
index 2d9b8b2af..546bbc6b2 100644
--- a/src/qml/pages/node/Peers.qml
+++ b/src/qml/pages/node/Peers.qml
@@ -30,11 +30,12 @@ Page {
         horizontalAlignment: Text.AlignHCenter
     }

-    RowLayout {
+    Flow {
         id: sortSelection
         anchors.top: description.bottom
         anchors.topMargin: 20
         anchors.horizontalCenter: parent.horizontalCenter
+        width: Math.min(parent.width - 40, 450)
         spacing: 10
         ToggleButton {
             text: qsTr("ID")

[johnny9]

from c059cf3 to b36b8d5 :

• fixed togglebutton text color in light mode
• used CoreText to reduce duplication of Text font declarations
• removed explicit DEFAULT state
• prefix togglebutton background color properties with bg
• inline when statements
• Use Flow to wrap toggle button row

[johnny9]

Above fixes for lightmode and togglebutton wrapping:

[jarolrod]

The CoreText component needs review on its own. Can you move these changes out to its own independent PR?

PR	master

[hebasto]

Rebase?

[johnny9]

The CoreText component needs review on its own. Can you move these changes out to its own independent PR?
PR master

#274
Interesting that its wrapping for you. I'm not seeing that behavior. Ill try on the platforms I have. Might be macOS.

[hebasto]

Needs rebase again :)

[johnny9]

Update from 51a3e21 to a46d12d:

• rebased with main

[jarolrod]

ACK a46d12d

One thing to note is I believe that the toggle buttons have three states, selected, selected again, not selected. When selected again it should reverse the sorting order; so if selected is least to greatest, selected again would be greatest to least. We can connect with christoph about this soon.