Fixed icon style and added splash screen

2021-04-24 20:09:28 +02:00 · 2021-04-24 20:09:28 +02:00 · b45168074c
parent d2910d0045
commit b45168074c
14 changed files with 74 additions and 41 deletions
--- a/app/src/main/assets/web/css/style.css
+++ b/app/src/main/assets/web/css/style.css
@ -127,3 +127,16 @@ html, body {
 .add-modal form input[type=submit] {
  font-size: 1.05em;
 }
+
+.splash {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2em;
+    z-index: 1000;
+}
--- a/app/src/main/assets/web/img/icon.png
+++ b/app/src/main/assets/web/img/icon.png
@ -0,0 +1 @@
+../../../res/mipmap-xxxhdpi/ic_launcher.png
--- a/app/src/main/assets/web/index.html
+++ b/app/src/main/assets/web/index.html
@ -9,6 +9,15 @@

 <body>
 <div id="app">
+    <div class="splash" v-if="splash">
+        <div class="icon">
+            <img src="img/icon.png">
+        </div>
+        <div class="app-name">
+            Platypush
+        </div>
+    </div>
+
    <div class="services">
        <div class="no-items" v-if="loading || !Object.keys(services).length">
            <div class="loading" v-if="loading">Loading...</div>
@ -48,47 +57,7 @@
    <div class="add-btn" @click="addModalVisible = true"></div>
 </div>

-<script>
-        new Vue({
-            el: '#app',
-            data: function() {
-                return {
-                    loading: false,
-                    services: {},
-                    addModalVisible: false,
-                    addModalHost: undefined,
-                    addModalPort: 8008,
-                }
-            },
+<script type="text/javascript" src="js/main.js"></script>

-            methods: {
-                refresh: function() {
-                    this.services = {
-                        ...this.services,
-                        ...JSON.parse(app.pollServices()),
-                    }
-                },
-
-                onClick: function(service) {
-                    this.loadService(service.host, service.port)
-                },
-
-                onConnect: function() {
-                    this.loadService(this.addModalHost, this.addModalPort)
-                },
-
-                loadService: function(host, port) {
-                    this.loading = true
-                    app.stopServicesPoll()
-                    window.location.href = `http://${host}:${port}/`
-                },
-            },
-
-            mounted: function() {
-                app.startServicesPoll()
-                window.setInterval(this.refresh, 2000)
-            }
-        })
-    </script>
 </body>
 </html>
--- a/app/src/main/assets/web/js/main.js
+++ b/app/src/main/assets/web/js/main.js
@ -0,0 +1,50 @@
+new Vue({
+    el: '#app',
+    data: function() {
+        return {
+            loading: false,
+            splash: false,
+            services: {},
+            addModalVisible: false,
+            addModalHost: undefined,
+            addModalPort: 8008,
+        }
+    },
+
+    methods: {
+        refresh: function() {
+            this.services = {
+                ...this.services,
+                ...JSON.parse(app.pollServices()),
+            }
+        },
+
+        onClick: function(service) {
+            this.loadService(service.host, service.port)
+        },
+
+        onConnect: function() {
+            this.loadService(this.addModalHost, this.addModalPort)
+        },
+
+        loadService: function(host, port) {
+            this.loading = true
+            app.stopServicesPoll()
+            window.location.href = `http://${host}:${port}/`
+        },
+
+        splashScreen: function(duration) {
+            var self = this
+            this.splash = true
+            window.setTimeout(() => {
+                self.splash = false
+            }, duration)
+        },
+    },
+
+    mounted: function() {
+        this.splashScreen(3000)
+        app.startServicesPoll()
+        window.setInterval(this.refresh, 500)
+    }
+})
--- a/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png