From 3bd485e7e46ed5be678130acdf99c991c4d579c2 Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Thu, 10 Oct 2019 22:55:31 +0300
Subject: [PATCH] Update dashboard side to tailwindcss

---
 dashboard/src/components/Expandable.vue       |  7 ++
 .../dashboard/GuildConfigEditor.vue           | 53 ++++++-------
 .../src/components/dashboard/GuildList.vue    | 36 +++++----
 dashboard/src/components/dashboard/Layout.vue | 62 +++++++--------
 dashboard/src/components/docs/DocsLayout.vue  | 79 ++++++++++---------
 .../src/components/docs/MarkdownBlock.vue     |  2 +-
 dashboard/src/components/docs/Plugin.vue      |  6 +-
 dashboard/src/style/app.pcss                  |  1 +
 dashboard/src/style/components.pcss           |  9 +++
 dashboard/src/style/content.pcss              | 45 +++++++++++
 dashboard/src/style/docs.pcss                 | 55 -------------
 11 files changed, 183 insertions(+), 172 deletions(-)
 create mode 100644 dashboard/src/style/content.pcss

diff --git a/dashboard/src/components/Expandable.vue b/dashboard/src/components/Expandable.vue
index 2f44d141..98b2b8b0 100644
--- a/dashboard/src/components/Expandable.vue
+++ b/dashboard/src/components/Expandable.vue
@@ -13,6 +13,8 @@
 </template>
 
 <style scoped>
+  @import "../style/components.pcss";
+
   :root {
     --animation-time: 400ms;
     --target-height: auto;
@@ -61,6 +63,11 @@
   .closing {
     animation: close var(--animation-time) ease-in-out;
   }
+
+  .inline-code,
+  code:not([class]) {
+    @apply bg-gray-900;
+  }
 </style>
 
 <script type="ts">
diff --git a/dashboard/src/components/dashboard/GuildConfigEditor.vue b/dashboard/src/components/dashboard/GuildConfigEditor.vue
index 1283bc7d..cffc1291 100644
--- a/dashboard/src/components/dashboard/GuildConfigEditor.vue
+++ b/dashboard/src/components/dashboard/GuildConfigEditor.vue
@@ -3,32 +3,22 @@
     Loading...
   </div>
   <div v-else>
-    <h2 class="title is-1">Config for {{ guild.name }}</h2>
-    <AceEditor v-model="editableConfig" @init="editorInit" lang="yaml" theme="twilight" :width="editorWidth" :height="editorHeight" ref="aceEditor"></AceEditor>
-
-    <div class="editor-footer">
-      <div class="actions">
-        <button class="button" v-on:click="save" :disabled="saving">Save</button>
-      </div>
-      <div class="status">
-        <div class="status-message" v-if="saving">Saving...</div>
-        <div class="status-message error" v-if="errors.length">
-          <div v-for="error in errors">{{ error }}</div>
-        </div>
-      </div>
+    <div v-if="saving" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">Saving...</div>
+    <div v-if="saved" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">Saved!</div>
+    <div v-if="errors.length" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">
+      <div class="font-semibold">Errors:</div>
+      <div v-for="error in errors">{{ error }}</div>
     </div>
+
+    <div class="flex items-center">
+      <h1 class="flex-auto">Config for {{ guild.name }}</h1>
+      <button class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700" v-on:click="save" :disabled="saving">Save</button>
+    </div>
+
+    <AceEditor class="rounded shadow-lg mt-4" v-model="editableConfig" @init="editorInit" lang="yaml" theme="tomorrow_night" :width="editorWidth" :height="editorHeight" ref="aceEditor"></AceEditor>
   </div>
 </template>
 
-<style scoped>
-  .ace_editor {
-    box-shadow: 0 2px 16px -4px #0000009e;
-    border-radius: 8px;
-    border: 1px solid #181818;
-    margin: 16px 0;
-  }
-</style>
-
 <script>
   import {mapState} from "vuex";
   import {ApiError} from "../../api";
@@ -54,10 +44,12 @@
       return {
         loading: true,
         saving: false,
+        saved: false,
         editableConfig: null,
         errors: [],
         editorWidth: 900,
-        editorHeight: 600
+        editorHeight: 600,
+        savedTimeout: null
       };
     },
     computed: {
@@ -74,7 +66,7 @@
       editorInit() {
         require("brace/ext/language_tools");
         require("brace/mode/yaml");
-        require("brace/theme/twilight");
+        require("brace/theme/tomorrow_night");
 
         this.$refs.aceEditor.editor.setOptions({
           useSoftTabs: true,
@@ -87,7 +79,7 @@
         const editorElem = this.$refs.aceEditor.$el;
         const newWidth = editorElem.parentNode.clientWidth;
         const rect = editorElem.getBoundingClientRect();
-        const newHeight = window.innerHeight - rect.top - 100;
+        const newHeight = window.innerHeight - rect.top - 48;
         this.resizeEditor(newWidth, newHeight);
       },
       resizeEditor(newWidth, newHeight) {
@@ -99,14 +91,23 @@
         });
       },
       async save() {
+        this.saved = false;
         this.saving = true;
         this.errors = [];
 
+        if (this.savedTimeout) {
+          clearTimeout(this.savedTimeout);
+        }
+
         try {
           await this.$store.dispatch("guilds/saveConfig", {
             guildId: this.$route.params.guildId,
             config: this.editableConfig,
           });
+
+          this.saving = false;
+          this.saved = true;
+          this.savedTimeout = setTimeout(() => this.saved = false, 3000);
         } catch (e) {
           if (e instanceof ApiError && (e.status === 400 || e.status === 422)) {
             this.errors = e.body.errors || ['Error while saving config'];
@@ -116,8 +117,6 @@
 
           throw e;
         }
-
-        this.$router.push("/dashboard");
       },
     },
   };
diff --git a/dashboard/src/components/dashboard/GuildList.vue b/dashboard/src/components/dashboard/GuildList.vue
index 06e74149..0202c8a8 100644
--- a/dashboard/src/components/dashboard/GuildList.vue
+++ b/dashboard/src/components/dashboard/GuildList.vue
@@ -3,21 +3,27 @@
 		Loading...
 	</div>
 	<div v-else>
-		<h2 class="title is-2">Guilds</h2>
-		<table class="table">
-			<tr v-for="guild in guilds">
-        <td>
-          <img v-if="guild.icon" class="guild-logo" :src="guild.icon" :aria-label="'Logo for guild ' + guild.name">
-        </td>
-        <td>
-          <div class="guild-name">{{ guild.name }}</div>
-          <div class="guild-id">{{ guild.id }}</div>
-        </td>
-				<td>
-          <router-link class="button" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
-				</td>
-			</tr>
-		</table>
+		<h1>Guilds</h1>
+    <ul class="list-none flex flex-wrap -m-4 pt-4">
+      <li v-for="guild in guilds" class="flex-none m-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+        <div class="flex items-center">
+          <div class="flex-none">
+            <img v-if="guild.icon" class="guild-logo" :src="guild.icon" :alt="'Logo for guild ' + guild.name">
+          </div>
+          <div class="flex-auto ml-3">
+            <div>
+              <span class="font-semibold">{{ guild.name }}</span>
+              <span class="text-gray-600 text-sm">({{ guild.id }})</span>
+            </div>
+            <div class="pt-1">
+              <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Info</span>
+              <router-link class="inline-block bg-gray-700 rounded px-1 hover:bg-gray-800" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
+              <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Access</span>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
 	</div>
 </template>
 
diff --git a/dashboard/src/components/dashboard/Layout.vue b/dashboard/src/components/dashboard/Layout.vue
index 0bad603c..2826bf9f 100644
--- a/dashboard/src/components/dashboard/Layout.vue
+++ b/dashboard/src/components/dashboard/Layout.vue
@@ -1,46 +1,44 @@
 <template>
-	<div class="dashboard dashboard-cloak">
-    <nav class="navbar" role="navigation" aria-label="main navigation">
-      <div class="container">
-        <div class="navbar-brand">
-          <div class="navbar-item">
-            <img class="dashboard-logo" src="../../img/logo.png" alt="" aria-hidden="true">
-            <h1 class="dashboard-title">Zeppelin Dashboard</h1>
-          </div>
-        </div>
+	<div class="dashboard container mx-auto px-4 py-2">
+    <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
+      <div class="flex-initial flex items-center">
+        <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
 
-        <div class="navbar-menu is-active">
-          <div class="navbar-start">
-            <router-link to="/dashboard" class="navbar-item">Guilds</router-link>
-            <a href="/docs" class="navbar-item">Documentation</a>
-          </div>
-          <div class="navbar-end">
-            <a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
-          </div>
-        </div>
+        <router-link to="/dashboard">
+          <h1 class="flex-auto font-semibold">Zeppelin Dashboard</h1>
+        </router-link>
+
+        <ul class="dashboard-nav list-none flex ml-8">
+          <router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
+          <a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
+        </ul>
+      </div>
+
+      <div class="flex-1 flex items-center justify-end">
+        <router-link
+          to="/docs"
+          role="menuitem"
+          class="py-1 px-2 rounded hover:bg-gray-700">
+          Go to documentation
+        </router-link>
       </div>
     </nav>
 
-    <div class="section">
-      <div class="container">
-        <router-view></router-view>
-      </div>
+    <div class="main-content">
+      <router-view></router-view>
     </div>
 	</div>
 </template>
 
 <style scoped>
-  .dashboard-cloak {
-    /* Replaced by "visible" in dashboard.scss */
-    visibility: hidden;
+  .dashboard-nav a {
+    &:hover {
+      @apply underline;
+    }
   }
 
-  .dashboard-logo {
-    margin-right: 12px;
-  }
-
-  .dashboard-title {
-    font-weight: 600;
+  .dashboard-nav .router-link-exact-active {
+    @apply underline;
   }
 </style>
 
@@ -51,7 +49,7 @@
     methods: {
       async logout() {
         await this.$store.dispatch("auth/logout");
-        this.$router.push('/');
+        window.location.pathname = '/';
       }
     },
   };
diff --git a/dashboard/src/components/docs/DocsLayout.vue b/dashboard/src/components/docs/DocsLayout.vue
index 8aedb8e3..9dd78d1e 100644
--- a/dashboard/src/components/docs/DocsLayout.vue
+++ b/dashboard/src/components/docs/DocsLayout.vue
@@ -1,46 +1,47 @@
 <template>
-  <div class="docs">
-    <div class="container mx-auto px-4 py-2">
-      <!-- Top bar -->
-      <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
-        <div class="flex-initial flex items-center">
-          <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
-          <h1 class="flex-auto">Zeppelin Documentation</h1>
-        </div>
-        <div class="flex-1 flex items-center justify-end">
-          <router-link
-            to="/dashboard"
-            role="menuitem"
-            class="py-1 px-2 rounded hover:bg-gray-700">
-            Go to dashboard
-          </router-link>
+  <div class="docs container mx-auto px-4 py-2">
+    <!-- Top bar -->
+    <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
+      <div class="flex-initial flex items-center">
+        <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
+
+        <router-link to="/docs">
+          <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
+        </router-link>
+      </div>
+      <div class="flex-1 flex items-center justify-end">
+        <router-link
+          to="/dashboard"
+          role="menuitem"
+          class="py-1 px-2 rounded hover:bg-gray-700">
+          Go to dashboard
+        </router-link>
+      </div>
+    </nav>
+
+    <!-- WIP bar -->
+    <div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
+      <i class="mdi mdi-alert mr-1" title="Note"></i>
+      This documentation is a work in progress.
+    </div>
+
+    <!-- Content wrapper -->
+    <div class="flex items-start mt-8">
+      <!-- Sidebar -->
+      <nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
+        <div role="none" v-for="(group, index) in menu">
+          <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
+          <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
+            <li role="none" v-for="item in group.items">
+              <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
+            </li>
+          </ul>
         </div>
       </nav>
 
-      <!-- WIP bar -->
-      <div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
-        <i class="mdi mdi-alert mr-1" title="Note"></i>
-        This documentation is a work in progress.
-      </div>
-
-      <!-- Content wrapper -->
-      <div class="flex items-start mt-8">
-        <!-- Sidebar -->
-        <nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
-          <div role="none" v-for="(group, index) in menu">
-            <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
-            <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
-              <li role="none" v-for="item in group.items">
-                <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
-              </li>
-            </ul>
-          </div>
-        </nav>
-
-        <!-- Content -->
-        <div class="docs-content flex-auto overflow-x-hidden">
-          <router-view :key="$route.fullPath"></router-view>
-        </div>
+      <!-- Content -->
+      <div class="docs-content main-content flex-auto overflow-x-hidden">
+        <router-view :key="$route.fullPath"></router-view>
       </div>
     </div>
   </div>
diff --git a/dashboard/src/components/docs/MarkdownBlock.vue b/dashboard/src/components/docs/MarkdownBlock.vue
index ecd052d3..a2e9baa6 100644
--- a/dashboard/src/components/docs/MarkdownBlock.vue
+++ b/dashboard/src/components/docs/MarkdownBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="rendered"></div>
+  <div class="markdown-block" ref="rendered"></div>
 </template>
 
 <script>
diff --git a/dashboard/src/components/docs/Plugin.vue b/dashboard/src/components/docs/Plugin.vue
index 1b082ea2..8ce75909 100644
--- a/dashboard/src/components/docs/Plugin.vue
+++ b/dashboard/src/components/docs/Plugin.vue
@@ -46,7 +46,7 @@
             <code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
           </div>
 
-          <MarkdownBlock v-if="command.config.info && command.config.info.description" :content="command.config.info.description" class="content mb-4"></MarkdownBlock>
+          <MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.description" :content="command.config.extra.info.description" class="content"></MarkdownBlock>
 
           <Expandable class="mt-4">
             <template v-slot:title>Additional information</template>
@@ -54,7 +54,7 @@
               Signatures:
               <ul>
                 <li>
-                  <code>
+                  <code class="inline-code bg-gray-900">
                     !{{ command.trigger }}
                     <span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
                   </code>
@@ -77,7 +77,7 @@
 
               <div class="mt-2" v-if="command.config.options && command.config.options.length">
                 Options:
-                <ul class="z-list z-ul">
+                <ul>
                   <li v-for="opt in command.config.options">
                     <code>{{ renderOption(opt) }}</code>
                     <router-link :to="'/docs/reference/argument-types#' + (opt.type || 'string')">{{ opt.type || 'string' }}</router-link>
diff --git a/dashboard/src/style/app.pcss b/dashboard/src/style/app.pcss
index df657c7b..670f7f0c 100644
--- a/dashboard/src/style/app.pcss
+++ b/dashboard/src/style/app.pcss
@@ -5,6 +5,7 @@
 @import "~vue-material-design-icons/styles.css";
 
 @import "components.pcss";
+@import "content.pcss";
 
 @import "docs.pcss";
 
diff --git a/dashboard/src/style/components.pcss b/dashboard/src/style/components.pcss
index cd12001a..2027e327 100644
--- a/dashboard/src/style/components.pcss
+++ b/dashboard/src/style/components.pcss
@@ -1,3 +1,12 @@
+.link {
+  @apply text-blue-400;
+  @apply underline;
+
+  &:hover {
+    @apply text-blue-200;
+  }
+}
+
 .inline-code {
   @apply inline-block;
   @apply bg-gray-800;
diff --git a/dashboard/src/style/content.pcss b/dashboard/src/style/content.pcss
new file mode 100644
index 00000000..ed10a11e
--- /dev/null
+++ b/dashboard/src/style/content.pcss
@@ -0,0 +1,45 @@
+.main-content {
+  & h1 {
+    @apply text-5xl;
+    @apply font-semibold;
+    @apply leading-none;
+    @apply mb-4;
+  }
+
+  & h2 {
+    @apply text-2xl;
+    @apply font-semibold;
+    @apply mt-2;
+    @apply mb-1;
+  }
+
+  & h3 {
+    @apply font-semibold;
+    @apply mb-1;
+  }
+
+  & p {
+    @apply mb-4;
+  }
+
+  & a:not([class]) {
+    @apply link;
+  }
+
+  & ul:not([class]) {
+    @apply list-disc;
+    @apply mb-4;
+
+    & li {
+      @apply ml-6;
+    }
+  }
+
+  & code:not([class]) {
+    @apply inline-code;
+  }
+
+  & .expandable {
+    max-width: 600px;
+  }
+}
diff --git a/dashboard/src/style/docs.pcss b/dashboard/src/style/docs.pcss
index e09330aa..5303cb75 100644
--- a/dashboard/src/style/docs.pcss
+++ b/dashboard/src/style/docs.pcss
@@ -3,58 +3,3 @@
     @apply underline;
   }
 }
-
-.docs-content {
-  & h1 {
-    @apply text-5xl;
-    @apply font-semibold;
-    @apply leading-none;
-    @apply pb-4;
-  }
-
-  & h2 {
-    @apply text-2xl;
-    @apply font-semibold;
-    @apply pt-2;
-    @apply pb-1;
-  }
-
-  & h3 {
-    @apply font-semibold;
-    @apply pb-1;
-  }
-
-  & p {
-    @apply pb-4;
-
-    & code {
-      @apply inline-code;
-    }
-  }
-
-  & a:not([class]) {
-    @apply text-blue-400;
-    @apply underline;
-
-    &:hover {
-      @apply text-blue-200;
-    }
-  }
-
-  & ul:not([class]) {
-    @apply list-disc;
-    @apply mb-4;
-
-    & li {
-      @apply ml-6;
-    }
-
-    & code {
-      @apply inline-code;
-    }
-  }
-
-  & .expandable {
-    max-width: 600px;
-  }
-}