Skip to content

Commit ca6a00f

Browse files
atyrodeatyrode
authored
feat: add title bar to modules (#36)
* fix: remove deleted elements from default canvas * chore: update @atyrode/excalidraw dependency to version 0.18.0-3 * feat: add borders to pad.ws elements to enhance ergonomy * style: hide hyperlink on dashboard of default canvas * style: improve Dashboard default layout * feat: add text title for elements in elements' title bar * style: remove background color and border from Editor component for cleaner design * fix: add correct yarn lockfile following dependency bump * fix: update yarn.lock for @atyrode/excalidraw to version 0.18.0-3 with correct integrity and resolved URL
1 parent 43e2bf6 commit ca6a00f

File tree

9 files changed

+148
-88
lines changed

9 files changed

+148
-88
lines changed

‎src/backend/default_canvas.json‎

Lines changed: 13 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2146,21 +2146,21 @@
21462146
"lastCommittedPoint": null
21472147
},
21482148
{
2149-
"x": 0,
2150-
"y": 0,
2149+
"x": 20,
2150+
"y": -20,
21512151
"id": "1igpgsvrsh3",
21522152
"link": "!dashboard",
21532153
"seed": 76441,
21542154
"type": "embeddable",
21552155
"angle": 0,
21562156
"index": "b0q",
2157-
"width": 340,
2158-
"height": 280,
2157+
"width": 420,
2158+
"height": 320,
21592159
"locked": false,
21602160
"frameId": null,
21612161
"opacity": 100,
2162-
"updated": 1744437345493,
2163-
"version": 1890,
2162+
"updated": 1745779075413,
2163+
"version": 2052,
21642164
"groupIds": [],
21652165
"fillStyle": "solid",
21662166
"isDeleted": false,
@@ -2172,40 +2172,13 @@
21722172
"strokeColor": "#ced4da",
21732173
"strokeStyle": "solid",
21742174
"strokeWidth": 2,
2175-
"versionNonce": 1530984984,
2175+
"versionNonce": 692312488,
21762176
"boundElements": [],
2177-
"backgroundColor": "#e9ecef"
2178-
},
2179-
{
2180-
"x": 755.6666259765625,
2181-
"y": 137.1666259765625,
2182-
"id": "g8btk6ouog",
2183-
"link": "https://coder.pad.ws/@romaincourtoismails/ubuntu.main/terminal",
2184-
"seed": 2344,
2185-
"type": "embeddable",
2186-
"angle": 0,
2187-
"index": "b0r",
2188-
"width": 600,
2189-
"height": 400,
2190-
"locked": false,
2191-
"frameId": null,
2192-
"opacity": 100,
2193-
"updated": 1744437380078,
2194-
"version": 3,
2195-
"groupIds": [],
2196-
"fillStyle": "solid",
2197-
"isDeleted": true,
2198-
"roughness": 1,
2199-
"roundness": {
2200-
"type": 3
2201-
},
2202-
"isSelected": true,
2203-
"strokeColor": "#1e1e1e",
2204-
"strokeStyle": "solid",
2205-
"strokeWidth": 2,
2206-
"versionNonce": 748163688,
2207-
"boundElements": null,
2208-
"backgroundColor": "#ffffff"
2177+
"backgroundColor": "#e9ecef",
2178+
"customData": {
2179+
"showHyperlinkIcon": false
2180+
}
22092181
}
22102182
]
2211-
}
2183+
}
2184+

‎src/frontend/index.scss‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,6 @@ body {
3939
display: none !important;
4040
}
4141

42-
.excalidraw__embeddable__outer {
43-
padding: 0px !important;
44-
pointer-events: all !important;
45-
}
46-
4742
.excalidraw .layer-ui__wrapper__top-right {
4843
gap: 0rem;
4944
}
@@ -67,4 +62,21 @@ body {
6762

6863
.excalidraw .Modal__content {
6964
animation: Modal__content_fade-in 0.3s ease-out forwards !important;
70-
}
65+
}
66+
67+
/* Embeddables */
68+
69+
.excalidraw__embeddable-container { /* 1st layer */
70+
display: block;
71+
}
72+
73+
.excalidraw__embeddable-container__inner { /* 2nd layer */
74+
border-color: #525252 !important;
75+
overflow: visible !important;
76+
}
77+
78+
.excalidraw__embeddable__outer { /* 3rd layer */
79+
padding: 0px !important;
80+
pointer-events: all !important;
81+
display: flex;
82+
}

‎src/frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6-
"@atyrode/excalidraw": "^0.18.0-2",
6+
"@atyrode/excalidraw": "^0.18.0-3",
77
"@monaco-editor/react": "^4.7.0",
88
"@tanstack/react-query": "^5.74.3",
99
"@tanstack/react-query-devtools": "^5.74.3",

‎src/frontend/src/CustomEmbeddableRenderer.scss‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,34 @@
1-
.custom-rendered-embeddable {
1+
.custom-embed {
22
height: 100%;
33
width: 100%;
4-
position: absolute;
5-
z-index: 1;
6-
}
4+
display: flex;
5+
justify-content: center;
6+
border: 0px !important;
7+
8+
&__title-bar {
9+
position: absolute;
10+
top: -30px;
11+
pointer-events: none;
12+
13+
&__text {
14+
font-family: 'Roboto', sans-serif;
15+
color: #d3d3d3;
16+
pointer-events: none;
17+
font-size: 18px;
18+
}
19+
}
20+
21+
&__content {
22+
height: 100%;
23+
width: 100%;
24+
25+
&--iframe {
26+
height: 100%;
27+
width: 100%;
28+
border: 0px !important;
29+
overflow: hidden;
30+
border-bottom-left-radius: var(--embeddable-radius);
31+
border-bottom-right-radius: var(--embeddable-radius);
32+
}
33+
}
34+
}

‎src/frontend/src/CustomEmbeddableRenderer.tsx‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,69 @@ export const renderCustomEmbeddable = (
1919

2020
if (element.link && element.link.startsWith('!')) {
2121
let path = element.link.split('!')[1];
22+
let content;
23+
let title;
2224

2325
switch (path) {
2426
case 'html':
25-
return <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
27+
content = <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
28+
title = "HTML Editor";
2629
case 'editor':
27-
return <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
30+
content = <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
31+
title = "Code Editor";
32+
break;
2833
case 'state':
29-
return <StateIndicator />;
34+
content = <StateIndicator />;
35+
title = "State Indicator";
36+
break;
3037
case 'control':
31-
return <ControlButton />;
38+
content = <ControlButton />;
39+
title = "Control Button";
40+
break;
3241
case 'button':
33-
return <ActionButton
42+
content = <ActionButton
3443
target="code"
3544
element={element}
3645
excalidrawAPI={excalidrawAPI}
3746
settingsEnabled={true}
3847
/>;
48+
title = "Action Button";
49+
break;
3950
case 'dashboard':
40-
return <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
51+
content = <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
52+
title = "Dashboard";
53+
break;
4154
default:
55+
title = "Untitled";
4256
return null;
4357
}
58+
59+
if (element.customData?.title) {
60+
title = element.customData.title;
61+
}
62+
63+
return (
64+
<div className="custom-embed">
65+
<div className="custom-embed__title-bar">
66+
<div className="custom-embed__title-bar__text">{title}</div>
67+
</div>
68+
<div className="custom-embed__content">
69+
{content}
70+
</div>
71+
</div>
72+
);
4473
} else {
45-
return <iframe className="custom-rendered-embeddable" src={element.link} />;
74+
const title = element.customData?.title || element.link || "Untitled";
75+
76+
return (
77+
<div className="custom-embed">
78+
<div className="custom-embed__title-bar">
79+
<div className="custom-embed__title-bar__text">{title}</div>
80+
</div>
81+
<div className="custom-embed__content">
82+
<iframe className="custom-embed__content--iframe" src={element.link} />
83+
</div>
84+
</div>
85+
);
4686
}
4787
};

‎src/frontend/src/pad/editors/Editor.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
display: flex;
1111
justify-content: right;
1212
padding: 8px;
13-
background-color: #1e1e1e;
14-
border-bottom: 1px solid #333;
1513
}
1614

1715
&__language-selector {

‎src/frontend/src/ui/MainMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
5353

5454
const dashboardElement = ExcalidrawElementFactory.createEmbeddableElement({
5555
link: "!dashboard",
56-
width: 460,
57-
height: 80
56+
width: 360,
57+
height: 360
5858
});
5959

6060
ExcalidrawElementFactory.placeInScene(dashboardElement, excalidrawAPI, {

‎src/frontend/src/utils/canvasUtils.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ export function normalizeCanvasData(data: any) {
2020
if ("height" in appState) {
2121
delete appState.height;
2222
}
23+
24+
appState.pad = {
25+
moduleBorderOffset: {
26+
left: 10,
27+
right: 10,
28+
top: 40,
29+
bottom: 10,
30+
},
31+
};
2332

2433
// Reset collaborators (https://github.com/excalidraw/excalidraw/issues/8637)
2534
appState.collaborators = new Map();

‎src/frontend/yarn.lock‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
# yarn lockfile v1
33

44

5-
"@atyrode/excalidraw@^0.18.0-2":
6-
version "0.18.0-2"
7-
resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-2.tgz#66be05d5b8a2458dd65fb58baa104fd803a41c5d"
8-
integrity sha512-z3scC5BzVnu8ddS1TJTNxX+wPa3bj72j9RVleSV7iDZsClLDqgcrW+Z/cVHEphWpvBKlMzRo31vDdg+dqE6dDg==
5+
"@atyrode/excalidraw@^0.18.0-3":
6+
version "0.18.0-3"
7+
resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-3.tgz#445176d5b9828f033205a46f227fd76e722019ec"
8+
integrity sha512-iWLyYMZNV9VQCcWAtrLmg52NkfCw1CDrigXXRrxa3H2KW6nyrlbFm3KZAF5Y0mOJDYzAtxclPvHoTvcRruMjGg==
99
dependencies:
1010
"@braintree/sanitize-url" "6.0.2"
1111
"@excalidraw/laser-pointer" "1.3.1"
@@ -537,29 +537,29 @@
537537
resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz#fd92d31a2931483c25677b9c6698106490cbbc76"
538538
integrity sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==
539539

540-
"@tanstack/[email protected].4":
541-
version "5.74.4"
542-
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.74.4.tgz#08c4f88f336738d822d9242c5e7d2be50f5c25b3"
543-
integrity sha512-YuG0A0+3i9b2Gfo9fkmNnkUWh5+5cFhWBN0pJAHkHilTx6A0nv8kepkk4T4GRt4e5ahbtFj2eTtkiPcVU1xO4A==
540+
"@tanstack/[email protected].7":
541+
version "5.74.7"
542+
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.74.7.tgz#beb565a5f3d95a1e3bd756e5eb1e41c3eb48ae7f"
543+
integrity sha512-X3StkN/Y6KGHndTjJf8H8th7AX4bKfbRpiVhVqevf0QWlxl6DhyJ0TYG3R0LARa/+xqDwzU9mA4pbJxzPCI29A==
544544

545-
"@tanstack/[email protected].6":
546-
version "5.74.6"
547-
resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.6.tgz#88a29fac2ba3db6c9bda8f40808f808d7a88df0b"
548-
integrity sha512-djaFT11mVCOW3e0Ezfyiq7T6OoHy2LRI1fUFQvj+G6+/4A1FkuRMNUhQkdP1GXlx8id0f1/zd5fgDpIy5SU/Iw==
545+
"@tanstack/[email protected].7":
546+
version "5.74.7"
547+
resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz#c9b022b386ac86e6395228b5d6912e6444b3b971"
548+
integrity sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==
549549

550550
"@tanstack/react-query-devtools@^5.74.3":
551-
version "5.74.6"
552-
resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.74.6.tgz#169a3e2beab0c87ce3ebbda909bbd2c6590239f8"
553-
integrity sha512-vlsDwz4/FsblK0h7VAlXUdJ+9OV+i1n8OLb8CLLAZqu0M9GCnbajytZwsRmns33PXBZ6wQBJ859kg6aajx+e9Q==
551+
version "5.74.7"
552+
resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.74.7.tgz#97fd56ae76996467d544b546a1bd38aab4a94d1e"
553+
integrity sha512-j60esTQF+ES0x52kQUYOX0Z8AJUcqCGANj6GaOf8J3YQz2bZPB1imLSw4SFeM3Ozv8uO/X/Dmh3IT1z+y57ZLQ==
554554
dependencies:
555-
"@tanstack/query-devtools" "5.74.6"
555+
"@tanstack/query-devtools" "5.74.7"
556556

557557
"@tanstack/react-query@^5.74.3":
558-
version "5.74.4"
559-
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.74.4.tgz#d73ee1899c08a227519cbf53b9a0e0b1e67cd3fe"
560-
integrity sha512-mAbxw60d4ffQ4qmRYfkO1xzRBPUEf/72Dgo3qqea0J66nIKuDTLEqQt0ku++SDFlMGMnB6uKDnEG1xD/TDse4Q==
558+
version "5.74.7"
559+
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.74.7.tgz#3507541b43de72399a19a71ff66828a12b859581"
560+
integrity sha512-u4o/RIWnnrq26orGZu2NDPwmVof1vtAiiV6KYUXd49GuK+8HX+gyxoAYqIaZogvCE1cqOuZAhQKcrKGYGkrLxg==
561561
dependencies:
562-
"@tanstack/query-core" "5.74.4"
562+
"@tanstack/query-core" "5.74.7"
563563

564564
"@types/d3-scale-chromatic@^3.0.0":
565565
version "3.1.0"
@@ -603,9 +603,9 @@
603603
integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
604604

605605
"@types/node@^22.14.0":
606-
version "22.15.1"
607-
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.15.1.tgz#4cd2c8717a61ae2979c6a0624b4d1b67415bf2c0"
608-
integrity sha512-gSZyd0Qmv7qvbd2fJ9HGdYmv1yhNdelIA4YOtN6vkcmSwFhthxSEsBgU/JYZcXjWT6DFzoATcHrc52Ckh8SeRA==
606+
version "22.15.2"
607+
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.15.2.tgz#1db55aa64618ee93a58c8912f74beefe44aca905"
608+
integrity sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==
609609
dependencies:
610610
undici-types "~6.21.0"
611611

@@ -1646,9 +1646,9 @@ postcss@^8.4.36:
16461646
source-map-js "^1.2.1"
16471647

16481648
posthog-js@^1.236.0:
1649-
version "1.236.6"
1650-
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.236.6.tgz#f4d73d25773f4e4bafd7632717c97b27bd9f1b7c"
1651-
integrity sha512-IX4fkn3HCK+ObdHr/AuWd+Ks7bgMpRpOQB93b5rDJAWkG4if4xFVUn5pgEjyCNeOO2GM1ECnp08q9tYNYEfwbA==
1649+
version "1.236.7"
1650+
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.236.7.tgz#6a071905d4466573b80fd52bad1d3478594805b7"
1651+
integrity sha512-HatTinqAt/6aAraCgbnP+2MTeVTChdf6TDsQkef4/yUnXeA4tsHmXnGGJ3vnzQk7N//R6lIHN189BZDO9kuKAg==
16521652
dependencies:
16531653
core-js "^3.38.1"
16541654
fflate "^0.4.8"

0 commit comments

Comments
 (0)