mirror of
https://github.com/ZeppelinBot/Zeppelin.git
synced 2025-03-14 21:31:50 +00:00
Update dashboard side to tailwindcss
This commit is contained in:
Dragory
parent
577500af92
commit
3bd485e7e4
11 changed files with 183 additions and 172 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = '/';
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="rendered"></div>
|
||||
<div class="markdown-block" ref="rendered"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import "~vue-material-design-icons/styles.css";
|
||||
|
||||
@import "components.pcss";
|
||||
@import "content.pcss";
|
||||
|
||||
@import "docs.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;
|
||||
|
|
|
|||
45
dashboard/src/style/content.pcss
Normal file
45
dashboard/src/style/content.pcss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue