tidy splashscreen.

4 years ago · dff3c6a95a
8 changed files with 65 additions and 4 deletions
--- a/src/Web/Avalonia.Web.Sample/Avalonia.Web.Sample.csproj
+++ b/src/Web/Avalonia.Web.Sample/Avalonia.Web.Sample.csproj
@ -30,6 +30,9 @@
  <ItemGroup>
    <WasmExtraFilesToDeploy Include="index.html" />
    <WasmExtraFilesToDeploy Include="main.js" />
+    <WasmExtraFilesToDeploy Include="favicon.ico" />
+    <WasmExtraFilesToDeploy Include="Logo.svg" />
+    <WasmExtraFilesToDeploy Include="app.css" />
  </ItemGroup>

  <Import Project="..\Avalonia.Web\Avalonia.Web.props" />
--- a/src/Web/Avalonia.Web.Sample/Logo.svg
+++ b/src/Web/Avalonia.Web.Sample/Logo.svg
@ -0,0 +1,5 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.4661 34.928C30.5364 34.928 30.6052 34.928 30.6754 34.928C32.8596 34.928 34.654 33.2918 34.9053 31.1752L34.9356 16.9955C34.6872 7.56697 26.9662 0 17.4777 0C7.83263 0 0.0137329 7.8189 0.0137329 17.464C0.0137329 27.0059 7.66618 34.7631 17.1687 34.928H30.4661Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5239 5.948C12.0268 5.948 7.42967 9.80117 6.286 14.954C7.38092 15.2609 8.18385 16.2664 8.18385 17.4593C8.18385 18.6523 7.38092 19.6577 6.286 19.9647C7.42966 25.1175 12.0268 28.9706 17.5239 28.9706C19.525 28.9706 21.4068 28.4601 23.0462 27.562V28.8927H29.0352V17.9365C29.0407 17.7908 29.0352 17.6063 29.0352 17.4593C29.0352 11.1018 23.8814 5.948 17.5239 5.948ZM12.0098 17.4593C12.0098 14.414 14.4786 11.9452 17.5239 11.9452C20.5693 11.9452 23.038 14.414 23.038 17.4593C23.038 20.5047 20.5693 22.9734 17.5239 22.9734C14.4786 22.9734 12.0098 20.5047 12.0098 17.4593Z" fill="#8B44AC"/>
+<path d="M7.36841 17.4517C7.36841 18.4691 6.54368 19.2938 5.52631 19.2938C4.50894 19.2938 3.6842 18.4691 3.6842 17.4517C3.6842 16.4343 4.50894 15.6096 5.52631 15.6096C6.54368 15.6096 7.36841 16.4343 7.36841 17.4517Z" fill="#8B44AC"/>
+</svg>
--- a/src/Web/Avalonia.Web.Sample/app.css
+++ b/src/Web/Avalonia.Web.Sample/app.css
@ -0,0 +1,38 @@
+#out {
+    height: 100vh;
+    width: 100vw
+}
+
+#avalonia-splash {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    color: whitesmoke;
+    background: #171C2C;
+    font-family: 'Nunito', sans-serif;
+}
+
+#avalonia-splash a{
+    color: whitesmoke;
+    text-decoration: none;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    height: 250px;
+}
+
+.splash-close {
+    animation: fadeOut 1s forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
--- a/src/Web/Avalonia.Web.Sample/favicon.ico
+++ b/src/Web/Avalonia.Web.Sample/favicon.ico
--- a/src/Web/Avalonia.Web.Sample/index.html
+++ b/src/Web/Avalonia.Web.Sample/index.html
@ -10,12 +10,19 @@
    <link rel="modulepreload" href="./main.js" />
    <link rel="modulepreload" href="./dotnet.js" />
    <link rel="modulepreload" href="./avalonia.js" />
+    <link rel="stylesheet" href="./app.css" />
 </head>

 <body style="margin: 0px">
-    <div id="out" style="height: 100vh; width: 100vw">
-        <div id="avalonia-splash" style="position:absolute; height: 100%; width: 100%;">
-            Loading
+    <div id="out">
+        <div id="avalonia-splash">
+            <div class="center">
+                <h2>Powered by</h2>
+                <a class="navbar-brand" href="https://www.avaloniaui.net/" target="_blank">
+                    <img src="Logo.svg" alt="Avalonia Logo" width="30" height="24" />
+                    Avalonia
+                </a>
+            </div>
        </div>
    </div>
    <script type='module' src="./main.js"></script>
--- a/src/Web/Avalonia.Web/AvaloniaView.cs
+++ b/src/Web/Avalonia.Web/AvaloniaView.cs
@ -74,7 +74,7 @@ namespace Avalonia.Web
                {
                    if (_splash != null)
                    {
-                        InputHelper.HideElement(_splash);
+                        DomHelper.AddCssClass(_splash, "splash-close");
                    }
                });
            });
--- a/src/Web/Avalonia.Web/Interop/DomHelper.cs
+++ b/src/Web/Avalonia.Web/Interop/DomHelper.cs
@ -11,6 +11,9 @@ internal static partial class DomHelper
    [JSImport("AvaloniaDOM.createAvaloniaHost", "avalonia.ts")]
    public static partial JSObject CreateAvaloniaHost(JSObject element);

+    [JSImport("AvaloniaDOM.addClass", "avalonia.ts")]
+    public static partial void AddCssClass(JSObject element, string className);
+
    [JSImport("SizeWatcher.observe", "avalonia.ts")]
    public static partial JSObject ObserveSize(
        JSObject canvas,
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
@ -1,4 +1,9 @@
 export class AvaloniaDOM {
+
+    public static addClass(element: HTMLElement, className: string) {
+        element.classList.add(className);
+    }
+
    static createAvaloniaHost(host: HTMLElement) {
        // Root element
        host.classList.add("avalonia-container");