8000 Form Debugger JavaScript improvements by wouterj · Pull Request #9857 · symfony/symfony · GitHub
[go: up one dir, main page]
Skip to content

Form Debugger JavaScript improvements #9857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 16 commits into from
Closed

Form Debugger JavaScript improvements #9857

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0e03189
Expand tree
wouterj Dec 24, 2013
60b0764
Improved form tree
wouterj Dec 26, 2013
111a404
Made sections collapsable
wouterj Dec 26, 2013
f21dab2
Added error badge
wouterj Dec 29, 2013
52b1620
Fixed CS
wouterj Dec 29, 2013
11bfda6
[WebProfilerBundle] Vertically centered the icons in the form tree
webmozart Dec 29, 2013
07994d5
[WebProfilerBundle] Improved JavaScript of the form debugger
webmozart Dec 30, 2013
ebf13ed
[WebProfilerBundle] Inverted toggler images and improved button coloring
webmozart Dec 30, 2013
505c5be
[WebProfilerBundle] Added "use strict" statements
webmozart Dec 30, 2013
a0030b8
[WebProfilerBundle] Changed toggle color back to blue and made headli…
webmozart Dec 30, 2013
58559d3
[WebProfilerBundle] Moved toggle icon behind the headlines in the for…
webmozart Dec 30, 2013
5afbaeb
[WebProfilerBundle] Enlarged the clickable area of the toggle button …
webmozart Dec 30, 2013
c763d65
Merge pull request #1 from bschussek/issue9857
wouterj Dec 30, 2013
53f164f
Fixed asset function
wouterj Dec 30, 2013
226ac7c
Reverted new image
wouterj Dec 30, 2013
406756d
Reverted Sfjs.toggle change
wouterj Dec 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[WebProfilerBundle] Changed toggle color back to blue and made headli… 
…nes in the form debugger clickable
  • Loading branch information
@webmozart
webmozart committed Dec 30, 2013
commit a0030b82cd0ded96e233aefa915d3bd9227120e3
75 changes: 46 additions & 29 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@
/*background: #F6F6F6;*/
margin: -30px -40px -40px;
}
.toggle-button {
.toggle-icon {
display: inline-block;
background: url("/bundles/framework/images/toggler.png") no-repeat top left #ccc;
background: url("{{ asset('/bundles/framework/images/toggler.png') }}") no-repeat top left #5eb5e0;
}
.toggle-button.closed {
.closed .toggle-icon, .closed.toggle-icon {
background-position: bottom left;
}
.toggle-button.empty {
background-image: url("/bundles/framework/images/toggler_empty.png");
.toggle-icon.empty {
background-image: url("{{ asset('/bundles/framework/images/toggler_empty.png') }}");
}
.tree {
width: 230px;
Expand Down Expand Up @@ -70,7 +70,7 @@
.tree a {
text-decoration: no 10000 ne;
}
.tree .toggle-button {
.tree .toggle-icon {
width: 10px;
height: 10px;
/* vertically center the button */
Expand All @@ -79,8 +79,9 @@
margin-top: -5px;
margin-left: -15px;
background-size: 10px 20px;
background-color: #ccc;
}
.tree .toggle-button.empty {
.tree .toggle-icon.empty {
background-size: 10px 10px;
}
.tree ul ul .tree-inner {
Expand All @@ -103,12 +104,12 @@
font-weight: bold;
color: #313131;
}
.tree .tree-inner.active .toggle-button, .tree .tree-inner:hover .toggle-button, .tree .tree-inner.active:hover .toggle-button {
background-image: url("/bundles/framework/images/toggler_hover.png");
.tree .tree-inner.active .toggle-icon, .tree .tree-inner:hover .toggle-icon, .tree .tree-inner.active:hover .toggle-icon {
background-image: url("{{ asset('/bundles/framework/images/toggler_hover.png') }}");
background-color: #aaa;
}
.tree .tree-inner.active .toggle-button.empty, .tree .tree-inner:hover .toggle-button.empty, .tree .tree-inner.active:hover .toggle-button.empty {
background-image: url("/bundles/framework/images/toggler_hover_empty.png");
.tree .tree-inner.active .toggle-icon.empty, .tree .tree-inner:hover .toggle-icon.empty, .tree .tree-inner.active:hover .toggle-icon.empty {
background-image: url("{{ asset('/bundles/framework/images/toggler_hover_empty.png') }}");
}
.tree-details {
border-left: 1px solid #dfdfdf;
Expand All @@ -120,7 +121,7 @@
position: relative;
padding-left: 22px;
}
.tree-details .toggle-button {
.tree-details .toggle-icon {
width: 16px;
height: 16px;
/* vertically center the button */
Expand Down Expand Up @@ -149,15 +150,19 @@
color: #800;
}
.errors th, .errors td {
border: 1px solid #800;
border-color: #800;
}
.errors th {
background: #a33;
color: #fff;
}
.errors .toggle-button {
.errors .toggle-icon {
background-color: #a33;
}
h3 a, h3 a:hover, h3 a:focus {
color: inherit;
text-decoration: inherit;
}
</style>

{% if collector.data.forms|length %}
Expand Down Expand Up @@ -255,7 +260,7 @@

function TabView() {
"use strict";

var activeTab = null,

activeTarget = null,
Expand Down Expand Up @@ -328,9 +333,9 @@
<li>
<div class="tree-inner" data-tab-target-id="{{ data.id }}-details">
{% if data.children is not empty %}
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
<a class="toggle-button toggle-icon" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
{% else %}
<div class="toggle-button empty"></div>
<div class="toggle-icon empty"></div>
{% endif %}
{{ name }}
{% if data.errors is defined and data.errors|length > 0 %}
Expand Down Expand Up @@ -360,8 +365,10 @@
{% if data.errors is defined and data.errors|length > 0 %}
<div class="errors">
<h3>
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#"></a>
Errors
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#">
<span class="toggle-icon"></span>
Errors
</a>
</h3>

<table id="{{ data.id }}-errors">
Expand All @@ -381,8 +388,10 @@

{% if data.default_data is defined %}
<h3>
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#"></a>
Default Data
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#">
<span class="toggle-icon"></span>
Default Data
</a>
</h3>

<div id="{{ data.id }}-default_data">
Expand Down Expand Up @@ -417,8 +426,10 @@

{% if data.submitted_data is defined %}
<h3>
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#"></a>
Submitted Data
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#">
<span class="toggle-icon"></span>
Submitted Data
</a>
</h3>

<div id="{{ data.id }}-submitted_data">
Expand Down Expand Up @@ -457,8 +468,10 @@

{% if data.passed_options is defined %}
<h3>
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#"></a>
Passed Options
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#">
<span class="toggle-icon"></span>
Passed Options
</a>
</h3>

<div id="{{ data.id }}-passed_options">
Expand Down Expand Up @@ -491,8 +504,10 @@

{% if data.resolved_options is defined %}
<h3>
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#"></a>
Resolved Options
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#">
<span class="toggle-icon"></span>
Resolved Options
</a>
</h3>

<div id="{{ data.id }}-resolved_options" class="hidden">
Expand All @@ -513,8 +528,10 @@

{% if data.view_vars is defined %}
<h3>
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#"></a>
View Variables
<a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#">
<span class="toggle-icon"></span>
View Variables
</a>
</h3>

<div id="{{ data.id }}-view_vars" class="hidden">
Expand Down
0