8000 [WebProfilerBundle] Minor tweaks in profiler redesign · symfony/symfony@2b13d14 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2b13d14

Browse files
javiereguiluzfabpot
javiereguiluz
authored and
fabpot
committed
[WebProfilerBundle] Minor tweaks in profiler redesign
1 parent 860d86a commit 2b13d14

File tree

4 files changed

+46
-17
lines changed

4 files changed

+46
-17
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@
2323
{% endblock %}
2424

2525
{% block panel %}
26+
{# these styles are needed to override some styles from Exception page, which wasn't
27+
updated yet to the new style of the Symfony Profiler #}
28+
<style>
29+
.tab-navigation li { background: none; border: 0; font-size: 14px; }
30+
.tab-navigation li.active { border-radius: 6px; }
31+
.tab-navigation li.active .badge { background-color: var(--selected-badge-background); color: var(--selected-badge-color); }
32+
</style>
33+
2634
<h2>Exceptions</h2>
2735

2836
{% if not collector.hasexception %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
{% if request_collector and request_collector.forwardtoken -%}
9090
{% set forward_profile = profile.childByToken(request_collector.forwardtoken) %}
9191
{% set controller = forward_profile ? forward_profile.collector('request').controller : 'n/a' %}
92-
<div class="status status-compact">
92+
<div class="status status-compact status-compact-forward">
9393
<span class="icon icon-forward">{{ source('@WebProfiler/Icon/forward.svg') }}</span>
9494

9595
Forwarded to

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1053,8 +1053,8 @@ tr.status-warning td {
10531053
padding: 13px 15px 10px;
10541054
position: relative;
10551055
}
1056-
#summary .status-compact:before {
1057-
top: 0;
1056+
#summary .status-compact.status-compact-forward {
1057+
padding: 10px 15px;
10581058
}
10591059
#summary .status + .status {
10601060
margin-top: 10px;
@@ -1538,7 +1538,7 @@ tr.status-warning td {
15381538
display: inline-flex;
15391539
flex-wrap: wrap;
15401540
margin: 0 0 15px;
1541-
padding: 2px;
1541+
padding: 0;
15421542
user-select: none;
15431543
-webkit-user-select: none;
15441544
}
@@ -1547,11 +1547,13 @@ tr.status-warning td {
15471547
margin: 0 0 10px;
15481548
}
15491549
.tab-navigation li {
1550+
box-shadow: none;
1551+
transition: box-shadow .05s ease-in, background-color .05s ease-in;
15501552
cursor: pointer;
15511553
font-weight: 500;
15521554
list-style: none;
15531555
margin: 0;
1554-
padding: 3.5px 14px;
1556+
padding: 4px 14px;
15551557
position: relative;
15561558
text-align: center;
15571559
z-index: 1;
@@ -1591,12 +1593,15 @@ tr.status-warning td {
15911593
}
159 8000 21594
.tab-navigation li.active {
15931595
background-color: var(--tab-active-background);
1594-
border-radius: 4px;
1595-
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
1596+
border-radius: 6px;
1597+
box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
15961598
color: var(--tab-active-color);
15971599
position: relative;
15981600
z-index: 1;
15991601
}
1602+
.theme-dark .tab-navigation li.active {
1603+
box-shadow: inset 0 0 0 1px var(--tab-border-color);
1604+
}
16001605
.tab-content > *:first-child {
16011606
margin-top: 0;
16021607
}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,41 +110,57 @@
110110
margin-top: 30px;
111111
}
112112
.modal-content .settings-group {
113+
border: 1px solid var(--settings-option-border-color);
114+
border-radius: 4px;
113115
display: flex;
114116
margin-bottom: 15px;
115117
}
116-
.modal-content label {
118+
.modal-content .settings-group label {
117119
cursor: pointer;
118120
display: flex;
119121
flex: 1;
120122
font-size: 16px;
121123
margin: 0;
122124
}
123-
.modal-content label input {
124-
display: none;
125+
.modal-content .settings-group label input {
126+
position: absolute;
127+
clip: rect(0, 0, 0, 0);
128+
pointer-events: none;
129+
opacity: 0;
130+
}
131+
.modal-content .settings-group:has(input:focus-visible) {
132+
outline: 2px dotted var(--settings-option-active-border-color);
133+
outline-offset: 2px;
125134
}
126-
.modal-content label input:checked + p {
135+
.modal-content .settings-group label input:checked + p {
127136
box-shadow: inset 0 0 0 2px var(--settings-option-active-border-color);
128137
background-color: var(--settings-option-active-background);
129138
color: var(--settings-option-active-color);
130139
}
131-
.modal-content label input:checked + p svg {
140+
.modal-content .settings-group label input:checked + p svg {
132141
color: var(--settings-option-active-icon-color);
133142
}
134-
.modal-content label p {
143+
.modal-content .settings-group label p {
135144
align-items: center;
136145
background: var(--settings-option-background);
137-
border-radius: 4px;
138-
box-shadow: inset 0 0 0 1px var(--settings-option-border-color);
146+
139147
color: var(--settings-option-color);
140148
flex: 1;
141149
font-size: 14px;
142150
margin: 0;
143151
padding: 10px 15px;
144152
text-align: center;
145153
}
146-
.modal-content label + label {
147-
margin-left: 15px;
154+
.modal-content .settings-group label:first-child p {
155+
border-top-left-radius: 4px;
156+
border-bottom-left-radius: 4px;
157+
}
158+
.modal-content .settings-group label:last-child p {
159+
border-top-right-radius: 4px;
160+
border-bottom-right-radius: 4px;
161+
}
162+
.modal-content .settings-group label + label p {
163+
border-left: 1px solid var(--settings-option-border-color);
148164
}
149165
.modal-content label p span {
150166
display: block;

0 commit comments

Comments
 (0)
0