live-preview: WIP: code/value mode for property

ogoffart · ogoffart · commit d8997a0a4e1e · 2025-10-02T10:38:59.000+02:00
This is a big WIP and incorporate some of @szecket's design This is not yet fully functional and needs lots of cleanup of the value widgets
diff --git a/tools/lsp/ui/assets/binding.svg b/tools/lsp/ui/assets/binding.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 -->
+<svg width="100%" height="100%" viewBox="0 0 29 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1234,-1651)">
+        <g transform="matrix(1,0,0,1,1.13687e-13,-582.164)">
+            <g id="binding" transform="matrix(1.20483,0,0,1.78178,-79.9912,-1767.49)">
+                <g transform="matrix(0.757818,0,0,0.835365,373.052,375.684)">
+                    <path d="M947.387,2245.94L947.387,2245.25L957.568,2239.05L958.478,2240.53L950.068,2245.49L958.502,2250.34L957.592,2251.78L947.387,2245.94Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1.45321,0,0,0.835365,-303.989,375.924)">
+                    <path d="M962.302,2242.23L973.411,2242.23L973.399,2243.55L962.29,2243.55L962.302,2242.23ZM962.302,2246.77L973.411,2246.77L973.411,2248.18L962.302,2248.18L962.302,2246.77Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(0.757818,0,0,0.835365,365.052,375.684)">
+                    <path d="M978.122,2251.78L977.212,2250.34L985.645,2245.49L977.236,2240.53L978.146,2239.05L988.327,2245.25L988.327,2245.94L978.122,2251.78Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tools/lsp/ui/assets/cconstant.svg b/tools/lsp/ui/assets/cconstant.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 -->
+<svg width="100%" height="100%" viewBox="0 0 15 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1194,-1650)">
+        <g transform="matrix(1.80511,0,0,1.76153,-494.864,-2299.46)">
+            <g id="cconstant" transform="matrix(0.553984,0,0,0.567689,299.656,1304.56)">
+                <path d="M1162.19,1653.65L1162.56,1659.13L1162.19,1659.13C1161.7,1657.49 1161,1656.31 1160.09,1655.59C1159.18,1654.86 1158.08,1654.5 1156.81,1654.5C1155.74,1654.5 1154.77,1654.78 1153.91,1655.32C1153.05,1655.86 1152.37,1656.73 1151.87,1657.91C1151.38,1659.1 1151.13,1660.58 1151.13,1662.35C1151.13,1663.81 1151.36,1665.07 1151.83,1666.14C1152.3,1667.21 1153,1668.03 1153.94,1668.6C1154.88,1669.17 1155.95,1669.45 1157.15,1669.45C1158.2,1669.45 1159.12,1669.23 1159.92,1668.78C1160.72,1668.34 1161.6,1667.45 1162.56,1666.12L1162.93,1666.35C1162.12,1667.79 1161.18,1668.84 1160.1,1669.5C1159.02,1670.17 1157.74,1670.5 1156.26,1670.5C1153.59,1670.5 1151.52,1669.51 1150.06,1667.53C1148.96,1666.06 1148.42,1664.32 1148.42,1662.32C1148.42,1660.72 1148.78,1659.24 1149.5,1657.89C1150.22,1656.54 1151.21,1655.5 1152.48,1654.76C1153.74,1654.02 1155.12,1653.65 1156.62,1653.65C1157.78,1653.65 1158.93,1653.93 1160.07,1654.5C1160.4,1654.68 1160.63,1654.77 1160.78,1654.77C1160.99,1654.77 1161.18,1654.69 1161.34,1654.54C1161.54,1654.33 1161.69,1654.03 1161.78,1653.65L1162.19,1653.65Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tools/lsp/ui/assets/code.svg b/tools/lsp/ui/assets/code.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 -->
+<svg width="100%" height="100%" viewBox="0 0 24 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1090,-1650)">
+        <g transform="matrix(1,0,0,1,1.13687e-13,-582.164)">
+            <g id="code" transform="matrix(1,0,0,1,-15.5544,582.288)">
+                <path d="M1114.81,1671.2L1114.81,1669.58L1113.52,1669.58C1111.74,1669.58 1111.4,1669.16 1111.4,1667.1L1111.4,1663.94C1111.4,1662.28 1110.15,1661.18 1107.75,1661.13L1107.75,1660.94C1110.15,1660.88 1111.4,1659.78 1111.4,1658.12L1111.4,1654.95C1111.4,1652.89 1111.74,1652.48 1113.52,1652.48L1114.81,1652.48L1114.81,1650.85L1113.2,1650.85C1110.32,1650.85 1109.41,1651.77 1109.41,1654.69L1109.41,1657.35C1109.41,1659.19 1108.34,1660.24 1105.57,1659.96L1105.57,1662.1C1108.34,1661.82 1109.41,1662.88 1109.41,1664.71L1109.41,1667.36C1109.41,1670.29 1110.32,1671.2 1113.2,1671.2L1114.81,1671.2Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                <g transform="matrix(1,0,0,1,-0.630198,0)">
+                    <path d="M1120.57,1671.2L1122.18,1671.2C1125.06,1671.2 1125.98,1670.29 1125.98,1667.36L1125.98,1664.71C1125.98,1662.88 1127.04,1661.82 1129.82,1662.1L1129.82,1659.96C1127.04,1660.24 1125.98,1659.19 1125.98,1657.35L1125.98,1654.69C1125.98,1651.77 1125.06,1650.85 1122.18,1650.85L1120.57,1650.85L1120.57,1652.48L1121.86,1652.48C1123.64,1652.48 1123.98,1652.89 1123.98,1654.95L1123.98,1658.12C1123.98,1659.78 1125.23,1660.88 1127.63,1660.94L1127.63,1661.13C1125.23,1661.18 1123.98,1662.28 1123.98,1663.94L1123.98,1667.1C1123.98,1669.16 1123.64,1669.58 1121.86,1669.58L1120.57,1669.58L1120.57,1671.2Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tools/lsp/ui/assets/constant.svg b/tools/lsp/ui/assets/constant.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 -->
+<svg width="100%" height="100%" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1153,-1650)">
+        <g transform="matrix(1,0,0,1,1.13687e-13,-582.164)">
+            <g transform="matrix(1.80511,0,0,1.76153,-655.612,-1722.86)">
+                <g id="constant">
+                    <path d="M1005.26,2256.55L1006.36,2256.55L1006.36,2247.46L1010.29,2247.46L1010.29,2254.07C1010.29,2255.85 1010.95,2256.65 1012.48,2256.65C1012.82,2256.65 1013.23,2256.61 1013.44,2256.53L1012.95,2255.64C1012.74,2255.69 1012.57,2255.7 1012.41,2255.7C1011.63,2255.7 1011.38,2255.36 1011.38,2254.45L1011.38,2247.46L1013.91,2247.46L1013.91,2246.46L1002.63,2246.46L1002.63,2247.46L1005.26,2247.46L1005.26,2256.55Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tools/lsp/ui/assets/revert.svg b/tools/lsp/ui/assets/revert.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0 -->
+<svg width="100%" height="100%" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1278,-1651)">
+        <g transform="matrix(1,0,0,1,1.13687e-13,-582.164)">
+            <g id="revert">
+                <g transform="matrix(5.02328e-17,-0.820364,0.820364,5.02328e-17,-1078.04,2962.65)">
+                    <path d="M883.955,2876.62C884.393,2876.96 884.808,2877.32 885.196,2877.7C887.37,2879.88 888.715,2882.88 888.715,2886.2C888.715,2892.83 883.331,2898.22 876.7,2898.22C870.064,2898.22 864.685,2892.84 864.685,2886.2L867.123,2886.2C867.123,2891.49 871.411,2895.78 876.7,2895.78C881.986,2895.78 886.277,2891.49 886.277,2886.2C886.277,2883.56 885.205,2881.16 883.472,2879.43C883.393,2879.35 883.313,2879.27 883.231,2879.2L882.751,2880.91L876.7,2875.41L884.731,2873.87L883.955,2876.62Z" style="fill:rgb(134,134,135);"/>
+                </g>
+                <g transform="matrix(0.68101,0,0,0.68101,538.393,281.044)">
+                    <path d="M1090.22,2897.89C1092.76,2897.89 1094.17,2895.71 1094.17,2891.77C1094.17,2887.82 1092.76,2885.64 1090.22,2885.64C1087.67,2885.64 1086.27,2887.82 1086.27,2891.77C1086.27,2895.71 1087.67,2897.89 1090.22,2897.89ZM1087.69,2891.77C1087.69,2888.58 1088.56,2886.91 1090.22,2886.91C1091.32,2886.91 1092.09,2887.66 1092.47,2889.11L1087.74,2893.06C1087.71,2892.66 1087.69,2892.23 1087.69,2891.77ZM1090.22,2896.62C1089.12,2896.62 1088.36,2895.88 1087.98,2894.44L1092.69,2890.46C1092.73,2890.87 1092.74,2891.3 1092.74,2891.77C1092.74,2894.94 1091.88,2896.62 1090.22,2896.62Z" style="fill:rgb(134,134,135);fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tools/lsp/ui/components/property-widgets.slint b/tools/lsp/ui/components/property-widgets.slint
