Merge branch 'develop' into 'master'

`master` refresh with `develop`

See merge request pleroma/pleroma-fe!1028

1 files changed, 134 insertions, 47 deletions

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 95ee21b4..3fba9058 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,99 +1,165 @@
 <template>
-  <div class="side-drawer-container"
+  <div
+    class="side-drawer-container"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
-    <div class="side-drawer"
+    <div
+      class="side-drawer-darken"
+      :class="{ 'side-drawer-darken-closed': closed}"
+    />
+    <div
+      class="side-drawer"
       :class="{'side-drawer-closed': closed}"
       @touchstart="touchStart"
       @touchmove="touchMove"
     >
-      <div class="side-drawer-heading" @click="toggleDrawer">
-        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
-        <div class="side-drawer-logo-wrapper" v-else>
-          <img :src="logo"/>
-          <span>{{sitename}}</span>
+      <div
+        class="side-drawer-heading"
+        @click="toggleDrawer"
+      >
+        <UserCard
+          v-if="currentUser"
+          :user="currentUser"
+          :hide-bio="true"
+        />
+        <div
+          v-else
+          class="side-drawer-logo-wrapper"
+        >
+          <img :src="logo">
+          <span v-if="!hideSitename">{{ sitename }}</span>
         </div>
       </div>
       <ul>
-        <li v-if="!currentUser" @click="toggleDrawer">
+        <li
+          v-if="!currentUser"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'login' }">
-            {{ $t("login.login") }}
+            <i class="button-icon icon-login" /> {{ $t("login.login") }}
           </router-link>
         </li>
-        <li v-if="currentUser" @click="toggleDrawer">
-          <router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }">
-            {{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }}
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
           </router-link>
         </li>
-        <li v-if="currentUser" @click="toggleDrawer">
-          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.dms") }}
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
       </ul>
       <ul>
-        <li v-if="currentUser" @click="toggleDrawer">
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'friends' }">
-            {{ $t("nav.timeline") }}
+            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
-          <router-link to='/friend-requests'>
-            {{ $t("nav.friend_requests") }}
-            <span v-if='followRequestCount > 0' class="badge follow-request-count">
-              {{followRequestCount}}
+        <li
+          v-if="currentUser && currentUser.locked"
+          @click="toggleDrawer"
+        >
+          <router-link to="/friend-requests">
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <span
+              v-if="followRequestCount > 0"
+              class="badge follow-request-count"
+            >
+              {{ followRequestCount }}
             </span>
-
           </router-link>
         </li>
-        <li @click="toggleDrawer">
-          <router-link to='/main/public'>
-            {{ $t("nav.public_tl") }}
+        <li
+          v-if="currentUser || !privateMode"
+          @click="toggleDrawer"
+        >
+          <router-link to="/main/public">
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li @click="toggleDrawer">
-          <router-link to='/main/all'>
-            {{ $t("nav.twkn") }}
+        <li
+          v-if="federating && !privateMode"
+          @click="toggleDrawer"
+        >
+          <router-link to="/main/all">
+            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
         </li>
-        <li v-if="currentUser && chat" @click="toggleDrawer">
+        <li
+          v-if="currentUser && chat"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'chat' }">
-            {{ $t("nav.chat") }}
+            <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
           </router-link>
         </li>
       </ul>
       <ul>
-        <li @click="toggleDrawer">
-          <router-link :to="{ name: 'user-search' }">
-            {{ $t("nav.user_search") }}
+        <li
+          v-if="currentUser || !privateMode"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'search' }">
+            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
           </router-link>
         </li>
-        <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
+        <li
+          v-if="currentUser && suggestionsEnabled"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'who-to-follow' }">
-            {{ $t("nav.who_to_follow") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'settings' }">
-            {{ $t("settings.settings") }}
+            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-            {{ $t("nav.about") }}
+            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
           </router-link>
         </li>
-        <li v-if="currentUser" @click="toggleDrawer">
-          <a @click="doLogout" href="#">
-            {{ $t("login.logout") }}
+        <li
+          v-if="currentUser && currentUser.role === 'admin'"
+          @click="toggleDrawer"
+        >
+          <a
+            href="/pleroma/admin/#/login-pleroma"
+            target="_blank"
+          >
+            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
+          </a>
+        </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <a
+            href="#"
+            @click="doLogout"
+          >
+            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
     </div>
-    <div class="side-drawer-click-outside"
-      @click.stop.prevent="toggleDrawer"
+    <div
+      class="side-drawer-click-outside"
       :class="{'side-drawer-click-outside-closed': closed}"
-    ></div>
+      @click.stop.prevent="toggleDrawer"
+    />
   </div>
 </template>
 
@@ -111,16 +177,32 @@
   height: 100%;
   display: flex;
   align-items: stretch;
+  transition-duration: 0s;
+  transition-property: transform;
 }
 
 .side-drawer-container-open {
+  transform: translate(0%);
+}
+
+.side-drawer-container-closed {
+  transition-delay: 0.35s;
+  transform: translate(-100%);
+}
+
+.side-drawer-darken {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
   transition: 0.35s;
   transition-property: background-color;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.side-drawer-container-closed {
-  left: -100%;
+.side-drawer-darken-closed {
   background-color: rgba(0, 0, 0, 0);
 }
 
@@ -130,8 +212,9 @@
 
 .side-drawer {
   overflow-x: hidden;
-  transition: 0.35s;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition: 0.35s;
+  transition-property: transform;
   margin: 0 0 0 -100px;
   padding: 0 0 1em 100px;
   width: 80%;
@@ -141,6 +224,10 @@
   box-shadow: var(--panelShadow);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
+
+  .button-icon:before {
+    width: 1.1em;
+  }
 }
 
 .side-drawer-logo-wrapper {