feat(remove-history): add button to remove complete history

fix connection bug force new connection add more colors add better color contrast
ph1p · Aug 30, 2019 · 2e35366 · 2e35366
1 parent 9956d25
commit 2e35366
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "code.js",
   "scripts": {
     "build": "webpack --mode=production",
-    "dev": "webpack --watch"
+    "dev": "DEBUG=* webpack --watch"
   },
   "author": "Philip Stapelfeldt <phil@capshake.com>",
   "repository": {

diff --git a/src/assets/css/ui.css b/src/assets/css/ui.css
@@ -88,11 +88,11 @@ body {
 }
 
 .messages .message.lightblue .user {
-  color: #357d94;
+  color: #1c4856;
 }
 .messages .message.lightblue .selection {
-  border-color: #357d94;
-  color: #357d94;
+  border-color: #1c4856;
+  color: #1c4856;
 }
 
 .messages .message.lightgreen .user {
@@ -104,19 +104,19 @@ body {
 }
 
 .messages .message.purple .user {
-  color: #433688;
+  color: #ffffff;
 }
 .messages .message.purple .selection {
-  border-color: #433688;
-  color: #433688;
+  border-color: #ffffff;
+  color: #ffffff;
 }
 
 .messages .message.red .user {
-  color: #842713;
+  color: #ffffff;
 }
 .messages .message.red .selection {
-  border-color: #842713;
-  color: #842713;
+  border-color: #ffffff;
+  color: #ffffff;
 }
 
 .messages .message.green .user {
@@ -135,6 +135,14 @@ body {
   color: #865427;
 }
 
+.messages .message.beige .user {
+  color: #564432;
+}
+.messages .message.beige .selection {
+  border-color: #564432;
+  color: #564432;
+}
+
 .messages .message.gray {
   background-color: #4f4f4f;
 }
@@ -143,11 +151,11 @@ body {
 }
 .messages .message.lightblue {
   background-color: #56ccf2;
-  color: #357d94;
+  color: #1c4856;
 }
 .messages .message.purple {
   background-color: #7b61ff;
-  color: #433688;
+  color: #ffffff;
 }
 .messages .message.green {
   background-color: #1bc47d;
@@ -159,12 +167,20 @@ body {
 }
 .messages .message.red {
   background-color: #f24822;
-  color: #842713;
+  color: #ffffff;
 }
 .messages .message.orange {
   background-color: #f2994a;
   color: #865427;
 }
+.messages .message.beige {
+  background-color: #e7b889;
+  color: #564432;
+}
+.messages .message.pink {
+  background-color: #f47e9a;
+  color: #ffffff;
+}
 
 .chat .footer {
   display: grid;
@@ -221,16 +237,19 @@ body {
   grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
 }
+.settings .footer .remove-all-messages {
+  grid-column: 1 / span 2;
+}
 .settings .colors {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 32px;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 15px;
   margin-bottom: 30px;
 }
 .settings .colors .color {
   position: relative;
-  width: 40px;
-  height: 40px;
+  width: 25px;
+  height: 25px;
   border-radius: 100%;
   cursor: pointer;
 }
@@ -240,8 +259,8 @@ body {
   top: -6px;
   position: absolute;
   border-radius: 100%;
-  width: 50px;
-  height: 50px;
+  width: 35px;
+  height: 35px;
   border: 1px solid #000;
 }
 
@@ -277,4 +296,13 @@ body {
   border-bottom: 1px solid #e9e9e9;
   padding: 10px 15px;
   font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.user-list .users .user .color {
+  border-radius: 100%;
+  width: 12px;
+  height: 12px;
+  margin-right: 10px;
 }
diff --git a/src/code.ts b/src/code.ts
@@ -3,7 +3,7 @@ import { generateString } from './utils';
 
 figma.showUI(__html__, {
   width: 300,
-  height: 410
+  height: 415
 });
 
 async function main() {
@@ -96,6 +96,12 @@ main().then(({ roomName, secret, history, instanceId }) => {
       postMessage('selection', figma.currentPage.selection.map(n => n.id));
     }
 
+    if (message.action === 'remove-all-messages') {
+      figma.root.setPluginData('history', '[]');
+
+      postMessage('history', JSON.parse('[]'));
+    }
+
     if (message.action === 'focus-nodes') {
       const nodes = figma.currentPage.findAll(
         n => message.options.ids.indexOf(n.id) !== -1

diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import * as React from 'react';
-import { sendMainMessage, colors } from '../utils';
+import { sendMainMessage, colors, DEFAULT_SERVER_URL } from '../utils';
 
 export default function Settings(props) {
   const closeSettings = () => props.setSettingsView(false);
@@ -20,6 +20,13 @@ export default function Settings(props) {
     props.setSettingsView(false);
   };
 
+  const removeAllMessages = () => {
+    if (confirm('Remove all messages? (This cannot be undone)')) {
+      sendMainMessage('remove-all-messages');
+      alert('Messages successfully removed');
+    }
+  };
+
   return (
     <div className="settings">
       <div className="fields">
@@ -30,7 +37,7 @@ export default function Settings(props) {
           onChange={e =>
             setSettings({
               ...settings,
-              name: e.target.value.substr(0,20)
+              name: e.target.value.substr(0, 20)
             })
           }
           className="input"
@@ -56,20 +63,29 @@ export default function Settings(props) {
         </div>
 
         <h4>
-          Current Server (requires restart)
-          <p>{props.url}</p>
+          Server URL (requires restart)
+          <p onClick={() => setUrl(DEFAULT_SERVER_URL)}>
+            default: {DEFAULT_SERVER_URL}
+          </p>
         </h4>
 
         <input
           type="input"
           value={url}
-          onChange={e => setUrl(e.target.value.substr(0,255))}
+          onChange={e => setUrl(e.target.value.substr(0, 255))}
           className="input"
           placeholder="Server-URL ..."
         />
       </div>
 
       <div className="footer">
+        <button
+          type="button"
+          onClick={removeAllMessages}
+          className="remove-all-messages button button--secondary-destructive"
+        >
+          remove all messages
+        </button>
         <button
           type="submit"
           onClick={saveSettings}

diff --git a/src/components/user-list.tsx b/src/components/user-list.tsx
@@ -20,9 +20,9 @@ export default function UserList(props) {
           <div
             key={user.id}
             className="user"
-            style={{ color: user.color || '#000' }}
           >
-            {user.name}
+            <div className="color" style={{ backgroundColor: user.color || '#000' }}></div>
+            <div className="name">{user.name}</div>
           </div>
         ))}
       </div>