Skip to content

Commit 42f9a3d

Browse files
csouchetcsouchet
committed
Simplify the colors in CSS
1 parent 15a4550 commit 42f9a3d

File tree

4 files changed

+48
-46
lines changed

4 files changed

+48
-46
lines changed

‎demo/predictions/css/demo.css‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
:root {
22
--color-default-fill: white;
3-
--color-path-executed: #aea3a3;
4-
--color-path-predicted-late: orange;
5-
--color-state-predicted-late: orange;
6-
--color-path-predicted-on-time: #67d567;
7-
--color-state-predicted-on-time: #a7f0a7;
8-
--color-state-running: #9c9cef;
9-
--stroke-path-predicted: 0.18rem;
3+
--color-already-executed: #aea3a3;
4+
--color-predicted-late: orange;
5+
--color-predicted-on-time: #67d567;
6+
--color-running: #9c9cef;
7+
--stroke-predicted: 0.18rem;
108
}
119

1210
/* ================================================================================================================== */
@@ -19,7 +17,7 @@
1917
.bpmn-message-flow.state-already-executed > path:nth-child(4),
2018
/* sequence flow arrow */
2119
.bpmn-sequence-flow.state-already-executed > path:nth-child(3) {
22-
fill: var(--color-path-executed);
20+
fill: var(--color-already-executed);
2321
}
2422

2523
/* message flow start marker */
@@ -38,18 +36,18 @@
3836
/* event */
3937
.bpmn-type-event.state-already-executed > * {
4038
filter: blur(0.125rem);
41-
stroke: var(--color-path-executed);
39+
stroke: var(--color-already-executed);
4240
}
4341

4442
/* end event center circle */
45-
.bpmn-type-event.state-already-executed > ellipse:nth-child(2) {
46-
fill: var(--color-path-executed);
43+
.bpmn-type-event.already-executed > ellipse:nth-child(2) {
44+
fill: var(--color-already-executed);
4745
}
4846

4947
/* labels (the selector applies to all div, not the only one that contains text, but this is ok.
5048
Use important to override the color set inline in the style attribute of the label div */
51-
.bpmn-label.state-already-executed > g div {
52-
color: var(--color-path-executed) !important;
49+
.bpmn-label.already-executed > g div {
50+
color: var(--color-already-executed) !important;
5351
/*or use opacity if we want to be able to read labels*/
5452
filter: blur(0.0625rem);
5553
}
@@ -64,7 +62,7 @@
6462
.bpmn-type-event.state-running > ellipse,
6563
/* envelope of the message event */
6664
.bpmn-event-def-message.state-running > rect {
67-
fill: var(--color-state-running);
65+
fill: var(--color-running);
6866
}
6967

7068
/*apply shadow on hover*/
@@ -83,7 +81,7 @@
8381

8482
/* task */
8583
.bpmn-task.state-predicted-late > rect {
86-
fill: var(--color-state-predicted-late);
84+
fill: var(--color-predicted-late);
8785
animation: pulse-animation 0.8s infinite alternate;
8886
}
8987

@@ -102,7 +100,7 @@
102100
.bpmn-message-flow.path-predicted-late > ellipse,
103101
/* sequence flow arrow */
104102
.bpmn-sequence-flow.path-predicted-late > path:nth-child(3) {
105-
fill: var(--color-path-predicted-late);
103+
fill: var(--color-predicted-late);
106104
}
107105

108106
/* sequence/message flow line and arrow (end marker) */
@@ -112,8 +110,8 @@
112110
.bpmn-type-gateway.path-predicted-late > path:nth-child(1),
113111
.bpmn-type-task.path-predicted-late > rect,
114112
.bpmn-type-event.path-predicted-late > ellipse {
115-
stroke: var(--color-path-predicted-late);
116-
stroke-width: var(--stroke-path-predicted);
113+
stroke: var(--color-predicted-late);
114+
stroke-width: var(--stroke-predicted);
117115
}
118116

119117
.bpmn-type-gateway.path-predicted-late > path:nth-child(1),
@@ -123,14 +121,14 @@
123121
.bpmn-event-def-message.path-predicted-late > path,
124122
.bpmn-event-def-timer.path-predicted-late > path,
125123
.bpmn-type-event.path-predicted-late > ellipse {
126-
stroke: var(--color-path-predicted-late);
124+
stroke: var(--color-predicted-late);
127125
fill: var(--color-default-fill);
128126
}
129127

130128
/* labels (the selector applies to all div, not the only one that contains text, but this is ok.
131129
Use important to override the color set inline in the style attribute of the label div */
132-
.bpmn-label.path-predicted-late > g div {
133-
color: var(--color-path-predicted-late) !important;
130+
.bpmn-label.predicted-late > g div {
131+
color: var(--color-predicted-late) !important;
134132
font-weight: bold;
135133
}
136134

@@ -139,7 +137,7 @@
139137
/* ================================================================================================================== */
140138

141139
.bpmn-type-task.state-predicted-on-time > rect {
142-
fill: var(--color-state-predicted-on-time);
140+
fill: var(--color-predicted-on-time);
143141
}
144142

145143
/*apply shadow on hover*/
@@ -151,12 +149,12 @@
151149
.bpmn-message-flow.path-predicted-on-time > ellipse,
152150
/* sequence flow arrow */
153151
.bpmn-sequence-flow.path-predicted-on-time > path:nth-child(3) {
154-
fill: var(--color-path-predicted-on-time);
152+
fill: var(--color-predicted-on-time);
155153
}
156154

157155
/* message flow icon */
158156
.bpmn-message-flow-icon.path-predicted-on-time > * {
159-
stroke: var(--color-path-predicted-on-time);
157+
stroke: var(--color-predicted-on-time);
160158
}
161159

162160
.bpmn-type-gateway.path-predicted-on-time > path:nth-child(1),
@@ -166,8 +164,8 @@
166164
.bpmn-message-flow.path-predicted-on-time > ellipse,
167165
.bpmn-type-task.path-predicted-on-time > rect,
168166
.bpmn-type-event.path-predicted-on-time > ellipse {
169-
stroke: var(--color-path-predicted-on-time);
170-
stroke-width: var(--stroke-path-predicted);
167+
stroke: var(--color-predicted-on-time);
168+
stroke-width: var(--stroke-predicted);
171169
}
172170

173171
.bpmn-type-gateway.path-predicted-on-time > path:nth-child(1),
@@ -177,14 +175,14 @@
177175
.bpmn-event-def-message.path-predicted-on-time > path,
178176
.bpmn-event-def-timer.path-predicted-on-time > path,
179177
.bpmn-type-event.path-predicted-on-time > ellipse {
180-
stroke: var(--color-path-predicted-on-time);
178+
stroke: var(--color-predicted-on-time);
181179
fill: var(--color-default-fill);
182180
}
183181

184182
/* labels (the selector applies to all div, not the only one that contains text, but this is ok.
185183
Use important to override the color set inline in the style attribute of the label div */
186184
.bpmn-label.path-predicted-on-time > g div {
187-
color: var(--color-path-predicted-on-time) !important;
185+
color: var(--color-predicted-on-time) !important;
188186
font-weight: bold;
189187
}
190188

‎demo/predictions/css/legend.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ legend {
1010
}
1111

1212
.state-predicted-on-time .legend li:first-child::before {
13-
background-color: var(--color-state-predicted-on-time);
13+
background-color: var(--color-predicted-on-time);
1414
}
1515

1616
.state-predicted-late .legend li:first-child::before {
17-
background-color: var(--color-state-predicted-late);
17+
background-color: var(--color-predicted-late);
1818
}
1919

2020
.legend li:nth-child(2)::before {
21-
background-color: var(--color-state-running);
21+
background-color: var(--color-running);
2222
}
2323
.legend li:nth-child(3)::before {
24-
background-color: var(--color-path-executed);
24+
background-color: var(--color-already-executed);
2525
}
2626

2727

‎demo/predictions/js/prediction-use-case.js‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,9 @@ class PredicatedLateUseCase extends UseCase {
77
super(type, () => pizzaDiagram(), true, {fit: {type: 'Center', margin: 20}});
88
}
99

10-
_displayPanel() {
11-
super._displayPanel();
12-
this._switchLegend();
13-
}
14-
15-
_switchLegend() {
16-
const element = document.getElementById(`legend`);
17-
element.classList.remove('state-predicted-on-time');
18-
element.classList.add('state-predicted-late');
10+
display(dataType) {
11+
super.display(dataType);
12+
this._style.switchLegend();
1913
}
2014

2115
_postLoadDiagram() {
@@ -50,11 +44,6 @@ class PredicatedLateUseCase extends UseCase {
5044

5145

5246
class PredictedOnTimeUseCase extends PredicatedLateUseCase {
53-
_switchLegend() {
54-
const element = document.getElementById(`legend`);
55-
element.classList.remove('state-predicted-late');
56-
element.classList.add('state-predicted-on-time');
57-
}
5847

5948
_initManagers() {
6049
this._style = new PredictedOnTimeStyle(this._bpmnVisualization.bpmnElementsRegistry);

‎demo/predictions/js/style.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ class Style {
3838
*/
3939
highlightRunningElementsWithPrediction(ids) {
4040
}
41+
42+
switchLegend() {
43+
}
4144
}
4245

4346
class PredicatedLateStyle extends Style {
@@ -59,6 +62,12 @@ class PredicatedLateStyle extends Style {
5962
highlightRunningElementsWithPrediction(ids) {
6063
this._bpmnElementsRegistry.addCssClasses(ids, 'state-predicted-late');
6164
}
65+
66+
switchLegend() {
67+
const element = document.getElementById(`legend`);
68+
element.classList.remove('state-predicted-on-time');
69+
element.classList.add('state-predicted-late');
70+
}
6271
}
6372

6473

@@ -81,4 +90,10 @@ class PredictedOnTimeStyle extends Style {
8190
highlightRunningElementsWithPrediction(ids) {
8291
this._bpmnElementsRegistry.addCssClasses(ids, 'state-predicted-on-time');
8392
}
93+
94+
switchLegend() {
95+
const element = document.getElementById(`legend`);
96+
element.classList.remove('state-predicted-late');
97+
element.classList.add('state-predicted-on-time');
98+
}
8499
}

0 commit comments

Comments
 (0)