From 5347d7984bf109a3de8a282791a79ef09a943d89 Mon Sep 17 00:00:00 2001
From: Seth Vargo <seth@sethvargo.com>
Date: Thu, 17 Sep 2020 18:29:04 -0400
Subject: [PATCH] Switch to toasts for notices (#566)

---
 cmd/server/assets/_flash.html | 46 +++++++++++++++++++++++++++++++++++
 cmd/server/assets/header.html | 29 +++++-----------------
 2 files changed, 52 insertions(+), 23 deletions(-)
 create mode 100644 cmd/server/assets/_flash.html

diff --git a/cmd/server/assets/_flash.html b/cmd/server/assets/_flash.html
new file mode 100644
index 000000000..2b5bf12e4
--- /dev/null
+++ b/cmd/server/assets/_flash.html
@@ -0,0 +1,46 @@
+{{define "flash"}}
+<div style="position:absolute; top:0; right:1rem; z-index:2000;">
+  {{range $msg := .flash.Errors}}
+    <div class="toast bg-white" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000" data-autohide="false">
+      <div class="toast-header text-danger">
+        <span class="oi oi-circle-x mr-2" aria-hidden="true"></span>
+        <strong class="mr-auto">Error</strong>
+        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="toast-body">
+        {{$msg}}
+      </div>
+    </div>
+  {{end}}
+  {{range $msg := .flash.Warnings}}
+    <div class="toast bg-white" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000" data-autohide="false">
+      <div class="toast-header text-warning">
+        <span class="oi oi-warning mr-2" aria-hidden="true"></span>
+        <strong class="mr-auto">Warning</strong>
+        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="toast-body">
+        {{$msg}}
+      </div>
+    </div>
+  {{end}}
+  {{range $msg := .flash.Alerts}}
+    <div class="toast bg-white" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000" data-autohide="true">
+      <div class="toast-header text-info">
+        <span class="oi oi-info mr-2" aria-hidden="true"></span>
+        <strong class="mr-auto">Notice</strong>
+        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="toast-body">
+        {{$msg}}
+      </div>
+    </div>
+  {{end}}
+</div>
+{{end}}
diff --git a/cmd/server/assets/header.html b/cmd/server/assets/header.html
index 274a4469f..90f97d0e5 100644
--- a/cmd/server/assets/header.html
+++ b/cmd/server/assets/header.html
@@ -35,6 +35,10 @@
     color: lightgray;
     pointer-events: none;
   }
+
+  main.container[role=main] {
+    position: relative;
+  }
 </style>
 {{end}}
 
@@ -229,29 +233,6 @@ <h6 class="dropdown-header">Actions</h6>
 </header>
 {{end}}
 
-{{define "flash"}}
-<div id="alerts-container">
-  {{range $msg := .flash.Errors}}
-  <div class="alert alert-danger" role="alert">
-    {{$msg}}
-  </div>
-  {{end}}
-  {{range $msg := .flash.Warnings}}
-  <div class="alert alert-warning" role="alert">
-    {{$msg}}
-  </div>
-  {{end}}
-  {{range $msg := .flash.Alerts}}
-  <div class="alert alert-success alert-dismissible fade show" role="alert">
-    {{$msg}}
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  {{end}}
-</div>
-{{end}}
-
 {{define "scripts"}}
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
@@ -360,6 +341,8 @@ <h6 class="dropdown-header">Actions</h6>
       $this.tooltip('hide');
       document.getSelection().removeAllRanges();
     });
+
+    $('.toast').toast('show');
   });
 
   var $alerts = $('#alerts-container');