Update BG map layout

qt/BackgroundMapForm.ui.qml

@@ -4,30 +4,54 @@ Item {
     width: 400
     height: 400
 
-    Grid {
-        id: grid1
-        x: 0
-        y: 0
-        width: 256
-        height: 256
-        rows: 32
-        columns: 32
-
-        Rectangle {
-            id: rectangle1
-            width: 200
-            height: 200
-            gradient: Gradient {
-                GradientStop {
-                    position: 0
-                    color: "#ffffff"
-                }
-
-                GradientStop {
-                    position: 1
-                    color: "#000000"
+    GridView {
+        id: bgmap_01
+        visible: true
+        smooth: false
+        enabled: false
+        keyNavigationWraps: false
+        interactive: false
+        anchors.fill: parent
+        flickableDirection: Flickable.VerticalFlick
+        delegate: Item {
+            x: 5
+            height: 50
+            Column {
+                width: 8
+                height: 8
+                spacing: 0
+                Rectangle {
+                    x: 0
+                    width: 8
+                    height: 8
+                    color: colorCode
+                    border.width: 1
+                    anchors.horizontalCenter: parent.horizontalCenter
                 }
             }
         }
+        cellWidth: 8
+        model: ListModel {
+            ListElement {
+                name: "Grey"
+                colorCode: "grey"
+            }
+
+            ListElement {
+                name: "Red"
+                colorCode: "red"
+            }
+
+            ListElement {
+                name: "Blue"
+                colorCode: "blue"
+            }
+
+            ListElement {
+                name: "Green"
+                colorCode: "green"
+            }
+        }
+        cellHeight: 8
     }
 }