controlcenter: polishing appearance panel

1 files changed, 46 insertions, 35 deletions

diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index b2692c8..c8a4522 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -108,6 +108,7 @@ RowLayout {
             StyledListView {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                Layout.topMargin: 0
 
                 model: M3Variants.list
                 spacing: Appearance.spacing.small / 2
@@ -202,6 +203,7 @@ RowLayout {
             StyledListView {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                Layout.topMargin: 0
 
                 model: Schemes.list
                 spacing: Appearance.spacing.small / 2
@@ -262,66 +264,75 @@ RowLayout {
 
                         spacing: Appearance.spacing.normal
 
-                        Item {
-                            readonly property real itemHeight: schemeRow.implicitHeight || 50
-                            Layout.preferredWidth: itemHeight * 0.8
-                            Layout.preferredHeight: itemHeight * 0.8
+                        StyledRect {
+                            id: preview
 
-                            StyledRect {
-                                id: preview
+                            anchors.verticalCenter: parent.verticalCenter
 
-                                anchors.verticalCenter: parent.verticalCenter
+                            border.width: 1
+                            border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5)
 
-                                border.width: 1
-                                border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5)
+                            color: `#${modelData.colours?.surface}`
+                            radius: Appearance.rounding.full
+                            implicitWidth: iconPlaceholder.implicitWidth
+                            implicitHeight: iconPlaceholder.implicitWidth
 
-                                color: `#${modelData.colours?.surface}`
-                                radius: Appearance.rounding.full
-                                implicitWidth: parent.itemHeight * 0.8
-                                implicitHeight: parent.itemHeight * 0.8
+                            MaterialIcon {
+                                id: iconPlaceholder
+                                visible: false
+                                text: "circle"
+                                font.pointSize: Appearance.font.size.large
+                            }
+
+                            Item {
+                                anchors.top: parent.top
+                                anchors.bottom: parent.bottom
+                                anchors.right: parent.right
+
+                                implicitWidth: parent.implicitWidth / 2
+                                clip: true
 
-                                Item {
+                                StyledRect {
                                     anchors.top: parent.top
                                     anchors.bottom: parent.bottom
                                     anchors.right: parent.right
 
-                                    implicitWidth: parent.implicitWidth / 2
-                                    clip: true
-
-                                    StyledRect {
-                                        anchors.top: parent.top
-                                        anchors.bottom: parent.bottom
-                                        anchors.right: parent.right
-
-                                        implicitWidth: preview.implicitWidth
-                                        color: `#${modelData.colours?.primary}`
-                                        radius: Appearance.rounding.full
-                                    }
+                                    implicitWidth: preview.implicitWidth
+                                    color: `#${modelData.colours?.primary}`
+                                    radius: Appearance.rounding.full
                                 }
                             }
                         }
 
-                        ColumnLayout {
+                        Column {
                             Layout.fillWidth: true
                             spacing: 0
 
                             StyledText {
-                                text: modelData.name
-                                font.weight: isCurrent ? 500 : 400
+                                text: modelData.flavour ?? ""
+                                font.pointSize: Appearance.font.size.normal
                             }
 
                             StyledText {
-                                text: modelData.flavour
+                                text: modelData.name ?? ""
                                 font.pointSize: Appearance.font.size.small
                                 color: Colours.palette.m3outline
+
+                                elide: Text.ElideRight
+                                anchors.left: parent.left
+                                anchors.right: parent.right
                             }
                         }
 
-                        MaterialIcon {
-                            visible: isCurrent
-                            text: "check"
-                            color: Colours.palette.m3primary
-                            font.pointSize: Appearance.font.size.large
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
                         }
                     }