chore(StatusLetterIdenticon): test different backgrounds

ui/StatusQ/sandbox/controls/Others.qml

@@ -4,38 +4,58 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
-GridLayout {
+ColumnLayout {
-    columns: 6
+    GridLayout {
-    columnSpacing: 5
+        Layout.fillWidth: true
-    rowSpacing: 5
+        Layout.fillHeight: true
 
-    StatusLoadingIndicator {
+        columns: 6
-        color: Theme.palette.directColor4
+        columnSpacing: 5
+        rowSpacing: 5
+
+        StatusLoadingIndicator {
+            color: Theme.palette.directColor4
+        }
+
+        StatusLetterIdenticon {
+            name: "#status"
+        }
+
+        StatusRoundedImage {
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        }
+
+        StatusBadge {}
+
+        StatusBadge {
+            value: 1
+        }
+
+        StatusBadge {
+            value: 10
+        }
+
+        StatusBadge {
+            value: 100
+        }
+
+        StatusRoundIcon {
+            icon.name: "info"
+        }
     }
 
-    StatusLetterIdenticon {
+    Flow {
-        name: "#status"
+        Layout.fillWidth: true
-    }
+        spacing: 4
 
-    StatusRoundedImage {
+        Repeater {
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            model: 12
-    }
+            StatusLetterIdenticon {
-
+                name: "A"
-    StatusBadge {}
+                color: Theme.palette.userCustomizationColors[index]
-
+                letterSize: 16
-    StatusBadge {
+            }
-        value: 1
+        }
-    }
-
-    StatusBadge {
-        value: 10
-    }
-
-    StatusBadge {
-        value: 100
-    }
-
-    StatusRoundIcon {
-        icon.name: "info"
     }
 }
+