refactor: update animations

ph1p · Apr 24, 2020 · 977b877 · 977b877
1 parent 5442c42
commit 977b877
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 21 deletions.
diff --git a/src/Ui.tsx b/src/Ui.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
+import styled, { createGlobalStyle } from 'styled-components';
 import {
   MemoryRouter as Router,
   Redirect,
@@ -39,6 +40,16 @@ onmessage = (message) => {
   }
 };
 
+const GlobalStyle = createGlobalStyle`
+  body {
+    overflow: hidden;
+  }
+`;
+
+const AppWrapper = styled.div`
+  overflow: hidden;
+`;
+
 const init = (serverUrl) => {
   state.url = serverUrl;
 
@@ -99,7 +110,8 @@ const init = (serverUrl) => {
 
   const App = view(() => {
     return (
-      <>
+      <AppWrapper>
+        <GlobalStyle />
         <Notifications />
 
         <SocketProvider socket={socket}>
@@ -124,7 +136,7 @@ const init = (serverUrl) => {
             </Switch>
           </Router>
         </SocketProvider>
-      </>
+      </AppWrapper>
     );
   });
 

diff --git a/src/components/Chatbar.tsx b/src/components/Chatbar.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
+import { useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 import { state } from '../shared/state';
 import { sendMainMessage } from '../shared/utils';
@@ -13,6 +14,7 @@ interface ChatProps {
 }
 
 const ChatBar: FunctionComponent<ChatProps> = (props) => {
+  const isSettings = useRouteMatch('/settings');
   const selection = state.selection.length;
   const hasSelection = Boolean(selection);
   const [show, setShow] = useState(hasSelection);
@@ -32,6 +34,7 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
 
   return (
     <ChatBarForm
+      isSettings={isSettings}
       onSubmit={(e) => {
         props.sendMessage(e);
         chatTextInput.current.value = '';
@@ -104,8 +107,13 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
 };
 
 const ChatBarForm = styled.form`
-  position: relative;
+  position: absolute;
+  right: 14px;
+  left: 14px;
+  bottom: 7px;
   margin: 0;
+  transition: transform 0.3s;
+  transform: translateY(${({ isSettings }) => (isSettings ? 50 : 0)}px);
 `;
 
 const SelectionCheckbox = styled.div`
@@ -124,7 +132,7 @@ const BellIcon = styled.div`
   cursor: pointer;
   position: absolute;
   z-index: 3;
-  left: 22px;
+  left: 10px;
   top: 15px;
   svg {
     width: 15px;
@@ -186,7 +194,7 @@ const ChatInput = styled.div`
     width: 100%;
     border: 0;
     padding: 10px 14px 10px 30px;
-    margin: 7px 14px 0;
+    margin: 7px 0 0;
     height: 30px;
     outline: none;
     transition: width 0.4s;

diff --git a/src/views/Chat.tsx b/src/views/Chat.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useEffect, Fragment } from 'react';
 import { store } from 'react-easy-state';
-import { Redirect, useHistory } from 'react-router-dom';
-import { Route, useRouteMatch } from 'react-router-dom';
+import { Redirect, useHistory, Route, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 // components
 import SettingsView from '../views/Settings';
@@ -224,19 +223,18 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
           </SettingsArrow>
         </Messages>
         <Route path="/settings">
-          <SettingsView></SettingsView>
+          <SettingsView init={props.retry} />
         </Route>
-        {!isSettings && (
-          <Chatbar
-            sendMessage={sendMessage}
-            setTextMessage={(text) => (chatState.textMessage = text)}
-            textMessage={chatState.textMessage}
-            setSelectionIsChecked={(isChecked) =>
-              (chatState.selectionIsChecked = isChecked)
-            }
-            selectionIsChecked={chatState.selectionIsChecked}
-          />
-        )}
+
+        <Chatbar
+          sendMessage={sendMessage}
+          setTextMessage={(text) => (chatState.textMessage = text)}
+          textMessage={chatState.textMessage}
+          setSelectionIsChecked={(isChecked) =>
+            (chatState.selectionIsChecked = isChecked)
+          }
+          selectionIsChecked={chatState.selectionIsChecked}
+        />
       </Chat>
     </>
   );
@@ -258,6 +256,7 @@ const SettingsArrow = styled.div`
   position: sticky;
   left: 0;
   bottom: 0;
+  padding-top: 5px;
   padding-bottom: 17px;
   cursor: pointer;
   transition: rotate 0.3s;
@@ -296,13 +295,15 @@ const Chat = styled.div`
 
 const Messages = styled.div`
   position: relative;
+  z-index: 2;
   margin: 0;
   overflow: ${({ isSettings }) => (isSettings ? 'hidden' : 'auto')};
   padding: 15px 15px 0;
   background-color: #fff;
   border-radius: 0 0 15px 15px;
-  transition: height 0.4s;
-  height: ${({ isSettings }) => (isSettings ? 50 : 371)}px;
+  transition: transform 0.4s;
+  height: 371px;
+  transform: translateY(${({ isSettings }) => (isSettings ? -318 : 0)}px);
 `;
 
 const Online = styled.div`

diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
@@ -202,6 +202,9 @@ const Checkboxes = styled.div`
 `;
 
 const Settings = styled.div`
+  position: relative;
+  z-index: 1;
+  transform: translateY(-318px);
   padding: 20px;
   color: #fff;
 
@@ -226,6 +229,7 @@ const Settings = styled.div`
     background-color: transparent;
     color: #fff;
     padding: 5px 4px;
+    outline: none;
   }
   .fields {
     margin-bottom: 20px;