Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[WebProfilerBundle] Display the missing translation panel by default #26398

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 2 commits into from
Closed

[WebProfilerBundle] Display the missing translation panel by default #26398

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50802c4
Display the missing translation panel by default if there are missing…
javiereguiluz Mar 4, 2018
f7c1d31
simplify the styles of the active tabs
javiereguiluz Mar 9, 2018
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
Next Next commit
Display the missing translation panel by default if there are missing… 
… translations
  • Loading branch information
@javiereguiluz
javiereguiluz committed Mar 4, 2018
commit 50802c43a4b6596ed37493e54d12ed30fe7f7309
4 changes: 3 additions & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,14 @@
var tabNavigation = document.createElement('ul');
tabNavigation.className = 'tab-navigation';
var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
for (var j = 0; j < tabs.length; j++) {
var tabId = 'tab-' + i + '-' + j;
var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
var tabNavigationItem = document.createElement('li');
tabNavigationItem.setAttribute('data-tab-id', tabId);
if (j == 0) { addClass(tabNavigationItem, 'active'); }
if (hasClass(tabs[j], 'tab-active')) { selectedTabId = tabId; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not check if class 'active' is set already?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your proposal would work, but I think the current one is simpler.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

introducing tab-active + active 🤔 why use 2 "active" classes?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we use active to apply other styles.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've reviewed this again ... and I was completely wrong. The .active styles are not used how I thought they were, so we can totally reuse that class. @ro0NL thanks for helping me realize this!

if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
tabNavigationItem.innerHTML = tabTitle;
tabNavigation.appendChild(tabNavigationItem);
Expand All @@ -61,6 +62,7 @@
}
tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
}
/* display the active tab and add the 'click' event listeners */
Expand Down
4 changes: 2 additions & 2 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
{% endfor %}

<div class="sf-tabs">
<div class="tab">
<div class="tab {{ collector.countMissings == 0 ? 'tab-active' }}">
Copy link

@Destroy666x Destroy666x Mar 8, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small thing, but wouldn't tab{{ collector.countMissings == 0 ? ' tab-active' }} be more optimal for output? There are redundant spaces in case those fail.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't care about redundant spaces. They don't hurt at all. And this code is more readable in the template.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Destroy666x you are right, but as @stof said, we always prioritize the readability of Twig templates over the generated HTML code. So let's keep it.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I see. IMO both versions are equally readable though

<h3 class="tab-title">Defined <span class="badge">{{ collector.countDefines }}</span></h3>

<div class="tab-content">
Expand Down Expand Up @@ -158,7 +158,7 @@
</div>
</div>

<div class="tab">
<div class="tab {{ collector.countMissings > 0 ? 'tab-active' }}">
<h3 class="tab-title">Missing <span class="badge {{ collector.countMissings ? 'status-error' }}">{{ collector.countMissings }}</span></h3>

<div class="tab-content">
Expand Down
4 changes: 3 additions & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,13 +406,14 @@
var tabNavigation = document.createElement('ul');
tabNavigation.className = 'tab-navigation';

var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
for (var j = 0; j < tabs.length; j++) {
var tabId = 'tab-' + i + '-' + j;
var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;

var tabNavigationItem = document.createElement('li');
tabNavigationItem.setAttribute('data-tab-id', tabId);
if (j == 0) { addClass(tabNavigationItem, 'active'); }
if (hasClass(tabs[j], 'tab-active')) { selectedTabId = tabId; }
if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
tabNavigationItem.innerHTML = tabTitle;
tabNavigation.appendChild(tabNavigationItem);
Expand All @@ -422,6 +423,7 @@
}

tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
}

/* display the active tab and add the 'click' event listeners */
Expand Down