Clean up UI for initial install

README.md

@@ -34,6 +34,7 @@ apt install -y build-essential libwebkit2gtk-4.0-dev libssl-dev
 In order to build yourself an installer, as a bare minimum, you need to:
 
 - Add your favicon to `static/favicon.ico`
+- Add your logo to `static/logo.png`
 - Modify the bootstrap configuration file as needed (`config.PLATFORM.toml`).
 - Have the main configuration file somewhere useful, reachable over HTTP.
 - Run:

src/assets.rs

@@ -34,6 +34,7 @@ pub fn file_from_string(file_path: &str) -> Option<(String, &'static [u8])> {
         file_path,
         "/index.html",
         "/favicon.ico",
+        "/logo.png",
         "/css/bulma.min.css",
         "/css/main.css",
         "/fonts/roboto-v18-latin-regular.eot",

static/index.html

@@ -19,12 +19,17 @@
             <div class="container">
                 <div class="columns">
                     <div class="column is-one-third has-padding" v-if="!metadata.is_launcher">
-                        <h1 class="title">
+                        <img src="/logo.png" width="60%" />
+                        <h1 class="subtitle" v-if="!metadata.preexisting_install">
                             Welcome to the {{ attrs.name }} installer!
                         </h1>
-                        <h2 class="subtitle">
+                        <h2 class="subtitle" v-if="!metadata.preexisting_install">
                             We will have you up and running in just a few moments.
                         </h2>
+
+                        <h1 class="subtitle" v-if="metadata.preexisting_install">
+                            Welcome to the {{ attrs.name }} maintenance tool.
+                        </h1>
                     </div>
 
                     <router-view></router-view>

static/js/views.js

@@ -116,8 +116,8 @@ const SelectPackages = {
                 </div>
             </div>
 
-            <div class="subtitle is-6" v-if="!$root.$data.metadata.preexisting_install">Install Location</div>
+            <div class="subtitle is-6" v-if="!$root.$data.metadata.preexisting_install && advanced">Install Location</div>
-            <div class="field has-addons" v-if="!$root.$data.metadata.preexisting_install">
+            <div class="field has-addons" v-if="!$root.$data.metadata.preexisting_install && advanced">
                 <div class="control is-expanded">
                     <input class="input" type="text" v-model="$root.$data.install_location"
                            placeholder="Enter a install path here">
@@ -129,14 +129,23 @@ const SelectPackages = {
                 </div>
             </div>
 
-            <a class="button is-dark is-pulled-right" v-if="!$root.$data.metadata.preexisting_install" 
+            <div class="is-pulled-right">
-               v-on:click="install">Install</a>
+                <a class="button is-dark" v-if="!$root.$data.metadata.preexisting_install && !advanced" 
-            <a class="button is-dark is-pulled-right" v-if="$root.$data.metadata.preexisting_install"
+                   v-on:click="advanced = true">Advanced...</a>
-               v-on:click="install">Modify</a>
+                <a class="button is-dark" v-if="!$root.$data.metadata.preexisting_install" 
+                   v-on:click="install">Install</a>
+                <a class="button is-dark" v-if="$root.$data.metadata.preexisting_install"
+                   v-on:click="install">Modify</a>
+            </div>
             <a class="button is-pulled-left" v-if="$root.$data.metadata.preexisting_install"
                v-on:click="go_back">Back</a>
         </div>
     `,
+    data: function() {
+        return {
+            advanced: false
+        }
+    },
     methods: {
         select_file: function() {
             window.external.invoke(JSON.stringify({