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 pieces23b8a56
Added general sf-toolbar-block-right class
This commit is contained in:
commit
2f4417137c
@ -31,84 +31,89 @@
|
|||||||
{% endset %}
|
{% endset %}
|
||||||
|
|
||||||
{% set text %}
|
{% 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">
|
<div class="sf-toolbar-info-piece">
|
||||||
<b>{{ collector.applicationname }}</b>
|
<b>Profiler token</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>
|
|
||||||
<span>
|
<span>
|
||||||
{% if 'Silex' == collector.applicationname %}
|
{% if profiler_url %}
|
||||||
<a href="http://silex.sensiolabs.org/documentation" rel="help">
|
<a href="{{ profiler_url }}">{{ collector.token }}</a>
|
||||||
Read Silex Docs
|
|
||||||
</a>
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="https://symfony.com/doc/{{ collector.symfonyversion }}/index.html" rel="help">
|
{{ collector.token }}
|
||||||
Read Symfony {{ collector.symfonyversion }} Docs
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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 %}
|
{% 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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block menu %}
|
{% block menu %}
|
||||||
|
@ -104,6 +104,16 @@
|
|||||||
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
|
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
|
||||||
display: none;
|
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 {
|
.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
@ -436,7 +446,7 @@
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sf-toolbar-block-config {
|
.sf-toolbar-block-right {
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 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 %}
|
{% if link %}<a href="{{ path('_profiler', { token: token, panel: name }) }}">{% endif %}
|
||||||
<div class="sf-toolbar-icon">{{ icon|default('') }}</div>
|
<div class="sf-toolbar-icon">{{ icon|default('') }}</div>
|
||||||
{% if link %}</a>{% endif %}
|
{% if link %}</a>{% endif %}
|
||||||
|
Reference in New Issue
Block a user