pleroma-fe/src/App.vue

142 lines
3.6 KiB
Vue
Raw Normal View History

2016-11-07 17:03:36 +00:00
<template>
2019-07-05 07:17:44 +00:00
<div
id="app"
:style="bgAppStyle"
>
<div
2019-07-19 16:36:07 +00:00
id="app_bg_wrapper"
2019-07-05 07:17:44 +00:00
class="app-bg-wrapper"
:style="bgStyle"
/>
<MobileNav v-if="isMobileLayout" />
2019-07-05 07:17:44 +00:00
<nav
v-else
id="nav"
class="nav-bar container"
@click="scrollToTop()"
>
<div class="inner-nav">
2019-07-05 07:17:44 +00:00
<div
class="logo"
:style="logoBgStyle"
2019-07-05 07:17:44 +00:00
>
<div
class="mask"
:style="logoMaskStyle"
/>
<img
:src="logo"
:style="logoStyle"
>
</div>
2019-07-05 07:17:44 +00:00
<div class="item">
<router-link
v-if="!hideSitename"
2019-07-05 07:17:44 +00:00
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
2017-01-16 17:57:03 +00:00
</div>
2019-07-05 07:17:44 +00:00
<div class="item right">
2019-07-15 16:42:27 +00:00
<search-bar
2019-12-12 19:46:07 +00:00
v-if="currentUser || !privateMode"
2020-10-20 19:54:43 +00:00
class="mobile-hidden"
2019-07-15 16:42:27 +00:00
@toggled="onSearchBarToggled"
2019-12-12 19:37:32 +00:00
@click.stop.native
2019-07-05 07:17:44 +00:00
/>
2020-05-03 14:36:12 +00:00
<a
href="#"
2020-10-20 19:54:43 +00:00
class="mobile-hidden nav-icon"
2020-05-03 14:36:12 +00:00
@click.stop="openSettingsModal"
2019-07-05 07:17:44 +00:00
>
2020-10-20 19:54:43 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="cog"
2019-07-05 07:17:44 +00:00
:title="$t('nav.preferences')"
/>
2020-05-03 14:36:12 +00:00
</a>
2019-09-14 17:50:03 +00:00
<a
v-if="currentUser && currentUser.role === 'admin'"
2019-10-02 17:28:16 +00:00
href="/pleroma/admin/#/login-pleroma"
2020-10-20 19:54:43 +00:00
class="mobile-hidden nav-icon"
2019-09-16 12:03:10 +00:00
target="_blank"
2020-10-20 19:54:43 +00:00
><FAIcon
2020-10-20 21:31:16 +00:00
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="tachometer-alt"
2019-09-27 01:29:51 +00:00
:title="$t('nav.administration')"
2019-09-14 17:50:03 +00:00
/></a>
2019-07-05 07:17:44 +00:00
<a
v-if="currentUser"
href="#"
2020-10-20 19:54:43 +00:00
class="mobile-hidden nav-icon"
2019-07-05 07:17:44 +00:00
@click.prevent="logout"
2020-10-20 19:54:43 +00:00
><FAIcon
2020-10-20 21:31:16 +00:00
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="sign-out-alt"
2019-07-05 07:17:44 +00:00
:title="$t('login.logout')"
/></a>
2017-02-16 21:25:41 +00:00
</div>
2016-11-07 17:03:36 +00:00
</div>
</nav>
2020-05-07 13:10:53 +00:00
<div class="app-bg-wrapper app-container-wrapper" />
2019-07-05 07:17:44 +00:00
<div
id="content"
class="container underlay"
2019-07-05 07:17:44 +00:00
>
<div
class="sidebar-flexer mobile-hidden"
:style="sidebarAlign"
>
<div class="sidebar-bounds">
<div class="sidebar-scroller">
<div class="sidebar">
2019-07-05 07:17:44 +00:00
<user-panel />
<div v-if="!isMobileLayout">
2019-07-05 07:17:44 +00:00
<nav-panel />
<instance-specific-panel v-if="showInstanceSpecificPanel" />
<features-panel v-if="!currentUser && showFeaturesPanel" />
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
<notifications v-if="currentUser" />
</div>
</div>
</div>
</div>
2016-12-02 13:33:03 +00:00
</div>
<div class="main">
2019-07-05 07:17:44 +00:00
<div
v-if="!currentUser"
class="login-hint panel panel-default"
>
<router-link
:to="{ name: 'login' }"
class="panel-body"
>
2019-02-06 16:53:51 +00:00
{{ $t("login.hint") }}
</router-link>
2019-02-06 10:01:32 +00:00
</div>
<router-view />
2016-12-02 13:33:03 +00:00
</div>
2019-07-05 07:17:44 +00:00
<media-modal />
2016-11-07 17:03:36 +00:00
</div>
2019-07-05 07:17:44 +00:00
<chat-panel
v-if="currentUser && chat"
:floating="true"
class="floating-chat mobile-hidden"
/>
2019-09-19 17:59:34 +00:00
<MobilePostStatusButton />
2019-03-19 08:53:11 +00:00
<UserReportingModal />
<PostStatusModal />
2020-05-03 14:36:12 +00:00
<SettingsModal />
<portal-target name="modal" />
<GlobalNoticeList />
2016-11-07 17:03:36 +00:00
</div>
</template>
2016-10-26 14:46:32 +00:00
2016-10-26 17:03:55 +00:00
<script src="./App.js"></script>
<style lang="scss" src="./App.scss"></style>