diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature #15503 UI & CSS improvement to new toolbar (WouterJ)

Browse Source 
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
This commit is contained in:
Fabien Potencier 2015-09-30 17:38:50 +02:00
commit 2f4417137c
3 changed files with 87 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig
View File

@ -31,6 +31,7 @@
{% endset %}
{% set text %}
<div class="sf-toolbar-info-group">
{% if collector.applicationname %}
<div class="sf-toolbar-info-piece">
<b>{{ collector.applicationname }}</b>
@ -69,7 +70,9 @@
<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>
@ -88,8 +91,9 @@
<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>
@ -106,9 +110,10 @@
</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 %}

12
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
View File

@ -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;

2
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_item.html.twig
View File

@ -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 %}