[WebProfilerBundle] Added collapsed sidebar

hason · hason · commit c9af8aaad82c · 2015-09-16T16:19:41.000+02:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/menu.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/menu.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="24" viewBox="0 0 24 24" xml:space="preserve">
+<path fill="#AAAAAA" d="m 2.571,17.5 18.859,0 c 0.87,0 1.57,0.7 1.57,1.57 l 0,1.57 c 0,0.87 -0.7,1.57 -1.57,1.57 l -18.859,0 C 1.702,22.21 1,21.51 1,20.64 L 1,19.07 C 1,18.2 1.702,17.5 2.571,17.5 Z M 1,11.21 1,12.79 c 0,0.86 0.702,1.56 1.571,1.56 l 18.859,0 c 0.87,0 1.57,-0.7 1.57,-1.56 l 0,-1.58 C 23,10.35 22.3,9.644 21.43,9.644 l -18.859,0 C 1.702,9.644 1,10.35 1,11.21 Z M 1,3.357 1,4.929 c 0,0.869 0.702,1.572 1.571,1.572 l 18.859,0 C 22.3,6.501 23,5.798 23,4.929 L 23,3.357 C 23,2.489 22.3,1.786 21.43,1.786 l -18.859,0 C 1.702,1.786 1,2.489 1,3.357 Z" />
+</svg>
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
@@ -62,7 +62,22 @@
                 </div>
 
                 {% if templates is defined %}
+                    <script type="text/javascript">
+                        (function(Sfjs) {
+                            if ('true' == Sfjs.getPreference('sidebar/collapse')) {
+                                Sfjs.addClass(document.body, 'sidebar-collapse');
+                            }
+                        })(Sfjs);
+                    </script>
                     <ul id="menu-profiler">
+                        <li>
+                            <a href="#" onclick="javascript: Sfjs.toggleClass(document.body, 'sidebar-collapse'); Sfjs.setPreference('sidebar/collapse', Sfjs.hasClass(document.body, 'sidebar-collapse')); return false;">
+                                <span class="label">
+                                    <span class="icon">{{ include('@WebProfiler/Icon/menu.svg') }}</span>
+                                    <strong>Minimize</strong>
+                                </span>
+                            </a>
+                        </li>
                         {% for name, template in templates %}
                             {% set menu %}{{ template.renderBlock('menu', { collector: profile.getcollector(name), profiler_markup_version: profiler_markup_version }) }}{% endset %}
                             {% if menu is not empty %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -372,6 +372,9 @@ tr.status-warning td {
     margin: 0 0 30px 220px;
     padding: 14px 0 14px 20px;
 }
+.sidebar-collapse #collector-content {
+    margin-left: 50px;
+}
 
 #main h2:first-of-type {
     margin-top: 0;
@@ -475,12 +478,18 @@ tr.status-warning td {
     padding-bottom: 99999px; {# needed for 'same-height columns' trick #}
     width: 220px;
 }
+.sidebar-collapse #sidebar {
+    width: 50px;
+}
 #sidebar a {
     color: #ADD8E6;
 }
 #sidebar .module {
     padding: 10px;
 }
+.sidebar-collapse #sidebar .module {
+    display: none;
+}
 #sidebar .module h3 {
     color: #999;
     font-size: 12px;
@@ -502,6 +511,9 @@ tr.status-warning td {
     -ms-user-select: none;
     user-select: none;
 }
+.sidebar-collapse #sidebar #sidebar-shortcuts {
+    display: none;
+}
 #sidebar #sidebar-shortcuts .btn {
     color: #F5F5F5;
 }
@@ -558,6 +570,13 @@ tr.status-warning td {
 #menu-profiler li {
     position: relative;
     margin-bottom: 0;
+    width: 220px;
+}
+.sidebar-collapse #menu-profiler li {
+    visibility: hidden;
+}
+.sidebar-collapse #menu-profiler li:hover {
+    visibility: visible;
 }
 #menu-profiler li a {
     border: solid transparent;
@@ -583,6 +602,7 @@ tr.status-warning td {
     top: 8px;
     width: 50px;
     text-align: center;
+    visibility: visible;
 }
 #menu-profiler li a .label .icon svg path {
     fill: #DDD;
@@ -606,6 +626,10 @@ tr.status-warning td {
     border: solid #555;
     border-width: 2px 0;
 }
+.sidebar-collapse #menu-profiler li a:hover {
+    border-right-width: 2px;
+    border-radius: 0 5px 5px 0;
+}
 #menu-profiler li.selected a .label,
 #menu-profiler li a:hover .label {
     color: #FFF;
