[MM-22810] Update loading screen with new design & animation (#1409)
* Update loading screen with new design & animation * add prop back in * adjust z-index for tests * tweaks to pass tests * address offline feedback - shrink initial logo size - introduce a slight delay before fading loading spinner out - fix horizontal scrollbar showing on load screen * add missing css variable * no need to remove loading icon * Apply suggestions from code review Co-authored-by: Guillermo Vayá <guillermo.vaya@mattermost.com> * Move LoadingScreen.jsx to file-only component * Rename prop for better clarity * Default prop to none and check when needed * Update import paths * Add ESDocs and remove unecessary conditional * Forgot to remove the eslint override Co-authored-by: Guillermo Vayá <guillermo.vaya@mattermost.com>
This commit is contained in:
parent
6a24d46dee
commit
83bae0c2b8
|
@ -24,7 +24,9 @@
|
|||
"react/jsx-indent-props": [2, 2],
|
||||
"react/no-find-dom-node": 2,
|
||||
"react/no-set-state": 1,
|
||||
"react/require-optimization": 0
|
||||
"react/require-optimization": 0,
|
||||
"multiline-ternary": ["warn", "always-multiline"],
|
||||
"consistent-return": "off"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
|
|
148
src/assets/window-background-dots.svg
Normal file
148
src/assets/window-background-dots.svg
Normal file
|
@ -0,0 +1,148 @@
|
|||
<svg width="460" height="460" viewBox="0 0 460 460" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<rect y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 0 229.618)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="353.612" width="3.24729" height="3.24728" transform="rotate(-45 123.994 353.612)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="105.624" width="3.2473" height="3.24729" transform="rotate(-45 123.994 105.624)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="229.618" width="3.2473" height="3.24728" transform="rotate(-45 247.988 229.618)" fill="#0058CC"/>
|
||||
<rect x="20.6656" y="250.284" width="3.24729" height="3.24729" transform="rotate(-45 20.6656 250.284)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="374.278" width="3.24729" height="3.24728" transform="rotate(-45 144.659 374.278)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="126.29" width="3.2473" height="3.24729" transform="rotate(-45 144.659 126.29)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="250.284" width="3.2473" height="3.24728" transform="rotate(-45 268.653 250.284)" fill="#0058CC"/>
|
||||
<rect x="41.3313" y="270.95" width="3.24729" height="3.24729" transform="rotate(-45 41.3313 270.95)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="394.943" width="3.24729" height="3.2473" transform="rotate(-45 165.325 394.943)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="146.956" width="3.2473" height="3.24729" transform="rotate(-45 165.325 146.956)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="270.95" width="3.2473" height="3.2473" transform="rotate(-45 289.319 270.95)" fill="#0058CC"/>
|
||||
<rect x="61.9969" y="291.615" width="3.24729" height="3.24728" transform="rotate(-45 61.9969 291.615)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="415.609" width="3.24729" height="3.24728" transform="rotate(-45 185.991 415.609)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="167.621" width="3.2473" height="3.24728" transform="rotate(-45 185.991 167.621)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="291.615" width="3.2473" height="3.24728" transform="rotate(-45 309.985 291.615)" fill="#0058CC"/>
|
||||
<rect x="82.6626" y="312.281" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 312.281)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="436.275" width="3.24729" height="3.24731" transform="rotate(-45 206.656 436.275)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="188.287" width="3.2473" height="3.24729" transform="rotate(-45 206.656 188.287)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="312.281" width="3.2473" height="3.24731" transform="rotate(-45 330.65 312.281)" fill="#0058CC"/>
|
||||
<rect x="103.328" y="332.946" width="3.24729" height="3.2473" transform="rotate(-45 103.328 332.946)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="456.94" width="3.24729" height="3.24728" transform="rotate(-45 227.322 456.94)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="208.953" width="3.2473" height="3.2473" transform="rotate(-45 227.322 208.953)" fill="#0058CC"/>
|
||||
<rect x="351.316" y="332.946" width="3.2473" height="3.24728" transform="rotate(-45 351.316 332.946)" fill="#0058CC"/>
|
||||
<rect x="20.6656" y="208.953" width="3.24729" height="3.24729" transform="rotate(-45 20.6656 208.953)" fill="#0058CC"/>
|
||||
<rect x="144.66" y="332.946" width="3.24729" height="3.24728" transform="rotate(-45 144.66 332.946)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 144.659 84.9588)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="208.953" width="3.24728" height="3.24728" transform="rotate(-45 268.653 208.953)" fill="#0058CC"/>
|
||||
<rect x="41.3313" y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 41.3313 229.618)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="353.612" width="3.24729" height="3.24728" transform="rotate(-45 165.325 353.612)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="105.624" width="3.24728" height="3.24729" transform="rotate(-45 165.325 105.624)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="229.618" width="3.24728" height="3.24728" transform="rotate(-45 289.319 229.618)" fill="#0058CC"/>
|
||||
<rect x="61.9969" y="250.284" width="3.24729" height="3.24729" transform="rotate(-45 61.9969 250.284)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="374.278" width="3.24729" height="3.2473" transform="rotate(-45 185.991 374.278)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="126.29" width="3.24728" height="3.24729" transform="rotate(-45 185.991 126.29)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="250.284" width="3.24728" height="3.2473" transform="rotate(-45 309.985 250.284)" fill="#0058CC"/>
|
||||
<rect x="82.6626" y="270.95" width="3.24729" height="3.24728" transform="rotate(-45 82.6626 270.95)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="394.943" width="3.24729" height="3.24728" transform="rotate(-45 206.656 394.943)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="146.956" width="3.24728" height="3.24728" transform="rotate(-45 206.656 146.956)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="270.95" width="3.24728" height="3.24728" transform="rotate(-45 330.65 270.95)" fill="#0058CC"/>
|
||||
<rect x="103.328" y="291.615" width="3.24729" height="3.24729" transform="rotate(-45 103.328 291.615)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="415.609" width="3.24729" height="3.24731" transform="rotate(-45 227.322 415.609)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="167.621" width="3.24728" height="3.24729" transform="rotate(-45 227.322 167.621)" fill="#0058CC"/>
|
||||
<rect x="351.316" y="291.615" width="3.24728" height="3.24731" transform="rotate(-45 351.316 291.615)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="312.281" width="3.24729" height="3.2473" transform="rotate(-45 123.994 312.281)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="436.275" width="3.24729" height="3.24728" transform="rotate(-45 247.988 436.275)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="188.287" width="3.24728" height="3.2473" transform="rotate(-45 247.988 188.287)" fill="#0058CC"/>
|
||||
<rect x="371.982" y="312.281" width="3.24728" height="3.24728" transform="rotate(-45 371.982 312.281)" fill="#0058CC"/>
|
||||
<rect x="41.3313" y="188.287" width="3.24729" height="3.24729" transform="rotate(-45 41.3313 188.287)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="312.281" width="3.24729" height="3.24728" transform="rotate(-45 165.325 312.281)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="64.2932" width="3.24728" height="3.24729" transform="rotate(-45 165.325 64.2932)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="188.287" width="3.24728" height="3.24728" transform="rotate(-45 289.319 188.287)" fill="#0058CC"/>
|
||||
<rect x="61.9969" y="208.953" width="3.24729" height="3.24729" transform="rotate(-45 61.9969 208.953)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="332.946" width="3.24729" height="3.24728" transform="rotate(-45 185.991 332.946)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 185.991 84.9588)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="208.953" width="3.24728" height="3.24728" transform="rotate(-45 309.985 208.953)" fill="#0058CC"/>
|
||||
<rect x="82.6626" y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 229.618)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="353.612" width="3.24729" height="3.2473" transform="rotate(-45 206.656 353.612)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="105.624" width="3.24728" height="3.24729" transform="rotate(-45 206.656 105.624)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="229.618" width="3.24728" height="3.2473" transform="rotate(-45 330.65 229.618)" fill="#0058CC"/>
|
||||
<rect x="103.328" y="250.284" width="3.24729" height="3.24728" transform="rotate(-45 103.328 250.284)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="374.278" width="3.24729" height="3.24728" transform="rotate(-45 227.322 374.278)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="126.29" width="3.24728" height="3.24728" transform="rotate(-45 227.322 126.29)" fill="#0058CC"/>
|
||||
<rect x="351.316" y="250.284" width="3.24728" height="3.24728" transform="rotate(-45 351.316 250.284)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="270.95" width="3.24729" height="3.24729" transform="rotate(-45 123.994 270.95)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="394.943" width="3.24729" height="3.24731" transform="rotate(-45 247.988 394.943)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="146.956" width="3.24728" height="3.24729" transform="rotate(-45 247.988 146.956)" fill="#0058CC"/>
|
||||
<rect x="371.982" y="270.95" width="3.24728" height="3.24731" transform="rotate(-45 371.982 270.95)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="291.615" width="3.24729" height="3.2473" transform="rotate(-45 144.659 291.615)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="415.609" width="3.24729" height="3.24728" transform="rotate(-45 268.653 415.609)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="167.621" width="3.24728" height="3.2473" transform="rotate(-45 268.653 167.621)" fill="#0058CC"/>
|
||||
<rect x="392.647" y="291.615" width="3.24728" height="3.24728" transform="rotate(-45 392.647 291.615)" fill="#0058CC"/>
|
||||
<rect x="61.9969" y="167.621" width="3.24729" height="3.24729" transform="rotate(-45 61.9969 167.621)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="291.615" width="3.24729" height="3.24728" transform="rotate(-45 185.991 291.615)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="43.6275" width="3.24728" height="3.24729" transform="rotate(-45 185.991 43.6275)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="167.621" width="3.24728" height="3.24728" transform="rotate(-45 309.985 167.621)" fill="#0058CC"/>
|
||||
<rect x="82.6626" y="188.287" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 188.287)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="312.281" width="3.24729" height="3.24728" transform="rotate(-45 206.656 312.281)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="64.2932" width="3.24728" height="3.24729" transform="rotate(-45 206.656 64.2932)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="188.287" width="3.24728" height="3.24728" transform="rotate(-45 330.65 188.287)" fill="#0058CC"/>
|
||||
<rect x="103.328" y="208.953" width="3.24729" height="3.24729" transform="rotate(-45 103.328 208.953)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="332.946" width="3.24729" height="3.2473" transform="rotate(-45 227.322 332.946)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 227.322 84.9588)" fill="#0058CC"/>
|
||||
<rect x="351.316" y="208.953" width="3.24728" height="3.2473" transform="rotate(-45 351.316 208.953)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="229.618" width="3.24729" height="3.24728" transform="rotate(-45 123.994 229.618)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="353.612" width="3.24729" height="3.24728" transform="rotate(-45 247.988 353.612)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="105.624" width="3.24728" height="3.24728" transform="rotate(-45 247.988 105.624)" fill="#0058CC"/>
|
||||
<rect x="371.982" y="229.618" width="3.24728" height="3.24728" transform="rotate(-45 371.982 229.618)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="250.284" width="3.24729" height="3.24729" transform="rotate(-45 144.659 250.284)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="374.278" width="3.24729" height="3.24731" transform="rotate(-45 268.653 374.278)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="126.29" width="3.24728" height="3.24729" transform="rotate(-45 268.653 126.29)" fill="#0058CC"/>
|
||||
<rect x="392.647" y="250.284" width="3.24728" height="3.24731" transform="rotate(-45 392.647 250.284)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="270.95" width="3.24729" height="3.2473" transform="rotate(-45 165.325 270.95)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="394.943" width="3.24729" height="3.24728" transform="rotate(-45 289.319 394.943)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="146.956" width="3.24728" height="3.2473" transform="rotate(-45 289.319 146.956)" fill="#0058CC"/>
|
||||
<rect x="413.313" y="270.95" width="3.24728" height="3.24728" transform="rotate(-45 413.313 270.95)" fill="#0058CC"/>
|
||||
<rect x="82.6626" y="146.956" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 146.956)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="270.95" width="3.24729" height="3.24728" transform="rotate(-45 206.656 270.95)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="22.9619" width="3.24731" height="3.24729" transform="rotate(-45 206.656 22.9619)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="146.956" width="3.24731" height="3.24728" transform="rotate(-45 330.65 146.956)" fill="#0058CC"/>
|
||||
<rect x="103.328" y="167.621" width="3.24729" height="3.24729" transform="rotate(-45 103.328 167.621)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="291.615" width="3.24729" height="3.24728" transform="rotate(-45 227.322 291.615)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="43.6275" width="3.24731" height="3.24729" transform="rotate(-45 227.322 43.6275)" fill="#0058CC"/>
|
||||
<rect x="351.316" y="167.621" width="3.24731" height="3.24728" transform="rotate(-45 351.316 167.621)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="188.287" width="3.24729" height="3.24729" transform="rotate(-45 123.994 188.287)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="312.281" width="3.24729" height="3.2473" transform="rotate(-45 247.988 312.281)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="64.2932" width="3.24731" height="3.24729" transform="rotate(-45 247.988 64.2932)" fill="#0058CC"/>
|
||||
<rect x="371.981" y="188.287" width="3.24731" height="3.2473" transform="rotate(-45 371.981 188.287)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="208.953" width="3.24729" height="3.24728" transform="rotate(-45 144.659 208.953)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="332.946" width="3.24729" height="3.24728" transform="rotate(-45 268.653 332.946)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="84.9588" width="3.24731" height="3.24728" transform="rotate(-45 268.653 84.9588)" fill="#0058CC"/>
|
||||
<rect x="392.647" y="208.953" width="3.24731" height="3.24728" transform="rotate(-45 392.647 208.953)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 165.325 229.618)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="353.612" width="3.24729" height="3.24731" transform="rotate(-45 289.319 353.612)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="105.624" width="3.24731" height="3.24729" transform="rotate(-45 289.319 105.624)" fill="#0058CC"/>
|
||||
<rect x="413.313" y="229.618" width="3.24731" height="3.24731" transform="rotate(-45 413.313 229.618)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="250.284" width="3.24729" height="3.2473" transform="rotate(-45 185.991 250.284)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="374.278" width="3.24729" height="3.24728" transform="rotate(-45 309.985 374.278)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="126.29" width="3.24731" height="3.2473" transform="rotate(-45 309.985 126.29)" fill="#0058CC"/>
|
||||
<rect x="433.979" y="250.284" width="3.24731" height="3.24728" transform="rotate(-45 433.979 250.284)" fill="#0058CC"/>
|
||||
<rect x="103.328" y="126.29" width="3.2473" height="3.24729" transform="rotate(-45 103.328 126.29)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="250.284" width="3.2473" height="3.24728" transform="rotate(-45 227.322 250.284)" fill="#0058CC"/>
|
||||
<rect x="227.322" y="2.29623" width="3.24728" height="3.24729" transform="rotate(-45 227.322 2.29623)" fill="#0058CC"/>
|
||||
<rect x="351.316" y="126.29" width="3.24728" height="3.24728" transform="rotate(-45 351.316 126.29)" fill="#0058CC"/>
|
||||
<rect x="123.994" y="146.956" width="3.2473" height="3.24729" transform="rotate(-45 123.994 146.956)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="270.95" width="3.2473" height="3.24728" transform="rotate(-45 247.988 270.95)" fill="#0058CC"/>
|
||||
<rect x="247.988" y="22.9619" width="3.24728" height="3.24729" transform="rotate(-45 247.988 22.9619)" fill="#0058CC"/>
|
||||
<rect x="371.982" y="146.956" width="3.24728" height="3.24728" transform="rotate(-45 371.982 146.956)" fill="#0058CC"/>
|
||||
<rect x="144.659" y="167.621" width="3.2473" height="3.24729" transform="rotate(-45 144.659 167.621)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="291.615" width="3.2473" height="3.2473" transform="rotate(-45 268.653 291.615)" fill="#0058CC"/>
|
||||
<rect x="268.653" y="43.6275" width="3.24728" height="3.24729" transform="rotate(-45 268.653 43.6275)" fill="#0058CC"/>
|
||||
<rect x="392.647" y="167.621" width="3.24728" height="3.2473" transform="rotate(-45 392.647 167.621)" fill="#0058CC"/>
|
||||
<rect x="165.325" y="188.287" width="3.2473" height="3.24728" transform="rotate(-45 165.325 188.287)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="312.281" width="3.2473" height="3.24728" transform="rotate(-45 289.319 312.281)" fill="#0058CC"/>
|
||||
<rect x="289.319" y="64.2932" width="3.24728" height="3.24728" transform="rotate(-45 289.319 64.2932)" fill="#0058CC"/>
|
||||
<rect x="413.313" y="188.287" width="3.24728" height="3.24728" transform="rotate(-45 413.313 188.287)" fill="#0058CC"/>
|
||||
<rect x="185.991" y="208.953" width="3.2473" height="3.24729" transform="rotate(-45 185.991 208.953)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="332.946" width="3.2473" height="3.24731" transform="rotate(-45 309.985 332.946)" fill="#0058CC"/>
|
||||
<rect x="309.985" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 309.985 84.9588)" fill="#0058CC"/>
|
||||
<rect x="433.979" y="208.953" width="3.24728" height="3.24731" transform="rotate(-45 433.979 208.953)" fill="#0058CC"/>
|
||||
<rect x="206.656" y="229.618" width="3.2473" height="3.2473" transform="rotate(-45 206.656 229.618)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="353.612" width="3.2473" height="3.24728" transform="rotate(-45 330.65 353.612)" fill="#0058CC"/>
|
||||
<rect x="330.65" y="105.624" width="3.24728" height="3.2473" transform="rotate(-45 330.65 105.624)" fill="#0058CC"/>
|
||||
<rect x="454.644" y="229.618" width="3.24728" height="3.24728" transform="rotate(-45 454.644 229.618)" fill="#0058CC"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 17 KiB |
148
src/assets/window-background-dots_dark.svg
Normal file
148
src/assets/window-background-dots_dark.svg
Normal file
|
@ -0,0 +1,148 @@
|
|||
<svg width="460" height="460" viewBox="0 0 460 460" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<rect y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 0 229.618)" fill="white"/>
|
||||
<rect x="123.994" y="353.612" width="3.24729" height="3.24728" transform="rotate(-45 123.994 353.612)" fill="white"/>
|
||||
<rect x="123.994" y="105.624" width="3.2473" height="3.24729" transform="rotate(-45 123.994 105.624)" fill="white"/>
|
||||
<rect x="247.988" y="229.618" width="3.2473" height="3.24728" transform="rotate(-45 247.988 229.618)" fill="white"/>
|
||||
<rect x="20.6656" y="250.284" width="3.24729" height="3.24729" transform="rotate(-45 20.6656 250.284)" fill="white"/>
|
||||
<rect x="144.659" y="374.278" width="3.24729" height="3.24728" transform="rotate(-45 144.659 374.278)" fill="white"/>
|
||||
<rect x="144.659" y="126.29" width="3.2473" height="3.24729" transform="rotate(-45 144.659 126.29)" fill="white"/>
|
||||
<rect x="268.653" y="250.284" width="3.2473" height="3.24728" transform="rotate(-45 268.653 250.284)" fill="white"/>
|
||||
<rect x="41.3313" y="270.95" width="3.24729" height="3.24729" transform="rotate(-45 41.3313 270.95)" fill="white"/>
|
||||
<rect x="165.325" y="394.943" width="3.24729" height="3.2473" transform="rotate(-45 165.325 394.943)" fill="white"/>
|
||||
<rect x="165.325" y="146.956" width="3.2473" height="3.24729" transform="rotate(-45 165.325 146.956)" fill="white"/>
|
||||
<rect x="289.319" y="270.95" width="3.2473" height="3.2473" transform="rotate(-45 289.319 270.95)" fill="white"/>
|
||||
<rect x="61.9969" y="291.615" width="3.24729" height="3.24728" transform="rotate(-45 61.9969 291.615)" fill="white"/>
|
||||
<rect x="185.991" y="415.609" width="3.24729" height="3.24728" transform="rotate(-45 185.991 415.609)" fill="white"/>
|
||||
<rect x="185.991" y="167.621" width="3.2473" height="3.24728" transform="rotate(-45 185.991 167.621)" fill="white"/>
|
||||
<rect x="309.985" y="291.615" width="3.2473" height="3.24728" transform="rotate(-45 309.985 291.615)" fill="white"/>
|
||||
<rect x="82.6626" y="312.281" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 312.281)" fill="white"/>
|
||||
<rect x="206.656" y="436.275" width="3.24729" height="3.24731" transform="rotate(-45 206.656 436.275)" fill="white"/>
|
||||
<rect x="206.656" y="188.287" width="3.2473" height="3.24729" transform="rotate(-45 206.656 188.287)" fill="white"/>
|
||||
<rect x="330.65" y="312.281" width="3.2473" height="3.24731" transform="rotate(-45 330.65 312.281)" fill="white"/>
|
||||
<rect x="103.328" y="332.946" width="3.24729" height="3.2473" transform="rotate(-45 103.328 332.946)" fill="white"/>
|
||||
<rect x="227.322" y="456.94" width="3.24729" height="3.24728" transform="rotate(-45 227.322 456.94)" fill="white"/>
|
||||
<rect x="227.322" y="208.953" width="3.2473" height="3.2473" transform="rotate(-45 227.322 208.953)" fill="white"/>
|
||||
<rect x="351.316" y="332.946" width="3.2473" height="3.24728" transform="rotate(-45 351.316 332.946)" fill="white"/>
|
||||
<rect x="20.6656" y="208.953" width="3.24729" height="3.24729" transform="rotate(-45 20.6656 208.953)" fill="white"/>
|
||||
<rect x="144.66" y="332.946" width="3.24729" height="3.24728" transform="rotate(-45 144.66 332.946)" fill="white"/>
|
||||
<rect x="144.659" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 144.659 84.9588)" fill="white"/>
|
||||
<rect x="268.653" y="208.953" width="3.24728" height="3.24728" transform="rotate(-45 268.653 208.953)" fill="white"/>
|
||||
<rect x="41.3313" y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 41.3313 229.618)" fill="white"/>
|
||||
<rect x="165.325" y="353.612" width="3.24729" height="3.24728" transform="rotate(-45 165.325 353.612)" fill="white"/>
|
||||
<rect x="165.325" y="105.624" width="3.24728" height="3.24729" transform="rotate(-45 165.325 105.624)" fill="white"/>
|
||||
<rect x="289.319" y="229.618" width="3.24728" height="3.24728" transform="rotate(-45 289.319 229.618)" fill="white"/>
|
||||
<rect x="61.9969" y="250.284" width="3.24729" height="3.24729" transform="rotate(-45 61.9969 250.284)" fill="white"/>
|
||||
<rect x="185.991" y="374.278" width="3.24729" height="3.2473" transform="rotate(-45 185.991 374.278)" fill="white"/>
|
||||
<rect x="185.991" y="126.29" width="3.24728" height="3.24729" transform="rotate(-45 185.991 126.29)" fill="white"/>
|
||||
<rect x="309.985" y="250.284" width="3.24728" height="3.2473" transform="rotate(-45 309.985 250.284)" fill="white"/>
|
||||
<rect x="82.6626" y="270.95" width="3.24729" height="3.24728" transform="rotate(-45 82.6626 270.95)" fill="white"/>
|
||||
<rect x="206.656" y="394.943" width="3.24729" height="3.24728" transform="rotate(-45 206.656 394.943)" fill="white"/>
|
||||
<rect x="206.656" y="146.956" width="3.24728" height="3.24728" transform="rotate(-45 206.656 146.956)" fill="white"/>
|
||||
<rect x="330.65" y="270.95" width="3.24728" height="3.24728" transform="rotate(-45 330.65 270.95)" fill="white"/>
|
||||
<rect x="103.328" y="291.615" width="3.24729" height="3.24729" transform="rotate(-45 103.328 291.615)" fill="white"/>
|
||||
<rect x="227.322" y="415.609" width="3.24729" height="3.24731" transform="rotate(-45 227.322 415.609)" fill="white"/>
|
||||
<rect x="227.322" y="167.621" width="3.24728" height="3.24729" transform="rotate(-45 227.322 167.621)" fill="white"/>
|
||||
<rect x="351.316" y="291.615" width="3.24728" height="3.24731" transform="rotate(-45 351.316 291.615)" fill="white"/>
|
||||
<rect x="123.994" y="312.281" width="3.24729" height="3.2473" transform="rotate(-45 123.994 312.281)" fill="white"/>
|
||||
<rect x="247.988" y="436.275" width="3.24729" height="3.24728" transform="rotate(-45 247.988 436.275)" fill="white"/>
|
||||
<rect x="247.988" y="188.287" width="3.24728" height="3.2473" transform="rotate(-45 247.988 188.287)" fill="white"/>
|
||||
<rect x="371.982" y="312.281" width="3.24728" height="3.24728" transform="rotate(-45 371.982 312.281)" fill="white"/>
|
||||
<rect x="41.3313" y="188.287" width="3.24729" height="3.24729" transform="rotate(-45 41.3313 188.287)" fill="white"/>
|
||||
<rect x="165.325" y="312.281" width="3.24729" height="3.24728" transform="rotate(-45 165.325 312.281)" fill="white"/>
|
||||
<rect x="165.325" y="64.2932" width="3.24728" height="3.24729" transform="rotate(-45 165.325 64.2932)" fill="white"/>
|
||||
<rect x="289.319" y="188.287" width="3.24728" height="3.24728" transform="rotate(-45 289.319 188.287)" fill="white"/>
|
||||
<rect x="61.9969" y="208.953" width="3.24729" height="3.24729" transform="rotate(-45 61.9969 208.953)" fill="white"/>
|
||||
<rect x="185.991" y="332.946" width="3.24729" height="3.24728" transform="rotate(-45 185.991 332.946)" fill="white"/>
|
||||
<rect x="185.991" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 185.991 84.9588)" fill="white"/>
|
||||
<rect x="309.985" y="208.953" width="3.24728" height="3.24728" transform="rotate(-45 309.985 208.953)" fill="white"/>
|
||||
<rect x="82.6626" y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 229.618)" fill="white"/>
|
||||
<rect x="206.656" y="353.612" width="3.24729" height="3.2473" transform="rotate(-45 206.656 353.612)" fill="white"/>
|
||||
<rect x="206.656" y="105.624" width="3.24728" height="3.24729" transform="rotate(-45 206.656 105.624)" fill="white"/>
|
||||
<rect x="330.65" y="229.618" width="3.24728" height="3.2473" transform="rotate(-45 330.65 229.618)" fill="white"/>
|
||||
<rect x="103.328" y="250.284" width="3.24729" height="3.24728" transform="rotate(-45 103.328 250.284)" fill="white"/>
|
||||
<rect x="227.322" y="374.278" width="3.24729" height="3.24728" transform="rotate(-45 227.322 374.278)" fill="white"/>
|
||||
<rect x="227.322" y="126.29" width="3.24728" height="3.24728" transform="rotate(-45 227.322 126.29)" fill="white"/>
|
||||
<rect x="351.316" y="250.284" width="3.24728" height="3.24728" transform="rotate(-45 351.316 250.284)" fill="white"/>
|
||||
<rect x="123.994" y="270.95" width="3.24729" height="3.24729" transform="rotate(-45 123.994 270.95)" fill="white"/>
|
||||
<rect x="247.988" y="394.943" width="3.24729" height="3.24731" transform="rotate(-45 247.988 394.943)" fill="white"/>
|
||||
<rect x="247.988" y="146.956" width="3.24728" height="3.24729" transform="rotate(-45 247.988 146.956)" fill="white"/>
|
||||
<rect x="371.982" y="270.95" width="3.24728" height="3.24731" transform="rotate(-45 371.982 270.95)" fill="white"/>
|
||||
<rect x="144.659" y="291.615" width="3.24729" height="3.2473" transform="rotate(-45 144.659 291.615)" fill="white"/>
|
||||
<rect x="268.653" y="415.609" width="3.24729" height="3.24728" transform="rotate(-45 268.653 415.609)" fill="white"/>
|
||||
<rect x="268.653" y="167.621" width="3.24728" height="3.2473" transform="rotate(-45 268.653 167.621)" fill="white"/>
|
||||
<rect x="392.647" y="291.615" width="3.24728" height="3.24728" transform="rotate(-45 392.647 291.615)" fill="white"/>
|
||||
<rect x="61.9969" y="167.621" width="3.24729" height="3.24729" transform="rotate(-45 61.9969 167.621)" fill="white"/>
|
||||
<rect x="185.991" y="291.615" width="3.24729" height="3.24728" transform="rotate(-45 185.991 291.615)" fill="white"/>
|
||||
<rect x="185.991" y="43.6275" width="3.24728" height="3.24729" transform="rotate(-45 185.991 43.6275)" fill="white"/>
|
||||
<rect x="309.985" y="167.621" width="3.24728" height="3.24728" transform="rotate(-45 309.985 167.621)" fill="white"/>
|
||||
<rect x="82.6626" y="188.287" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 188.287)" fill="white"/>
|
||||
<rect x="206.656" y="312.281" width="3.24729" height="3.24728" transform="rotate(-45 206.656 312.281)" fill="white"/>
|
||||
<rect x="206.656" y="64.2932" width="3.24728" height="3.24729" transform="rotate(-45 206.656 64.2932)" fill="white"/>
|
||||
<rect x="330.65" y="188.287" width="3.24728" height="3.24728" transform="rotate(-45 330.65 188.287)" fill="white"/>
|
||||
<rect x="103.328" y="208.953" width="3.24729" height="3.24729" transform="rotate(-45 103.328 208.953)" fill="white"/>
|
||||
<rect x="227.322" y="332.946" width="3.24729" height="3.2473" transform="rotate(-45 227.322 332.946)" fill="white"/>
|
||||
<rect x="227.322" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 227.322 84.9588)" fill="white"/>
|
||||
<rect x="351.316" y="208.953" width="3.24728" height="3.2473" transform="rotate(-45 351.316 208.953)" fill="white"/>
|
||||
<rect x="123.994" y="229.618" width="3.24729" height="3.24728" transform="rotate(-45 123.994 229.618)" fill="white"/>
|
||||
<rect x="247.988" y="353.612" width="3.24729" height="3.24728" transform="rotate(-45 247.988 353.612)" fill="white"/>
|
||||
<rect x="247.988" y="105.624" width="3.24728" height="3.24728" transform="rotate(-45 247.988 105.624)" fill="white"/>
|
||||
<rect x="371.982" y="229.618" width="3.24728" height="3.24728" transform="rotate(-45 371.982 229.618)" fill="white"/>
|
||||
<rect x="144.659" y="250.284" width="3.24729" height="3.24729" transform="rotate(-45 144.659 250.284)" fill="white"/>
|
||||
<rect x="268.653" y="374.278" width="3.24729" height="3.24731" transform="rotate(-45 268.653 374.278)" fill="white"/>
|
||||
<rect x="268.653" y="126.29" width="3.24728" height="3.24729" transform="rotate(-45 268.653 126.29)" fill="white"/>
|
||||
<rect x="392.647" y="250.284" width="3.24728" height="3.24731" transform="rotate(-45 392.647 250.284)" fill="white"/>
|
||||
<rect x="165.325" y="270.95" width="3.24729" height="3.2473" transform="rotate(-45 165.325 270.95)" fill="white"/>
|
||||
<rect x="289.319" y="394.943" width="3.24729" height="3.24728" transform="rotate(-45 289.319 394.943)" fill="white"/>
|
||||
<rect x="289.319" y="146.956" width="3.24728" height="3.2473" transform="rotate(-45 289.319 146.956)" fill="white"/>
|
||||
<rect x="413.313" y="270.95" width="3.24728" height="3.24728" transform="rotate(-45 413.313 270.95)" fill="white"/>
|
||||
<rect x="82.6626" y="146.956" width="3.24729" height="3.24729" transform="rotate(-45 82.6626 146.956)" fill="white"/>
|
||||
<rect x="206.656" y="270.95" width="3.24729" height="3.24728" transform="rotate(-45 206.656 270.95)" fill="white"/>
|
||||
<rect x="206.656" y="22.9619" width="3.24731" height="3.24729" transform="rotate(-45 206.656 22.9619)" fill="white"/>
|
||||
<rect x="330.65" y="146.956" width="3.24731" height="3.24728" transform="rotate(-45 330.65 146.956)" fill="white"/>
|
||||
<rect x="103.328" y="167.621" width="3.24729" height="3.24729" transform="rotate(-45 103.328 167.621)" fill="white"/>
|
||||
<rect x="227.322" y="291.615" width="3.24729" height="3.24728" transform="rotate(-45 227.322 291.615)" fill="white"/>
|
||||
<rect x="227.322" y="43.6275" width="3.24731" height="3.24729" transform="rotate(-45 227.322 43.6275)" fill="white"/>
|
||||
<rect x="351.316" y="167.621" width="3.24731" height="3.24728" transform="rotate(-45 351.316 167.621)" fill="white"/>
|
||||
<rect x="123.994" y="188.287" width="3.24729" height="3.24729" transform="rotate(-45 123.994 188.287)" fill="white"/>
|
||||
<rect x="247.988" y="312.281" width="3.24729" height="3.2473" transform="rotate(-45 247.988 312.281)" fill="white"/>
|
||||
<rect x="247.988" y="64.2932" width="3.24731" height="3.24729" transform="rotate(-45 247.988 64.2932)" fill="white"/>
|
||||
<rect x="371.981" y="188.287" width="3.24731" height="3.2473" transform="rotate(-45 371.981 188.287)" fill="white"/>
|
||||
<rect x="144.659" y="208.953" width="3.24729" height="3.24728" transform="rotate(-45 144.659 208.953)" fill="white"/>
|
||||
<rect x="268.653" y="332.946" width="3.24729" height="3.24728" transform="rotate(-45 268.653 332.946)" fill="white"/>
|
||||
<rect x="268.653" y="84.9588" width="3.24731" height="3.24728" transform="rotate(-45 268.653 84.9588)" fill="white"/>
|
||||
<rect x="392.647" y="208.953" width="3.24731" height="3.24728" transform="rotate(-45 392.647 208.953)" fill="white"/>
|
||||
<rect x="165.325" y="229.618" width="3.24729" height="3.24729" transform="rotate(-45 165.325 229.618)" fill="white"/>
|
||||
<rect x="289.319" y="353.612" width="3.24729" height="3.24731" transform="rotate(-45 289.319 353.612)" fill="white"/>
|
||||
<rect x="289.319" y="105.624" width="3.24731" height="3.24729" transform="rotate(-45 289.319 105.624)" fill="white"/>
|
||||
<rect x="413.313" y="229.618" width="3.24731" height="3.24731" transform="rotate(-45 413.313 229.618)" fill="white"/>
|
||||
<rect x="185.991" y="250.284" width="3.24729" height="3.2473" transform="rotate(-45 185.991 250.284)" fill="white"/>
|
||||
<rect x="309.985" y="374.278" width="3.24729" height="3.24728" transform="rotate(-45 309.985 374.278)" fill="white"/>
|
||||
<rect x="309.985" y="126.29" width="3.24731" height="3.2473" transform="rotate(-45 309.985 126.29)" fill="white"/>
|
||||
<rect x="433.979" y="250.284" width="3.24731" height="3.24728" transform="rotate(-45 433.979 250.284)" fill="white"/>
|
||||
<rect x="103.328" y="126.29" width="3.2473" height="3.24729" transform="rotate(-45 103.328 126.29)" fill="white"/>
|
||||
<rect x="227.322" y="250.284" width="3.2473" height="3.24728" transform="rotate(-45 227.322 250.284)" fill="white"/>
|
||||
<rect x="227.322" y="2.29623" width="3.24728" height="3.24729" transform="rotate(-45 227.322 2.29623)" fill="white"/>
|
||||
<rect x="351.316" y="126.29" width="3.24728" height="3.24728" transform="rotate(-45 351.316 126.29)" fill="white"/>
|
||||
<rect x="123.994" y="146.956" width="3.2473" height="3.24729" transform="rotate(-45 123.994 146.956)" fill="white"/>
|
||||
<rect x="247.988" y="270.95" width="3.2473" height="3.24728" transform="rotate(-45 247.988 270.95)" fill="white"/>
|
||||
<rect x="247.988" y="22.9619" width="3.24728" height="3.24729" transform="rotate(-45 247.988 22.9619)" fill="white"/>
|
||||
<rect x="371.982" y="146.956" width="3.24728" height="3.24728" transform="rotate(-45 371.982 146.956)" fill="white"/>
|
||||
<rect x="144.659" y="167.621" width="3.2473" height="3.24729" transform="rotate(-45 144.659 167.621)" fill="white"/>
|
||||
<rect x="268.653" y="291.615" width="3.2473" height="3.2473" transform="rotate(-45 268.653 291.615)" fill="white"/>
|
||||
<rect x="268.653" y="43.6275" width="3.24728" height="3.24729" transform="rotate(-45 268.653 43.6275)" fill="white"/>
|
||||
<rect x="392.647" y="167.621" width="3.24728" height="3.2473" transform="rotate(-45 392.647 167.621)" fill="white"/>
|
||||
<rect x="165.325" y="188.287" width="3.2473" height="3.24728" transform="rotate(-45 165.325 188.287)" fill="white"/>
|
||||
<rect x="289.319" y="312.281" width="3.2473" height="3.24728" transform="rotate(-45 289.319 312.281)" fill="white"/>
|
||||
<rect x="289.319" y="64.2932" width="3.24728" height="3.24728" transform="rotate(-45 289.319 64.2932)" fill="white"/>
|
||||
<rect x="413.313" y="188.287" width="3.24728" height="3.24728" transform="rotate(-45 413.313 188.287)" fill="white"/>
|
||||
<rect x="185.991" y="208.953" width="3.2473" height="3.24729" transform="rotate(-45 185.991 208.953)" fill="white"/>
|
||||
<rect x="309.985" y="332.946" width="3.2473" height="3.24731" transform="rotate(-45 309.985 332.946)" fill="white"/>
|
||||
<rect x="309.985" y="84.9588" width="3.24728" height="3.24729" transform="rotate(-45 309.985 84.9588)" fill="white"/>
|
||||
<rect x="433.979" y="208.953" width="3.24728" height="3.24731" transform="rotate(-45 433.979 208.953)" fill="white"/>
|
||||
<rect x="206.656" y="229.618" width="3.2473" height="3.2473" transform="rotate(-45 206.656 229.618)" fill="white"/>
|
||||
<rect x="330.65" y="353.612" width="3.2473" height="3.24728" transform="rotate(-45 330.65 353.612)" fill="white"/>
|
||||
<rect x="330.65" y="105.624" width="3.24728" height="3.2473" transform="rotate(-45 330.65 105.624)" fill="white"/>
|
||||
<rect x="454.644" y="229.618" width="3.24728" height="3.24728" transform="rotate(-45 454.644 229.618)" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 17 KiB |
38
src/assets/window-background.svg
Normal file
38
src/assets/window-background.svg
Normal file
|
@ -0,0 +1,38 @@
|
|||
<svg width="1366" height="728" viewBox="0 0 1366 728" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.4">
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M-110.707 1953.19L1907.89 1311.71L1711.11 751.364C1711.11 751.364 1672.69 793.21 1563.69 793.21C1474 793.21 1336.54 764.894 1133.3 661.622C1065.76 627.3 1003.53 612.696 945.902 612.696C619.396 612.696 440.377 1081.47 277.09 1089.21C84.9803 1098.33 -171.308 1754.9 -171.308 1754.9L-110.707 1953.19Z" fill="url(#paint0_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M-125.36 1872.43L1893.24 1233.07L1696.45 674.56C1696.45 674.56 1658.03 716.269 1549.04 716.269C1459.35 716.269 1321.88 688.045 1118.65 585.113C1051.11 550.904 988.878 536.348 931.249 536.348C604.743 536.348 425.725 1003.58 262.438 1011.3C70.3279 1020.38 -185.96 1674.8 -185.96 1674.8L-125.36 1872.43Z" fill="url(#paint1_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M-142.943 1800.49L1875.66 1159.02L1678.87 598.668C1678.87 598.668 1640.45 640.515 1531.46 640.515C1441.77 640.515 1304.3 612.198 1101.07 508.927C1033.52 474.605 971.295 460 913.666 460C587.16 460 408.142 928.77 244.854 936.516C52.7448 945.63 -203.543 1602.2 -203.543 1602.2L-142.943 1800.49Z" fill="url(#paint2_linear)"/>
|
||||
</g>
|
||||
<g opacity="0.4">
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M1174.71 -925.187L-843.895 -283.711L-647.106 276.636C-647.106 276.636 -608.685 234.79 -499.692 234.79C-410.003 234.79 -272.537 263.107 -69.302 366.378C-1.75849 400.7 60.4692 415.304 118.098 415.304C444.604 415.304 623.623 -53.4652 786.91 -61.2118C979.02 -70.3257 1235.31 -726.899 1235.31 -726.899L1174.71 -925.187Z" fill="url(#paint3_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M1189.36 -844.434L-829.242 -205.066L-632.454 353.44C-632.454 353.44 -594.033 311.731 -485.039 311.731C-395.351 311.731 -257.884 339.955 -54.6495 442.887C12.894 477.096 75.1216 491.653 132.751 491.653C459.257 491.652 638.275 24.4232 801.562 16.7021C993.672 7.61807 1249.96 -646.798 1249.96 -646.798L1189.36 -844.434Z" fill="url(#paint4_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M1206.94 -772.491L-811.659 -131.015L-614.87 429.332C-614.87 429.332 -576.45 387.485 -467.456 387.485C-377.768 387.485 -240.301 415.802 -37.0664 519.074C30.4771 553.395 92.7048 568 150.334 568C476.84 568 655.858 99.2303 819.146 91.4837C1011.26 82.3698 1267.54 -574.204 1267.54 -574.204L1206.94 -772.491Z" fill="url(#paint5_linear)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="868.293" y1="1205.82" x2="868.293" y2="612.695" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0058CC" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0058CC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="853.641" y1="1127.52" x2="853.641" y2="536.347" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0058CC" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0058CC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="836.058" y1="1053.13" x2="836.058" y2="460" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0058CC" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0058CC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="195.706" y1="-177.821" x2="195.707" y2="415.305" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0058CC" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0058CC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="210.359" y1="-99.5238" x2="210.359" y2="491.653" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0058CC" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0058CC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="227.942" y1="-25.1253" x2="227.942" y2="568" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0058CC" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0058CC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 4 KiB |
38
src/assets/window-background_dark.svg
Normal file
38
src/assets/window-background_dark.svg
Normal file
|
@ -0,0 +1,38 @@
|
|||
<svg width="1366" height="728" viewBox="0 0 1366 728" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.4">
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M-110.707 1953.19L1907.89 1311.71L1711.11 751.364C1711.11 751.364 1672.69 793.21 1563.69 793.21C1474 793.21 1336.54 764.894 1133.3 661.622C1065.76 627.3 1003.53 612.696 945.902 612.696C619.396 612.696 440.377 1081.47 277.09 1089.21C84.9803 1098.33 -171.308 1754.9 -171.308 1754.9L-110.707 1953.19Z" fill="url(#paint0_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M-125.359 1872.43L1893.24 1233.07L1696.45 674.56C1696.45 674.56 1658.03 716.269 1549.04 716.269C1459.35 716.269 1321.88 688.045 1118.65 585.113C1051.11 550.904 988.878 536.348 931.25 536.348C604.743 536.348 425.725 1003.58 262.438 1011.3C70.328 1020.38 -185.96 1674.8 -185.96 1674.8L-125.359 1872.43Z" fill="url(#paint1_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M-142.943 1800.49L1875.66 1159.02L1678.87 598.668C1678.87 598.668 1640.45 640.515 1531.46 640.515C1441.77 640.515 1304.3 612.198 1101.07 508.927C1033.52 474.605 971.295 460 913.666 460C587.16 460 408.142 928.77 244.854 936.516C52.7448 945.63 -203.543 1602.2 -203.543 1602.2L-142.943 1800.49Z" fill="url(#paint2_linear)"/>
|
||||
</g>
|
||||
<g opacity="0.4">
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M1174.71 -925.187L-843.895 -283.711L-647.106 276.636C-647.106 276.636 -608.685 234.79 -499.692 234.79C-410.003 234.79 -272.537 263.107 -69.302 366.378C-1.7585 400.7 60.4692 415.304 118.098 415.304C444.604 415.304 623.623 -53.4652 786.91 -61.2118C979.02 -70.3257 1235.31 -726.899 1235.31 -726.899L1174.71 -925.187Z" fill="url(#paint3_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M1189.36 -844.434L-829.242 -205.066L-632.454 353.44C-632.454 353.44 -594.033 311.731 -485.039 311.731C-395.351 311.731 -257.884 339.955 -54.6495 442.887C12.894 477.096 75.1216 491.653 132.751 491.653C459.257 491.652 638.275 24.4232 801.562 16.7021C993.672 7.61807 1249.96 -646.798 1249.96 -646.798L1189.36 -844.434Z" fill="url(#paint4_linear)"/>
|
||||
<path opacity="0.08" fill-rule="evenodd" clip-rule="evenodd" d="M1206.94 -772.491L-811.659 -131.015L-614.87 429.332C-614.87 429.332 -576.45 387.485 -467.456 387.485C-377.768 387.485 -240.301 415.802 -37.0664 519.074C30.4771 553.395 92.7048 568 150.334 568C476.84 568 655.858 99.2303 819.146 91.4837C1011.26 82.3698 1267.54 -574.204 1267.54 -574.204L1206.94 -772.491Z" fill="url(#paint5_linear)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="868.293" y1="1205.82" x2="868.293" y2="612.695" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="853.641" y1="1127.52" x2="853.641" y2="536.347" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="836.058" y1="1053.13" x2="836.058" y2="460" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="195.706" y1="-177.821" x2="195.707" y2="415.305" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="210.359" y1="-99.5238" x2="210.359" y2="491.653" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="227.942" y1="-25.1253" x2="227.942" y2="568" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 4 KiB |
93
src/browser/components/LoadingAnimation/LoadingAnimation.jsx
Normal file
93
src/browser/components/LoadingAnimation/LoadingAnimation.jsx
Normal file
|
@ -0,0 +1,93 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import useAnimationEnd from '../../hooks/useAnimationEnd.js';
|
||||
|
||||
import LoadingIcon from './LoadingIcon.jsx';
|
||||
|
||||
const LOADING_STATE = {
|
||||
INITIALIZING: 'initializing', // animation graphics are hidden
|
||||
LOADING: 'loading', // animation graphics fade in and animate
|
||||
LOADED: 'loaded', // animation graphics fade out
|
||||
COMPLETE: 'complete', // animation graphics are removed from the DOM
|
||||
};
|
||||
|
||||
const ANIMATION_COMPLETION_DELAY = 500;
|
||||
|
||||
/**
|
||||
* A function component for rendering the animated MM logo loading sequence
|
||||
* @param {boolean} loading - Prop that indicates whether currently loading or not
|
||||
* @param {boolean} darkMode - Prop that indicates if dark mode is enabled
|
||||
* @param {function} onLoadingAnimationComplete - Callback function to update when internal loading animation is complete
|
||||
*/
|
||||
function LoadingAnimation({
|
||||
loading = false,
|
||||
darkMode = false,
|
||||
onLoadAnimationComplete = null}
|
||||
) {
|
||||
const loadingIconContainerRef = React.useRef(null);
|
||||
const [animationState, setAnimationState] = React.useState(LOADING_STATE.INITIALIZING);
|
||||
const [loadingAnimationComplete, setLoadingAnimationComplete] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (loading) {
|
||||
setAnimationState(LOADING_STATE.LOADING);
|
||||
setLoadingAnimationComplete(false);
|
||||
}
|
||||
|
||||
// in order for the logo animation to fully complete before fading out, the LOADED state is not set until
|
||||
// both the external loaded prop changes back to false and the internal loading animation is complete
|
||||
if (!loading && loadingAnimationComplete) {
|
||||
setAnimationState(LOADING_STATE.LOADED);
|
||||
}
|
||||
}, [loading]);
|
||||
|
||||
React.useEffect(() => {
|
||||
// in order for the logo animation to fully complete before fading out, the LOADED state is not set until
|
||||
// both the external loaded prop goes back to false and the internal loading animation is complete
|
||||
if (!loading && loadingAnimationComplete) {
|
||||
setAnimationState(LOADING_STATE.LOADED);
|
||||
}
|
||||
}, [loadingAnimationComplete]);
|
||||
|
||||
// listen for end of the css logo animation sequence
|
||||
useAnimationEnd(loadingIconContainerRef, () => {
|
||||
setTimeout(() => {
|
||||
setLoadingAnimationComplete(true);
|
||||
}, ANIMATION_COMPLETION_DELAY);
|
||||
}, 'LoadingAnimation__compass-shrink');
|
||||
|
||||
// listen for end of final css logo fade/shrink animation sequence
|
||||
useAnimationEnd(loadingIconContainerRef, () => {
|
||||
if (onLoadAnimationComplete) {
|
||||
onLoadAnimationComplete();
|
||||
}
|
||||
setAnimationState(LOADING_STATE.COMPLETE);
|
||||
}, 'LoadingAnimation__shrink');
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={loadingIconContainerRef}
|
||||
className={classNames('LoadingAnimation', {
|
||||
'LoadingAnimation--darkMode': darkMode,
|
||||
'LoadingAnimation--spinning': animationState !== LOADING_STATE.INITIALIZING && animationState !== LOADING_STATE.COMPLETE,
|
||||
'LoadingAnimation--loading': animationState === LOADING_STATE.LOADING && animationState !== LOADING_STATE.COMPLETE,
|
||||
'LoadingAnimation--loaded': animationState === LOADING_STATE.LOADED && animationState !== LOADING_STATE.COMPLETE,
|
||||
})}
|
||||
>
|
||||
<LoadingIcon/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
LoadingAnimation.propTypes = {
|
||||
loading: PropTypes.bool,
|
||||
darkMode: PropTypes.bool,
|
||||
onLoadAnimationComplete: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LoadingAnimation;
|
197
src/browser/components/LoadingAnimation/LoadingIcon.jsx
Normal file
197
src/browser/components/LoadingAnimation/LoadingIcon.jsx
Normal file
|
@ -0,0 +1,197 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* A function component for inlining SVG code for animation logo loader
|
||||
*/
|
||||
function LoadingAnimation() {
|
||||
return (
|
||||
<svg
|
||||
width='104'
|
||||
height='104'
|
||||
viewBox='0 0 104 104'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id='LoadingAnimation__spinner-gradient'
|
||||
x1='0%'
|
||||
y1='72px'
|
||||
x2='0%'
|
||||
y2='32px'
|
||||
gradientUnits='userSpaceOnUse'
|
||||
>
|
||||
<stop
|
||||
offset='0'
|
||||
className='LoadingAnimation__spinner-gradient-color'
|
||||
stopOpacity='1'
|
||||
/>
|
||||
<stop
|
||||
offset='1'
|
||||
className='LoadingAnimation__spinner-gradient-color'
|
||||
stopOpacity='0'
|
||||
/>
|
||||
</linearGradient>
|
||||
<mask id='LoadingAnimation__base-wipe-mask'>
|
||||
<rect
|
||||
x='0'
|
||||
y='0'
|
||||
width='104'
|
||||
height='104'
|
||||
fill='white'
|
||||
/>
|
||||
<g className='LoadingAnimation__compass-base-mask-container'>
|
||||
<circle
|
||||
className='LoadingAnimation__compass-base-mask'
|
||||
r='27'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='white'
|
||||
stroke='black'
|
||||
strokeWidth='54'
|
||||
/>
|
||||
</g>
|
||||
</mask>
|
||||
<mask id='LoadingAnimation__base-mask'>
|
||||
<rect
|
||||
x='0'
|
||||
y='0'
|
||||
width='104'
|
||||
height='104'
|
||||
fill='white'
|
||||
/>
|
||||
<circle
|
||||
r='37'
|
||||
cx='54'
|
||||
cy='46'
|
||||
fill='black'
|
||||
/>
|
||||
<g className='LoadingAnimation__compass-needle-behind-mask'>
|
||||
<g transform='translate(54,46)'>
|
||||
<g transform='translate(-29, -61.3)'>
|
||||
<path
|
||||
d='M38.5984 0C45.476 1.07762 51.9794 3.28918 57.9108 6.43722V61.1566C57.9108 77.1373 44.9364 90.1119 28.9554 90.1119C12.9744 90.1119 0 77.1373 0 61.1566C0 55.3848 1.69443 50.0063 4.60763 45.4861L38.5984 0Z'
|
||||
fill='black'
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g className='LoadingAnimation__compass-needle-front-mask'>
|
||||
<g transform='translate(54,46)'>
|
||||
<g transform='translate(-29,-61.3)'>
|
||||
<path
|
||||
d='M38.5984 0C45.476 1.07762 51.9794 3.28918 57.9108 6.43722V61.1566C57.9108 77.1373 44.9364 90.1119 28.9554 90.1119C12.9744 90.1119 0 77.1373 0 61.1566C0 55.3848 1.69443 50.0063 4.60763 45.4861L38.5984 0Z'
|
||||
fill='black'
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</mask>
|
||||
<mask id='LoadingAnimation__spinner-left-half-mask'>
|
||||
<rect
|
||||
x='0'
|
||||
y='0'
|
||||
width='52'
|
||||
height='104'
|
||||
fill='white'
|
||||
/>
|
||||
<circle
|
||||
className='LoadingAnimation__spinner-mask'
|
||||
r='20'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='black'
|
||||
/>
|
||||
</mask>
|
||||
<mask id='LoadingAnimation__spinner-right-half-mask'>
|
||||
<rect
|
||||
x='52'
|
||||
y='0'
|
||||
width='52'
|
||||
height='104'
|
||||
fill='white'
|
||||
/>
|
||||
<circle
|
||||
className='LoadingAnimation__spinner-mask'
|
||||
r='20'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='black'
|
||||
/>
|
||||
</mask>
|
||||
<mask id='LoadingAnimation__spinner-wipe-mask'>
|
||||
<rect
|
||||
x='0'
|
||||
y='0'
|
||||
width='104'
|
||||
height='104'
|
||||
fill='white'
|
||||
/>
|
||||
<g className='LoadingAnimation__spinner-mask-container'>
|
||||
<circle
|
||||
className='LoadingAnimation__spinner-mask'
|
||||
r='27'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='black'
|
||||
stroke='white'
|
||||
strokeWidth='54'
|
||||
/>
|
||||
</g>
|
||||
</mask>
|
||||
</defs>
|
||||
<g
|
||||
className='LoadingAnimation__spinner-container'
|
||||
mask='url(#LoadingAnimation__spinner-wipe-mask)'
|
||||
>
|
||||
<g className='LoadingAnimation__spinner'>
|
||||
<circle
|
||||
r='25'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='currentColor'
|
||||
mask='url(#LoadingAnimation__spinner-left-half-mask)'
|
||||
/>
|
||||
<circle
|
||||
r='25'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='url(#LoadingAnimation__spinner-gradient)'
|
||||
mask='url(#LoadingAnimation__spinner-right-half-mask)'
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g className='LoadingAnimation__compass'>
|
||||
<g
|
||||
className='LoadingAnimation__compass-base-container'
|
||||
mask='url(#LoadingAnimation__base-wipe-mask)'
|
||||
>
|
||||
<circle
|
||||
className='LoadingAnimation__compass-base'
|
||||
r='52'
|
||||
cx='52'
|
||||
cy='52'
|
||||
fill='currentColor'
|
||||
mask='url(#LoadingAnimation__base-mask)'
|
||||
/>
|
||||
</g>
|
||||
<g className='LoadingAnimation__compass-needle-container'>
|
||||
<g className='LoadingAnimation__compass-needle'>
|
||||
<g transform='translate(54,46)'>
|
||||
<g transform='translate(-15,-42)'>
|
||||
<path
|
||||
d='M29.9539 1.4977C29.9539 0.670968 29.2827 0 28.4562 0C27.9597 0 27.5192 0.242028 27.2468 0.614415C27.216 0.656555 27.1873 0.700359 27.1609 0.745666L3.66519 32.1191C1.38202 34.7479 0 38.1803 0 41.9355C0 50.207 6.70541 56.9124 14.977 56.9124C23.2485 56.9124 29.9539 50.207 29.9539 41.9355L29.9539 41.9013V1.50252C29.9539 1.50091 29.9539 1.49931 29.9539 1.4977Z'
|
||||
fill='currentColor'
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoadingAnimation;
|
4
src/browser/components/LoadingAnimation/index.js
Normal file
4
src/browser/components/LoadingAnimation/index.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
export {default} from './LoadingAnimation.jsx';
|
75
src/browser/components/LoadingScreen.jsx
Normal file
75
src/browser/components/LoadingScreen.jsx
Normal file
|
@ -0,0 +1,75 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import useTransitionEnd from '../hooks/useTransitionEnd.js';
|
||||
|
||||
import LoadingAnimation from './LoadingAnimation';
|
||||
|
||||
/**
|
||||
* A function component for rendering the desktop app loading screen
|
||||
* @param {boolean} loading - Prop that indicates whether currently loading or not
|
||||
* @param {boolean} darkMode - Prop that indicates if dark mode is enabled
|
||||
*/
|
||||
function LoadingScreen({loading = false, darkMode = false}) {
|
||||
const loadingScreenRef = React.useRef(null);
|
||||
|
||||
const [loadingIsComplete, setLoadingIsComplete] = React.useState(true);
|
||||
const [loadAnimationIsComplete, setLoadAnimationIsComplete] = React.useState(true);
|
||||
const [fadeOutIsComplete, setFadeOutIsComplete] = React.useState(true);
|
||||
|
||||
React.useEffect(() => {
|
||||
// reset internal state if loading restarts
|
||||
if (loading) {
|
||||
resetState();
|
||||
} else {
|
||||
setLoadingIsComplete(true);
|
||||
}
|
||||
}, [loading]);
|
||||
|
||||
function handleLoadAnimationComplete() {
|
||||
setLoadAnimationIsComplete(true);
|
||||
}
|
||||
|
||||
useTransitionEnd(loadingScreenRef, React.useCallback(() => {
|
||||
setFadeOutIsComplete(true);
|
||||
}), ['opacity']);
|
||||
|
||||
function loadingInProgress() {
|
||||
return !(loadingIsComplete && loadAnimationIsComplete && fadeOutIsComplete);
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
setLoadingIsComplete(false);
|
||||
setLoadAnimationIsComplete(false);
|
||||
setFadeOutIsComplete(false);
|
||||
}
|
||||
|
||||
const loadingScreen = (
|
||||
<div
|
||||
ref={loadingScreenRef}
|
||||
className={classNames('LoadingScreen', {
|
||||
'LoadingScreen--darkMode': darkMode,
|
||||
'LoadingScreen--loaded': loadingIsComplete && loadAnimationIsComplete,
|
||||
})}
|
||||
>
|
||||
<LoadingAnimation
|
||||
loading={loading}
|
||||
darkMode={darkMode}
|
||||
onLoadAnimationComplete={handleLoadAnimationComplete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return loadingInProgress() ? loadingScreen : null;
|
||||
}
|
||||
|
||||
LoadingScreen.propTypes = {
|
||||
loading: PropTypes.bool,
|
||||
darkMode: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default LoadingScreen;
|
|
@ -794,6 +794,7 @@ export default class MainPage extends React.Component {
|
|||
ref={id}
|
||||
active={isActive}
|
||||
allowExtraBar={this.showExtraBar()}
|
||||
isDarkMode={this.state.isDarkMode}
|
||||
/>);
|
||||
});
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {ipcRenderer, remote, shell} from 'electron';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import contextMenu from '../js/contextMenu';
|
||||
import Utils from '../../utils/util';
|
||||
|
@ -16,11 +17,14 @@ import {protocols} from '../../../electron-builder.json';
|
|||
const scheme = protocols[0].schemes[0];
|
||||
|
||||
import ErrorView from './ErrorView.jsx';
|
||||
import LoadingScreen from './LoadingScreen.jsx';
|
||||
|
||||
const preloadJS = `file://${remote.app.getAppPath()}/browser/webview/mattermost_bundle.js`;
|
||||
|
||||
const ERR_NOT_IMPLEMENTED = -11;
|
||||
const U2F_EXTENSION_URL = 'chrome-extension://kmendfapggjehodndflmmgagdbamhnfd/u2f-comms.html';
|
||||
const ERR_USER_ABORTED = -3;
|
||||
const AUTO_RELOAD_TIMER = 30000;
|
||||
|
||||
export default class MattermostView extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -30,7 +34,7 @@ export default class MattermostView extends React.Component {
|
|||
errorInfo: null,
|
||||
isContextMenuAdded: false,
|
||||
reloadTimeoutID: null,
|
||||
isLoaded: false,
|
||||
isWebviewLoaded: false,
|
||||
basename: '/',
|
||||
};
|
||||
|
||||
|
@ -49,7 +53,7 @@ export default class MattermostView extends React.Component {
|
|||
|
||||
webview.addEventListener('did-fail-load', (e) => {
|
||||
console.log(self.props.name, 'webview did-fail-load', e);
|
||||
if (e.errorCode === -3) { // An operation was aborted (due to user action).
|
||||
if (e.errorCode === ERR_USER_ABORTED) { // An operation was aborted (due to user action).
|
||||
return;
|
||||
}
|
||||
if (e.errorCode === ERR_NOT_IMPLEMENTED && e.validatedURL === U2F_EXTENSION_URL) {
|
||||
|
@ -60,7 +64,7 @@ export default class MattermostView extends React.Component {
|
|||
|
||||
self.setState({
|
||||
errorInfo: e,
|
||||
isLoaded: true,
|
||||
isWebviewLoaded: true,
|
||||
});
|
||||
function reload() {
|
||||
window.removeEventListener('online', reload);
|
||||
|
@ -68,7 +72,7 @@ export default class MattermostView extends React.Component {
|
|||
}
|
||||
if (navigator.onLine) {
|
||||
self.setState({
|
||||
reloadTimeoutID: setTimeout(reload, 30000),
|
||||
reloadTimeoutID: setTimeout(reload, AUTO_RELOAD_TIMER),
|
||||
});
|
||||
} else {
|
||||
window.addEventListener('online', reload);
|
||||
|
@ -154,7 +158,7 @@ export default class MattermostView extends React.Component {
|
|||
switch (event.channel) {
|
||||
case 'onGuestInitialized':
|
||||
self.setState({
|
||||
isLoaded: true,
|
||||
isWebviewLoaded: true,
|
||||
basename: event.args[0] || '/',
|
||||
});
|
||||
break;
|
||||
|
@ -221,7 +225,7 @@ export default class MattermostView extends React.Component {
|
|||
this.setState({
|
||||
errorInfo: null,
|
||||
reloadTimeoutID: null,
|
||||
isLoaded: false,
|
||||
isWebviewLoaded: false,
|
||||
});
|
||||
const webview = this.webviewRef.current;
|
||||
if (webview) {
|
||||
|
@ -289,7 +293,7 @@ export default class MattermostView extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
handleUserActivityUpdate = (event, status) => {
|
||||
handleUserActivityUpdate = (_, status) => {
|
||||
// pass user activity update to the webview
|
||||
this.webviewRef.current.send('user-activity-update', status);
|
||||
}
|
||||
|
@ -306,45 +310,29 @@ export default class MattermostView extends React.Component {
|
|||
className='errorView'
|
||||
errorInfo={this.state.errorInfo}
|
||||
active={this.props.active}
|
||||
/>) : null;
|
||||
|
||||
// Need to keep webview mounted when failed to load.
|
||||
const classNames = ['mattermostView'];
|
||||
if (this.props.withTab) {
|
||||
classNames.push('mattermostView-with-tab');
|
||||
}
|
||||
if (!this.props.active) {
|
||||
classNames.push('mattermostView-hidden');
|
||||
}
|
||||
if (this.state.errorInfo) {
|
||||
classNames.push('mattermostView-error');
|
||||
}
|
||||
if (this.props.allowExtraBar) {
|
||||
classNames.push('allow-extra-bar');
|
||||
}
|
||||
|
||||
const loadingImage = !this.state.errorInfo && this.props.active && !this.state.isLoaded ? (
|
||||
<div className='mattermostView-loadingScreen'>
|
||||
<img
|
||||
className='mattermostView-loadingImage'
|
||||
src='../assets/loading.gif'
|
||||
srcSet='../assets/loading.gif 1x, ../assets/loading@2x.gif 2x'
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames.join(' ')}
|
||||
className={classNames('mattermostView', {
|
||||
'mattermostView-with-tab': this.props.withTab,
|
||||
'mattermostView-hidden': !this.props.active,
|
||||
'mattermostView-error': this.state.errorInfo,
|
||||
'allow-extra-bar': this.props.allowExtraBar,
|
||||
})}
|
||||
>
|
||||
{ errorView }
|
||||
<LoadingScreen
|
||||
loading={!this.state.errorInfo && this.props.active && !this.state.isWebviewLoaded}
|
||||
darkMode={this.props.isDarkMode}
|
||||
/>
|
||||
<webview
|
||||
id={this.props.id}
|
||||
preload={preloadJS}
|
||||
src={this.props.src}
|
||||
ref={this.webviewRef}
|
||||
/>
|
||||
{ loadingImage }
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
@ -362,6 +350,7 @@ MattermostView.propTypes = {
|
|||
onSelectSpellCheckerLocale: PropTypes.func,
|
||||
handleInterTeamLink: PropTypes.func,
|
||||
allowExtraBar: PropTypes.bool,
|
||||
isDarkMode: PropTypes.bool,
|
||||
};
|
||||
|
||||
/* eslint-enable react/no-set-state */
|
||||
|
|
294
src/browser/css/components/LoadingAnimation.css
Normal file
294
src/browser/css/components/LoadingAnimation.css
Normal file
|
@ -0,0 +1,294 @@
|
|||
.LoadingAnimation {
|
||||
--fade-duration: 150ms;
|
||||
--colour: #166de0;
|
||||
--animation-initial-delay: 500ms;
|
||||
--animation-start-duration: 750ms;
|
||||
--animation-end-duration: 600ms;
|
||||
--animation-spinner-speed: 500ms;
|
||||
--animation-spinner-mask-stroke-length: 169.6;
|
||||
--ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
|
||||
--ease-in: var(--ease-in-cubic);
|
||||
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--ease-in-out: var(--ease-in-out-cubic);
|
||||
--ease-in-out-compass-shrink: cubic-bezier(0.1, 0.25, 0.3, 1);
|
||||
|
||||
opacity: 0;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.LoadingAnimation--darkMode {
|
||||
--colour: white;
|
||||
}
|
||||
.LoadingAnimation g,
|
||||
.LoadingAnimation rect,
|
||||
.LoadingAnimation path,
|
||||
.LoadingAnimation circle {
|
||||
transform-origin: center center;
|
||||
}
|
||||
.LoadingAnimation svg {
|
||||
color: var(--colour);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__spinner-gradient-color {
|
||||
stop-color: var(--colour);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__spinner-mask {
|
||||
transform: scale3d(1.03, 1.03, 1);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__spinner-container {
|
||||
opacity: 0;
|
||||
transform: scale3D(2.08, 2.08, 1) rotate3d(0, 0, 1, -10deg);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__spinner-mask-container {
|
||||
transform: rotate3d(0, 0, 1, -86deg);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__spinner-mask {
|
||||
stroke-dasharray: var(--animation-spinner-mask-stroke-length);
|
||||
stroke-dashoffset: var(--animation-spinner-mask-stroke-length);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__compass {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__compass-needle-container {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__compass-needle,
|
||||
.LoadingAnimation .LoadingAnimation__compass-needle-front-mask,
|
||||
.LoadingAnimation .LoadingAnimation__compass-needle-behind-mask {
|
||||
transform-origin: 54px 46px;
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__compass-base-mask-container {
|
||||
transform: rotate3d(0, 0, 1, -86deg);
|
||||
}
|
||||
.LoadingAnimation .LoadingAnimation__compass-base-mask {
|
||||
stroke-dasharray: var(--animation-spinner-mask-stroke-length);
|
||||
stroke-dashoffset: var(--animation-spinner-mask-stroke-length);
|
||||
}
|
||||
|
||||
.LoadingAnimation--loading {
|
||||
--fade-in-duration: 150ms;
|
||||
--fade-in-delay: 0ms;
|
||||
|
||||
animation:
|
||||
LoadingAnimation__fade-in var(--fade-in-duration) var(--fade-in-delay) var(--ease-in) forwards;
|
||||
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__spinner-container {
|
||||
--shrink-duration: calc(var(--animation-end-duration) * 0.5);
|
||||
--shrink-delay: calc( ( var(--animation-start-duration) + var(--animation-end-duration) ) * 0.91 + var(--animation-initial-delay));
|
||||
--fade-in-duration: calc(var(--animation-end-duration) * 0.25);
|
||||
--fade-in-delay: calc( var(--animation-start-duration) + var(--animation-end-duration) * 0.24 + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__spinner-shrink var(--shrink-duration) var(--shrink-delay) var(--ease-in-out-compass-shrink) forwards,
|
||||
LoadingAnimation__fade-in var(--fade-in-duration) var(--fade-in-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__spinner-mask {
|
||||
--reveal-duration: var(--animation-end-duration);
|
||||
--reveal-delay: calc(var(--animation-start-duration) + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__spinner-reveal var(--reveal-duration) var(--reveal-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__compass {
|
||||
--shrink-duration: calc(var(--animation-end-duration) * 0.5);
|
||||
--shrink-delay: calc( ( var(--animation-start-duration) + var(--animation-end-duration) ) * 0.91 + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__compass-shrink var(--shrink-duration) var(--shrink-delay) var(--ease-in-out-compass-shrink) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__compass-needle-container {
|
||||
--shrink-duration: calc(var(--animation-end-duration) * 0.25);
|
||||
--shrink-delay: calc( var(--animation-start-duration) + var(--animation-end-duration) - var(--animation-end-duration) * 0.25 + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__needle-shrink var(--shrink-duration) var(--shrink-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__compass-needle {
|
||||
--spin-left-duration: var(--animation-start-duration);
|
||||
--spin-left-delay: var(--animation-initial-delay);
|
||||
--spin-right-duration: var(--animation-end-duration);
|
||||
--spin-right-delay: calc(var(--animation-start-duration) + var(--animation-initial-delay));
|
||||
--fade-out-duration: calc(var(--animation-end-duration) * 0.25);
|
||||
--fade-out-delay: calc( var(--animation-start-duration) + var(--animation-end-duration) - var(--animation-end-duration) * 0.25 + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__needle-spin-left var(--spin-left-duration) var(--spin-left-delay) var(--ease-in-out) forwards,
|
||||
LoadingAnimation__needle-spin-right var(--spin-right-duration) var(--spin-right-delay) var(--ease-in) forwards,
|
||||
LoadingAnimation__fade-out var(--fade-out-duration) var(--fade-out-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__compass-needle-behind-mask {
|
||||
--spin-left-duration: var(--animation-start-duration);
|
||||
--spin-left-delay: var(--animation-initial-delay);
|
||||
--spin-right-duration: calc(var(--animation-end-duration) * 0.3666);
|
||||
--spin-right-delay: calc(var(--animation-start-duration) + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__needle-mask-spin-left var(--spin-left-duration) var(--spin-left-delay) var(--ease-in-out) forwards,
|
||||
LoadingAnimation__needle-mask-spin-right var(--spin-right-duration) var(--spin-right-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__compass-needle-front-mask {
|
||||
--spin-left-duration: var(--animation-start-duration);
|
||||
--spin-left-delay: var(--animation-initial-delay);
|
||||
--spin-right-duration: var(--animation-end-duration);
|
||||
--spin-right-delay: calc(var(--animation-start-duration) + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__needle-spin-left var(--spin-left-duration) var(--spin-left-delay) var(--ease-in-out) forwards,
|
||||
LoadingAnimation__needle-spin-right var(--spin-right-duration) var(--spin-right-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--loading .LoadingAnimation__compass-base-mask {
|
||||
--conceal-duration: var(--animation-end-duration);
|
||||
--conceal-delay: calc(var(--animation-start-duration) + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__compass-base-conceal var(--conceal-duration) var(--conceal-delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation.LoadingAnimation--spinning .LoadingAnimation__spinner {
|
||||
--spin-duration: var(--animation-spinner-speed);
|
||||
--spin-delay: calc( ( var(--animation-start-duration) + var(--animation-end-duration) ) * 0.95 + var(--animation-initial-delay));
|
||||
|
||||
animation:
|
||||
LoadingAnimation__spinner-spin var(--spin-duration) var(--spin-delay) linear infinite;
|
||||
}
|
||||
|
||||
.LoadingAnimation--loaded {
|
||||
--duration: 150ms;
|
||||
--delay: 0ms;
|
||||
|
||||
animation:
|
||||
LoadingAnimation__fade-out var(--duration) var(--delay) var(--ease-in) forwards,
|
||||
LoadingAnimation__shrink var(--duration) var(--delay) var(--ease-in) forwards;
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__spinner-container {
|
||||
opacity: 1;
|
||||
transform: scale3D(1, 1, 1) rotate3d(0, 0, 1, -10deg);
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__spinner-mask {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__compass {
|
||||
transform: scale3D(0.4166666667, 0.4166666667, 1);
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__compass-needle-container {
|
||||
transform: scale3d(0.35, 0.35, 1);
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__compass-needle {
|
||||
opacity: 0;
|
||||
transform: rotate3d(0, 0, 1, 405deg);
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__compass-needle-behind-mask {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__compass-needle-front-mask {
|
||||
transform: rotate3d(0, 0, 1, 405deg);
|
||||
}
|
||||
.LoadingAnimation--loaded .LoadingAnimation__compass-base-mask {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
@keyframes LoadingAnimation__fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__shrink {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale3d(0.35, 0.35, 1);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__spinner-shrink {
|
||||
0% {
|
||||
transform: scale3D(2.08, 2.08, 1) rotate3d(0, 0, 1, -10deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale3D(1, 1, 1) rotate3d(0, 0, 1, -10deg);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__spinner-spin {
|
||||
from {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate3d(0, 0, 1, 359deg);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__spinner-reveal {
|
||||
0%, 5% {
|
||||
stroke-dashoffset: var(--animation-spinner-mask-stroke-length);
|
||||
}
|
||||
95%, 100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__needle-spin-left {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, -20deg);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__needle-spin-right {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, -20deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 405deg);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__needle-mask-spin-left {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, -20deg);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__needle-mask-spin-right {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, -20deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__needle-shrink {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale3d(0.35, 0.35, 1);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__compass-shrink {
|
||||
0% {
|
||||
transform: scale3D(1, 1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale3D(0.4166666667, 0.4166666667, 1);
|
||||
}
|
||||
}
|
||||
@keyframes LoadingAnimation__compass-base-conceal {
|
||||
0%, 5% {
|
||||
stroke-dashoffset: var(--animation-spinner-mask-stroke-length);
|
||||
}
|
||||
95%, 100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
55
src/browser/css/components/LoadingScreen.css
Normal file
55
src/browser/css/components/LoadingScreen.css
Normal file
|
@ -0,0 +1,55 @@
|
|||
.LoadingScreen {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
vertical-align: middle;
|
||||
background: white url(../../../assets/window-background.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 10;
|
||||
overflow:hidden;
|
||||
|
||||
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
|
||||
}
|
||||
|
||||
.LoadingScreen::before, .LoadingScreen::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
opacity: 0.1;
|
||||
background-image: url(../../../assets/window-background-dots.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.LoadingScreen::before {
|
||||
left: -210px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.LoadingScreen::after {
|
||||
right: -80px;
|
||||
top: 50%;
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.LoadingScreen--darkMode {
|
||||
background-color: #323639;
|
||||
background-image: url(../../../assets/window-background_dark.svg);
|
||||
}
|
||||
.LoadingScreen--darkMode::before, .LoadingScreen--darkMode::after {
|
||||
background-image: url(../../../assets/window-background-dots_dark.svg);
|
||||
}
|
||||
|
||||
.LoadingScreen--loaded {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end;
|
||||
}
|
|
@ -1,12 +1,21 @@
|
|||
.mattermostView {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mattermostView-hidden {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mattermostView .ErrorView {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mattermostView webview, .mattermostView .mattermostView-loadingScreen {
|
||||
.mattermostView webview {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
|
@ -23,20 +32,6 @@
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
.mattermostView-loadingScreen {
|
||||
vertical-align: middle;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.mattermostView-loadingImage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.allow-extra-bar webview {
|
||||
top: 76px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,3 +10,5 @@
|
|||
@import url("UpdaterPage.css");
|
||||
@import url("CertificateModal.css");
|
||||
@import url("ExtraBar.css");
|
||||
@import url("LoadingScreen.css");
|
||||
@import url("LoadingAnimation.css");
|
||||
|
|
44
src/browser/hooks/useAnimationEnd.js
Normal file
44
src/browser/hooks/useAnimationEnd.js
Normal file
|
@ -0,0 +1,44 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* A custom hook to implement an animationend listener on the provided ref
|
||||
* @param {object} ref - A reference to a DOM element to add the listener to
|
||||
* @param {function} callback - A callback function that will be run for matching animation events
|
||||
* @param {string} animationName - The name of the animation to listen for
|
||||
* @param {boolean} listenForEventBubbling - A parameter that when true, listens for events on the target element and
|
||||
* bubbled from all descendent elements but when false, only listens for events coming from the target element and
|
||||
* ignores events bubbling up from descendent elements
|
||||
*/
|
||||
function useAnimationEnd(
|
||||
ref,
|
||||
callback,
|
||||
animationName,
|
||||
listenForEventBubbling = true,
|
||||
) {
|
||||
React.useEffect(() => {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
function handleAnimationend(event) {
|
||||
if (!listenForEventBubbling && event.target !== ref.current) {
|
||||
return;
|
||||
}
|
||||
if (animationName && animationName !== event.animationName) {
|
||||
return;
|
||||
}
|
||||
callback(event);
|
||||
}
|
||||
|
||||
ref.current.addEventListener('animationend', handleAnimationend);
|
||||
|
||||
return () => {
|
||||
ref.current.removeEventListener('animationend', handleAnimationend);
|
||||
};
|
||||
}, [ref, callback, animationName, listenForEventBubbling]);
|
||||
}
|
||||
|
||||
export default useAnimationEnd;
|
57
src/browser/hooks/useTransitionEnd.js
Normal file
57
src/browser/hooks/useTransitionEnd.js
Normal file
|
@ -0,0 +1,57 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* A custom hook to implement a transitionend listener on the provided ref
|
||||
* @param {object} ref - A reference to a DOM element to add the listener to
|
||||
* @param {function} callback - A callback function that will be run for matching animation events
|
||||
* @param {array} properties - An array of css property strings to listen for
|
||||
* @param {boolean} listenForEventBubbling - A parameter that when true, listens for events on the target element and
|
||||
* bubbled from all descendent elements but when false, only listens for events coming from the target element and
|
||||
* ignores events bubbling up from descendent elements
|
||||
*/
|
||||
function useTransitionend(
|
||||
ref,
|
||||
callback,
|
||||
properties,
|
||||
listenForEventBubbling = true
|
||||
) {
|
||||
React.useEffect(() => {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
function handleTransitionEnd(event) {
|
||||
if (!listenForEventBubbling && event.target !== ref.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (properties && typeof properties === 'object') {
|
||||
const property = properties.find(
|
||||
(propertyName) => propertyName === event.propertyName
|
||||
);
|
||||
if (property) {
|
||||
callback(event);
|
||||
}
|
||||
return;
|
||||
}
|
||||
callback(event);
|
||||
}
|
||||
|
||||
ref.current.addEventListener('transitionend', handleTransitionEnd);
|
||||
|
||||
return () => {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
ref.current.removeEventListener(
|
||||
'transitionend',
|
||||
handleTransitionEnd
|
||||
);
|
||||
};
|
||||
}, [ref, callback, properties, listenForEventBubbling]);
|
||||
}
|
||||
|
||||
export default useTransitionend;
|
|
@ -12,6 +12,7 @@
|
|||
"@hapi/joi": "^16.1.8",
|
||||
"auto-launch": "^5.0.5",
|
||||
"bootstrap": "^3.3.7",
|
||||
"classnames": "^2.2.6",
|
||||
"electron-context-menu": "^0.16.0",
|
||||
"electron-devtools-installer": "^2.2.4",
|
||||
"electron-is-dev": "^1.0.1",
|
||||
|
|
Loading…
Reference in a new issue