StyAndCo/zappyzep
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update dashboard side to tailwindcss

Browse source
This commit is contained in:
Dragory 2019-10-10 22:55:31 +03:00
parent 577500af92
commit 3bd485e7e4
11 changed files with 183 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
dashboard/src/components/Expandable.vue
View file

@ -13,6 +13,8 @@
</template> </template>
<style scoped> <style scoped>
@import "../style/components.pcss";
:root { :root {
--animation-time: 400ms; --animation-time: 400ms;
--target-height: auto; --target-height: auto;
@ -61,6 +63,11 @@
.closing { .closing {
animation: close var(--animation-time) ease-in-out; animation: close var(--animation-time) ease-in-out;
} }
.inline-code,
code:not([class]) {
@apply bg-gray-900;
}
</style> </style>
<script type="ts"> <script type="ts">

53
dashboard/src/components/dashboard/GuildConfigEditor.vue
View file

@ -3,32 +3,22 @@
Loading... Loading...
</div> </div>
<div v-else> <div v-else>
<h2 class="title is-1">Config for {{ guild.name }}</h2> <div v-if="saving" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">Saving...</div>
<AceEditor v-model="editableConfig" @init="editorInit" lang="yaml" theme="twilight" :width="editorWidth" :height="editorHeight" ref="aceEditor"></AceEditor> <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="editor-footer"> <div class="font-semibold">Errors:</div>
<div class="actions"> <div v-for="error in errors">{{ error }}</div>
<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> </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> </div>
</template> </template>
<style scoped>
.ace_editor {
box-shadow: 0 2px 16px -4px #0000009e;
border-radius: 8px;
border: 1px solid #181818;
margin: 16px 0;
}
</style>
<script> <script>
import {mapState} from "vuex"; import {mapState} from "vuex";
import {ApiError} from "../../api"; import {ApiError} from "../../api";
@ -54,10 +44,12 @@
return { return {
loading: true, loading: true,
saving: false, saving: false,
saved: false,
editableConfig: null, editableConfig: null,
errors: [], errors: [],
editorWidth: 900, editorWidth: 900,
editorHeight: 600 editorHeight: 600,
savedTimeout: null
}; };
}, },
computed: { computed: {
@ -74,7 +66,7 @@
editorInit() { editorInit() {
require("brace/ext/language_tools"); require("brace/ext/language_tools");
require("brace/mode/yaml"); require("brace/mode/yaml");
require("brace/theme/twilight"); require("brace/theme/tomorrow_night");
this.$refs.aceEditor.editor.setOptions({ this.$refs.aceEditor.editor.setOptions({
useSoftTabs: true, useSoftTabs: true,
@ -87,7 +79,7 @@
const editorElem = this.$refs.aceEditor.$el; const editorElem = this.$refs.aceEditor.$el;
const newWidth = editorElem.parentNode.clientWidth; const newWidth = editorElem.parentNode.clientWidth;
const rect = editorElem.getBoundingClientRect(); const rect = editorElem.getBoundingClientRect();
const newHeight = window.innerHeight - rect.top - 100; const newHeight = window.innerHeight - rect.top - 48;
this.resizeEditor(newWidth, newHeight); this.resizeEditor(newWidth, newHeight);
}, },
resizeEditor(newWidth, newHeight) { resizeEditor(newWidth, newHeight) {
@ -99,14 +91,23 @@
}); });
}, },
async save() { async save() {
this.saved = false;
this.saving = true; this.saving = true;
this.errors = []; this.errors = [];
if (this.savedTimeout) {
clearTimeout(this.savedTimeout);
}
try { try {
await this.$store.dispatch("guilds/saveConfig", { await this.$store.dispatch("guilds/saveConfig", {
guildId: this.$route.params.guildId, guildId: this.$route.params.guildId,
config: this.editableConfig, config: this.editableConfig,
}); });
this.saving = false;
this.saved = true;
this.savedTimeout = setTimeout(() => this.saved = false, 3000);
} catch (e) { } catch (e) {
if (e instanceof ApiError && (e.status === 400 || e.status === 422)) { if (e instanceof ApiError && (e.status === 400 || e.status === 422)) {
this.errors = e.body.errors || ['Error while saving config']; this.errors = e.body.errors || ['Error while saving config'];
@ -116,8 +117,6 @@
throw e; throw e;
} }
this.$router.push("/dashboard");
}, },
}, },
}; };

36
dashboard/src/components/dashboard/GuildList.vue
View file

@ -3,21 +3,27 @@
Loading... Loading...
</div> </div>
<div v-else> <div v-else>
<h2 class="title is-2">Guilds</h2> <h1>Guilds</h1>
<table class="table"> <ul class="list-none flex flex-wrap -m-4 pt-4">
<tr v-for="guild in guilds"> <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">
<td> <div class="flex items-center">
<img v-if="guild.icon" class="guild-logo" :src="guild.icon" :aria-label="'Logo for guild ' + guild.name"> <div class="flex-none">
</td> <img v-if="guild.icon" class="guild-logo" :src="guild.icon" :alt="'Logo for guild ' + guild.name">
<td> </div>
<div class="guild-name">{{ guild.name }}</div> <div class="flex-auto ml-3">
<div class="guild-id">{{ guild.id }}</div> <div>
</td> <span class="font-semibold">{{ guild.name }}</span>
<td> <span class="text-gray-600 text-sm">({{ guild.id }})</span>
<router-link class="button" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link> </div>
</td> <div class="pt-1">
</tr> <span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Info</span>
</table> <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> </div>
</template> </template>

62
dashboard/src/components/dashboard/Layout.vue
View file

@ -1,46 +1,44 @@
<template> <template>
<div class="dashboard dashboard-cloak"> <div class="dashboard container mx-auto px-4 py-2">
<nav class="navbar" role="navigation" aria-label="main navigation"> <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="container"> <div class="flex-initial flex items-center">
<div class="navbar-brand"> <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
<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="navbar-menu is-active"> <router-link to="/dashboard">
<div class="navbar-start"> <h1 class="flex-auto font-semibold">Zeppelin Dashboard</h1>
<router-link to="/dashboard" class="navbar-item">Guilds</router-link> </router-link>
<a href="/docs" class="navbar-item">Documentation</a>
</div> <ul class="dashboard-nav list-none flex ml-8">
<div class="navbar-end"> <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> <a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
</div> </ul>
</div> </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> </div>
</nav> </nav>
<div class="section"> <div class="main-content">
<div class="container"> <router-view></router-view>
<router-view></router-view>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.dashboard-cloak { .dashboard-nav a {
/* Replaced by "visible" in dashboard.scss */ &:hover {
visibility: hidden; @apply underline;
}
} }
.dashboard-logo { .dashboard-nav .router-link-exact-active {
margin-right: 12px; @apply underline;
}
.dashboard-title {
font-weight: 600;
} }
</style> </style>
@ -51,7 +49,7 @@
methods: { methods: {
async logout() { async logout() {
await this.$store.dispatch("auth/logout"); await this.$store.dispatch("auth/logout");
this.$router.push('/'); window.location.pathname = '/';
} }
}, },
}; };

79
dashboard/src/components/docs/DocsLayout.vue
View file

@ -1,46 +1,47 @@
<template> <template>
<div class="docs"> <div class="docs container mx-auto px-4 py-2">
<div class="container mx-auto px-4 py-2"> <!-- Top bar -->
<!-- Top bar --> <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
<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">
<div class="flex-initial flex items-center"> <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
<h1 class="flex-auto">Zeppelin Documentation</h1> <router-link to="/docs">
</div> <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
<div class="flex-1 flex items-center justify-end"> </router-link>
<router-link </div>
to="/dashboard" <div class="flex-1 flex items-center justify-end">
role="menuitem" <router-link
class="py-1 px-2 rounded hover:bg-gray-700"> to="/dashboard"
Go to dashboard role="menuitem"
</router-link> 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> </div>
</nav> </nav>
<!-- WIP bar --> <!-- Content -->
<div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md"> <div class="docs-content main-content flex-auto overflow-x-hidden">
<i class="mdi mdi-alert mr-1" title="Note"></i> <router-view :key="$route.fullPath"></router-view>
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>
</div> </div>
</div> </div>
</div> </div>

2
dashboard/src/components/docs/MarkdownBlock.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div ref="rendered"></div> <div class="markdown-block" ref="rendered"></div>
</template> </template>
<script> <script>

6
dashboard/src/components/docs/Plugin.vue
View file

@ -46,7 +46,7 @@
<code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code> <code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
</div> </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"> <Expandable class="mt-4">
<template v-slot:title>Additional information</template> <template v-slot:title>Additional information</template>
@ -54,7 +54,7 @@
Signatures: Signatures:
<ul> <ul>
<li> <li>
<code> <code class="inline-code bg-gray-900">
!{{ command.trigger }} !{{ command.trigger }}
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span> <span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
</code> </code>
@ -77,7 +77,7 @@
<div class="mt-2" v-if="command.config.options && command.config.options.length"> <div class="mt-2" v-if="command.config.options && command.config.options.length">
Options: Options:
<ul class="z-list z-ul"> <ul>
<li v-for="opt in command.config.options"> <li v-for="opt in command.config.options">
<code>{{ renderOption(opt) }}</code> <code>{{ renderOption(opt) }}</code>
<router-link :to="'/docs/reference/argument-types#' + (opt.type || 'string')">{{ opt.type || 'string' }}</router-link> <router-link :to="'/docs/reference/argument-types#' + (opt.type || 'string')">{{ opt.type || 'string' }}</router-link>

1
dashboard/src/style/app.pcss
View file

@ -5,6 +5,7 @@
@import "~vue-material-design-icons/styles.css"; @import "~vue-material-design-icons/styles.css";
@import "components.pcss"; @import "components.pcss";
@import "content.pcss";
@import "docs.pcss"; @import "docs.pcss";

9
dashboard/src/style/components.pcss
View file

@ -1,3 +1,12 @@
.link {
@apply text-blue-400;
@apply underline;
&:hover {
@apply text-blue-200;
}
}
.inline-code { .inline-code {
@apply inline-block; @apply inline-block;
@apply bg-gray-800; @apply bg-gray-800;

45
dashboard/src/style/content.pcss Normal file
View file

@ -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;
}
}

55
dashboard/src/style/docs.pcss
View file

@ -3,58 +3,3 @@
@apply underline; @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;
}
}