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:  | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - Commits -------049fdfeAdd a way to group toolbar info pieces23b8a56Added general sf-toolbar-block-right class
This commit is contained in:
Fabien Potencier
commit
2f4417137c
|
|
@ -31,84 +31,89 @@
|
|||
{% endset %}
|
||||
|
||||
{% set text %}
|
||||
{% if collector.applicationname %}
|
||||
<div class="sf-toolbar-info-group">
|
||||
{% if collector.applicationname %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>{{ collector.applicationname }}</b>
|
||||
<span>{{ collector.applicationversion }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>{{ collector.applicationname }}</b>
|
||||
<span>{{ collector.applicationversion }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Profiler token</b>
|
||||
<span>
|
||||
{% if profiler_url %}
|
||||
<a href="{{ profiler_url }}">{{ collector.token }}</a>
|
||||
{% else %}
|
||||
{{ collector.token }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if 'n/a' != collector.appname %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Kernel name</b>
|
||||
<span>{{ collector.appname }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if 'n/a' != collector.env %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Environment</b>
|
||||
<span>{{ collector.env }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if 'n/a' != collector.debug %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Debug</b>
|
||||
<span class="{{ debug_status_class }}">{{ collector.debug ? 'enabled' : 'disabled' }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sf-toolbar-info-piece sf-toolbar-info-php">
|
||||
<b>PHP version</b>
|
||||
<span>
|
||||
{{ collector.phpversion }}
|
||||
<a href="{{ path('_profiler_phpinfo') }}">View phpinfo()</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sf-toolbar-info-piece sf-toolbar-info-php-ext">
|
||||
<b>PHP Extensions</b>
|
||||
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasxdebug ? 'green' : 'red' }}">xdebug</span>
|
||||
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasaccelerator ? 'green' : 'red' }}">accel</span>
|
||||
</div>
|
||||
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>PHP SAPI</b>
|
||||
<span>{{ collector.sapiName }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{% if collector.symfonyversion is defined %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Resources</b>
|
||||
<b>Profiler token</b>
|
||||
<span>
|
||||
{% if 'Silex' == collector.applicationname %}
|
||||
<a href="http://silex.sensiolabs.org/documentation" rel="help">
|
||||
Read Silex Docs
|
||||
</a>
|
||||
{% if profiler_url %}
|
||||
<a href="{{ profiler_url }}">{{ collector.token }}</a>
|
||||
{% else %}
|
||||
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
|
||||
Read Symfony {{ collector.symfonyversion }} Docs
|
||||
</a>
|
||||
{{ collector.token }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if 'n/a' != collector.appname %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Kernel name</b>
|
||||
<span>{{ collector.appname }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if 'n/a' != collector.env %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Environment</b>
|
||||
<span>{{ collector.env }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if 'n/a' != collector.debug %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Debug</b>
|
||||
<span class="{{ debug_status_class }}">{{ collector.debug ? 'enabled' : 'disabled' }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="sf-toolbar-info-group">
|
||||
<div class="sf-toolbar-info-piece sf-toolbar-info-php">
|
||||
<b>PHP version</b>
|
||||
<span>
|
||||
{{ collector.phpversion }}
|
||||
<a href="{{ path('_profiler_phpinfo') }}">View phpinfo()</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sf-toolbar-info-piece sf-toolbar-info-php-ext">
|
||||
<b>PHP Extensions</b>
|
||||
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasxdebug ? 'green' : 'red' }}">xdebug</span>
|
||||
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasaccelerator ? 'green' : 'red' }}">accel</span>
|
||||
</div>
|
||||
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>PHP SAPI</b>
|
||||
<span>{{ collector.sapiName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sf-toolbar-info-group">
|
||||
{% if collector.symfonyversion is defined %}
|
||||
<div class="sf-toolbar-info-piece">
|
||||
<b>Resources</b>
|
||||
<span>
|
||||
{% if 'Silex' == collector.applicationname %}
|
||||
<a href="http://silex.sensiolabs.org/documentation" rel="help">
|
||||
Read Silex Docs
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
|
||||
Read Symfony {{ collector.symfonyversion }} Docs
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true, name: 'config', status: block_status }) }}
|
||||
{{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true, name: 'config', status: block_status, additional_classes: 'sf-toolbar-block-right' }) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block menu %}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,16 @@
|
|||
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
|
||||
display: none;
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-info-group {
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid #333333;
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-info-group:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
|
||||
padding: 2px 5px;
|
||||
|
|
@ -436,7 +446,7 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sf-toolbar-block-config {
|
||||
.sf-toolbar-block-right {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="sf-toolbar-block sf-toolbar-block-{{ name }} sf-toolbar-status-{{ status|default('normal') }}">
|
||||
<div class="sf-toolbar-block sf-toolbar-block-{{ name }} sf-toolbar-status-{{ status|default('normal') }} {{ additional_classes|default('') }}">
|
||||
{% if link %}<a href="{{ path('_profiler', { token: token, panel: name }) }}">{% endif %}
|
||||
<div class="sf-toolbar-icon">{{ icon|default('') }}</div>
|
||||
{% if link %}</a>{% endif %}
|
||||
|
|
|
|||
Reference in New Issue