Skip to content

Commit bdcd69e

Browse files
Nickson256Nickson256
committed
wip
1 parent e0831ca commit bdcd69e

File tree

11 files changed

+753
-298
lines changed

11 files changed

+753
-298
lines changed

‎.github/workflows/monorepo-split-packages.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ jobs:
2020
- audit
2121
- backup-server
2222
- base-theme
23+
- bpmn
2324
- build
2425
- cart
2526
- category

‎packages/bpmn/composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"moox": {
4040
"title": "Moox BPMN",
4141
"stability": "stable",
42-
"type": "moox-plugin",
42+
"type": "plugin",
4343
"category": "content",
4444
"template": false
4545
}

‎packages/bpmn/resources/css/bpmn.css‎

Lines changed: 137 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1+
/* === Full Page Root Layout === */
2+
html, body {
3+
height: 100%;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
18
.bpmn-viewer {
29
position: relative;
10+
display: flex;
11+
flex-direction: column;
312
border: 1px solid #e5e7eb;
413
border-radius: 0.375rem;
5-
overflow: hidden;
6-
background-color: #ffffff;
14+
overflow: visible;
15+
margin: 0;
16+
height: 100vh; /* now fills entire page */
17+
transition: box-shadow 0.2s ease;
18+
height: 100vh !important;
19+
max-height: 100vh;
720
}
821

9-
.bpmn-container {
10-
height: 100%;
11-
min-height: 400px;
12-
position: relative;
22+
.bpmn-viewer:hover {
23+
box-shadow: 0 0 0 2px #007cba22;
1324
}
1425

26+
/* === Toolbar === */
1527
.bpmn-toolbar {
1628
display: flex;
1729
justify-content: space-between;
@@ -20,113 +32,175 @@
2032
background-color: #f9fafb;
2133
border-bottom: 1px solid #e5e7eb;
2234
min-height: 3rem;
35+
flex-shrink: 0; /* prevent shrinking */
2336
}
2437

25-
.bpmn-info {
38+
/* === Diagram Container (Full Remaining Space) === */
39+
.bpmn-container {
40+
flex: 1 1 auto; /* now fills leftover page space */
41+
min-height: 0; /* required so flexbox can shrink */
42+
position: relative;
43+
background-color: #f9fafb;
44+
45+
background-size: 20px 20px;
46+
background-position: center center;
47+
overflow: hidden;
48+
}
49+
50+
/* === Properties Panel === */
51+
.bpmn-properties-panel {
52+
position: absolute;
53+
top: 0;
54+
right: 0;
55+
bottom: 0;
56+
width: 300px;
57+
border-left: 1px solid #e5e7eb;
58+
background: #fff;
59+
overflow-y: auto;
60+
z-index: 1500;
2661
display: flex;
27-
align-items: center;
28-
gap: 0.5rem;
2962
}
3063

64+
/* === Zoom Toolbar === */
65+
.bpmn-zoom-toolbar {
66+
position: absolute;
67+
top: 0.75rem;
68+
right: 0.75rem;
69+
display: flex;
70+
flex-direction: column;
71+
gap: 0.25rem;
72+
73+
background: rgba(255, 255, 255, 0.85);
74+
backdrop-filter: blur(4px);
75+
76+
border: 1px solid #ddd;
77+
border-radius: 0.5rem;
78+
padding: 0.3rem 0.4rem;
79+
80+
transition: opacity 0.2s ease-in-out;
81+
opacity: 0;
82+
}
83+
84+
.bpmn-container:hover .bpmn-zoom-toolbar {
85+
opacity: 1;
86+
}
87+
88+
.bpmn-zoom-toolbar button {
89+
font-size: 1rem;
90+
padding: 0.25rem 0.3rem;
91+
cursor: pointer;
92+
border: none;
93+
background: none;
94+
border-radius: 0.3rem;
95+
}
96+
97+
.bpmn-zoom-toolbar button:hover {
98+
background: rgba(0, 0, 0, 0.05);
99+
}
100+
101+
.bpmn-zoom-level {
102+
font-size: 10px;
103+
color: #bdb9b9;
104+
text-align: center;
105+
padding: 2px 0;
106+
}
107+
108+
.bpmn-zoom-tooltip {
109+
position: absolute;
110+
right: 110%;
111+
top: 50%;
112+
transform: translateY(-50%);
113+
background: #5f5e5e;
114+
color: #fff;
115+
padding: 3px 6px;
116+
font-size: 10px;
117+
border-radius: 4px;
118+
white-space: nowrap;
119+
pointer-events: none;
120+
opacity: 0;
121+
transition: opacity .15s ease;
122+
}
123+
124+
/* === Save Button === */
31125
.bpmn-save {
32-
background-color: #3b82f6;
126+
background-color: #007cba;
33127
color: white;
34128
padding: 0.5rem 1rem;
35129
border-radius: 0.375rem;
36130
border: none;
37131
cursor: pointer;
38132
font-weight: 500;
39-
transition: background-color 0.2s;
133+
transition: background-color 0.2s, box-shadow 0.2s;
40134
font-size: 0.875rem;
41135
}
42136

43137
.bpmn-save:hover:not(:disabled) {
44-
background-color: #2563eb;
138+
background-color: #005a87;
139+
}
140+
141+
.bpmn-save:focus {
142+
outline: 2px solid #2563eb;
143+
outline-offset: 2px;
45144
}
46145

47146
.bpmn-save:disabled {
48147
background-color: #9ca3af;
49148
cursor: not-allowed;
50149
}
51150

52-
.bpmn-loading {
151+
/* === Loading & Error Overlay === */
152+
.bpmn-loading,
153+
.bpmn-error {
154+
position: absolute;
155+
top: 0;
156+
left: 0;
157+
right: 0;
158+
bottom: 0;
53159
display: flex;
54160
justify-content: center;
55161
align-items: center;
56-
height: 200px;
57-
color: #6b7280;
58162
font-size: 0.875rem;
163+
z-index: 2000;
164+
}
165+
166+
.bpmn-loading {
167+
color: #6b7280;
168+
background-color: #ffffffcc;
59169
}
60170

61171
.bpmn-error {
62-
display: flex;
63-
justify-content: center;
64-
align-items: center;
65-
height: 200px;
66172
color: #dc2626;
67173
background-color: #fef2f2;
68174
border: 1px solid #fecaca;
69175
border-radius: 0.375rem;
70176
margin: 1rem;
71177
padding: 1rem;
72178
text-align: center;
73-
font-size: 0.875rem;
74179
}
75180

76-
/* bpmn-js specific styling */
77-
.bpmn-js .djs-palette {
78-
left: 20px;
79-
top: 20px;
181+
/* === BPMN-js Palette, Context Pad === */
182+
.bpmn-viewer .djs-palette {
183+
top: 20px !important;
184+
left: 20px !important;
185+
z-index: 2000;
80186
}
81187

82-
.bpmn-js .djs-context-pad {
83-
z-index: 1000;
84-
}
188+
.bpmn-viewer .djs-context-pad { z-index: 1000; }
189+
.bpmn-viewer .djs-popup { z-index: 1001; }
85190

86-
.bpmn-js .djs-popup {
87-
z-index: 1001;
88-
}
89-
90-
.bpmn-js .djs-element .djs-direct-editing-parent {
91-
z-index: 1002;
92-
}
93-
94-
/* Responsive design */
95-
@media (max-width: 768px) {
96-
.bpmn-toolbar {
97-
flex-direction: column;
98-
gap: 0.5rem;
99-
padding: 0.5rem;
100-
}
101-
102-
.bpmn-info {
103-
justify-content: center;
104-
}
105-
106-
.bpmn-save {
107-
width: 100%;
108-
}
109-
}
110-
111-
/* Dark mode support */
191+
/* === Dark Mode === */
112192
@media (prefers-color-scheme: dark) {
113193
.bpmn-viewer {
114194
background-color: #1f2937;
115195
border-color: #374151;
116196
}
117-
118197
.bpmn-toolbar {
119198
background-color: #111827;
120199
border-color: #374151;
121200
}
122-
123-
.bpmn-loading {
124-
color: #9ca3af;
125-
}
126-
127-
.bpmn-error {
128-
background-color: #7f1d1d;
129-
border-color: #991b1b;
130-
color: #fca5a5;
201+
.bpmn-properties-panel {
202+
background-color: #1f2937;
203+
border-color: #4b5563;
204+
color: #d1d5db;
131205
}
132206
}

0 commit comments

Comments
 (0)