8000 feature #54364 [WebProfilerBundle] [WebProfilerPanel] Update the desi… · symfony/symfony@e11d75c · GitHub
[go: up one dir, main page]

Skip to content

Commit e11d75c

Browse files
committed
feature #54364 [WebProfilerBundle] [WebProfilerPanel] Update the design of the workflow profiler panel (javiereguiluz)
This PR was squashed before being merged into the 7.1 branch. Discussion ---------- [WebProfilerBundle] [WebProfilerPanel] Update the design of the workflow profiler panel | Q | A | ------------- | --- | Branch? | 7.1 | Bug fix? | no | New feature? | yes | Deprecations? | no | Issues | - | License | MIT The Workflow profiler panel is very nice, but I think it has some design issues, mostly on dark mode. This PR proposes some changes: | Before | After | ------ | ----- | ![workflow-profiler-dark-before](https://github.com/symfony/symfony/assets/73419/6420854f-a120-490b-9bd6-6797fb5e4c51) | ![workflow-profiler-dark-after](https://github.com/symfony/symfony/assets/73419/3cbfafa7-9fee-433e-816f-0bba4b6500ba) | ![workflow-profiler-light-before](https://github.com/symfony/symfony/assets/73419/b374a23e-93a3-45a0-a2eb-edf98781c7de) | ![workflow-profiler-light-after](https://github.com/symfony/symfony/assets/73419/7d651f93-2d34-4676-97d1-bf3e769ef546) I don't have before/after screenshots, but this PR also fixes the design of the dialog that opens when you click on any node. ----- There's other obvious issue which is that the SVG diagram overflows the page. I looked into JS libraries such as https://github.com/anvaka/panzoom and https://github.com/bumbu/svg-pan-zoom to add a "pan + zoom" utility ... but for now I think this would be worse. A full-size overflown diagram is more productive to quickly find issues. Commits ------- 6297faa [WebProfilerBundle] [WebProfilerPanel] Update the design of the workflow profiler panel
2 parents b427471 + 6297faa commit e11d75c

File tree

1 file changed

+38
-23
lines changed
Expand file tree

1 file changed

+38
-23
lines changed

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@
33
{% block stylesheets %}
44
{{ parent() }}
55
<style>
6+
:root {
7+
--workflow-dialog-background: var(--gray-200);
8+
}
9+
.theme-dark {
10+
--workflow-dialog-background: var(--gray-900);
11+
}
12+
613
dialog {
14+
background: var(--workflow-dialog-background);
715
border: none;
816
border-radius: 6px;
917
box-shadow: var(--settings-modal-shadow);
@@ -32,7 +40,10 @@
3240
}
3341
3442
dialog h2 {
35-
margin-top: 0.2em
43+
box-shadow: none !important;
44+
color: var(--page-color);
45+
font-size: 18px;
46+
margin: 0 0 .5em;
3647
}
3748
3849
dialog i.cancel {
@@ -42,47 +53,37 @@
4253
}
4354
4455
dialog table {
45-
border: 1px solid #ccc;
56+
background: var(--page-background);
4657
border-collapse: collapse;
58+
border-radius: 4px;
59+
box-shadow: inset 0 0 0 1px var(--table-border-color);
60+
color: var(--page-color);
4761
margin: 0 0 1em 0;
4862
margin-bottom: 1em;
4963
padding: 0;
50-
table-layout: fixed;
5164
}
5265
5366
dialog table tr {
54-
background-color: #f8f8f8;
55-
border: 1px solid #ddd;
67+
border: 1px solid var(--table-border-color);
5668
padding: .35em;
5769
}
5870
5971
dialog table th,
6072
dialog table td {
73+
border: 1px solid var(--table-border-color);
6174
padding: .625em;
62-
text-align: center;
75+
text-align: left;
6376
}
6477
65-
dialog table th {
78+
dialog table thead th {
79+
background: var(--table-header);
80+
border-top-left-radius: 4px;
81+
border-top-right-radius: 4px;
6682
font-size: .85em;
67-
letter-spacing: .1em;
68-
text-transform: uppercase;
6983
}
7084
7185
dialog menu {
72-
padding: 0;
73-
margin: 0;
74-
display: flex;
75-
align-items: center;
76-
flex-direction: row;
77-
vertical-align: middle;
78-
justify-content: center;
79-
}
80-
81-
dialog menu small {
82-
margin-right: auto;
83-
}
84-
dialog menu small i {
85-
margin-right: 3px;
86+
display: none;
8687
}
8788
8889
@keyframes scale {
@@ -133,9 +134,23 @@
133134
{% else %}
134135
<script type="module">
135136
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
137+
const isDarkMode = document.querySelector('body').classList.contains('theme-dark');
136138
mermaid.initialize({
137139
flowchart: { useMaxWidth: false },
138140
securityLevel: 'loose',
141+
'theme': 'base',
142+
'themeVariables': {
143+
darkMode: isDarkMode,
144+
'fontFamily': 'var(--font-family-system)',
145+
'fontSize': 'var(--font-size-body)',
146+
// the properties below don't support CSS variables
147+
'primaryColor': isDarkMode ? 'lightsteelblue' : 'aliceblue',
148+
'primaryTextColor': isDarkMode ? '#000' : '#000',
149+
'primaryBorderColor': isDarkMode ? 'steelblue' : 'lightsteelblue',
150+
'lineColor': isDarkMode ? '#939393' : '#d4d4d4',
151+
'secondaryColor': isDarkMode ? 'lightyellow' : 'lightyellow',
152+
'tertiaryColor': isDarkMode ? 'lightSalmon' : 'lightSalmon',
153+
}
139154
});
140155
141156
{% for name, data in collector.workflows %}

0 commit comments

Comments
 (0)
0