natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

[Client] Improve admin panel

This commit is contained in:
syuilo 2018-11-15 06:21:31 +09:00
parent 1dba82aae5
commit 50fe67b99b
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -176,6 +176,7 @@
"pug": "2.0.3", "pug": "2.0.3",
"punycode": "2.1.1", "punycode": "2.1.1",
"qrcode": "1.3.2", "qrcode": "1.3.2",
"randomcolor": "0.5.3",
"ratelimiter": "3.2.0", "ratelimiter": "3.2.0",
"recaptcha-promise": "0.1.3", "recaptcha-promise": "0.1.3",
"reconnecting-websocket": "4.1.10", "reconnecting-websocket": "4.1.10",
@ -218,6 +219,7 @@
"vue-i18n": "8.3.1", "vue-i18n": "8.3.1",
"vue-js-modal": "1.3.26", "vue-js-modal": "1.3.26",
"vue-loader": "15.4.2", "vue-loader": "15.4.2",
"vue-marquee-text-component": "1.1.0",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",
"vue-svg-inline-loader": "1.2.1", "vue-svg-inline-loader": "1.2.1",

60
src/client/app/admin/views/index.vue
View File

@ -37,15 +37,20 @@
</div> </div>
</nav> </nav>
<main> <main>
<div v-if="page == 'dashboard'"><x-dashboard/></div> <marquee-text v-if="instances.length > 0" v-show="!isMobile" class="instances" :repeat="10" :duration="10">
<div v-if="page == 'instance'"><x-instance/></div> <span v-for="instance in instances" class="instance"><b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }}</span>
<div v-if="page == 'moderators'"><x-moderators/></div> </marquee-text>
<div v-if="page == 'users'"><x-users/></div> <div class="page">
<div v-if="page == 'emoji'"><x-emoji/></div> <div v-if="page == 'dashboard'"><x-dashboard/></div>
<div v-if="page == 'announcements'"><x-announcements/></div> <div v-if="page == 'instance'"><x-instance/></div>
<div v-if="page == 'hashtags'"><x-hashtags/></div> <div v-if="page == 'moderators'"><x-moderators/></div>
<div v-if="page == 'drive'"></div> <div v-if="page == 'users'"><x-users/></div>
<div v-if="page == 'update'"></div> <div v-if="page == 'emoji'"><x-emoji/></div>
<div v-if="page == 'announcements'"><x-announcements/></div>
<div v-if="page == 'hashtags'"><x-hashtags/></div>
<div v-if="page == 'drive'"></div>
<div v-if="page == 'update'"></div>
</div>
</main> </main>
</div> </div>
</template> </template>
@ -63,6 +68,8 @@ import XHashtags from "./hashtags.vue";
import XUsers from "./users.vue"; import XUsers from "./users.vue";
import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons'; import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { faGrin } from '@fortawesome/free-regular-svg-icons'; import { faGrin } from '@fortawesome/free-regular-svg-icons';
import MarqueeText from 'vue-marquee-text-component';
import randomColor from 'randomcolor';
// Detect the user agent // Detect the user agent
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase();
@ -77,7 +84,8 @@ export default Vue.extend({
XEmoji, XEmoji,
XAnnouncements, XAnnouncements,
XHashtags, XHashtags,
XUsers XUsers,
MarqueeText
}, },
provide: { provide: {
isMobile isMobile
@ -88,11 +96,23 @@ export default Vue.extend({
version, version,
isMobile, isMobile,
navOpend: !isMobile, navOpend: !isMobile,
instances: [],
faGrin, faGrin,
faArrowLeft, faArrowLeft,
faHeadset faHeadset
}; };
}, },
created() {
this.$root.api('instances').then(instances => {
instances.forEach(i => {
i.bg = randomColor({
seed: i.host,
luminosity: 'dark'
});
});
this.instances = instances;
});
},
methods: { methods: {
nav(page: string) { nav(page: string) {
this.page = page; this.page = page;
@ -101,7 +121,7 @@ export default Vue.extend({
}); });
</script> </script>
<style lang="stylus"> <style lang="stylus" scoped>
.mk-admin .mk-admin
$headerHeight = 48px $headerHeight = 48px
@ -262,7 +282,23 @@ export default Vue.extend({
> main > main
width 100% width 100%
padding 0 0 0 250px padding 0 0 0 250px
max-width 1300px
> .instances
padding 8px
background rgba(0, 0, 0, 0.7)
color #fff
font-size 14px
>>> .instance
margin 0 10px
> b
padding 0px 6px
margin-right 4px
border-radius 4px
> .page
max-width 1300px
&.isMobile &.isMobile
> main > main