TF-2135 Add splash screen for web

linagora · Sep 14, 2023 · da3c613 · da3c613
1 parent 964013f
commit da3c613
Show file tree

Hide file tree

Showing 21 changed files with 105 additions and 1 deletion.
diff --git a/assets/icons/icon_logo.png b/assets/icons/icon_logo.png
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -302,7 +302,6 @@ flutter_native_splash:
   color: "#000000"
   branding: "assets/icons/icon_branding.png"
   image: "assets/icons/icon_logo.png"
-  web: false
 
 cider:
   link_template:

diff --git a/web/index.html b/web/index.html
@@ -31,10 +31,30 @@
 
   <title>Team Mail</title>
   <link rel="manifest" href="manifest.json">
+  <link rel="stylesheet" type="text/css" href="splash/style.css">
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 
   <script type="application/javascript" src="assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
+  <script src="splash/splash.js"></script>
 </head>
 <body>
+
+    <picture id="splash-branding">
+        <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
+        <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+        <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="">
+    </picture>
+
+    <div class="center">
+        <div align="center">
+            <picture id="splash">
+                <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+                <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+                <img aria-hidden="true" src="splash/img/light-1x.png" alt="">
+            </picture>
+            <div class="loader"></div>
+        </div>
+    </div>
   <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->

diff --git a/web/splash/img/branding-1x.png b/web/splash/img/branding-1x.png
diff --git a/web/splash/img/branding-2x.png b/web/splash/img/branding-2x.png
diff --git a/web/splash/img/branding-3x.png b/web/splash/img/branding-3x.png
diff --git a/web/splash/img/branding-4x.png b/web/splash/img/branding-4x.png
diff --git a/web/splash/img/branding-dark-1x.png b/web/splash/img/branding-dark-1x.png
diff --git a/web/splash/img/branding-dark-2x.png b/web/splash/img/branding-dark-2x.png
diff --git a/web/splash/img/branding-dark-3x.png b/web/splash/img/branding-dark-3x.png
diff --git a/web/splash/img/branding-dark-4x.png b/web/splash/img/branding-dark-4x.png
diff --git a/web/splash/img/dark-1x.png b/web/splash/img/dark-1x.png
diff --git a/web/splash/img/dark-2x.png b/web/splash/img/dark-2x.png
diff --git a/web/splash/img/dark-3x.png b/web/splash/img/dark-3x.png
diff --git a/web/splash/img/dark-4x.png b/web/splash/img/dark-4x.png
diff --git a/web/splash/img/light-1x.png b/web/splash/img/light-1x.png
diff --git a/web/splash/img/light-2x.png b/web/splash/img/light-2x.png
diff --git a/web/splash/img/light-3x.png b/web/splash/img/light-3x.png
diff --git a/web/splash/img/light-4x.png b/web/splash/img/light-4x.png
diff --git a/web/splash/splash.js b/web/splash/splash.js
@@ -0,0 +1,5 @@
+function removeSplashFromWeb() {
+  document.getElementById("splash")?.remove();
+  document.getElementById("splash-branding")?.remove();
+  document.body.style.background = "transparent";
+}
diff --git a/web/splash/style.css b/web/splash/style.css
@@ -0,0 +1,80 @@
+html {
+  height: 100%
+}
+
+body {
+  margin: 0;
+  min-height: 100%;
+  background-color: #000000;
+  background-size: 100% 100%;
+}
+
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.contain {
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit: contain;
+}
+
+.stretch {
+  display:block;
+  width:100%;
+  height:100%;
+}
+
+.cover {
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit: cover;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+
+.bottomLeft {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.bottomRight {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.loader {
+  margin: 16px;
+  border: 2px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 2px solid #007AFF;
+  width: 18px;
+  height: 18px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}