feat(minimized): add header functionality

ph1p · May 24, 2020 · eb26300 · eb26300
1 parent 2cee787
commit eb26300
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 138 deletions.
diff --git a/src/code.ts b/src/code.ts
@@ -25,7 +25,7 @@ async function main() {
   let history = figma.root.getPluginData('history');
   let roomName = figma.root.getPluginData('roomName');
   let secret = figma.root.getPluginData('secret');
-  const ownerId = figma.root.getPluginData('ownerId');
+  // const ownerId = figma.root.getPluginData('ownerId');
 
   if (!instanceId) {
     instanceId = 'user-' + uniqid() + '-' + generateString(15);

diff --git a/src/components/Chatbar.tsx b/src/components/Chatbar.tsx
@@ -53,7 +53,7 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
         <SelectionCheckbox
           checked={props.selectionIsChecked}
           hasSelection={hasSelection}
-          onClick={(e: any) => {
+          onClick={() => {
             props.setSelectionIsChecked(!props.selectionIsChecked);
             chatTextInput.current.focus();
           }}
@@ -204,7 +204,7 @@ const ChatInput = styled.div`
     border-radius: 6px;
     width: 100%;
     border: 0;
-    padding: 14px 30px 14px 18px;
+    padding: 14px 82px 14px 18px;
     height: 41px;
     outline: none;
     &::placeholder {

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -8,10 +8,7 @@ import { ConnectionEnum } from '../shared/interfaces';
 import { useStore } from '../store';
 
 interface Props {
-  title?: any;
-  left?: any;
-  right?: any;
-  backButton?: boolean;
+  minimized?: boolean;
 }
 
 function CustomLink({ children, to, style = {}, className = '' }) {
@@ -40,6 +37,14 @@ function CustomLink({ children, to, style = {}, className = '' }) {
 const Header: FunctionComponent<Props> = (props) => {
   const store = useStore();
 
+  if (props.minimized) {
+    return (
+      <Head>
+        <div className="plus" onClick={() => store.toggleMinimizeChat()}></div>
+      </Head>
+    );
+  }
+
   return (
     <Head>
       <CustomLink className="item" to="/">
@@ -59,7 +64,7 @@ const Header: FunctionComponent<Props> = (props) => {
           <Users>
             <UserChips>
               {store.online
-                .filter((_, i) => i < 4)
+                .filter((_, i) => i < 5)
                 .map((user) => (
                   <Chip key={user.id} style={{ backgroundColor: user.color }} />
                 ))}
@@ -101,18 +106,16 @@ const UserChips = styled.div`
 `;
 
 const Head = styled.div`
+  display: flex;
   height: 37px;
   border-bottom: 1px solid #e4e4e4;
-  position: sticky;
   top: 0;
   z-index: 9;
   background-color: #fff;
   display: flex;
   padding: 0 16px;
   font-size: 11px;
 
-  display: flex;
-  width: 100%;
   .icon {
     margin-right: 6px;
   }
@@ -125,10 +128,11 @@ const Head = styled.div`
     }
   }
 
-  .minus {
+  .minus,
+  .plus {
     position: relative;
     padding: 18px 0;
-    margin-left: 19px;
+    margin-left: 14px;
     width: 11px;
     align-self: center;
     cursor: pointer;
@@ -144,6 +148,18 @@ const Head = styled.div`
       background-color: #000;
     }
   }
+  .plus {
+    margin-left: auto;
+    &::before {
+      content: '';
+      left: 5px;
+      top: 12px;
+      position: absolute;
+      width: 1px;
+      height: 11px;
+      background-color: #000;
+    }
+  }
 `;
 
 export default observer(Header);
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -120,6 +120,10 @@ const MessageContainer = styled.div`
   padding: 11px 16px 11px;
   word-break: break-word;
   margin-bottom: 4px;
+  max-width: 240px;
+  header {
+    margin-bottom: 4px;
+  }
 
   &.me {
     color: #000;
@@ -168,100 +172,7 @@ const MessageContainer = styled.div`
         }
       }
     `
-  )}/* &.lightblue header {
-    color: #1c4856;
-  }
-  &.lightblue .selection {
-    border-color: #1c4856;
-    color: #1c4856;
-  }
-
-  &.lightgreen header {
-    color: #3a8459;
-  }
-  &.lightgreen .selection {
-    border-color: #3a8459;
-    color: #3a8459;
-  }
-
-  &.purple header {
-    color: #ffffff;
-  }
-  &.purple .selection {
-    border-color: #ffffff;
-    color: #ffffff;
-  }
-
-  &.red header {
-    color: #ffffff;
-  }
-  &.red .selection {
-    border-color: #ffffff;
-    color: #ffffff;
-  }
-
-  &.green header {
-    color: #0d6540;
-  }
-  &.green .selection {
-    border-color: #0d6540;
-    color: #0d6540;
-  }
-
-  &.orange header {
-    color: #865427;
-  }
-  &.orange .selection {
-    border-color: #865427;
-    color: #865427;
-  }
-
-  &.beige header {
-    color: #564432;
-  }
-  &.beige .selection {
-    border-color: #564432;
-    color: #564432;
-  }
-
-  &.gray {
-    background-color: #4f4f4f;
-  }
-  &.blue {
-    background-color: #18a0fb;
-  }
-  &.lightblue {
-    background-color: #56ccf2;
-    color: #1c4856;
-  }
-  &.purple {
-    background-color: #5751ff;
-    color: #ffffff;
-  }
-  &.green {
-    background-color: #1bc47d;
-    color: #0d6540;
-  }
-  &.lightgreen {
-    background-color: #6fcf97;
-    color: #3a8459;
-  }
-  &.red {
-    background-color: #f24822;
-    color: #ffffff;
-  }
-  &.orange {
-    background-color: #f2994a;
-    color: #865427;
-  }
-  &.beige {
-    background-color: #e7b889;
-    color: #564432;
-  }
-  &.pink {
-    background-color: #f47e9a;
-    color: #ffffff;
-  } */
+  )}
 `;
 
 export default Message;
diff --git a/src/views/Chat.tsx b/src/views/Chat.tsx
@@ -160,7 +160,7 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
         <MessagesContainer
           onAnimationEnd={() => setContainerIsHidden(!containerIsHidden)}
           ref={store.messagesRef}
-          onWheel={(e) => {
+          onWheel={() => {
             const { current } = toJS(store.messagesRef);
             if (current.scrollTop <= current.scrollHeight * 0.2) {
               showMore();

diff --git a/src/views/Minimized.tsx b/src/views/Minimized.tsx
@@ -5,27 +5,14 @@ import { Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import Header from '../components/Header';
 import { ConnectionEnum } from '../shared/interfaces';
-import { SharedIcon } from '../shared/style';
 import { useStore } from '../store';
 
 const MinimizedView: FunctionComponent = () => {
   const store = useStore();
 
   return (
     <>
-      <Header
-        title={
-          <Title color={store.settings.color || '#000'}>
-            {store.settings.name}
-          </Title>
-        }
-        left={<span></span>}
-        right={
-          <SharedIcon onClick={() => store.toggleMinimizeChat()}>
-            <div className="icon icon--plus" />
-          </SharedIcon>
-        }
-      />
+      <Header minimized />
       <Minimized>
         {!store.isMinimized && <Redirect to="/" />}
         {store.status === ConnectionEnum.ERROR && (
@@ -34,7 +21,7 @@ const MinimizedView: FunctionComponent = () => {
         <Users>
           {store.online.map((user) => (
             <User key={user.id} className="user" color={user.color || '#000'}>
-              {user.name.substr(0, 2)}
+              {user.avatar || user.name.substr(0, 2)}
             </User>
           ))}
         </Users>
@@ -57,11 +44,6 @@ const Minimized = styled.div`
   }
 `;
 
-const Title = styled.div`
-  margin-left: 10px;
-  color: ${(props) => props.color};
-`;
-
 const Users = styled.div`
   overflow-y: auto;
   display: grid;
@@ -71,12 +53,12 @@ const Users = styled.div`
 `;
 
 const User = styled.div`
-  width: 40px;
-  height: 40px;
-  padding: 11px 0;
-  align-items: center;
+  border-radius: 14px 14px 3px 14px;
+  width: 41px;
+  height: 41px;
+  font-size: 22px;
   text-align: center;
-  border-radius: 100%;
+  line-height: 43px;
   color: #fff;
   background-color: ${(props) => props.color};
 `;

diff --git a/src/views/Settings/index.tsx b/src/views/Settings/index.tsx
@@ -14,6 +14,7 @@ import Tooltip from '../../components/Tooltip';
 import { withSocketContext } from '../../shared/SocketProvider';
 import { DEFAULT_SERVER_URL } from '../../shared/constants';
 import { useStore } from '../../store';
+import { version } from '../../../package.json';
 import AvatarPicker from './components/AvatarPicker';
 import ColorPicker from './components/ColorPicker';
 
@@ -204,12 +205,12 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
             </Tooltip>
           </ShortcutTiles>
 
-          {/* <VersionNote
+          <VersionNote
             target="_blank"
             href="https://github.com/ph1p/figma-chat/blob/master/CHANGELOG.md"
           >
-            version: {version}
-          </VersionNote> */}
+            v{version}
+          </VersionNote>
         </div>
       </Settings>
     </>
@@ -252,9 +253,13 @@ const SavedFlag = styled.span`
 `;
 
 const VersionNote = styled.a`
+  position: absolute;
+  left: 0;
+  text-align: center;
+  color: #999;
+  bottom: 10px;
   margin-top: 5px;
   width: 100%;
-  text-align: right;
   text-decoration: none;
   font-size: 10px;
   display: block;

diff --git a/tsconfig.json b/tsconfig.json
@@ -5,6 +5,8 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   }
 }