Skip to content

Commit

Permalink
refactor: transfer first methods to new version
Browse files Browse the repository at this point in the history
  • Loading branch information
@ph1p
ph1p committed Nov 16, 2019
1 parent a85be6a commit 00af214
Show file tree
Hide file tree
Showing 8 changed files with 479 additions and 116 deletions.
32 changes: 23 additions & 9 deletions src/code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,16 @@ if (figma.command === 'show') {
}

main().then(({ roomName, secret, history, instanceId }) => {
figma.ui.onmessage = async message => {
// events
figma.on('selectionchange', () => {
postMessage(
'selection',
figma.currentPage.selection.map(n => n.id)
);
});

figma.ui.onmessage = async message => {
// await figma.clientStorage.setAsync('user-settings', {});
if (message.action === 'save-user-settings') {
await figma.clientStorage.setAsync('user-settings', message.payload);

Expand Down Expand Up @@ -91,12 +100,6 @@ main().then(({ roomName, secret, history, instanceId }) => {
}
}

if (message.action === 'get-user-settings') {
const settings = await figma.clientStorage.getAsync('user-settings');

postMessage('user-settings', settings);
}

if (message.action === 'set-server-url') {
await figma.clientStorage.setAsync('server-url', message.payload);

Expand All @@ -111,7 +114,10 @@ main().then(({ roomName, secret, history, instanceId }) => {
}

if (message.action === 'get-selection') {
postMessage('selection', figma.currentPage.selection.map(n => n.id));
postMessage(
'selection',
figma.currentPage.selection.map(n => n.id)
);
}

if (message.action === 'remove-all-messages') {
Expand Down Expand Up @@ -145,7 +151,15 @@ main().then(({ roomName, secret, history, instanceId }) => {
}

if (message.action === 'get-root-data') {
postMessage('root-data', { roomName, secret, history, instanceId });
const settings = await figma.clientStorage.getAsync('user-settings');

postMessage('root-data', {
roomName,
secret,
history,
instanceId,
settings
});
}

if (message.action === 'cancel') {
Expand Down
65 changes: 16 additions & 49 deletions src/components/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,28 @@
import React, { FunctionComponent } from 'react';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom';
import { Link } from 'react-router-dom';

interface Props {
title: string;
title: any;
left?: any;
right?: any;
backButton?: boolean;
}

const Header: FunctionComponent<Props> = props => {
const history = useHistory();
const goBack = () => history.push('/');

return (
<Head>
<div className="inner">
{props.backButton && (
<div className="back-button" onClick={goBack}>
<div className="icon icon--return"></div>
</div>
)}
{props.left && <div className="left">{props.left}</div>}
<div className="title">{props.title}</div>
{props.right && <div className="right">{props.right}</div>}
</div>
</Head>
);
};
const Header: FunctionComponent<Props> = props => (
<Head>
<div className="inner">
{props.backButton && (
<Link className="back-button" to="/">
<div className="icon icon--return"></div>
</Link>
)}
{props.left && <div className="left">{props.left}</div>}
<div className="title">{props.title}</div>
{props.right && <div className="right">{props.right}</div>}
</div>
</Head>
);

const Head = styled.div`
border-bottom: 1px solid #e9e9e9;
Expand All @@ -50,34 +45,6 @@ const Head = styled.div`
.right {
}
}
.user-online {
cursor: pointer;
}
.onboarding-tip {
padding: 0;
}
.minimize-chat {
cursor: pointer;
border-left: 1px solid #e9e9e9;
margin-left: 10px;
}
.onboarding-tip__msg {
display: flex;
justify-content: space-between;
width: 100%;
}
.onboarding-tip__icon {
border-right: 1px solid #e9e9e9;
}
.icon {
cursor: pointer;
}
`;

export default Header;
163 changes: 153 additions & 10 deletions src/components/message.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import * as React from 'react';
import React, { FunctionComponent } from 'react';
import { sendMainMessage, colors } from '../utils';
import styled from 'styled-components';

export default function Message({ data, instanceId }) {
interface Props {
data: any;
instanceId: any;
}

const Message: FunctionComponent<Props> = ({ data, instanceId }) => {
const username = data.user.name || '';
const colorClass = colors[data.user.color] || 'blue';

return (
<div
className={`message ${
data.id === instanceId
? 'me'
: colorClass
}`}
<MessageContainer
className={`message ${data.id === instanceId ? 'me' : colorClass}`}
>
{data.id !== instanceId ? <div className="user">{username}</div> : ''}
{data.message.selection ? (
Expand All @@ -30,6 +32,147 @@ export default function Message({ data, instanceId }) {
) : (
<span>{data.message.text}</span>
)}
</div>
</MessageContainer>
);
}
};

const MessageContainer = styled.div`
background-color: #18a0fb;
border-radius: 15px;
color: #fff;
font-family: Inter;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
padding: 12px 15px;
margin: 0 30% 15px 0;
word-break: break-word;
&.me {
color: #000;
margin: 0 0 15px 30%;
background-color: #ebebeb;
}
.user {
font-size: 9px;
margin-bottom: 5px;
color: #fff;
}
.selection {
margin: 8px 0 0 0;
cursor: pointer;
width: 100%;
background-color: transparent;
border-color: #fff;
color: #fff;
}
&.me .user {
color: #000;
}
&.me .selection {
border-color: #000;
color: #000;
}
&.lightblue .user {
color: #1c4856;
}
&.lightblue .selection {
border-color: #1c4856;
color: #1c4856;
}
&.lightgreen .user {
color: #3a8459;
}
&.lightgreen .selection {
border-color: #3a8459;
color: #3a8459;
}
&.purple .user {
color: #ffffff;
}
&.purple .selection {
border-color: #ffffff;
color: #ffffff;
}
&.red .user {
color: #ffffff;
}
&.red .selection {
border-color: #ffffff;
color: #ffffff;
}
&.green .user {
color: #0d6540;
}
&.green .selection {
border-color: #0d6540;
color: #0d6540;
}
&.orange .user {
color: #865427;
}
&.orange .selection {
border-color: #865427;
color: #865427;
}
&.beige .user {
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: #7b61ff;
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;
Loading

0 comments on commit 00af214

Please sign in to comment.