Skip to content

Commit 93660b8

Browse files
jake-paulsjake-pauls
committed
Refactored code and extracted some repetitive markup into components, added details to UXP and Electron UIs
1 parent 8226292 commit 93660b8

File tree

8 files changed

+103
-51
lines changed

8 files changed

+103
-51
lines changed

‎desktop-helper-sample/helper/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@
1616
},
1717
"devDependencies": {
1818
"@adobe/react-spectrum": "^3.11.2",
19+
"@spectrum-icons/workflow": "^3.2.0",
1920
"concurrently": "^6.2.0",
2021
"cross-env": "^7.0.3",
2122
"electron": "^13.1.6",
2223
"electron-builder": "^22.11.7",
2324
"wait-on": "^6.0.0"
2425
},
2526
"dependencies": {
26-
"cors": "^2.8.5",
2727
"electron-is-dev": "^2.0.0",
2828
"express": "^4.17.1",
2929
"react": "^17.0.2",

‎desktop-helper-sample/helper/public/server.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
const http = require('http');
22
const express = require('express');
3-
const cors = require('cors');
43
const { Server } = require('socket.io');
54

65
const startServer = async () => {
76
const port = 4040;
87

98
const app = express();
10-
app.use(cors());
119

1210
const server = http.createServer(app);
1311

@@ -25,12 +23,12 @@ const startServer = async () => {
2523
io.on('connection', (socket) => {
2624
io.emit('server-connection', true);
2725

28-
socket.on('uxp-connected', (socket) => {
26+
socket.on('uxp-connected', () => {
2927
io.emit('uxp-connected', true);
3028
});
3129

3230
socket.on('message', (message) => {
33-
io.emit('redirect-message', message);
31+
io.emit('uxp-message', message);
3432
});
3533

3634
socket.on('helper-message', (message) => {
@@ -43,7 +41,7 @@ const startServer = async () => {
4341
});
4442

4543
// Emit connect when uxp attempts to reconnect
46-
io.on('reconnect', (socket) => {
44+
io.on('reconnect', () => {
4745
io.emit('server-connection', true);
4846
});
4947

‎desktop-helper-sample/helper/src/App.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Heading } from '@adobe/react-spectrum';
1+
import { Flex, Heading, Text } from '@adobe/react-spectrum';
22

33
import OptionsMenu from './components/OptionsMenu';
44

@@ -11,7 +11,12 @@ const App = () => {
1111
justifyContent="center"
1212
height="100vh"
1313
>
14-
<Heading level={2}>Welcome to the UXP Helper App</Heading>
14+
<Heading level={2} marginBottom={-2}>
15+
Welcome to the UXP Helper App
16+
</Heading>
17+
<Text marginBottom={8}>
18+
<i>To start, load the UXP plugin into Photoshop and send a message</i>
19+
</Text>
1520
<OptionsMenu />
1621
</Flex>
1722
);

‎desktop-helper-sample/helper/src/components/OptionsMenu.jsx‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,78 @@ import {
33
Button,
44
Flex,
55
Item,
6+
StatusLight,
67
Tabs,
78
TabList,
89
TabPanels,
10+
Text,
911
TextField,
10-
View,
1112
} from '@adobe/react-spectrum';
1213

14+
import TextContainer from './TextContainer';
1315
import { SocketContext } from './SocketContext';
1416

1517
const OptionsMenu = () => {
1618
const socket = useContext(SocketContext);
1719

1820
const [connectionStatus, setConnectionStatus] = useState(false);
19-
const [uxpMessage, setUXPMessage] = useState('');
20-
const [helperMessage, setHelperMessage] = useState('');
21+
const [helperData, setHelperData] = useState('');
22+
const [uxpData, setUXPData] = useState('');
2123

2224
useEffect(() => {
2325
socket.on('uxp-connected', (isUXPConnected) => {
2426
setConnectionStatus(isUXPConnected);
2527
});
2628

27-
socket.on('redirect-message', (receivedMessage) => {
28-
setUXPMessage(receivedMessage);
29+
socket.on('uxp-message', (receivedMessage) => {
30+
setUXPData(receivedMessage);
2931
});
3032
}, []);
3133

32-
const sendHelperMessage = () => {
33-
socket.emit('helper-message', helperMessage);
34+
const sendHelperData = () => {
35+
socket.emit('helper-message', helperData);
3436
};
3537

38+
let connectionStatusLight = (
39+
<StatusLight variant="negative">Disconnected</StatusLight>
40+
);
41+
42+
if (connectionStatus) {
43+
connectionStatusLight = (
44+
<StatusLight variant="positive">Connected</StatusLight>
45+
);
46+
}
47+
3648
return (
3749
<Flex width="size-6000" height="size-8000">
3850
<Tabs aria-label="UXP Helper Options">
3951
<TabList>
4052
<Item key="status">UXP Status</Item>
41-
<Item key="message">Send Message</Item>
42-
<Item key="data">Data from UXP</Item>
53+
<Item key="data">Send data to UXP</Item>
54+
<Item key="log">Received data from UXP</Item>
4355
</TabList>
4456
<TabPanels marginX={4} marginY={16}>
4557
<Item key="status">
46-
{connectionStatus === false ? 'Disconnected' : 'Connected'}
47-
</Item>
48-
<Item key="message">
49-
<Flex alignItems="center">
50-
<TextField
51-
aria-label="Send Message"
52-
placeholder="Send a message to UXP"
53-
onChange={(s) => setHelperMessage(s)}
54-
></TextField>
55-
<Button
56-
variant="cta"
57-
marginX={16}
58-
onPress={() => sendHelperMessage()}
59-
>
60-
Send
61-
</Button>
62-
</Flex>
58+
<TextContainer>{connectionStatusLight}</TextContainer>
6359
</Item>
6460
<Item key="data">
65-
<View
66-
borderWidth="thin"
67-
borderColor="dark"
68-
borderRadius="medium"
69-
backgroundColor="dark"
70-
padding="size-100"
71-
>
72-
{uxpMessage === '' ? 'Data From UXP' : uxpMessage}
73-
</View>
61+
<TextField
62+
aria-label="Send data to UXP"
63+
placeholder="Enter data to be sent"
64+
onChange={(s) => setHelperData(s)}
65+
></TextField>
66+
<Button variant="cta" marginX={16} onPress={() => sendHelperData()}>
67+
Send
68+
</Button>
69+
</Item>
70+
<Item key="log">
71+
<TextContainer>
72+
<Text>
73+
{uxpData === ''
74+
? 'Messages from UXP will appear here'
75+
: uxpData}
76+
</Text>
77+
</TextContainer>
7478
</Item>
7579
</TabPanels>
7680
</Tabs>

‎desktop-helper-sample/helper/src/components/TextContainer.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { View } from '@react-spectrum/view';
3+
4+
const TextContainer = ({ children }) => {
5+
return (
6+
<View
7+
borderWidth="thin"
8+
borderColor="dark"
9+
borderRadius="medium"
10+
backgroundColor="dark"
11+
padding="size-100"
12+
>
13+
{children}
14+
</View>
15+
);
16+
};
17+
18+
export default TextContainer;

‎desktop-helper-sample/uxp/plugin/index.html‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,24 @@
2121
margin: 4px 8px;
2222
}
2323

24+
#connectionStatus {
25+
padding-left: 8px;
26+
}
27+
28+
#connectionStatusLight {
29+
width: 1em;
30+
height: 1em;
31+
border-radius: 1em;
32+
}
33+
34+
#connectionStatusLight.negative {
35+
background-color: #91181e;
36+
}
37+
38+
#connectionStatusLight.positive {
39+
background-color: #247e60;
40+
}
41+
2442
#log {
2543
margin: 2px 0;
2644
padding: 12px;
@@ -36,19 +54,24 @@
3654
<sp-detail>Powered by Electron, React, and UXP</sp-detail>
3755
<sp-divider></sp-divider>
3856
</div>
39-
<div class="sec status">
40-
<sp-detail size="xs">STATUS</sp-detail>
41-
<sp-body size="xs" id="connectionStatus">Disconnected</sp-body>
57+
<div class="sec">
58+
<div class="status">
59+
<sp-detail size="xs">STATUS</sp-detail>
60+
<div class="status">
61+
<sp-body id="connectionStatusLight" class="negative"></sp-body>
62+
<sp-body size="xs" id="connectionStatus">Disconnected</sp-body>
63+
</div>
64+
</div>
65+
<sp-divider></sp-divider>
4266
</div>
43-
<sp-divider></sp-divider>
4467
<div class="sec">
4568
<sp-textfield placeholder="Enter data to be sent" id="textField">
4669
<sp-label slot="label">Send data to the helper</sp-label>
4770
</sp-textfield>
4871
<sp-button id="sendButton" type="primary">Send</sp-button>
4972
</div>
5073
<div class="sec">
51-
<sp-label slot="label">Receive data from the helper</sp-label>
74+
<sp-label slot="label">Received data from the helper</sp-label>
5275
<sp-body id="log">Messages from the helper will appear here</sp-body>
5376
</div>
5477
</div>

‎desktop-helper-sample/uxp/src/index.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,4 @@ body {
55
width: 100%;
66
background-color: var(--uxp-host-background-color);
77
color: var(--uxp-host-text-color);
8-
border-color: var(--uxp-host-border-color);
9-
font-size: var(--uxp-host-font-size);
10-
}
8+
}

‎desktop-helper-sample/uxp/src/utils.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
export const updateConnectionStatus = (isConnected) => {
22
let connectionStatus = document.getElementById('connectionStatus');
3+
let connectionStatusLight = document.getElementById('connectionStatusLight');
4+
35
connectionStatus.innerText = isConnected ? 'Connected' : 'Disconnected';
6+
connectionStatusLight.setAttribute(
7+
'class',
8+
isConnected ? 'positive' : 'negative'
9+
);
410
};

0 commit comments

Comments
 (0)