Sharkey/src/client/app/admin/views/index.vue

272 lines
6 KiB
Vue
Raw Normal View History

2018-11-02 16:05:53 +02:00
<template>
<div class="mk-admin" :class="{ isMobile }">
<header v-show="isMobile">
<button class="nav" @click="navOpend = true"><fa icon="bars"/></button>
<span>MisskeyMyAdmin</span>
</header>
<div class="nav-backdrop"
v-if="navOpend && isMobile"
@click="navOpend = false"
@touchstart="navOpend = false"
></div>
<nav v-show="navOpend">
2018-11-03 15:03:06 +02:00
<div class="mi">
<img svg-inline src="../assets/header-icon.svg"/>
</div>
2018-11-03 08:05:00 +02:00
<div class="me">
<img class="avatar" :src="$store.state.i.avatarUrl" alt="avatar"/>
<p class="name">{{ $store.state.i | userName }}</p>
</div>
2018-11-02 16:05:53 +02:00
<ul>
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>{{ $t('dashboard') }}</li>
<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>{{ $t('instance') }}</li>
2018-11-14 21:15:42 +02:00
<li @click="nav('moderators')" :class="{ active: page == 'moderators' }"><fa :icon="faHeadset" fixed-width/>{{ $t('moderators') }}</li>
<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>{{ $t('users') }}</li>
2018-11-14 07:57:59 +02:00
<li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa :icon="faGrin" fixed-width/>{{ $t('emoji') }}</li>
<li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>{{ $t('announcements') }}</li>
<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>{{ $t('hashtags') }}</li>
<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>{{ $t('@.drive') }}</li> -->
<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">{{ $t('update') }}</li> -->
2018-11-02 16:05:53 +02:00
</ul>
2018-11-03 12:57:44 +02:00
<div class="back-to-misskey">
2018-11-14 07:57:59 +02:00
<a href="/"><fa :icon="faArrowLeft"/> {{ $t('back-to-misskey') }}</a>
2018-11-03 12:57:44 +02:00
</div>
<div class="version">
<small>Misskey {{ version }}</small>
</div>
2018-11-02 16:05:53 +02:00
</nav>
<main>
2018-11-05 20:59:02 +02:00
<div v-if="page == 'dashboard'"><x-dashboard/></div>
<div v-if="page == 'instance'"><x-instance/></div>
2018-11-14 21:15:42 +02:00
<div v-if="page == 'moderators'"><x-moderators/></div>
2018-11-02 16:05:53 +02:00
<div v-if="page == 'users'"><x-users/></div>
2018-11-05 20:59:02 +02:00
<div v-if="page == 'emoji'"><x-emoji/></div>
<div v-if="page == 'announcements'"><x-announcements/></div>
<div v-if="page == 'hashtags'"><x-hashtags/></div>
2018-11-02 16:05:53 +02:00
<div v-if="page == 'drive'"></div>
<div v-if="page == 'update'"></div>
</main>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../i18n';
import { version } from '../../config';
2018-11-02 16:05:53 +02:00
import XDashboard from "./dashboard.vue";
import XInstance from "./instance.vue";
2018-11-14 21:15:42 +02:00
import XModerators from "./moderators.vue";
2018-11-02 16:05:53 +02:00
import XEmoji from "./emoji.vue";
import XAnnouncements from "./announcements.vue";
import XHashtags from "./hashtags.vue";
import XUsers from "./users.vue";
2018-11-14 21:15:42 +02:00
import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
2018-11-14 07:57:59 +02:00
import { faGrin } from '@fortawesome/free-regular-svg-icons';
2018-11-02 16:05:53 +02:00
// Detect the user agent
const ua = navigator.userAgent.toLowerCase();
const isMobile = /mobile|iphone|ipad|android/.test(ua);
2018-11-02 16:05:53 +02:00
export default Vue.extend({
i18n: i18n('admin/views/index.vue'),
2018-11-02 16:05:53 +02:00
components: {
XDashboard,
XInstance,
2018-11-14 21:15:42 +02:00
XModerators,
2018-11-02 16:05:53 +02:00
XEmoji,
XAnnouncements,
XHashtags,
XUsers
},
provide: {
isMobile
},
2018-11-02 16:05:53 +02:00
data() {
return {
page: 'dashboard',
version,
isMobile,
2018-11-14 07:57:59 +02:00
navOpend: !isMobile,
faGrin,
2018-11-14 21:15:42 +02:00
faArrowLeft,
faHeadset
2018-11-02 16:05:53 +02:00
};
},
methods: {
nav(page: string) {
this.page = page;
}
}
});
</script>
<style lang="stylus">
.mk-admin
$headerHeight = 48px
2018-11-02 16:05:53 +02:00
display flex
height 100%
> header
2018-11-02 16:05:53 +02:00
position fixed
top 0
2018-11-02 16:05:53 +02:00
z-index 10000
width 100%
color var(--mobileHeaderFg)
background-color var(--mobileHeaderBg)
box-shadow 0 1px 0 rgba(#000, 0.075)
&, *
user-select none
> span
display block
line-height $headerHeight
text-align center
> .nav
display block
position absolute
top 0
left 0
z-index 10001
padding 0
width $headerHeight
font-size 1.4em
line-height $headerHeight
border-right solid 1px rgba(#000, 0.1)
> [data-icon]
transition all 0.2s ease
> nav
position fixed
z-index 20001
2018-11-02 16:05:53 +02:00
top 0
left 0
width 250px
height 100vh
overflow auto
background #333
color #fff
2018-11-03 15:03:06 +02:00
> .mi
text-align center
> svg
width 24px
height 82px
vertical-align top
fill #fff
opacity 0.7
2018-11-03 08:05:00 +02:00
> .me
display flex
2018-11-03 15:03:06 +02:00
margin 0 16px 16px 16px
padding 16px 0
2018-11-03 08:05:00 +02:00
align-items center
2018-11-03 15:03:06 +02:00
border-top solid 1px #555
2018-11-03 08:05:00 +02:00
border-bottom solid 1px #555
> .avatar
height 48px
border-radius 100%
vertical-align middle
> .name
margin 0 16px
padding 0
color #fff
overflow hidden
text-overflow ellipsis
white-space nowrap
font-size 15px
2018-11-03 12:57:44 +02:00
> .back-to-misskey
margin 16px 16px 0 16px
padding 0
border-top solid 1px #555
> a
display block
padding 16px 4px
color inherit
text-decoration none
color #eee
2018-11-03 17:10:13 +02:00
font-size 15px
2018-11-03 12:57:44 +02:00
&:hover
color #fff
> [data-icon]
2018-11-03 12:57:44 +02:00
margin-right 6px
> .version
2018-11-03 12:57:44 +02:00
margin 0 16px 16px 16px
padding-top 16px
border-top solid 1px #555
text-align center
> small
opacity 0.7
2018-11-02 16:05:53 +02:00
> ul
margin 0
padding 0
list-style none
2018-11-03 08:05:00 +02:00
font-size 15px
2018-11-02 16:05:53 +02:00
> li
display block
padding 10px 16px
margin 0
cursor pointer
user-select none
color #eee
2018-11-02 16:05:53 +02:00
transition margin-left 0.2s ease
&:hover
color #fff
> [data-icon]
margin-right 6px
2018-11-02 16:05:53 +02:00
&.active
margin-left 8px
color var(--primary) !important
2018-11-03 08:05:00 +02:00
&:after
content ""
display block
position absolute
top 0
right 0
bottom 0
margin auto 0
height 0
border-top solid 16px transparent
2018-11-03 13:03:21 +02:00
border-right solid 16px var(--bg)
2018-11-03 08:05:00 +02:00
border-bottom solid 16px transparent
border-left solid 16px transparent
> .nav-backdrop
position fixed
top 0
left 0
z-index 20000
width 100%
height 100%
background var(--mobileNavBackdrop)
2018-11-02 16:05:53 +02:00
> main
width 100%
padding 0 0 0 250px
2018-11-03 08:05:00 +02:00
max-width 1300px
2018-11-02 16:05:53 +02:00
&.isMobile
> main
padding $headerHeight 0 0 0
2018-11-02 16:05:53 +02:00
</style>