Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 06ed516

Browse filesBrowse files
javiereguiluzfabpot
javiereguiluz
authored and
fabpot
committed
[WebProfilerBundle] Update the logic that minimizes the toolbar
1 parent c98b02a commit 06ed516
Copy full SHA for 06ed516

File tree

3 files changed

+50
-92
lines changed
Filter options

3 files changed

+50
-92
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+32-41
Original file line numberDiff line numberDiff line change
@@ -46,45 +46,11 @@
4646
--sf-toolbar-green-900: #030404;
4747
}
4848

49-
.sf-minitoolbar {
50-
--sf-toolbar-gray-800: #262626;
51-
52-
background-color: var(--sf-toolbar-gray-800);
53-
border-top-left-radius: 4px;
54-
bottom: 0;
55-
box-sizing: border-box;
56-
display: none;
57-
height: 36px;
58-
padding: 6px;
59-
position: fixed;
60-
right: 0;
61-
z-index: 99999;
62-
}
63-
64-
.sf-minitoolbar button {
65-
background-color: transparent;
66-
padding: 0;
67-
border: none;
68-
}
69-
.sf-minitoolbar svg,
70-
.sf-minitoolbar img {
71-
--sf-toolbar-gray-200: #e5e5e5;
72-
73-
color: var(--sf-toolbar-gray-200);
74-
max-height: 24px;
75-
max-width: 24px;
76-
display: inline;
77-
}
78-
7949
.sf-toolbar-clearer {
8050
clear: both;
8151
height: 36px;
8252
}
8353

84-
.sf-display-none {
85-
display: none;
86-
}
87-
8854
.sf-toolbarreset *:not(svg rect) {
8955
box-sizing: content-box;
9056
vertical-align: baseline;
@@ -127,27 +93,52 @@
12793
color: var(--sf-toolbar-gray-700);
12894
}
12995

130-
.sf-toolbarreset .hide-button {
96+
.sf-toolbarreset .sf-toolbar-toggle-button {
13197
background: var(--sf-toolbar-gray-800);
13298
color: var(--sf-toolbar-gray-300);
13399
display: block;
134100
position: absolute;
135-
top: 2px;
101+
top: 1px;
136102
right: 0;
137103
width: 36px;
138-
height: 34px;
104+
height: 35px;
139105
cursor: pointer;
140106
text-align: center;
141107
border: none;
142108
margin: 0;
143109
padding: 0;
110+
outline: none;
144111
}
145-
.sf-toolbarreset .hide-button:hover {
112+
.sf-toolbarreset .sf-toolbar-toggle-button:hover {
146113
background: var(--sf-toolbar-gray-700);
147114
}
148-
.sf-toolbarreset .hide-button svg {
149-
max-height: 18px;
150-
margin-top: 1px;
115+
116+
.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-block {
117+
display: none;
118+
}
119+
.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button {
120+
top: -37px;
121+
}
122+
123+
.sf-toolbar .sf-toolbar-toggle-button i {
124+
display: block;
125+
height: 35px;
126+
place-content: center;
127+
}
128+
.sf-toolbar.sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-closed {
129+
display: none;
130+
}
131+
.sf-toolbar.sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-opened {
132+
display: block;
133+
}
134+
.sf-toolbar.sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-closed {
135+
display: block;
136+
}
137+
.sf-toolbar.sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-opened {
138+
display: none;
139+
}
140+
.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button {
141+
border-top: 2px solid var(--sf-toolbar-gray-800);
151142
}
152143

153144
.sf-toolbar-block {

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
+3-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
<!-- START of Symfony Web Debug Toolbar -->
2-
<div id="sfMiniToolbar-{{ token }}" class="sf-minitoolbar" data-no-turbolink data-turbo="false">
3-
<button type="button" title="Show Symfony toolbar" id="sfToolbarMiniToggler-{{ token }}" accesskey="D" aria-expanded="false" aria-controls="sfToolbarMainContent-{{ token }}">
4-
{{ source('@WebProfiler/Icon/symfony.svg') }}
5-
</button>
6-
</div>
71
<div id="sfToolbarClearer-{{ token }}" class="sf-toolbar-clearer"></div>
8-
92
<div id="sfToolbarMainContent-{{ token }}" class="sf-toolbarreset notranslate clear-fix" data-no-turbolink data-turbo="false">
103
{% for name, template in templates %}
114
{% if block('toolbar', template) is defined %}
@@ -39,8 +32,8 @@
3932
</div>
4033
{% endif %}
4134

42-
<button class="hide-button" type="button" id="sfToolbarHideButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
43-
{{ source('@WebProfiler/Icon/close.svg') }}
35+
<button class="sf-toolbar-toggle-button" type="button" id="sfToolbarToggleButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
36+
<i class="sf-toolbar-icon-opened">{{ source('@WebProfiler/Icon/close.svg') }}</i>
37+
<i class="sf-toolbar-icon-closed">{{ source('@WebProfiler/Icon/symfony.svg') }}</i>
4438
</button>
4539
</div>
46-
<!-- END of Symfony Web Debug Toolbar -->

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
+15-41
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<div id="sfwdt{{ token }}" class="sf-toolbar sf-display-none" role="region" aria-label="Symfony Web Debug Toolbar">
1+
<!-- START of Symfony Web Debug Toolbar -->
2+
<div id="sfwdt{{ token }}" class="sf-toolbar sf-toolbar-opened" role="region" aria-label="Symfony Web Debug Toolbar">
23
{{ include('@WebProfiler/Profiler/toolbar.html.twig', {
34
templates: {
45
'request': '@WebProfiler/Profiler/cancel.html.twig'
@@ -453,60 +454,32 @@
453454
454455
showToolbar: function(token) {
455456
var sfwdt = this.getSfwdt(token);
456-
removeClass(sfwdt, 'sf-display-none');
457457
458-
if (getPreference('toolbar/displayState') == 'none') {
459-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
460-
document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
461-
document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
458+
if ('closed' === getPreference('toolbar/displayState')) {
459+
addClass(sfwdt, 'sf-toolbar-closed');
460+
removeClass(sfwdt, 'sf-toolbar-opened');
462461
} else {
463-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
464-
document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
465-
document.getElementById('sfMiniToolbar-' + token).style.display = 'none';
462+
addClass(sfwdt, 'sf-toolbar-opened');
463+
removeClass(sfwdt, 'sf-toolbar-closed');
466464
}
467465
},
468466
469467
hideToolbar: function(token) {
470468
var sfwdt = this.getSfwdt(token);
471-
addClass(sfwdt, 'sf-display-none');
469+
addClass(sfwdt, 'sf-toolbar-closed');
470+
removeClass(sfwdt, 'sf-toolbar-opened');
472471
},
473472
474473
initToolbar: function(token) {
475474
this.showToolbar(token);
476475
477-
var hideButton = document.getElementById('sfToolbarHideButton-' + token);
478-
var hideButtonSvg = hideButton.querySelector('svg');
479-
hideButtonSvg.setAttribute('aria-hidden', 'true');
480-
hideButtonSvg.setAttribute('focusable', 'false');
481-
addEventListener(hideButton, 'click', function (event) {
476+
var toggleButton = document.querySelector(`#sfToolbarToggleButton-${token}`);
477+
addEventListener(toggleButton, 'click', function (event) {
482478
event.preventDefault();
483479
484-
var p = this.parentNode;
485-
p.style.display = 'none';
486-
(p.previousElementSibling || p.previousSibling).style.display = 'none';
487-
document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
488-
setPreference('toolbar/displayState', 'none');
489-
});
490-
491-
var showButton = document.getElementById('sfToolbarMiniToggler-' + token);
492-
var showButtonSvg = showButton.querySelector('svg');
493-
showButtonSvg.setAttribute('aria-hidden', 'true');
494-
showButtonSvg.setAttribute('focusable', 'false');
495-
addEventListener(showButton, 'click', function (event) {
496-
event.preventDefault();
497-
498-
var elem = this.parentNode;
499-
if (elem.style.display == 'none') {
500-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
501-
document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
502-
elem.style.display = 'block';
503-
} else {
504-
document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
505-
document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
506-
elem.style.display = 'none'
507-
}
508-
509-
setPreference('toolbar/displayState', 'block');
480+
const newState = 'opened' === getPreference('toolbar/displayState') ? 'closed' : 'opened';
481+
setPreference('toolbar/displayState', newState);
482+
'opened' === newState ? Sfjs.showToolbar(token) : Sfjs.hideToolbar(token);
510483
});
511484
},
512485
@@ -655,3 +628,4 @@
655628
656629
Sfjs.loadToolbar('{{ token }}');
657630
/*]]>*/</script>
631+
<!-- END of Symfony Web Debug Toolbar -->

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.