diff --git a/src/Web/Avalonia.Web.Sample/Avalonia.Web.Sample.csproj b/src/Web/Avalonia.Web.Sample/Avalonia.Web.Sample.csproj index e1f0d74835..ad8d14e527 100644 --- a/src/Web/Avalonia.Web.Sample/Avalonia.Web.Sample.csproj +++ b/src/Web/Avalonia.Web.Sample/Avalonia.Web.Sample.csproj @@ -30,6 +30,9 @@ + + + diff --git a/src/Web/Avalonia.Web.Sample/Logo.svg b/src/Web/Avalonia.Web.Sample/Logo.svg new file mode 100644 index 0000000000..9685a23af1 --- /dev/null +++ b/src/Web/Avalonia.Web.Sample/Logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Web/Avalonia.Web.Sample/app.css b/src/Web/Avalonia.Web.Sample/app.css new file mode 100644 index 0000000000..04ea5bee19 --- /dev/null +++ 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; + } +} diff --git a/src/Web/Avalonia.Web.Sample/favicon.ico b/src/Web/Avalonia.Web.Sample/favicon.ico new file mode 100644 index 0000000000..da8d49ff9b Binary files /dev/null and b/src/Web/Avalonia.Web.Sample/favicon.ico differ diff --git a/src/Web/Avalonia.Web.Sample/index.html b/src/Web/Avalonia.Web.Sample/index.html index 3866e2bfa7..ee023790fb 100644 --- a/src/Web/Avalonia.Web.Sample/index.html +++ b/src/Web/Avalonia.Web.Sample/index.html @@ -10,12 +10,19 @@ + -
-
- Loading +
+
+
+

Powered by

+ + Avalonia Logo + Avalonia + +
diff --git a/src/Web/Avalonia.Web/AvaloniaView.cs b/src/Web/Avalonia.Web/AvaloniaView.cs index faba09f66e..6d7ddeb022 100644 --- 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"); } }); }); diff --git a/src/Web/Avalonia.Web/Interop/DomHelper.cs b/src/Web/Avalonia.Web/Interop/DomHelper.cs index f1d98a9d24..c02bc4dae3 100644 --- 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, diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts index 48b6f9c45f..068fe08620 100644 --- 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");