feat(server-url): add settings to change server url

Add new colors
Fix errors
Change method names

Author: ph1p

README.md

@@ -23,13 +23,15 @@ All messages are en- and decrypted with the stored secret key and send to the se
 This plugins needs a server ([https://github.com/ph1p/figma-chat-server](https://github.com/ph1p/figma-chat-server)).
 This is a simple websocket server. **Messages are only forwarded and not stored!**
 
-At first I thought about saving the messages in one element,
+---
+
+At first I thought about saving the messages in one element inside the figma-file,
 but the plugin can't  be notified when a new message arrives.
-The plugin must poll every n milliseconds.
+The plugin have to poll every n milliseconds.
 
 ### Todolist/Featurelist
 
-- [ ] set custom server URL ([https://github.com/ph1p/figma-chat-server](https://github.com/ph1p/figma-chat-server))
+- [x] set custom server URL ([https://github.com/ph1p/figma-chat-server](https://github.com/ph1p/figma-chat-server))
 - [ ] notifications
 - [ ] save local history
 - [ ] regenerate new room name and secret key

assets/chat-settings.png

@@ -69,40 +69,79 @@ body {
   color: #fff;
 }
 
-.messages .message.me .user,
-.messages .message.yellow .user {
+.messages .message.me .user {
   color: #000;
 }
 
-.messages .message.me .selection,
-.messages .message.yellow .selection {
+.messages .message.me .selection {
   border-color: #000;
   color: #000;
 }
 
-.messages .message.blue {
-  background-color: #18a0fb;
+.messages .message.lightblue .user {
+  color: #357d94;
+}
+.messages .message.lightblue .selection {
+  border-color: #357d94;
+  color: #357d94;
 }
 
-.messages .message.purple {
-  background-color: #7b61ff;
+.messages .message.lightgreen .user {
+  color: #3a8459;
+}
+.messages .message.lightgreen .selection {
+  border-color: #3a8459;
+  color: #3a8459;
 }
 
-.messages .message.hot-pink {
-  background-color: #ff00ff;
+.messages .message.purple .user {
+  color: #433688;
+}
+.messages .message.purple .selection {
+  border-color: #433688;
+  color: #433688;
+}
+
+.messages .message.red .user {
+  color: #842713;
+}
+.messages .message.red .selection {
+  border-color: #842713;
+  color: #842713;
+}
+
+.messages .message.green .user {
+  color: #0d6540;
+}
+.messages .message.green .selection {
+  border-color: #0d6540;
+  color: #0d6540;
 }
 
+.messages .message.gray {
+  background-color: #4f4f4f;
+}
+.messages .message.blue {
+  background-color: #18a0fb;
+}
+.messages .message.lightblue {
+  background-color: #56ccf2;
+  color: #357d94;
+}
+.messages .message.purple {
+  background-color: #7b61ff;
+}
 .messages .message.green {
   background-color: #1bc47d;
 }
-
+.messages .message.lightgreen {
+  background-color: #6fcf97;
+}
 .messages .message.red {
   background-color: #f24822;
 }
-
-.messages .message.yellow {
-  background-color: #ffeb00;
-  color: #000;
+.messages .message.orange {
+  background-color: #f2994a;
 }
 
 .chat .footer {
@@ -162,14 +201,14 @@ body {
 }
 .settings .colors {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-gap: 32px;
   margin-bottom: 30px;
 }
 .settings .colors .color {
   position: relative;
-  width: 60px;
-  height: 60px;
+  width: 40px;
+  height: 40px;
   border-radius: 100%;
   cursor: pointer;
 }
@@ -179,8 +218,8 @@ body {
   top: -6px;
   position: absolute;
   border-radius: 100%;
-  width: 70px;
-  height: 70px;
+  width: 50px;
+  height: 50px;
   border: 1px solid #000;
 }
 

src/assets/css/ui.css

@@ -39,25 +39,37 @@ async function main() {
 
 main().then(({ roomName, secret }) => {
   figma.ui.onmessage = async message => {
-    if (message.action === 'save-settings') {
-      await figma.clientStorage.setAsync('settings', message.options);
+    if (message.action === 'save-user-settings') {
+      await figma.clientStorage.setAsync('user-settings', message.options);
 
       figma.ui.postMessage({
-        type: 'settings',
+        type: 'user-settings',
         settings: message.options
       });
     }
 
-    if (message.action === 'get-settings') {
-      const settings = await figma.clientStorage.getAsync('settings');
+    if (message.action === 'get-user-settings') {
+      const settings = await figma.clientStorage.getAsync('user-settings');
       figma.ui.postMessage({
-        type: 'settings',
+        type: 'user-settings',
         settings
       });
     }
 
-    if (message.action === 'message') {
-      throw 'Neue Nachricht!';
+    if (message.action === 'set-server-url') {
+      await figma.clientStorage.setAsync('server-url', message.options);
+
+      alert('Please restart the plugin to connect to the new server.');
+      figma.closePlugin();
+    }
+
+    if (message.action === 'initialize') {
+      const url = await figma.clientStorage.getAsync('server-url');
+
+      figma.ui.postMessage({
+        type: 'initialize',
+        url: url || ''
+      });
     }
 
     if (message.action === 'get-selection') {

src/code.ts

@@ -6,14 +6,16 @@ export default function Settings(props) {
   const closeSettings = () => props.setSettingsView(false);
 
   const [settings, setSettings] = useState({
-    ...props.settings,
-    user: {
-      ...props.settings.user
-    }
+    ...props.settings
   });
+  const [url, setUrl] = useState(props.url);
 
   const saveSettings = () => {
-    sendMainMessage('save-settings', settings);
+    sendMainMessage('save-user-settings', settings);
+
+    if (url && url !== props.url) {
+      sendMainMessage('set-server-url', url);
+    }
 
     props.setSettingsView(false);
   };
@@ -24,14 +26,11 @@ export default function Settings(props) {
         <h4>Name</h4>
         <input
           type="input"
-          value={settings.user.name}
+          value={settings.name}
           onChange={e =>
             setSettings({
               ...settings,
-              user: {
-                ...settings.user,
-                name: e.target.value
-              }
+              name: e.target.value
             })
           }
           className="input"
@@ -47,32 +46,27 @@ export default function Settings(props) {
               onClick={() =>
                 setSettings({
                   ...settings,
-                  user: {
-                    ...settings.user,
-                    color
-                  }
+                  color
                 })
               }
-              className={`color ${settings.user.color === color && ' active'}`}
+              className={`color ${settings.color === color && ' active'}`}
               style={{ backgroundColor: color }}
             />
           ))}
         </div>
 
-        <strong>Current Server</strong><p>{settings.url}</p>
+        <h4>
+          Current Server (needs restart)
+          <p>{props.url}</p>
+        </h4>
 
-        {/* <input
+        <input
           type="input"
-          value={settings.url}
-          onChange={e =>
-            setSettings({
-              ...settings,
-              url: e.target.value
-            })
-          }
+          value={url}
+          onChange={e => setUrl(e.target.value)}
           className="input"
           placeholder="Server-URL ..."
-        /> */}
+        />
       </div>
 
       <div className="footer">

src/components/settings.tsx

@@ -10,10 +10,12 @@ export const sendMainMessage = (action, options = {}) =>
   );
 
 export const colors = {
+  '#4F4F4F': 'gray',
   '#18A0FB': 'blue',
+  '#56CCF2': 'lightblue',
   '#7B61FF': 'purple',
-  '#FF00FF': 'hot-pink',
   '#1BC47D': 'green',
+  '#6fcf97': 'lightgreen',
   '#F24822': 'red',
-  '#FFEB00': 'yellow'
+  '#F2994A': 'orange'
 };