From 125ef17afa001abe934a3d163a010372d5082cf5 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sat, 2 Mar 2019 14:54:10 +0200
Subject: [PATCH] Add material style new status button, add animation to modal
 backgrounds, remove obsolete new status option from burg

---
 src/App.js                                    |  4 +-
 src/App.scss                                  | 27 ++++++-
 src/App.vue                                   |  1 +
 src/boot/routes.js                            |  2 -
 src/components/media_modal/media_modal.vue    | 15 +---
 .../new_status_button/new_status_button.js    | 62 +++++++++++++++
 .../new_status_button/new_status_button.vue   | 78 +++++++++++++++++++
 src/components/side_drawer/side_drawer.vue    | 15 ++--
 8 files changed, 177 insertions(+), 27 deletions(-)
 create mode 100644 src/components/new_status_button/new_status_button.js
 create mode 100644 src/components/new_status_button/new_status_button.vue

diff --git a/src/App.js b/src/App.js
index 214e0f48..0f3d0f2e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
+import NewStatusButton from './components/new_status_button/new_status_button.vue'
 import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils'
 
 export default {
@@ -22,7 +23,8 @@ export default {
     WhoToFollowPanel,
     ChatPanel,
     MediaModal,
-    SideDrawer
+    SideDrawer,
+    NewStatusButton
   },
   data: () => ({
     mobileActivePanel: 'timeline',
diff --git a/src/App.scss b/src/App.scss
index 7c6970c1..f66167b7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -661,6 +661,31 @@ nav {
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
+@keyframes modal-background-fadein {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.modal-view {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  animation-duration: 0.2s;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-name: modal-background-fadein;
+}
+
 @keyframes shakeError {
   0% {
     transform: translateX(0);
@@ -723,7 +748,7 @@ nav {
 
 .login-hint {
   text-align: center;
-  
+
   @media all and (min-width: 801px) {
     display: none;
   }
diff --git a/src/App.vue b/src/App.vue
index acbbeb75..8955ed08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,6 +50,7 @@
       <media-modal></media-modal>
     </div>
     <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
+    <NewStatusButton />
   </div>
 </template>
 
diff --git a/src/boot/routes.js b/src/boot/routes.js
index cfbcb1fe..7e54a98b 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -13,7 +13,6 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import UserSearch from 'components/user_search/user_search.vue'
 import Notifications from 'components/notifications/notifications.vue'
-import UserPanel from 'components/user_panel/user_panel.vue'
 import LoginForm from 'components/login_form/login_form.vue'
 import ChatPanel from 'components/chat_panel/chat_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
@@ -43,7 +42,6 @@ export default (store) => {
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
     { name: 'user-settings', path: '/user-settings', component: UserSettings },
     { name: 'notifications', path: '/:username/notifications', component: Notifications },
-    { name: 'new-status', path: '/:username/new-status', component: UserPanel },
     { name: 'login', path: '/login', component: LoginForm },
     { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
     { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 427bf12b..7f666603 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="modal-view" v-if="showing" @click.prevent="hide">
+  <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
     <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
     <VideoAttachment
       class="modal-image"
@@ -32,18 +32,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.modal-view {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-
+.media-modal-view {
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;
diff --git a/src/components/new_status_button/new_status_button.js b/src/components/new_status_button/new_status_button.js
new file mode 100644
index 00000000..8c91d18b
--- /dev/null
+++ b/src/components/new_status_button/new_status_button.js
@@ -0,0 +1,62 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import { throttle } from 'lodash'
+
+const NewStatusButton = {
+  components: {
+    PostStatusForm
+  },
+  data () {
+    return {
+      shown: true,
+      postFormOpen: false,
+      oldScrollPos: 0,
+      scrollDirection: -1,
+      amountScrolled: 0
+    }
+  },
+  created () {
+    console.log('new-status-button')
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  destroyed () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  computed: {
+    currentUser () {
+      console.log(this.$store.state.users.currentUser)
+      return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    openPostForm () {
+      this.postFormOpen = true
+      this.shown = false
+    },
+    closePostForm () {
+      this.postFormOpen = false
+      this.shown = true
+    },
+    handleScroll: throttle(function () {
+      const scrollAmount = window.scrollY - this.oldScrollPos
+      const direction = scrollAmount > 0 ? 1 : -1
+
+      if (direction !== this.scrollDirection) {
+        this.amountScrolled = 0
+        this.scrollDirection = direction
+        if (direction === -1) {
+          this.shown = true
+        }
+      } else if (direction === 1) {
+        this.amountScrolled += scrollAmount
+        if (this.amountScrolled > 100 && this.shown) {
+          this.shown = false
+        }
+      }
+
+      this.oldScrollPos = window.scrollY
+      this.scrollDirection = direction
+    }, 100)
+  }
+}
+
+export default NewStatusButton
diff --git a/src/components/new_status_button/new_status_button.vue b/src/components/new_status_button/new_status_button.vue
new file mode 100644
index 00000000..8ebc8583
--- /dev/null
+++ b/src/components/new_status_button/new_status_button.vue
@@ -0,0 +1,78 @@
+<template>
+<div v-if="currentUser">
+  <div
+    class="post-form-modal-view modal-view"
+    v-show="postFormOpen"
+    @click="closePostForm"
+  >
+    <div class="modal-panel panel" @click.stop="">
+      <div class="panel-heading">{{$t('post_status.new_status')}}</div>
+      <PostStatusForm class="panel-body" @posted="closePostForm"/>
+    </div>
+  </div>
+  <button
+    class="new-status-button"
+    :class="{ 'shown': shown, 'hidden': !shown }"
+    @click="openPostForm"
+  >
+    <i class="icon-edit" />
+  </button>
+</div>
+</template>
+
+<script src="./new_status_button.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.post-form-modal-view {
+  max-height: 100%;
+  display: block;
+}
+
+.modal-panel {
+  flex-shrink: 0;
+  margin: 25% 0 4em 0;
+  width: 100%;
+}
+
+.new-status-button {
+  width: 5em;
+  height: 5em;
+  border-radius: 100%;
+  position: fixed;
+  bottom: 1.5em;
+  right: 1.5em;
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+
+  transition: 0.35s;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+
+  &.shown {
+
+  }
+
+  &.hidden {
+    transform: translateY(150%);
+  }
+
+  i {
+    font-size: 1.5em;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
+@media all and (min-width: 801px) {
+  .new-status-button {
+    display: none;
+  }
+}
+
+</style>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 8eca7b8c..d743598d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -15,12 +15,7 @@
         </div>
       </div>
       <ul>
-        <li v-if="currentUser" @click="toggleDrawer">
-          <router-link :to="{ name: 'new-status', params: { username: currentUser.screen_name } }">
-            {{ $t("post_status.new_status") }}
-          </router-link>
-        </li>
-        <li v-else @click="toggleDrawer">
+        <li v-if="!currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'login' }">
             {{ $t("login.login") }}
           </router-link>
@@ -119,14 +114,14 @@
 }
 
 .side-drawer-container-open {
-  transition-delay: 0.0s;
-  transition-property: left;
+  transition: 0.35s;
+  transition-property: background-color;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .side-drawer-container-closed {
   left: -100%;
-  transition-delay: 0.5s;
-  transition-property: left;
+  background-color: rgba(0, 0, 0, 0);
 }
 
 .side-drawer-click-outside {