Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

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

 Sign up
Appearance settings

Commitcca60b4

Browse files
committed
feature#58380 [WebProfilerBundle] Update the logic that minimizes the toolbar (javiereguiluz)
This PR was squashed before being merged into the 7.3 branch.Discussion----------[WebProfilerBundle] Update the logic that minimizes the toolbar| Q | A| ------------- | ---| Branch? | 7.2| Bug fix? | no| New feature? | yes| Deprecations? | no| Issues | -| License | MITWhile working on fixing the accessibility issues of the toolbar (see#58366) I saw the following error reported:```Accesskey "D" is used more than once```This prevents the feature from working properly. So, in this PR I changed everything about how the toolbar is minimized:* Remove the "mini toolbar" (which is the button displayed when the toolbar is minimized)* Remove the `.sf-toolbar-clearer` element which is no longer needed* Transform the "hide" button into a "toggle" button to show/hide the toolbar* Update the show/hied logic to use CSS classes instead of just `style: none/block`For end users nothing changes. It looks the same as before.#SymfonyHackdayCommits-------06ed516 [WebProfilerBundle] Update the logic that minimizes the toolbar
2 parents2f9677b +06ed516 commitcca60b4

File tree

3 files changed

+50
-92
lines changed

3 files changed

+50
-92
lines changed

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

Lines changed: 32 additions & 41 deletions
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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
<!-- START of Symfony Web Debug Toolbar-->
2-
<divid="sfMiniToolbar-{{token }}"class="sf-minitoolbar"data-no-turbolinkdata-turbo="false">
3-
<buttontype="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
<divid="sfToolbarClearer-{{token }}"class="sf-toolbar-clearer"></div>
8-
92
<divid="sfToolbarMainContent-{{token }}"class="sf-toolbarreset notranslate clear-fix"data-no-turbolinkdata-turbo="false">
103
{%forname,templateintemplates %}
114
{%ifblock('toolbar',template)isdefined %}
@@ -39,8 +32,8 @@
3932
</div>
4033
{%endif %}
4134

42-
<buttonclass="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+
<buttonclass="sf-toolbar-toggle-button"type="button"id="sfToolbarToggleButton-{{token }}"title="Close Toolbar"accesskey="D"aria-expanded="true"aria-controls="sfToolbarMainContent-{{token }}">
36+
<iclass="sf-toolbar-icon-opened">{{source('@WebProfiler/Icon/close.svg') }}</i>
37+
<iclass="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

Lines changed: 15 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<divid="sfwdt{{token }}"class="sf-toolbar sf-display-none"role="region"aria-label="Symfony Web Debug Toolbar">
1+
<!-- START of Symfony Web Debug Toolbar-->
2+
<divid="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+
constnewState='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)
[8]ページ先頭
©2009-2025 Movatter.jp