Skip to content

Commit 35799d9

Browse files
KamyaPAKamyaPA
authored
Merge branch 'main' into 134-feature-code-editor-2
2 parents ed8cec5 + 699f37f commit 35799d9

26 files changed

Lines changed: 636 additions & 299 deletions

‎playwright.config.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
11
import type { PlaywrightTestConfig } from "@playwright/test";
2+
import { devices } from "@playwright/test";
23

34
const config: PlaywrightTestConfig = {
5+
workers: 1,
46
webServer: {
57
command: "yarn build && yarn preview",
68
port: 4173,
79
timeout: 10 * 60 * 1000,
810
},
911
testDir: "tests",
1012
testMatch: /(.+\.)?(test|spec)\.[jt]s/,
13+
projects: [
14+
{
15+
name: "chromium",
16+
use: { ...devices["Desktop Chrome"] },
17+
},
18+
{
19+
name: "firefox",
20+
use: { ...devices["Desktop Firefox"] },
21+
},
22+
{
23+
name: "webkit",
24+
use: { ...devices["Desktop Safari"] },
25+
},
26+
],
1127
};
1228

1329
export default config;

‎src/lib/GlobalCssProperties.json‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,49 @@
106106
0.52549019608,
107107
0.52549019608,
108108
0.52549019608
109+
110+
"--engine-ui-underline-color": ["display-p3", 1, 1, 1],
111+
"--engine-ui-error-underline-color": [
112+
"display-p3",
113+
0.82745098039,
114+
0.18431372549,
115+
0.18431372549
116+
],
117+
"--engine-ui-input-text-placeholder-color": [
118+
"display-p3",
119+
0.8,
120+
0.8,
121+
0.8
122+
],
123+
"--engine-ui-scrollbar-thumb-background-color": [
124+
"display-p3",
125+
0.5608,
126+
0.498,
127+
0.4353
128+
],
129+
"--engine-ui-scrollbar-thumb-color": [
130+
"display-p3",
131+
0.7137,
132+
0.6941,
133+
0.6706
134+
],
135+
"--engine-ui-text-color": ["display-p3", 1, 1, 1],
136+
"--engine-ui-background-color": [
137+
"display-p3",
138+
0.2862745098,
139+
0.34901960784,
140+
0.38823529411
141+
],
142+
"--engine-ui-button-color": [
143+
"display-p3",
144+
0.2862745098,
145+
0.34901960784,
146+
0.38823529411
109147
],
110148
"--settings-danger-button-color": ["srgb", 0.498, 0.0902, 0.0549],
111-
"--settings-safe-button-color": ["srgb", 0.3255, 0.498, 0.2667]
149+
"--settings-safe-button-color": ["srgb", 0.3255, 0.498, 0.2667],
150+
"--dropdown-button-color": ["srgb", 1, 1, 1],
151+
"--dropdown-text-color": ["srgb", 0, 0, 0]
112152
},
113153
"fontSize": {
114154
"--sidebar-fontsize": [1, "rem"],
@@ -225,6 +265,39 @@
225265
0.58823529411,
226266
0.98823529412
227267
]
268+
"--engine-ui-underline-color": ["display-p3", 1, 1, 1],
269+
"--engine-ui-error-underline-color": [
270+
"display-p3",
271+
0.82745098039,
272+
0.18431372549,
273+
0.18431372549
274+
],
275+
"--engine-ui-input-text-placeholder-color": [
276+
"display-p3",
277+
0.7333,
278+
0.7333,
279+
0.7333
280+
],
281+
"--engine-ui-scrollbar-thumb-background-color": [
282+
"display-p3",
283+
0.95,
284+
0.95,
285+
0.95
286+
],
287+
"--engine-ui-scrollbar-thumb-color": ["display-p3", 0, 0, 0],
288+
"--engine-ui-background-color": [
289+
"display-p3",
290+
0.08490196078,
291+
0.09666666666,
292+
0.12019607843
293+
],
294+
"--engine-ui-button-color": [
295+
"display-p3",
296+
0.08490196078,
297+
0.09666666666,
298+
0.12019607843
299+
],
300+
"--engine-ui-text-color": ["display-p3", 1, 1, 1]
228301
}
229302
},
230303
{

‎src/lib/classes/automaton/IdMap.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export abstract class IdMap<
171171
const storedMember = this.get(id);
172172
if (storedMember && storedMember.id !== id) {
173173
throw new TypeError(
174-
`This map uses a different Id (${storedMember.id.rawId}) that is uniqely comparable to ${id.rawId}. You cannot use both in the same map.`,
174+
`This map uses a different Id (${storedMember.id.rawId}) that is uniquely comparable to ${id.rawId}. You cannot use both in the same map.`,
175175
);
176176
}
177177
}

‎src/lib/classes/styling/ZodSchemas/CSSVariables.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,18 @@ export const ColorVariables = z
3636
"--sidebar-element-hover-color": ColorAttribute,
3737
"--editor-keyword-color": ColorAttribute,
3838
"--editor-comment-color": ColorAttribute,
39+
"--engine-ui-underline-color": ColorAttribute,
40+
"--engine-ui-error-underline-color": ColorAttribute,
41+
"--engine-ui-input-text-placeholder-color": ColorAttribute,
42+
"--engine-ui-scrollbar-thumb-background-color": ColorAttribute,
43+
"--engine-ui-scrollbar-thumb-color": ColorAttribute,
44+
"--engine-ui-text-color": ColorAttribute,
45+
"--engine-ui-background-color": ColorAttribute,
46+
"--engine-ui-button-color": ColorAttribute,
3947
"--settings-danger-button-color": ColorAttribute,
4048
"--settings-safe-button-color": ColorAttribute,
49+
"--dropdown-button-color": ColorAttribute,
50+
"--dropdown-text-color": ColorAttribute,
4151
})
4252
.strict();
4353

‎src/lib/components/buttons/SvgButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515
<div>
1616
<button
1717
style="justify-content: {justifyContent}"
18+
{id}
1819
bind:this={button}
1920
on:click={click}
2021
{popovertarget}
2122
>
2223
<svelte:component
2324
this={icon}
24-
{id}
2525
{size}
2626
{color}
2727
ariaLabel=""

‎src/lib/components/overlayMenu/OverlayMenu.svelte‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,18 @@
6464
open = Boolean(event.newState === "open");
6565
}
6666
67+
// TODO: this check is unnecessary when support is universal: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover#browser_compatibility
68+
const popoverIsSupported =
69+
browser && Object.hasOwnProperty.call(HTMLElement.prototype, "popover");
70+
6771
/**
6872
* Opens the context menu (Right-click menu)
6973
*/
7074
function openContextMenu() {
7175
if (!overlayMenuPopover) return;
7276
7377
// Show the menu
74-
if (!overlayMenuPopover.matches(":popover-open"))
78+
if (popoverIsSupported && !overlayMenuPopover.matches(":popover-open"))
7579
overlayMenuPopover.showPopover();
7680
7781
// Set up event listeners for closing the menu
@@ -103,7 +107,10 @@
103107
* Closes the context menu (Right-click menu)
104108
*/
105109
function closeContextMenu() {
106-
if (overlayMenuPopover?.matches(":popover-open")) {
110+
if (
111+
popoverIsSupported &&
112+
overlayMenuPopover?.matches(":popover-open")
113+
) {
107114
overlayMenuPopover.hidePopover();
108115
}
109116
closeListenersController?.abort();

‎src/lib/components/overlayMenu/elements/Button.svelte‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,23 @@
66
export let icon: ComponentType;
77
88
export let text: string;
9+
10+
export let backgroundColor: string = "var(--dropdown-button-color)";
11+
12+
export let buttonColor: string = "var(--dropdown-text-color))";
913
</script>
1014

11-
<button on:click={click}>
15+
<button
16+
on:click={click}
17+
style="background-color: {backgroundColor}; color: {buttonColor}"
18+
>
1219
<svelte:component this={icon} ariaLabel="" class="icon" tabindex="-1" />
1320
<p>{text}</p>
1421
</button>
1522

1623
<style>
1724
button {
1825
border: 0;
19-
background-color: #fff;
2026
display: flex;
2127
align-items: center;
2228
height: 2em;
@@ -30,6 +36,6 @@
3036
}
3137
3238
button:hover {
33-
background-color: #eee;
39+
filter: brightness(0.9);
3440
}
3541
</style>

‎src/lib/components/project/ProjectItem.svelte‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,23 @@
1616
export let setAsActive: () => void;
1717
export let rename: () => void;
1818
19-
const UniqeId = id.rawId.split(" ").join("-").toLowerCase();
19+
const UniqueId = id.rawId.split(" ").join("-").toLowerCase();
2020
</script>
2121

22-
<button on:click={setAsActive}>
23-
<div class="project-item {itemType}" id={UniqeId}>
24-
<div
25-
class="left"
26-
on:dblclick={rename}
27-
on:keypress={(event) => {
28-
if (event.key === "Enter") {
29-
rename();
30-
}
31-
}}
32-
role="button"
33-
tabindex="0"
34-
>
22+
<div class="project-item {itemType}" id={UniqueId}>
23+
<div
24+
class="left"
25+
on:click={setAsActive}
26+
on:dblclick={rename}
27+
on:keypress={(event) => {
28+
if (event.key === "Enter") {
29+
rename();
30+
}
31+
}}
32+
role="button"
33+
tabindex="0"
34+
>
35+
<div style="display: flex;">
3536
<div class="circle" style="background-color: {color}">
3637
<div class="icon">
3738
{#if itemType === "component"}
@@ -43,47 +44,49 @@
4344
</div>
4445
<p>{id.rawId}</p>
4546
</div>
46-
<div>
47-
{#if itemType === "component"}
48-
<ProjectItemDropDownMenu
49-
bind:description
50-
bind:color
51-
bind:includeInPeriodicCheck
52-
{id}
53-
{itemType}
54-
/>
55-
{:else}
56-
<ProjectItemDropDownMenu
57-
bind:description
58-
bind:color
59-
{id}
60-
{itemType}
61-
/>
62-
{/if}
63-
</div>
6447
</div>
65-
</button>
48+
<div class="right">
49+
{#if itemType === "component"}
50+
<ProjectItemDropDownMenu
51+
bind:description
52+
bind:color
53+
bind:includeInPeriodicCheck
54+
{id}
55+
{itemType}
56+
/>
57+
{:else}
58+
<ProjectItemDropDownMenu
59+
bind:description
60+
bind:color
61+
{id}
62+
{itemType}
63+
/>
64+
{/if}
65+
</div>
66+
</div>
6667

6768
<style>
68-
button {
69-
display: block;
70-
color: inherit;
71-
font: inherit;
72-
border: none;
73-
border-bottom: 1px solid black;
74-
padding: 0;
69+
.left {
70+
padding: 10px;
7571
width: 100%;
72+
overflow: hidden;
73+
border-right: 1px solid rgba(28, 28, 28, 0.55);
74+
border-image: linear-gradient(
75+
rgba(0, 0, 0, 0) 20%,
76+
rgba(0, 0, 0, 1) 20%,
77+
rgba(0, 0, 0, 1) 80%,
78+
rgba(0, 0, 0, 0) 80%
79+
);
80+
border-image-slice: 1;
7681
}
7782
78-
button:focus-visible {
79-
outline: 1px solid white;
80-
outline-offset: -1px;
83+
.right {
84+
margin: 0 5px;
8185
}
8286
83-
.left {
84-
display: flex;
85-
align-items: center;
86-
width: 100%;
87+
p {
88+
overflow: hidden;
89+
text-overflow: ellipsis;
8790
}
8891
8992
.project-item {
@@ -95,7 +98,6 @@
9598
display: flex;
9699
justify-content: flex-start;
97100
align-items: center;
98-
padding: 10px;
99101
border-bottom: 1px solid black;
100102
}
101103

‎src/lib/components/project/ProjectItemDropDownMenu.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
export let id: SystemId | ComponentId;
2020
export let itemType: "system" | "component";
2121
22-
const UniqeId = id.rawId.split(" ").join("-").toLowerCase();
22+
const UniqueId = id.rawId.split(" ").join("-").toLowerCase();
2323
2424
const colorOptions = [
2525
"#8B0000", // Dark Red
@@ -40,7 +40,7 @@
4040
"#900C3F", // Deep Red
4141
];
4242
43-
const menuId = `${UniqeId}-menu`;
43+
const menuId = `${UniqueId}-menu`;
4444
let button: HTMLElement;
4545
4646
/**
@@ -57,7 +57,7 @@
5757
bind:button
5858
icon={More_vert}
5959
popovertarget={menuId}
60-
id={`${UniqeId}-button`}
60+
id={`${UniqueId}-button`}
6161
color="var(--sidebar-text-color)"
6262
/>
6363
<OverlayMenu anchor={button} id={menuId}>

0 commit comments

Comments
 (0)