huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): onboarding flow for first time users ✅

Browse Source 
adds a wizard to guide people through starting and creating their first stream
This commit is contained in:
Dimitrie Stefanescu
2021-03-09 23:04:50 +00:00
parent 85b6953790
commit 1682a4a494
11 changed files with 511 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@speckle/frontend",
"version": "2.1.0",
"version": "2.2.1",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
packages/frontend/src/assets/onboardingsplash.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

packages/frontend/src/assets/splash.svg
+249
View File
@@ -0,0 +1,249 @@
<?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">
<svg width="100%" height="100%" viewBox="0 0 997 769" 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,-3958,-1864)">
<g id="devs" transform="matrix(1,0,0,1,2934.11,-10.551)">
<rect x="1024" y="1875.4" width="995.978" height="768" style="fill:none;"/>
<g transform="matrix(1,0,0,1,14.9065,16.6081)">
<g transform="matrix(1,0,0,1,-29.4313,15.2744)">
<g transform="matrix(0.556609,0,0,0.556609,737.492,974.014)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial1);"/>
</g>
<g transform="matrix(0.482727,-0.278703,0.557405,0.321818,736.148,973.087)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(1,0,0,1,0,-70.5477)">
<g transform="matrix(0.556609,0,0,0.556609,558.017,1301.2)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial2);"/>
</g>
<g transform="matrix(0.482727,-0.278703,0.557405,0.321818,556.673,1300.27)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(1,0,0,1,0,-70.5477)">
<g transform="matrix(0.556609,0,0,0.556609,558.017,1252.14)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial3);"/>
</g>
<g transform="matrix(0.482727,-0.278703,0.557405,0.321818,556.673,1251.22)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(1,0,0,0.590914,-4.54747e-13,927.132)">
<g transform="matrix(4.41926e-17,0.721719,-0.187381,1.14738e-17,1917.43,-929.382)">
<clipPath id="_clip4">
<rect x="4427.94" y="2248.85" width="214.08" height="68.028"/>
</clipPath>
<g clip-path="url(#_clip4)">
<g transform="matrix(8.48423e-17,-5.33673,2.34481,5.53009e-16,3470.31,4848.15)">
<use xlink:href="#_Image5" x="483.725" y="411.539" width="12.747px" height="91.299px" transform="matrix(0.980542,0,0,0.992383,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(4.41926e-17,0.721719,-0.187381,1.14738e-17,1938.81,-929.382)">
<clipPath id="_clip6">
<rect x="4427.94" y="2248.85" width="214.08" height="68.028"/>
</clipPath>
<g clip-path="url(#_clip6)">
<g transform="matrix(8.48423e-17,-5.33673,2.34481,5.53009e-16,3470.31,4962.25)">
<use xlink:href="#_Image5" x="505.529" y="411.539" width="12.747px" height="91.299px" transform="matrix(0.980542,0,0,0.992383,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(4.41926e-17,0.721719,-0.187381,1.14738e-17,1963.76,-929.382)">
<clipPath id="_clip7">
<rect x="4427.94" y="2248.85" width="214.08" height="68.028"/>
</clipPath>
<g clip-path="url(#_clip7)">
<g transform="matrix(8.48423e-17,-5.33673,2.34481,5.53009e-16,3470.31,5095.41)">
<use xlink:href="#_Image5" x="530.975" y="411.539" width="12.747px" height="91.299px" transform="matrix(0.980542,0,0,0.992383,0,0)"/>
</g>
</g>
</g>
</g>
<g transform="matrix(0.785519,0,0,0.785519,-1990.09,499.836)">
<g transform="matrix(0.708588,0,0,0.708588,3243.86,732.695)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial8);"/>
</g>
<g transform="matrix(0.614533,-0.354801,0.709601,0.409689,3242.15,731.515)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(37,99,235);"/>
</g>
</g>
<g transform="matrix(3.36792,-1.94447,0.544272,0.314236,-1836.01,1629.53)">
<clipPath id="_clip9">
<rect x="348.837" y="4017.54" width="23.533" height="75.348"/>
</clipPath>
<g clip-path="url(#_clip9)">
<g transform="matrix(0.14846,0.918658,-0.25714,1.59116,363.633,2977.02)">
<use xlink:href="#_Image10" x="519.642" y="312.497" width="120.267px" height="69.436px" transform="matrix(0.993944,0,0,0.991947,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,0,10)">
<g transform="matrix(-1.54203,-0.890293,0.104003,-0.060046,1564.74,2738.08)">
<clipPath id="_clip11">
<rect x="317.463" y="4041.6" width="57.199" height="89.822"/>
</clipPath>
<g clip-path="url(#_clip11)">
<g transform="matrix(-0.324247,4.80757,-0.561613,-8.32695,680.115,4740.3)">
<use xlink:href="#_Image12" x="400.21" y="312.242" width="97.545px" height="56.317px" transform="matrix(0.995354,0,0,0.988025,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(-1.54203,-0.890293,0.104003,-0.060046,1544.61,2749.7)">
<clipPath id="_clip13">
<rect x="317.463" y="4041.6" width="57.199" height="89.822"/>
</clipPath>
<g clip-path="url(#_clip13)">
<g transform="matrix(-0.324247,4.80757,-0.561613,-8.32695,680.115,4933.82)">
<use xlink:href="#_Image12" x="379.99" y="324.003" width="97.545px" height="56.317px" transform="matrix(0.995354,0,0,0.988025,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(-1.54203,-0.890293,0.104003,-0.060046,1522.97,2762.2)">
<clipPath id="_clip14">
<rect x="317.463" y="4041.6" width="57.199" height="89.822"/>
</clipPath>
<g clip-path="url(#_clip14)">
<g transform="matrix(-0.324247,4.80757,-0.561613,-8.32695,680.115,5141.93)">
<use xlink:href="#_Image12" x="358.245" y="336.651" width="97.545px" height="56.317px" transform="matrix(0.995354,0,0,0.988025,0,0)"/>
</g>
</g>
</g>
</g>
<g transform="matrix(-0.830211,-9.20644e-17,2.77667e-16,-0.839612,2754.97,4122.21)">
<g transform="matrix(-1.54203,-0.890293,0.104003,-0.060046,1570.11,2734.48)">
<clipPath id="_clip15">
<rect x="317.463" y="4041.6" width="57.199" height="89.822"/>
</clipPath>
<g clip-path="url(#_clip15)">
<g transform="matrix(0.39056,-5.79078,0.668896,9.91761,-151.653,2875.93)">
<use xlink:href="#_Image16" x="492.27" y="415.625" width="80.983px" height="47.285px" transform="matrix(0.999786,0,0,0.9851,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(-1.54203,-0.890293,0.104003,-0.060046,1508.59,2769.81)">
<clipPath id="_clip17">
<rect x="317.463" y="4041.6" width="57.199" height="89.822"/>
</clipPath>
<g clip-path="url(#_clip17)">
<g transform="matrix(0.39056,-5.79078,0.668896,9.91761,-151.757,3465.86)">
<use xlink:href="#_Image16" x="543.351" y="385.513" width="80.983px" height="47.285px" transform="matrix(0.999786,0,0,0.9851,0,0)"/>
</g>
</g>
</g>
</g>
<g transform="matrix(0.785519,0,0,0.597818,284.221,915.242)">
<g transform="matrix(5.62591e-17,0.91878,-0.238544,1.46066e-17,2264.17,-2166.43)">
<clipPath id="_clip18">
<rect x="4427.94" y="2248.85" width="214.08" height="68.028"/>
</clipPath>
<g clip-path="url(#_clip18)">
<g transform="matrix(8.48423e-17,-5.33673,1.82062,4.29382e-16,4074.24,5623.79)">
<use xlink:href="#_Image19" x="631.949" y="194.96" width="12.747px" height="117.586px" transform="matrix(0.980542,0,0,0.996492,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(5.62591e-17,0.91878,-0.238544,1.46066e-17,2291.39,-2166.43)">
<clipPath id="_clip20">
<rect x="4427.94" y="2248.85" width="214.08" height="68.028"/>
</clipPath>
<g clip-path="url(#_clip20)">
<g transform="matrix(8.48423e-17,-5.33673,1.82062,4.29382e-16,4074.24,5737.89)">
<use xlink:href="#_Image19" x="653.754" y="194.96" width="12.747px" height="117.586px" transform="matrix(0.980542,0,0,0.996492,0,0)"/>
</g>
</g>
</g>
<g transform="matrix(5.62591e-17,0.91878,-0.238544,1.46066e-17,2323.16,-2166.43)">
<clipPath id="_clip21">
<rect x="4427.94" y="2248.85" width="214.08" height="68.028"/>
</clipPath>
<g clip-path="url(#_clip21)">
<g transform="matrix(8.48423e-17,-5.33673,1.82062,4.29382e-16,4074.24,5871.05)">
<use xlink:href="#_Image19" x="679.2" y="194.96" width="12.747px" height="117.586px" transform="matrix(0.980542,0,0,0.996492,0,0)"/>
</g>
</g>
</g>
</g>
<g transform="matrix(1.50894,0,0,1.50894,-984.123,-1457.54)">
<g>
<g transform="matrix(0.368875,0,0,0.368875,1121.71,1555.77)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial22);"/>
</g>
<g transform="matrix(0.319912,-0.184701,0.369403,0.213275,1120.82,1555.16)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
</g>
<g transform="matrix(0.785519,0,0,0.785519,-1990.09,460.263)">
<g transform="matrix(0.708588,0,0,0.708588,3243.86,732.695)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial23);"/>
</g>
<g transform="matrix(0.614533,-0.354801,0.709601,0.409689,3242.15,731.515)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(37,99,235);"/>
</g>
</g>
<g transform="matrix(1.50894,0,0,1.50894,-1292.7,-1350.8)">
<g transform="matrix(0.368875,0,0,0.368875,1121.71,1555.77)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial24);"/>
</g>
<g transform="matrix(0.319912,-0.184701,0.369403,0.213275,1120.82,1555.16)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(1,0,0,1,-16.3136,-12.923)">
<g transform="matrix(0.700752,0,0,0.700752,386.322,699.249)">
<g transform="matrix(0.368875,0,0,0.368875,1121.71,1555.77)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial25);"/>
</g>
<g transform="matrix(0.319912,-0.184701,0.369403,0.213275,1120.82,1555.16)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(0.700752,0,0,0.700752,436.68,670.174)">
<g transform="matrix(0.368875,0,0,0.368875,1121.71,1555.77)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial26);"/>
</g>
<g transform="matrix(0.319912,-0.184701,0.369403,0.213275,1120.82,1555.16)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(0.700752,0,0,0.700752,492.398,702.343)">
<g transform="matrix(0.368875,0,0,0.368875,1121.71,1555.77)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial27);"/>
</g>
<g transform="matrix(0.319912,-0.184701,0.369403,0.213275,1120.82,1555.16)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
<g transform="matrix(0.700752,0,0,0.700752,438.856,733.255)">
<g transform="matrix(0.368875,0,0,0.368875,1121.71,1555.77)">
<path d="M1564.47,2104.14L1554.7,2098.47L1554.7,2148.03L1554.7,2148.03C1554.7,2151.55 1557.27,2155.27 1562.29,2158.16L1695.31,2234.96C1700.08,2237.72 1706.12,2239.19 1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34L1711.94,2239.34C1717.33,2239.47 1722.52,2238.46 1726.34,2236.25L1863.82,2156.88C1867.64,2154.67 1869.39,2151.67 1869.16,2148.56L1869.18,2148.55L1869.18,2099.6L1859.32,2104.09L1728.57,2028.6C1719.39,2023.3 1705.49,2022.73 1697.54,2027.31L1564.47,2104.14Z" style="fill:url(#_Radial28);"/>
</g>
<g transform="matrix(0.319912,-0.184701,0.369403,0.213275,1120.82,1555.16)">
<path d="M-1014.61,2607.25C-1014.61,2598.07 -1022.06,2590.62 -1031.24,2590.62L-1189.98,2590.62C-1199.16,2590.62 -1206.61,2598.07 -1206.61,2607.25L-1206.61,2740.27C-1206.61,2749.45 -1199.16,2756.9 -1189.98,2756.9L-1031.24,2756.9C-1022.06,2756.9 -1014.61,2749.45 -1014.61,2740.27L-1014.61,2607.25Z" style="fill:rgb(241,243,248);"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<image id="_Image5" width="13px" height="92px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCABcAA0DAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwUABv/EABsQAAICAwEAAAAAAAAAAAAAAAAEAQIhMWED/8QAGQEAAwEBAQAAAAAAAAAAAAAAAgMEAQAH/8QAGREBAQEBAQEAAAAAAAAAAAAAABIBAwIT/9oADAMBAAIRAxEAPwDjD3154xzj18JkXvsUkhfGjLbKnRbhLvQ2S1WxoDegpVKrcJd6GyWFsaBtsqdV+Eu9DpLC+NAW2VOi3CXehslqtjQP0FKnVbhLvs2SwtjQO9GyqUX4S77OkkLY0BvRsqdV+Eu9DZLC2NA/QUqlVuEu9DZJVbGgN6NlUqvwm32dJI8IAtsnAExzn//Z"/>
<radialGradient id="_Radial8" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<image id="_Image10" width="121px" height="70px" xlink:href="data:image/png;base64,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"/>
<image id="_Image12" width="98px" height="57px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAAA5CAYAAADN7P46AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADd0lEQVR4nO2ZPWgUQRTH31n5FeMn2GgjiiCkCYIgWsVCFBtTKQqigkQEMTYGkYg2CQgqIkSRIDZqoxaiVmohok2wiUVAbMTiPnKXyxfIzbPITW52b3ZuZm/2dnb3/eBYjrk7Zua38/5zs7lKdRHBgO6ulTmTzxN65ExFcEiIXVaE/WJYgYSc0CtChFZH+1gRwSEh4bEqgkNCzAmdEX4QARgD+FcDyJcoP0xZvnPDrgxEAMZfDIAh1q9L77dvXUWrQwPPJJnIYLgkocb4FT3vG2KWXru2kRAV0slRCREnWCaghgDI6ldJe8+O1SREgnJSRCGeO5yhrxwFtDP5Z/buJhl+tCakWF7E5frfNOkB+SCV5M2PAz1rSEgd7Yn4W1jARh4E5ENTbujlx6FeEmI8Ab/+LGDjLg9eIab5cXTf2kzLCD34yd/zqCxRIfOj/2A2hbQ16ImpefTe8RhQmgAQUbEyfO0M4FRfV6aEWBns18k5lK8MX/lStftWBhd2/nA2hFgd5MeJOa38UAmQtV88ti71MiIZ4Lvvs+r8ECfcID8G+9MrJLKBvf4y25wfTbkgz4fmrbC3/fqJ7tQJiXxAzz9V9fJDZ4cl5MfN0+mS0bHBjH+oYmPHhIF//kzzY/Tc+lQI6eggxt7OYPOprWKLq1vCGMD9gWQLiaXz917NeMM86IxKVaJk4c8AHl/ekEghsXZ65GXFXn4In3l6NXkynOjw8LOKVn7w8hS4xfUJejG00Ynx6eBMR4fGy2b50eKIRLy+GXZfiHMdvDJWbj8/JN99f3uTc2MVcbZzAw+m9Z5/SP8kBhw+IsDnUTeFONkpkTN3pvXOr+o7qCABfkHf7m52auxOdSaIkyMlbCXA5BGteP3x0A0hTnRCl+O3Shbzo9H+89GW2Och9g6E4ciNorX8YNj43akn8QlJpAgAgL5rRZTd3br5IQrwE4eQxIrg7B8soH+CVfmBCgF+Oikk8SI4vZcKyucfJgJEOiUjNSI4ey7kPedXtohaSOpEAADsPJsPef+3JiohqRTBiUpIFDJSLYKTBCGZEAHgfrnKjAiOq0IyJ4LjWrnKrAiOK0IyLwLAjXJFIgTiXB0kQkIcQkhEAJ0uVySiBZ0SQiI0ibpckQhDohJCIkIQhQwS0QY2hZAIC9gQQiIs0o4QEmGZsDJIRESYCvkPVqSEQk8gl0YAAAAASUVORK5CYII="/>
<image id="_Image16" width="81px" height="48px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAwCAYAAABpJ5bJAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAC4klEQVRoge3aO2gUQRgH8P/MWcTHeRpjIXaKkEax0ULBQmyCIDZaiCD4ACWNCilE0UKCEAIiAUVEFJs0qRQstFAQxCaFWAhaiI0IyZmXSezGIvfdzczu3c3O7t4+Zv7NLewuzPfLNzs7S9ieCzMCBvn+dDszuc7FMFNEiscMJjIixWO2wm1vtMUvY6w7UY7rXZkIIsVVTAYkPzVdw1SK9V1pl9BCPWa0tC3QT3HzdC3Md2X3GBflMdsncjEeMxirIjykmlgFeMy1JDJw1zETG7DLkIkPNg4m50CFNX45w+eHA4XATG2QUTB1PN48Xvv9dD/fmKkOrhMkYwBnBMWk4xaojPp+bFtuIXsyMBkzKh6do+PXd/OH2dMBDV6aETLeugrUqcsaeBwqLgc4Y8p1U7f6c4PZ84HsH54VBGGDp3Ymw4uRrZljZjaAQ9dnRRw8efo/uZotZOZ/xWM36lpnas/CJhZDeAc3Hg8ceHB5Syb1ZI4IAMdv10UcvIp27t753mLmApFyevSPaL0fdli5taku30PX3Tlb61ltuUKknBufE7Z4emeOnEofM5eIlCsTc0LHU3HbLT4s0MHDJzanVmuuEQHg2uN5EZzW5njyPReHqqnUm3tEys1n88IWT9/1nDmaLGZhECmjkwtCXp07rtyhC1PrnpOHNyVSf+EQAWB8arHNrscMT+7MoYPxIQuJSHn0alE0gTRQeecTfPcMfnI7sm+jtUWhESnP3yyFdKYZnv5sPTC4IbJJKRABYPIdQQbxlOenwbvn3l3RIEuDSHn58a9QUczx9C9Ku3euN/IpHSLl7fRytF2P/EVJ2/XsGOiMWVpEAPjwZVkEgNqt3Mo2Ur2HztWqfaFepUakTH9bCdn1mOPJCYN0ApHy9edK8JObgtuazryLjIzpFCIA/Pi1KuLg6alV+5hziJTf9VURB0+Os4iUhaV/sf/9xXlEShxMjyjFFtIjhiQqpkfsEFPM/22HvcYsagRUAAAAAElFTkSuQmCC"/>
<image id="_Image19" width="13px" height="118px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAB2AA0DAREAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAwQAAgb/xAAbEAACAwEBAQAAAAAAAAAAAAAAAwECYSExEf/EABkBAAMBAQEAAAAAAAAAAAAAAAECAwAEB//EABgRAQADAQAAAAAAAAAAAAAAAAABERIC/9oADAMBAAIRAxEAPwDxh7688YzOopMgtqdQqQaGltUYQntSILCOeC7Gl1EYQntSiwjngk9jldRGEJ7UotUc8FnsaXVRhzz2pktUc8F2altEYQns9FhHPBdmpdVGHPPamS1RwXY5XURhzz2pRYRzwXY0uojCE9qZLCeeCbHK6qMIT2pRYRzwXZsrqow557PkkIwXRqX0RhCe1KJCOeCT2NL6pwhPakQSEx8F0NGEMxmf/9k="/>
<radialGradient id="_Radial22" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial23" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial24" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial26" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial27" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
<radialGradient id="_Radial28" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(139.128,29.5437,-60.595,223.638,1611.84,2160.46)"><stop offset="0" style="stop-color:rgb(224,235,247);stop-opacity:1"/><stop offset="0.57" style="stop-color:rgb(203,221,240);stop-opacity:1"/><stop offset="0.79" style="stop-color:rgb(159,193,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(118,166,214);stop-opacity:1"/></radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

packages/frontend/src/components/GettingStartedSteps.vue
+171
View File
@@ -0,0 +1,171 @@
<template>
<div>
<v-card class="elevation-10 rounded-lg">
<v-img class="white--text align-end" height="300px" src="@/assets/onboardingsplash.png">
<v-card-title class="">Speckle Onboarding {{ onboarding + 1 }} / 4</v-card-title>
</v-img>
<v-window v-model="onboarding" class="py-3">
<v-window-item>
<v-card class="transparent elevation-0" color="transparent" zzzheight="200">
<v-card-title>Welcome!</v-card-title>
<v-card-text>
<p>
Next, we will guide you through setting up Speckle on your computer. If you've done
this before, feel free to skip this wizard!
</p>
<p>The next steps in a nutshell:</p>
<ul>
<li>Installing the Speckle Manager</li>
<li>Setting up your account</li>
<li>Creating your first stream</li>
</ul>
</v-card-text>
<v-card-actions class="justify-space-between">
<v-btn block color="primary" @click="next">
Let's go
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-window-item>
<v-window-item>
<v-card class="transparent elevation-0" color="transparent" zzzheight="200">
<v-card-title>Speckle Manager Installation</v-card-title>
<v-card-text>
<p>
Speckle Manager is a desktop application that handles accounts and connectors
(Rhino, Revit, etc.) on your machine. Once you have downloaded Speckle Manager, go
ahead and install it. Once you're done, go to the next step!
</p>
<v-btn
block
depressed
class="mb-4"
href="https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe"
target="_blank"
>
<v-icon small class="mr-4">mdi-download</v-icon>
Download Speckle Manager
</v-btn>
</v-card-text>
<v-card-actions class="justify-space-between">
<v-btn small text color="grey" @click="prev">
<v-icon small>mdi-chevron-left</v-icon>
</v-btn>
<v-btn color="primary" @click="next">
Next Step: Accounts
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-window-item>
<v-window-item>
<v-card class="transparent elevation-0" color="transparent" zzzheight="200">
<v-card-title>Account Linking</v-card-title>
<v-card-text>
<p>
In order to use the desktop connectors with Speckle, you need to add this account to
the Speckle Manager. Click the button below to do so. NOTE: You need to have Speckle
Manager installed first!
</p>
<p>
The authentication process will open several annoying windows, but at the end of the
process your account should be safely stored on your computer - and usable from
within all the connectors.
</p>
<v-btn
block
depressed
class="mb-4"
:href="`speckle://accounts?add_server_account=${rootUrl}`"
>
<v-icon small class="mr-4">mdi-account-plus</v-icon> Add Account Speckle Manager
</v-btn>
</v-card-text>
<v-card-actions class="justify-space-between">
<v-btn small text color="grey" @click="prev">
<v-icon small>mdi-chevron-left</v-icon>
</v-btn>
<v-btn color="primary" @click="next">
Your first stream
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-window-item>
<v-window-item>
<v-card class="transparent elevation-0" color="transparent" zzzheight="200">
<v-card-title>Your First Stream</v-card-title>
<v-card-text>
<p>
Streams are the primary way Speckle organizes data. You can see them as a file, a
part of a file, or a repository. Ultimately, a stream is simply a collection of
objects with some helpful additional information to manage and retrieve them.
</p>
<p>
A stream also lets you manage permissions: it has a list of collaborators including
an owner and additional reviewers and contributors which the owner has chosen to
share the stream with.
</p>
<v-btn block depressed color="primary" class="mb-2" @click="newStreamDialog = true">
Create Your First Stream
</v-btn>
</v-card-text>
<v-card-actions class="justify-space-between">
<v-btn small text color="grey" @click="prev">
<v-icon small>mdi-chevron-left</v-icon>
</v-btn>
<!-- <span class="caption mr-4">Done!</span> -->
<!-- <v-btn color="primary" @click="next">
Next
<v-icon>mdi-chevron-right</v-icon>
</v-btn> -->
</v-card-actions>
</v-card>
</v-window-item>
</v-window>
</v-card>
<div class="text-center py-4">
<v-btn small text to="/" @click="skip">Skip Onboarding</v-btn>
</div>
<v-dialog v-model="newStreamDialog" max-width="500">
<stream-new-dialog @created="finish" />
</v-dialog>
</div>
</template>
<script>
import StreamNewDialog from '../components/dialogs/StreamNewDialog'
export default {
components: { StreamNewDialog },
data: () => ({
length: 3,
onboarding: 0,
newStreamDialog: false
}),
computed: {
rootUrl() {
return window.location.origin
}
},
methods: {
skip() {
localStorage.setItem('onboarding', 'skipped')
},
finish() {
console.log('finish')
localStorage.setItem('onboarding', 'complete')
},
prev() {
this.onboarding--
},
next() {
this.onboarding++
}
}
}
</script>
packages/frontend/src/components/NoDataPlaceholder.vue
+33 -9
View File
@@ -1,8 +1,29 @@
<template>
<v-card flat background="transparent" class="pb-7 px-7">
<v-card-text class="headline">{{ message }} Here's how to get started:</v-card-text>
<v-card flat class="transparent pb-7 ">
<v-card-text v-if="showMessage" class="headline">
{{ message }}
</v-card-text>
<v-card-actions>
<v-row justify-space-between>
<v-col cols="12" class="pa-2">
<v-hover>
<v-card
slot-scope="{ hover }"
height="100%"
href="https://speckle.guide/user/manager.html#installing-connectors"
tile
target="_blank"
:class="`pt-4 ${hover ? 'elevation-5' : 'elevation-0'} rounded-lg`"
style="transition: all 0.15s; min-height: 130px"
>
<v-card-title class="">🔌 Connectors</v-card-title>
<v-card-text>
Install connectors for some of the most popular AEC software and start sending and
receivng data right away!
</v-card-text>
</v-card>
</v-hover>
</v-col>
<v-col cols="12" class="pa-2">
<v-hover>
<v-card
@@ -27,16 +48,15 @@
<v-card
slot-scope="{ hover }"
height="100%"
href="https://speckle.guide/user/connectors.html"
href="http://speckle.community"
tile
target="_blank"
:class="`pt-4 ${hover ? 'elevation-5' : 'elevation-0'} rounded-lg`"
style="transition: all 0.15s; min-height: 130px"
>
<v-card-title class="">🔌 Connectors</v-card-title>
<v-card-title class="">👪 Community</v-card-title>
<v-card-text>
Install connectors for some of the most popular AEC software and start sending and
receivng data right away!
Join our community to get answers to your questions and provide feedback!
</v-card-text>
</v-card>
</v-hover>
@@ -46,15 +66,15 @@
<v-card
slot-scope="{ hover }"
height="100%"
href="http://speckle.community"
href="https://speckle.xyz/streams/3073b96e86"
tile
target="_blank"
:class="`pt-4 ${hover ? 'elevation-5' : 'elevation-0'} rounded-lg`"
style="transition: all 0.15s; min-height: 130px"
>
<v-card-title class="">👪 Community</v-card-title>
<v-card-title class="">🏗 Sample Stream</v-card-title>
<v-card-text>
Join our community to get answers to your questoins and provide feedback!
Confused? Check out a sample stream of the famous Speckle Haus, designed by our one and only Claire!
</v-card-text>
</v-card>
</v-hover>
@@ -66,6 +86,10 @@
<script>
export default {
props: {
showMessage: {
type: Boolean,
default: true
},
message: {
type: String,
default: "It's a bit quiet here."
packages/frontend/src/components/dialogs/StreamNewDialog.vue
+14 -5
View File
@@ -1,8 +1,12 @@
<template>
<v-card>
<v-card-title>New Stream</v-card-title>
<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="createStream">
<v-form ref="form" v-model="valid" lazy-validation class="px-2" @submit.prevent="createStream">
<v-card-text>
<p class="">
<b>Stream Info:</b>
Name & Description
</p>
<v-text-field
v-model="name"
:rules="nameRules"
@@ -11,11 +15,15 @@
autofocus
label="Stream Name"
/>
<v-textarea v-model="description" label="Description (optional)" />
<v-textarea v-model="description" rows="1" row-height="15" label="Description (optional)" />
<p>
<b>Collaborators:</b>
Share this stream with your colleagues!
</p>
<v-text-field
v-model="search"
label="Collaborators (optional)"
placeholder="Type to search..."
label="Search"
placeholder="Search by name or by email"
/>
<div v-if="$apollo.loading">Searching.</div>
<v-list v-if="userSearch && userSearch.items" one-line>
@@ -98,6 +106,7 @@ export default {
data() {
return {
name: null,
description: null,
valid: false,
search: null,
nameRules: [],
@@ -173,7 +182,7 @@ export default {
})
}
}
this.$emit('created')
this.$router.push({ path: `/streams/${res.data.streamCreate}` })
} catch (e) {
console.log(e)
packages/frontend/src/router/index.js
+8
View File
@@ -166,6 +166,14 @@ const routes = [
},
component: () => import('../views/Error.vue')
},
{
path: '/onboarding',
name: 'Onboarding | Speckle',
meta: {
title: 'Getting Started | Speckle'
},
component: () => import('../views/GettingStartedView.vue')
},
{
path: '*',
name: 'notfound',
packages/frontend/src/views/GettingStartedView.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<v-app id="speckle-auth">
<v-container fill-height fluid>
<v-row align="center" justify="center">
<v-col cols="12" md="8">
<getting-started-steps />
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<script>
import GettingStartedSteps from '../components/GettingStartedSteps.vue'
export default {
components: { GettingStartedSteps }
}
</script>
packages/frontend/src/views/NotFound.vue
-2
View File
@@ -16,8 +16,6 @@
<br />
<router-link to="/">Home</router-link>
<br />
<router-link to="/streams">Streams</router-link>
<br />
<router-link to="/profile">Your Profile</router-link>
</p>
</v-sheet>
packages/frontend/src/views/StreamMain.vue
+1 -1
View File
@@ -133,7 +133,7 @@
<no-data-placeholder
v-else-if="selectedBranch"
:message="`Branch ${selectedBranch.name} has no data.`"
:message="`No data here! Here's how to get started:`"
/>
</v-card>
packages/frontend/src/views/Streams.vue
+17 -38
View File
@@ -9,13 +9,13 @@
in total.
</v-card-text> -->
<v-card-actions>
<v-btn color="primary" elevation="0" block @click="newStreamDialog = true">
<v-btn large rounded color="primary" block @click="newStreamDialog = true">
<v-icon small class="mr-1">mdi-plus-box</v-icon>
new stream
</v-btn>
</v-card-actions>
<v-dialog v-model="newStreamDialog" max-width="500">
<new-stream-dialog :open="newStreamDialog" />
<stream-new-dialog :open="newStreamDialog" />
</v-dialog>
</v-card>
@@ -71,12 +71,14 @@
</div>
</v-list>
<v-card-actions></v-card-actions>
<v-dialog v-model="newStreamDialog" max-width="500">
<stream-new-dialog :open="newStreamDialog" />
</v-dialog>
</v-card>
</v-col>
<v-col cols="12" sm="12" md="8" lg="9" xl="8">
<div v-if="!$apollo.loading && streams.length === 0" class="pa-4">
<no-data-placeholder
:message="`Hello there! It seems like you have no created streams yet. Here's a handful of useful links to help you getting started:`"
/>
</div>
<v-card v-if="user" class="mt-5 mx-4" color="background2" flat>
<v-card-text class="body-1">
<span>
@@ -115,6 +117,7 @@
import gql from 'graphql-tag'
import ListItemStream from '../components/ListItemStream'
import StreamNewDialog from '../components/dialogs/StreamNewDialog'
import NoDataPlaceholder from '../components/NoDataPlaceholder'
import UserAvatar from '../components/UserAvatar'
import streamsQuery from '../graphql/streams.gql'
import userQuery from '../graphql/user.gql'
@@ -122,7 +125,7 @@ import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'Streams',
components: { ListItemStream, StreamNewDialog, InfiniteLoading, UserAvatar },
components: { ListItemStream, StreamNewDialog, InfiniteLoading, UserAvatar, NoDataPlaceholder },
apollo: {
streams: {
prefetch: true,
@@ -156,7 +159,14 @@ export default {
return activity
}
},
watch: {},
watch: {
streams(val, old) {
console.log(val.items.length)
if (val.items.length !== 0 && !localStorage.getItem('onboarding')) {
this.$router.push('/onboarding')
}
}
},
methods: {
infiniteHandler($state) {
this.$apollo.queries.streams.fetchMore({
@@ -183,37 +193,6 @@ export default {
}
})
},
newStream() {
this.$refs.streamDialog.open().then((dialog) => {
if (!dialog.result) return
this.$matomo && this.$matomo.trackPageView('stream/create')
this.$apollo
.mutate({
mutation: gql`
mutation streamCreate($myStream: StreamCreateInput!) {
streamCreate(stream: $myStream)
}
`,
variables: {
myStream: {
name: dialog.stream.name,
description: dialog.stream.description,
isPublic: dialog.stream.isPublic
}
}
})
.then((data) => {
// Result
console.log(data)
this.$apollo.queries.streams.refetch()
})
.catch((error) => {
// Error
console.error(error)
})
})
},
compareUpdates(a, b) {
if (a.createdAt < b.createdAt) {
return 1