8000 feature #15503 UI & CSS improvement to new toolbar (WouterJ) · symfony/symfony@2f44171 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2f44171

Browse files
fabpotfabpot
committed
feature #15503 UI & CSS improvement to new toolbar (WouterJ)
This PR was merged into the 2.8 branch. Discussion ---------- UI & CSS improvement to new toolbar * Created a generic class for right floating toolbar blocks, so it can be reused by other blocks serving the same goal (the Sylius toolbar block for instance) * Added a way to group toolbar info pieces, this makes the bigger info blocks easier to read: ![sf-toolbar-group](https://cloud.githubusercontent.com/assets/749025/9178378/41987f02-3f97-11e5-971e-37f44a47d56d.png) | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - Commits ------- 049fdfe Add a way to group toolbar info pieces 23b8a56 Added general sf-toolbar-block-right class
2 parents 5ad49c6 + 049fdfe commit 2f44171

File tree

3 files changed

+79
-64
lines changed

3 files changed

+79
-64
lines changed

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

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -31,84 +31,89 @@
3131
{% endset %}
3232

3333
{% set text %}
34-
{% if collector.applicationname %}
34+
<div class="sf-toolbar-info-group">
35+
{% if collector.applicationname %}
36+
<div class="sf-toolbar-info-piece">
37+
<b>{{ collector.applicationname }}</b>
38+
<span>{{ collector.applicationversion }}</span>
39+
</div>
40+
{% endif %}
41+
3542
<div class="sf-toolbar-info-piece">
36-
<b>{{ collector.applicationname }}</b>
37-
<span>{{ collector.applicationversion }}</span>
43+
<b>Profiler token</b>
44+
<span>
45+
{% if profiler_url %}
46+
<a href="{{ profiler_url }}">{{ collector.token }}</a>
47+
{% else %}
48+
{{ collector.token }}
49+
{% endif %}
50+
</span>
3851
</div>
39-
{% endif %}
4052

41-
<div class="sf-toolbar-info-piece">
42-
<b>Profiler token</b>
43-
<span>
44-
{% if profiler_url %}
45-
<a href="{{ profiler_url }}">{{ collector.token }}</a>
46-
{% else %}
47-
{{ collector.token }}
48-
{% endif %}
49-
</span>
53+
{% if 'n/a' != collector.appname %}
54+
<div class="sf-toolbar-info-piece">
55+
<b>Kernel name</b>
56+
<span>{{ collector.appname }}</span>
57+
</div>
58+
{% endif %}
59+
60+
{% if 'n/a' != collector.env %}
61+
<div class="sf-toolbar-info-piece">
62+
<b>Environment</b>
63+
<span>{{ collector.env }}</span>
64+
</div>
65+
{% endif %}
66+
67+
{% if 'n/a' != collector.debug %}
68+
<div class="sf-toolbar-info-piece">
69+
<b>Debug</b>
70+
<span class="{{ debug_status_class }}">{{ collector.debug ? 'enabled' : 'disabled' }}</span>
71+
</div>
72+
{% endif %}
5073
</div>
5174

52-
{% if 'n/a' != collector.appname %}
53-
<div class="sf-toolbar-info-piece">
54-
<b>Kernel name</b>
55-
<span>{{ collector.appname }}</span>
75+
<div class="sf-toolbar-info-group">
76+
<div class="sf-toolbar-info-piece sf-toolbar-info-php">
77+
<b>PHP version</b>
78+
<span>
79+
{{ collector.phpversion }}
80+
&nbsp; <a href="{{ path('_profiler_phpinfo') }}">View phpinfo()</a>
81+
</span>
5682
</div>
57-
{% endif %}
5883

59-
{% if 'n/a' != collector.env %}
60-
<div class="sf-toolbar-info-piece">
61-
<b>Environment</b>
62-
<span>{{ collector.env }}</span>
84+
<div class="sf-toolbar-info-piece sf-toolbar-info-php-ext">
85+
<b>PHP Extensions</b>
86+
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasxdebug ? 'green' : 'red' }}">xdebug</span>
87+
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasaccelerator ? 'green' : 'red' }}">accel</span>
6388
</div>
64-
{% endif %}
6589

66-
{% if 'n/a' != collector.debug %}
6790
<div class="sf-toolbar-info-piece">
68-
<b>Debug</b>
69-
<span class="{{ debug_status_class }}">{{ collector.debug ? 'enabled' : 'disabled' }}</span>
91+
<b>PHP SAPI</b>
92+
<span>{{ collector.sapiName }}</span>
7093
</div>
71-
{% endif %}
72-
73-
<div class="sf-toolbar-info-piece sf-toolbar-info-php">
74-
<b>PHP version</b>
75-
<span>
76-
{{ collector.phpversion }}
77-
&nbsp; <a href="{{ path('_profiler_phpinfo') }}">View phpinfo()</a>
78-
</span>
7994
</div>
8095

81-
<div class="sf-toolbar-info-piece sf-toolbar-info-php-ext">
82-
<b>PHP Extensions</b>
83-
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasxdebug ? 'green' : 'red' }}">xdebug</span>
84-
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasaccelerator ? 'green' : 'red' }}">accel</span>
85-
</div>
86-
87-
<div class="sf-toolbar-info-piece">
88-
<b>PHP SAPI</b>
89-
<span>{{ collector.sapiName }}</span>
96+
<div class="sf-toolbar-info-group">
97+
{% if collector.symfonyversion is defined %}
98+
<div class="sf-toolbar-info-piece">
99+
<b>Resources</b>
100+
<span>
101+
{% if 'Silex' == collector.applicationname %}
102+
<a href="http://silex.sensiolabs.org/documentation" rel="help">
103+
Read Silex Docs
104+
</a>
105+
{% else %}
106+
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
107+
Read Symfony {{ collector.symfonyversion }} Docs
108+
</a>
109+
{% endif %}
110+
</span>
111+
</div>
112+
{% endif %}
90113
</div>
91-
92-
93-
{% if collector.symfonyversion is defined %}
94-
<div class="sf-toolbar-info-piece">
95-
<b>Resources</b>
96-
<span>
97-
{% if 'Silex' == collector.applicationname %}
98-
<a href="http://silex.sensiolabs.org/documentation" rel="help">
99-
Read Silex Docs
100-
</a>
101-
{% else %}
102-
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
103-
Read Symfony {{ collector.symfonyversion }} Docs
104-
</a>
105-
{% endif %}
106-
</span>
107-
</div>
108-
{% endif %}
109114
{% endset %}
110115

111-
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true, name: 'config', status: block_status }) }}
116+
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true, name: 'config', status: block_status, additional_classes: 'sf-toolbar-block-right' }) }}
112117
{% endblock %}
113118

114119
{% block menu %}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,16 @@
104104
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
105105
display: none;
106106
}
107+
.sf-toolbar-block .sf-toolbar-info-group {
108+
margin-bottom: 4px;
109+
padding-bottom: 2px;
110+
border-bottom: 1px solid #333333;
111+
}
112+
.sf-toolbar-block .sf-toolbar-info-group:last-child {
113+
margin-bottom: 0;
114+
padding-bottom: 0;
115+
border-bottom: none;
116+
}
107117

108118
.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
109119
padding: 2px 5px;
@@ -436,7 +446,7 @@
436446
font-size: 13px;
437447
}
438448

439-
.sf-toolbar-block-config {
449+
.sf-toolbar-block-right {
440450
float: right;
441451
margin-left: 0;
442452
margin-right: 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="sf-toolbar-block sf-toolbar-block-{{ name }} sf-toolbar-status-{{ status|default('normal') }}">
1+
<div class="sf-toolbar-block sf-toolbar-block-{{ name }} sf-toolbar-status-{{ status|default('normal') }} {{ additional_classes|default('') }}">
22
{% if link %}<a href="{{ path('_profiler', { token: token, panel: name }) }}">{% endif %}
33
<div class="sf-toolbar-icon">{{ icon|default('') }}</div>
44
{% if link %}</a>{% endif %}

0 commit comments

Comments
 (0)
0