some thoughts about icons

CMakeLists.txt

@@ -10,7 +10,7 @@ project(magpie
 set(PROJECT_LICENSE "GPL-3.0")
 
 set(CMAKE_AUTOMOC ON)
-set(CMAKE_AUTORCC ON)
+# set(CMAKE_AUTORCC ON)
 set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
@@ -61,6 +61,7 @@ add_subdirectory(qml)
 add_subdirectory(API)
 add_subdirectory(models)
 add_subdirectory(utils)
+add_subdirectory(resources)
 
 target_include_directories(magpie PRIVATE ${CMAKE_CURRENT_SOURCE_DIR})
 target_link_libraries(magpie PRIVATE

qml/Components/CMakeLists.txt

@@ -11,6 +11,7 @@ qt_add_qml_module(magpieComponents
     QML_FILES
         Modal.qml
         AssetLine.qml
+        IconPicker.qml
 )
 
 target_link_libraries(magpie PRIVATE magpieComponents)

qml/Components/IconPicker.qml

@@ -0,0 +1,54 @@
+//  SPDX-FileCopyrightText: 2023 Yury Gubich <blue@macaw.me>
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+
+ComboBox {
+    property string icon: ""
+
+    id: box
+    model: ["wallet", "whatever"]
+    delegate: MenuItem {
+        required property string modelData
+        required property int index
+
+        width: parent.width
+        highlighted: box.highlightedIndex === index
+        contentItem: View {
+            icon: modelData
+        }
+    }
+    contentItem: View {
+        icon: currentText
+        padding: 5
+    }
+
+    component View: Row {
+        required property string icon
+        property int iconSize: 20
+
+        spacing: 5
+        IconImage {
+            id: image
+            anchors.verticalCenter: parent.verticalCenter
+            color: palette.text
+            source: "qrc:/icons/" + icon + ".svg"
+            height: parent.iconSize
+            width: parent.iconSize
+
+            IconImage {
+                id: fallback
+                anchors.fill: parent
+                source: "qrc:/icons/wallet.svg"
+                visible: parent.status == Image.Error
+                color: palette.text
+            }
+        }
+
+        Label {
+            anchors.verticalCenter: parent.verticalCenter
+            text: icon
+        }
+    }
+}

qml/Forms/AddAsset.qml

@@ -36,15 +36,16 @@ Item {
 
             TextField {
                 id: titleField
+                text: "New Asset"
             }
 
             Label {
                 text: qsTr("Icon") + ":";
             }
 
-            TextField {
+            Components.IconPicker {
                 id: iconField
-                text: "list-add"
+                icon: "list-add"
             }
 
             Label {
@@ -66,7 +67,7 @@ Item {
 
             Button {
                 text: qsTr("Create")
-                onClicked: inner.send(titleField.text, iconField.text, colorField.text)
+                onClicked: inner.confirm()
             }
         }
 
@@ -74,12 +75,17 @@ Item {
             id: modal
         }
 
+        function confirm () {
+            //TODO validation
+            send(titleField.text, iconField.icon, colorField.text);
+        }
+
         function send (title, icon, color) {
             if (modal.inProgress)
                 return;
 
             titleField.text = title;
-            iconField.text = icon;
+            iconField.icon = icon;
             colorField.text = color;
 
             modal.inProgress = true;

resources/CMakeLists.txt

@@ -0,0 +1,5 @@
+qt_add_resources(magpie "magpieIcons"
+    PREFIX "/"
+    FILES
+        icons/wallet.svg
+)

resources/icons/unknown.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.2" width="25mm" height="25mm" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="2" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xmlns:svg="urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0" xml:space="preserve">
+
+</svg>

resources/icons/wallet.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.2" width="25mm" height="25mm" viewBox="0 0 2500 2500" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xmlns:svg="urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0" xml:space="preserve">
+ <defs class="ClipPathGroup">
+  <clipPath id="presentation_clip_path" clipPathUnits="userSpaceOnUse">
+   <rect x="0" y="0" width="2500" height="2500"/>
+  </clipPath>
+  <clipPath id="presentation_clip_path_shrink" clipPathUnits="userSpaceOnUse">
+   <rect x="2" y="2" width="2495" height="2495"/>
+  </clipPath>
+ </defs>
+ <defs class="TextShapeIndex">
+  <g ooo:slide="id1" ooo:id-list="id3 id4 id5 id6"/>
+ </defs>
+ <defs class="EmbeddedBulletChars">
+  <g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
+  </g>
+  <g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
+  </g>
+  <g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
+  </g>
+  <g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
+  </g>
+  <g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
+  </g>
+  <g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
+  </g>
+  <g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
+  </g>
+  <g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
+  </g>
+  <g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
+  </g>
+  <g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
+   <path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
+  </g>
+ </defs>
+ <g>
+  <g id="id2" class="Master_Slide">
+   <g id="bg-id2" class="Background"/>
+   <g id="bo-id2" class="BackgroundObjects"/>
+  </g>
+ </g>
+ <g class="SlideGroup">
+  <g>
+   <g id="container-id1">
+    <g id="id1" class="Slide" clip-path="url(#presentation_clip_path)">
+     <g class="Page">
+      <g class="Group">
+       <g class="com.sun.star.drawing.ClosedBezierShape">
+        <g id="id3">
+         <rect class="BoundingBox" stroke="none" fill="none" x="1414" y="1144" width="873" height="473"/>
+         <path fill="none" stroke="rgb(0,0,0)" stroke-width="71" stroke-linejoin="round" d="M 1650,1180 L 2250,1180 2250,1580 1650,1580 C 1650,1580 1450,1580 1450,1380 1450,1180 1650,1180 1650,1180 Z"/>
+        </g>
+       </g>
+       <g class="com.sun.star.drawing.OpenBezierShape">
+        <g id="id4">
+         <rect class="BoundingBox" stroke="none" fill="none" x="214" y="544" width="1973" height="1673"/>
+         <path fill="none" stroke="rgb(0,0,0)" stroke-width="71" stroke-linejoin="round" d="M 2150,1580 L 2150,1880 C 2150,2080 2050,2180 1850,2180 L 550,2180 C 350,2180 250,2080 250,1880 L 250,880 C 250,680 350,580 550,580 L 1850,580 C 2050,580 2150,680 2150,880 L 2150,1180"/>
+        </g>
+       </g>
+       <g class="com.sun.star.drawing.CustomShape">
+        <g id="id5">
+         <rect class="BoundingBox" stroke="none" fill="none" x="1600" y="1330" width="102" height="102"/>
+         <path fill="rgb(0,0,0)" stroke="none" d="M 1701,1381 C 1701,1389 1699,1398 1694,1406 1690,1413 1683,1420 1676,1424 1668,1429 1659,1431 1651,1431 1642,1431 1633,1429 1625,1424 1618,1420 1611,1413 1607,1406 1602,1398 1600,1389 1600,1381 1600,1372 1602,1363 1607,1355 1611,1348 1618,1341 1625,1337 1633,1332 1642,1330 1651,1330 1659,1330 1668,1332 1676,1337 1683,1341 1690,1348 1694,1355 1699,1363 1701,1372 1701,1381 L 1701,1381 Z"/>
+        </g>
+       </g>
+       <g class="com.sun.star.drawing.OpenBezierShape">
+        <g id="id6">
+         <rect class="BoundingBox" stroke="none" fill="none" x="364" y="285" width="1323" height="357"/>
+         <path fill="none" stroke="rgb(0,0,0)" stroke-width="71" stroke-linejoin="round" d="M 400,605 C 400,605 1350,355 1450,330 1550,305 1650,330 1650,430 L 1650,580"/>
+        </g>
+       </g>
+      </g>
+     </g>
+    </g>
+   </g>
+  </g>
+ </g>
+</svg>