From 2b292693cda8fe016da8cecae575b11981443151 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Fri, 31 May 2019 00:07:47 +0800
Subject: [PATCH] pageManager: new loader and snackbar

---
 admin/dashboard.js         | 11 ++++++++---
 admin/theme/admin.css      | 24 ++++++++++++++++++++++++
 admin/theme/dashboard.html |  8 ++++++--
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/admin/dashboard.js b/admin/dashboard.js
index ce6adaf..0eb2057 100644
--- a/admin/dashboard.js
+++ b/admin/dashboard.js
@@ -47,11 +47,16 @@ Manager.prototype = {
         this.components[name].render(...args);
         delete this.cache[name];
     },
-    setHeader: function (title) {
+    setHeader: function(title) {
         $('#header').text(title);
     },
-    setLoaderState: function (state) {
-        $('.pusher .dimmer').toggleClass('active', state);
+    setLoaderState: function(state) {
+        $('.pusher > .progress').toggleClass('invisible', !state);
+    },
+    snackbar: function(message) {
+        ts('.snackbar').snackbar({
+            content: message
+        });
     }
 }
 
diff --git a/admin/theme/admin.css b/admin/theme/admin.css
index d89097e..93e32e4 100644
--- a/admin/theme/admin.css
+++ b/admin/theme/admin.css
@@ -1,3 +1,7 @@
+.pusher {
+    overflow-x: hidden;
+}
+
 /* nav bar */
 button#toggleSidebar {
     border-radius: 0;
@@ -13,11 +17,31 @@ button#toggleSidebar {
     top: 0;
 }
 
+.pusher > .progress:not(.invisible) + nav {
+    margin: -3px; /* to overlap progress */
+}
+
+/* loader */
+.pusher > .progress.invisible {
+    display: none;
+}
+
 /* content */
 #header {
     margin-top: 5px;
 }
 
+#content {
+    padding-bottom: 1.5em;
+}
+
+/* config */
+#config::after {
+    display: block;
+    content: '';
+    clear: both;
+}
+
 @media (max-width: 768px) {
     .ts.visible.sidebar:not(.overlapped) ~ .pusher.squeezable {
         /* RWD fix */
diff --git a/admin/theme/dashboard.html b/admin/theme/dashboard.html
index 05d9d34..6ecdd56 100644
--- a/admin/theme/dashboard.html
+++ b/admin/theme/dashboard.html
@@ -46,8 +46,8 @@
     </div>
 
     <div class="comupter squeezable pusher" id="pusher">
-        <div class="ts active inverted dimmer">
-            <div class="ts loader"></div>
+        <div class="ts bottom attached indeterminate progress">
+            <div class="bar"></div>
         </div>
         <nav class="sidebar menu">
             <button class="ts inverted icon button" id="toggleSidebar">
@@ -58,6 +58,10 @@
             <div class="ts big dividing header" id="header"></div>
             <div class="ts fluid container" id="content"></div>
         </div>
+        <!-- Anchor -->
+        <div class="ts bottom right snackbar">
+            <div class="content"></div>
+        </div>
     </div>
 
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>