Appmanager: Rework of UI
Change-Id: I044373c38c167cb5931aa801af00ce4afea201ef
diff --git a/core/installer/welcome/appmanager-tmpl/app.html b/core/installer/welcome/appmanager-tmpl/app.html
index bc3e1d2..b97a187 100644
--- a/core/installer/welcome/appmanager-tmpl/app.html
+++ b/core/installer/welcome/appmanager-tmpl/app.html
@@ -80,81 +80,51 @@
{{ end }}
{{ end }}
-{{ define "main" }}
-<style>
- pre {
- white-space: pre-wrap; /* Since CSS 2.1 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word; /* Internet Explorer 5.5+ */
- background-color: transparent;
- }
+{{ define "header" }}
+ <h1>{{ .App.Icon }}{{ .App.Name }}</h1>
+{{ end }}
- .hidden {
- visibility: hidden;
- }
-
- .toast {
- position: fixed;
- z-index: 999;
- bottom: 10px;
- }
-</style>
-
-{{ $instance := .Instance }}
-<h1 style="margin-bottom: 20px">{{ .App.Icon }}{{ .App.Name }}</h1>
-<pre id="readme" style="margin-bottom: 50px">{{ .App.Description }}</pre>
-
-{{ $schema := .App.Schema }}
-{{ $networks := .AvailableNetworks }}
-
-{{ $renderForm := true }}
-
-{{ if .Task }}
- {{if or (eq .Task.Status 0) (eq .Task.Status 1) }}
- {{ $renderForm = false }}
- Waiting for resources:
- <ul class="progress">
- {{ template "task" .Task.Subtasks }}
- </ul>
- <script>setTimeout(() => location.reload(), 3000);</script>
+{{ define "extra_menu" }}
+ <li><a href="/app/{{ .App.Slug }}" class="{{ if eq $.CurrentPage .App.Name }}outline{{ else }}secondary{{ end }}">{{ .App.Name }}</a></li>
+ {{ range .Instances }}
+ <li><a href="/instance/{{ .Id }}" class="{{ if eq $.CurrentPage .Id }}outline{{ else }}secondary{{ end }}">{{ .Id }}</a></li>
{{ end }}
{{ end }}
-{{ if $renderForm }}
-<form id="config-form">
- {{ if $instance }}
- {{ template "schema-form" (dict "Schema" $schema "AvailableNetworks" $networks "ReadOnly" false "Data" ($instance.InputToValues $schema)) }}
- {{ else }}
- {{ template "schema-form" (dict "Schema" $schema "AvailableNetworks" $networks "ReadOnly" false "Data" (dict)) }}
+{{ define "content"}}
+ {{ $schema := .App.Schema }}
+ {{ $networks := .AvailableNetworks }}
+ {{ $instance := .Instance }}
+ {{ $renderForm := true }}
+
+ {{ if .Task }}
+ {{if or (eq .Task.Status 0) (eq .Task.Status 1) }}
+ {{ $renderForm = false }}
+ Waiting for resources:
+ <ul class="progress">
+ {{ template "task" .Task.Subtasks }}
+ </ul>
+ <script>setTimeout(() => location.reload(), 3000);</script>
{{ end }}
- {{ if $instance }}
- <div class="grid">
- <button type="submit" id="submit" name="update">Update</button>
- <button type="submit" id="uninstall" name="remove">Uninstall</button>
- </div>
- {{ else }}
- <button type="submit" id="submit">{{ if $instance }}Update{{ else }}Install{{ end }}</button>
- {{ end }}
-</form>
+ {{ end }}
-{{ range .Instances }}
- {{ $r := true}}
- {{ if $instance }}
- {{ if eq $instance.Id .Id }}
- {{ $r = false}}
- {{ end }}
+ {{ if $renderForm }}
+ <form id="config-form">
+ {{ if $instance }}
+ {{ template "schema-form" (dict "Schema" $schema "AvailableNetworks" $networks "ReadOnly" false "Data" ($instance.InputToValues $schema)) }}
+ {{ else }}
+ {{ template "schema-form" (dict "Schema" $schema "AvailableNetworks" $networks "ReadOnly" false "Data" (dict)) }}
+ {{ end }}
+ {{ if $instance }}
+ <div class="grid">
+ <button type="submit" id="submit" name="update">Update</button>
+ <button type="submit" id="uninstall" name="remove">Uninstall</button>
+ </div>
+ {{ else }}
+ <button type="submit" id="submit">{{ if $instance }}Update{{ else }}Install{{ end }}</button>
+ {{ end }}
+ </form>
{{ end }}
- {{ if $r }}
- <details>
- <summary>{{ .Id }}</summary>
- {{ template "schema-form" (dict "Schema" $schema "AvailableNetworks" $networks "ReadOnly" true "Data" (.InputToValues $schema)) }}
- <a href="/instance/{{ .Id }}" role="button" class="secondary">View</a>
- </details>
- {{ end }}
-{{ end }}
-{{ end }}
<div id="toast-failure" class="toast hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm3-6L9 8m0 8l6-8"/></svg> {{ if $instance }}Update failed{{ else}}Install failed{{ end }}
@@ -267,4 +237,5 @@
}
});
</script>
-{{ end }}
+
+{{end}}
diff --git a/core/installer/welcome/appmanager-tmpl/base.html b/core/installer/welcome/appmanager-tmpl/base.html
index 9e4bb49..a7c7aaa 100644
--- a/core/installer/welcome/appmanager-tmpl/base.html
+++ b/core/installer/welcome/appmanager-tmpl/base.html
@@ -2,21 +2,29 @@
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8" />
- <link rel="stylesheet" href="/static/pico.min.css">
+ <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
+ <link rel="stylesheet" type="text/css" href="/static/appmanager.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <style>
- #main {
- margin-top: 10px;
- }
-
- @media screen and (min-width:801px) {
- #main {
- width: 600px;
- }
- }
- </style>
</head>
<body>
- <div id="main" class="container">{{ block "main" . }}CHILD MUST OVERRIDE THIS{{ end }}</div>
+ <header class="is-fixed-above-lg is-fixed">
+ {{ block "header" . }}{{ end }}
+ </header>
+ <main class="container page-index">
+ <aside id="menu-nav">
+ <nav class="is-sticky-above-lg" style="--max-height: 800px;">
+ <ul>
+ <li><a href="/" class="{{ if (eq .CurrentPage "ALL") }}outline{{ else }}secondary{{ end }}">All</a></li>
+ <li><a href="/installed" class="{{ if (eq .CurrentPage "INSTALLED") }}outline{{ else }}secondary{{ end }}">Installed</a></li>
+ <li><a href="/not-installed" class="{{ if (eq .CurrentPage "NOT_INSTALLED") }}outline{{ else }}secondary{{ end }}">Not Installed</a></li>
+ <hr>
+ {{ block "extra_menu" . }}{{ end }}
+ </ul>
+ </nav>
+ </aside>
+ <div id="content">
+ {{ block "content" . }}{{ end }}
+ </div>
+ </main>
</body>
</html>
diff --git a/core/installer/welcome/appmanager-tmpl/index.html b/core/installer/welcome/appmanager-tmpl/index.html
index 2306876..33b6bb1 100644
--- a/core/installer/welcome/appmanager-tmpl/index.html
+++ b/core/installer/welcome/appmanager-tmpl/index.html
@@ -1,49 +1,36 @@
-{{ define "main" }}
-<style>
- article {
- margin: 0.3em;
- margin-bottom: 0.3em;
+{{ define "header" }}
+ <form class="search-bar">
+ <input type="search" placeholder="Search" />
+ </form>
+{{ end }}
- display: flex;
- flex-direction: row;
- }
-
- .logo {
- display: table-cell;
- vertical-align: middle;
- }
- nav li {
- padding-top: 0;
- padding-bottom: 0;
- }
-
- input[type="search"] {
- margin-bottom: 0;
- }
-</style>
-<form>
- <input type="search" placeholder="Search" />
-</form>
-
+{{ define "content" }}
<aside>
- <nav>
- <ul>
- {{ range . }}
- <li>
- <article>
- <div>
- <a href="/app/{{ .Slug }}" class="logo">
- {{ .Icon }}
- </a>
- </div>
- <div>
- <a href="/app/{{ .Slug }}">{{ .Name }}</a>
- {{ .ShortDescription }}
- </div>
- </article>
- </li>
- {{ end }}
- </ul>
- </nav>
+ <nav>
+ <ul>
+ {{ range .Apps }}
+ <li class="app-card">
+ <a href="/app/{{ .Slug }}" class="app-link">
+ <article>
+ <div class="icon">
+ <div>
+ {{ .Icon }}
+ </div>
+ </div>
+ <div class="card-content">
+ <div class="app-details">
+ <div class="app-name-container">
+ <p class="app">{{ .Name }}</p>
+ <span class="instance-count">{{ len .Instances }}</span>
+ </div>
+ <p class="description">{{ .ShortDescription }}</p>
+ </div>
+ </div>
+ </article>
+ </a>
+ </li>
+ {{ end }}
+ </ul>
+ </nav>
</aside>
{{ end }}