vzcode 0.60.0 → 0.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-iYQ0qHNs.js → index-66GpGKeF.js} +36 -36
- package/dist/assets/{index-yDxNPcIh.css → index-c1T5_KtM.css} +1 -1
- package/dist/index.html +2 -2
- package/package.json +2 -2
- package/src/client/CodeErrorOverlay/index.tsx +7 -4
- package/src/client/CodeErrorOverlay/style.scss +8 -18
- package/src/client/Icons/CloseSVG.tsx +1 -1
- package/src/client/TabList/Tab.tsx +6 -3
- package/src/client/TabList/style.scss +13 -16
- package/src/client/VZSidebar/Item.tsx +2 -2
- package/src/client/VZSidebar/index.tsx +3 -3
- package/src/client/VZSidebar/styles.scss +3 -15
package/dist/index.html
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
21
21
|
rel="stylesheet"
|
|
22
22
|
/>
|
|
23
|
-
<script type="module" crossorigin src="/assets/index-
|
|
24
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
23
|
+
<script type="module" crossorigin src="/assets/index-66GpGKeF.js"></script>
|
|
24
|
+
<link rel="stylesheet" crossorigin href="/assets/index-c1T5_KtM.css">
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
|
27
27
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.61.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"react-router-dom": "^6.22.0",
|
|
109
109
|
"sharedb": "^4.1.2",
|
|
110
110
|
"sharedb-client-browser": "^4.4.0",
|
|
111
|
-
"vizhub-ui": "^3.
|
|
111
|
+
"vizhub-ui": "^3.19.0",
|
|
112
112
|
"ws": "^8.16.0"
|
|
113
113
|
},
|
|
114
114
|
"devDependencies": {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect } from 'react';
|
|
2
|
-
import './style.scss';
|
|
3
2
|
import { VZCodeContent } from '../../types';
|
|
3
|
+
import { CloseSVG } from '../Icons';
|
|
4
|
+
import './style.scss';
|
|
4
5
|
|
|
5
6
|
const enableErrorDismiss = true;
|
|
6
7
|
|
|
@@ -58,10 +59,12 @@ export const CodeErrorOverlay = ({
|
|
|
58
59
|
<div className="vz-code-error-overlay">
|
|
59
60
|
<pre>{errorMessage}</pre>
|
|
60
61
|
{enableErrorDismiss ? (
|
|
61
|
-
<
|
|
62
|
-
className=
|
|
62
|
+
<i
|
|
63
|
+
className="icon-button icon-button-dark error-dismiss-button"
|
|
63
64
|
onClick={handleCloseClick}
|
|
64
|
-
|
|
65
|
+
>
|
|
66
|
+
<CloseSVG />
|
|
67
|
+
</i>
|
|
65
68
|
) : null}
|
|
66
69
|
</div>
|
|
67
70
|
) : null;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
.vz-code-error-overlay {
|
|
2
|
-
color:
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
color: var(--vh-color-neutral-04);
|
|
3
|
+
background: var(--vh-color-neutral-01);
|
|
4
|
+
opacity: 0.9;
|
|
5
|
+
border-left: 4px solid var(--vh-color-warning-01);
|
|
5
6
|
position: absolute;
|
|
6
7
|
bottom: 0;
|
|
7
8
|
left: 0;
|
|
8
9
|
right: 0;
|
|
9
|
-
// pointer-events: none;
|
|
10
10
|
margin: 0;
|
|
11
|
-
padding:
|
|
12
|
-
border-top-left-radius:
|
|
13
|
-
border-top-right-radius:
|
|
11
|
+
padding: 12px 16px;
|
|
12
|
+
border-top-left-radius: 4px;
|
|
13
|
+
border-top-right-radius: 4px;
|
|
14
14
|
|
|
15
15
|
/* Add a box shadow for a subtle effect */
|
|
16
16
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
pre {
|
|
20
20
|
font-family: var(--vzcode-font-family);
|
|
21
21
|
font-size: var(--vzcode-font-size);
|
|
22
|
+
margin: 0;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
/* Customize the dismiss button style */
|
|
@@ -26,16 +27,5 @@
|
|
|
26
27
|
position: absolute;
|
|
27
28
|
top: 5px; /* Adjust the top position */
|
|
28
29
|
right: 5px; /* Adjust the right position */
|
|
29
|
-
margin: 0;
|
|
30
|
-
padding: 5px; /* Adjust padding for the button */
|
|
31
|
-
cursor: pointer;
|
|
32
|
-
color: white;
|
|
33
|
-
background-color: #ff5733; /* Change the button's background color */
|
|
34
|
-
border-radius: 50%; /* Make it circular */
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Style the button on hover */
|
|
38
|
-
.error-dismiss-button:hover {
|
|
39
|
-
background-color: #ff826d; /* Change the background color on hover */
|
|
40
30
|
}
|
|
41
31
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useCallback, useMemo } from 'react';
|
|
2
2
|
import type { FileId } from '../../types';
|
|
3
3
|
import type { TabState } from '../vzReducer';
|
|
4
|
+
import { CloseSVG } from '../Icons';
|
|
4
5
|
|
|
5
6
|
// Supports adding the file's containing folder to the tab name
|
|
6
7
|
const fileNameSplit = (fileName: string) => {
|
|
@@ -61,10 +62,12 @@ export const Tab = ({
|
|
|
61
62
|
onDoubleClick={handleDoubleClick}
|
|
62
63
|
>
|
|
63
64
|
{tabName}
|
|
64
|
-
<
|
|
65
|
-
className=
|
|
65
|
+
<i
|
|
66
|
+
className="icon-button icon-button-dark"
|
|
66
67
|
onClick={handleCloseClick}
|
|
67
|
-
|
|
68
|
+
>
|
|
69
|
+
<CloseSVG />
|
|
70
|
+
</i>
|
|
68
71
|
</div>
|
|
69
72
|
);
|
|
70
73
|
};
|
|
@@ -11,11 +11,10 @@
|
|
|
11
11
|
font-weight: 500;
|
|
12
12
|
align-items: center;
|
|
13
13
|
display: flex;
|
|
14
|
-
|
|
15
|
-
padding
|
|
16
|
-
|
|
17
|
-
border-top-
|
|
18
|
-
border-top-right-radius: 12px;
|
|
14
|
+
gap: 8px;
|
|
15
|
+
padding: 8px 8px 8px 16px;
|
|
16
|
+
border-top-left-radius: 4px;
|
|
17
|
+
border-top-right-radius: 4px;
|
|
19
18
|
margin-top: 5px;
|
|
20
19
|
margin-left: 2px;
|
|
21
20
|
margin-right: 2px;
|
|
@@ -23,16 +22,6 @@
|
|
|
23
22
|
// Make sure text doesn't wrap within tabs.
|
|
24
23
|
white-space: nowrap;
|
|
25
24
|
|
|
26
|
-
// TODO unify with styles in code error overlay dismiss button
|
|
27
|
-
.tab-close {
|
|
28
|
-
margin-left: 5px;
|
|
29
|
-
margin-bottom: 2px;
|
|
30
|
-
}
|
|
31
|
-
.tab-close:hover {
|
|
32
|
-
border-radius: 50%;
|
|
33
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
25
|
// No left margin for first child
|
|
37
26
|
&:first-child {
|
|
38
27
|
margin-left: 0;
|
|
@@ -40,7 +29,8 @@
|
|
|
40
29
|
|
|
41
30
|
// on hover
|
|
42
31
|
&:hover {
|
|
43
|
-
background-color:
|
|
32
|
+
// background-color: var(--vh-color-hover-dark);
|
|
33
|
+
background-color: rgba(255, 255, 255, 0.075);
|
|
44
34
|
}
|
|
45
35
|
}
|
|
46
36
|
|
|
@@ -51,4 +41,11 @@
|
|
|
51
41
|
.tab.transient {
|
|
52
42
|
font-style: italic;
|
|
53
43
|
}
|
|
44
|
+
|
|
45
|
+
.icon-button {
|
|
46
|
+
color: var(--vh-color-neutral-03);
|
|
47
|
+
}
|
|
48
|
+
.icon-button:hover {
|
|
49
|
+
color: var(--vh-color-action-03);
|
|
50
|
+
}
|
|
54
51
|
}
|
|
@@ -177,7 +177,7 @@ export const Item = ({
|
|
|
177
177
|
>
|
|
178
178
|
<i
|
|
179
179
|
onClick={handleRenameIconClick}
|
|
180
|
-
className="icon-button"
|
|
180
|
+
className="icon-button icon-button-dark"
|
|
181
181
|
>
|
|
182
182
|
<EditSVG />
|
|
183
183
|
</i>
|
|
@@ -193,7 +193,7 @@ export const Item = ({
|
|
|
193
193
|
>
|
|
194
194
|
<i
|
|
195
195
|
onClick={handleModalOpen}
|
|
196
|
-
className="icon-button"
|
|
196
|
+
className="icon-button icon-button-dark"
|
|
197
197
|
>
|
|
198
198
|
<TrashSVG />
|
|
199
199
|
</i>
|
|
@@ -165,7 +165,7 @@ export const VZSidebar = ({
|
|
|
165
165
|
target="_blank"
|
|
166
166
|
rel="noopener noreferrer"
|
|
167
167
|
>
|
|
168
|
-
<i className="icon-button">
|
|
168
|
+
<i className="icon-button icon-button-dark">
|
|
169
169
|
<BugSVG />
|
|
170
170
|
</i>
|
|
171
171
|
</a>
|
|
@@ -181,7 +181,7 @@ export const VZSidebar = ({
|
|
|
181
181
|
>
|
|
182
182
|
<i
|
|
183
183
|
onClick={handleSettingsClick}
|
|
184
|
-
className="icon-button"
|
|
184
|
+
className="icon-button icon-button-dark"
|
|
185
185
|
>
|
|
186
186
|
<GearSVG />
|
|
187
187
|
</i>
|
|
@@ -197,7 +197,7 @@ export const VZSidebar = ({
|
|
|
197
197
|
>
|
|
198
198
|
<i
|
|
199
199
|
onClick={handleCreateFile}
|
|
200
|
-
className="icon-button"
|
|
200
|
+
className="icon-button icon-button-dark"
|
|
201
201
|
>
|
|
202
202
|
<NewSVG />
|
|
203
203
|
</i>
|
|
@@ -6,26 +6,13 @@
|
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
|
|
9
|
-
.icon-button {
|
|
10
|
-
padding: 4px;
|
|
11
|
-
border-radius: 4px;
|
|
12
|
-
/* These are required to center the icon */
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.icon-button:hover {
|
|
20
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
9
|
.full-box {
|
|
24
10
|
padding: 4px;
|
|
25
11
|
display: flex;
|
|
26
12
|
flex-direction: row;
|
|
27
13
|
align-items: center;
|
|
28
14
|
justify-content: space-between;
|
|
15
|
+
border-bottom: 2px solid var(--vh-color-neutral-02);
|
|
29
16
|
}
|
|
30
17
|
|
|
31
18
|
.files {
|
|
@@ -79,7 +66,8 @@
|
|
|
79
66
|
|
|
80
67
|
.file-or-directory:hover,
|
|
81
68
|
.settings:hover {
|
|
82
|
-
background-color: #47546b;
|
|
69
|
+
// background-color: #47546b;
|
|
70
|
+
background-color: rgba(255, 255, 255, 0.075);
|
|
83
71
|
}
|
|
84
72
|
|
|
85
73
|
.active-file,
|