feat(hide/minimize): chat can now be minimized and run in background

Update figma types
ph1p · Oct 11, 2019 · 71cf682 · 71cf682
1 parent e44da43
commit 71cf682
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 29 deletions.
diff --git a/figma.d.ts b/figma.d.ts
@@ -1,4 +1,4 @@
-// Figma Plugin API version 1, update 1
+// Figma Plugin API version 1, update 4
 
 // Global variable with Figma's plugin API.
 declare const figma: PluginAPI;
@@ -23,6 +23,10 @@ interface PluginAPI {
   readonly root: DocumentNode;
   currentPage: PageNode;
 
+  on(type: 'selectionchange' | 'currentpagechange', callback: () => void); // PROPOSED API ONLY
+  once(type: 'selectionchange' | 'currentpagechange', callback: () => void); // PROPOSED API ONLY
+  off(type: 'selectionchange' | 'currentpagechange', callback: () => void); // PROPOSED API ONLY
+
   readonly mixed: symbol;
 
   createRectangle(): RectangleNode;
@@ -125,6 +129,11 @@ interface OnMessageProperties {
   origin: string;
 }
 
+type MessageEventHandler = (
+  pluginMessage: any,
+  props: OnMessageProperties
+) => void;
+
 interface UIAPI {
   show(): void;
   hide(): void;
@@ -135,6 +144,9 @@ interface UIAPI {
   onmessage:
     | ((pluginMessage: any, props: OnMessageProperties) => void)
     | undefined;
+  on(type: 'message', callback: MessageEventHandler); // PROPOSED API ONLY
+  once(type: 'message', callback: MessageEventHandler); // PROPOSED API ONLY
+  off(type: 'message', callback: MessageEventHandler); // PROPOSED API ONLY
 }
 
 interface ViewportAPI {

diff --git a/package.json b/package.json
@@ -37,7 +37,17 @@
     "id": "742073255743594050",
     "api": "1.0.0",
     "main": "code.js",
-    "ui": "ui.html"
+    "ui": "ui.html",
+    "menu": [
+      {
+        "name": "Hide Chat",
+        "command": "hide"
+      },
+      {
+        "name": "Show Chat",
+        "command": "show"
+      }
+    ]
   },
   "dependencies": {
     "react": "^16.9.0",

diff --git a/src/assets/css/ui.css b/src/assets/css/ui.css
@@ -23,6 +23,16 @@ body {
   cursor: pointer;
 }
 
+.chat .header .onboarding-tip {
+  padding: 0;
+}
+
+.chat .header .minimize-chat {
+  cursor: pointer;
+  border-left: 1px solid #e9e9e9;
+  margin-left: 10px;
+}
+
 .chat .header .onboarding-tip__msg {
   display: flex;
   justify-content: space-between;
@@ -306,3 +316,10 @@ body {
   height: 12px;
   margin-right: 10px;
 }
+
+
+.info-paragraph {
+  padding: 15px;
+  text-align: center;
+  color: #999;
+}
diff --git a/src/code.ts b/src/code.ts
@@ -49,6 +49,14 @@ const postMessage = (type = '', payload = {}) =>
     payload
   });
 
+if (figma.command === 'hide') {
+  figma.ui.hide();
+}
+
+if (figma.command === 'show') {
+  figma.ui.show();
+}
+
 main().then(({ roomName, secret, history, instanceId }) => {
   figma.ui.onmessage = async message => {
     if (message.action === 'save-user-settings') {
@@ -106,6 +114,10 @@ main().then(({ roomName, secret, history, instanceId }) => {
       postMessage('history', JSON.parse('[]'));
     }
 
+    if (message.action === 'minimize') {
+      figma.ui.resize(message.options ? 180 : 300, message.options ? 1 : 415);
+    }
+
     if (message.action === 'focus-nodes') {
       const nodes = figma.currentPage.findAll(
         n => message.options.ids.indexOf(n.id) !== -1

diff --git a/src/components/user-list.tsx b/src/components/user-list.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { colors } from '../utils';
 
 export default function UserList(props) {
   const closeUserList = () => props.setUserListView(false);

diff --git a/src/ui.tsx b/src/ui.tsx
@@ -71,6 +71,7 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
     const [socketId, setSocketId] = useState('');
     const [online, setOnline] = useState([]);
     const [instanceId, setInstanceId] = useState('');
+    const [isMinimized, setMinimized] = useState(false);
     const [isSettingsView, setSettingsView] = useState(false);
     const [isUserListView, setUserListView] = useState(false);
     const [isMainReady, setMainReady] = useState(false);
@@ -273,7 +274,14 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
       };
     }, [connection]);
 
-    useEffect(() => setConnection(ConnectionEnum.CONNECTING), []);
+    useEffect(() => {
+      setConnection(ConnectionEnum.CONNECTING);
+
+      // scroll to bottom
+      if (messagesEndRef.current) {
+        messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight;
+      }
+    }, []);
 
     useEffect(() => {
       if (isMainReady && !roomName) {
@@ -374,14 +382,23 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
         <div className="chat">
           <div className="header">
             <div className="onboarding-tip">
-              <div
-                className="onboarding-tip__icon"
-                onClick={() => setSettingsView(true)}
-              >
-                <div className="icon icon--adjust icon--button" />
-              </div>
+              {!isMinimized ? (
+                <div
+                  className="onboarding-tip__icon"
+                  onClick={() => setSettingsView(true)}
+                >
+                  <div className="icon icon--adjust icon--button" />
+                </div>
+              ) : (
+                ''
+              )}
               <div className="onboarding-tip__msg">
-                <span style={{ color: userSettings.color || '#000' }}>
+                <span
+                  style={{
+                    marginLeft: isMinimized ? 10 : 0,
+                    color: userSettings.color || '#000'
+                  }}
+                >
                   {userSettings.name && <strong>{userSettings.name}</strong>}
                 </span>
 
@@ -392,26 +409,47 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
                   online: <strong>{online.length}</strong>
                 </span>
               </div>
+              <div
+                className="minimize-chat"
+                onClick={() => {
+                  sendMainMessage('minimize', !isMinimized);
+                  setMinimized(!isMinimized);
+                }}
+              >
+                <div
+                  className={`icon icon--${
+                    isMinimized ? 'plus' : 'minus'
+                  } icon--button`}
+                />
+              </div>
             </div>
           </div>
-          <div className="messages" ref={messagesEndRef}>
-            {messages.map((m, i) => (
-              <Message key={i} data={m} instanceId={instanceId} />
-            ))}
-          </div>
-          <form className="footer" onSubmit={e => sendMessage(e)}>
-            <input
-              type="input"
-              className="input"
-              value={textMessage}
-              onChange={e => setTextMessage(e.target.value.substr(0, 1000))}
-              placeholder="Write something ..."
-            />
-
-            <button type="submit">
-              <div className="icon icon--play icon--button" />
-            </button>
-          </form>
+          {!isMinimized ? (
+            <>
+              <div className="messages" ref={messagesEndRef}>
+                {messages.map((m, i) => (
+                  <Message key={i} data={m} instanceId={instanceId} />
+                ))}
+              </div>
+              <form className="footer" onSubmit={e => sendMessage(e)}>
+                <input
+                  type="input"
+                  className="input"
+                  value={textMessage}
+                  onChange={e => setTextMessage(e.target.value.substr(0, 1000))}
+                  placeholder="Write something ..."
+                />
+
+                <button type="submit">
+                  <div className="icon icon--play icon--button" />
+                </button>
+              </form>
+            </>
+          ) : (
+            <div className="info-paragraph">
+              Click on "+" to show the Chat again.
+            </div>
+          )}
         </div>
       </div>
     );