Skip to content

Commit eac5aa4

Browse files
javiereguiluzfabpot
javiereguiluz
authored and
fabpot
committed
[WebProfilerBundle] Update the mailer panel
1 parent 4f20ec6 commit eac5aa4

File tree

8 files changed

+397
-167
lines changed

8 files changed

+397
-167
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig

Lines changed: 191 additions & 162 deletions
Large diffs are not rendered by default.

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/attachment.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/download.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/file.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/mailer.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -834,6 +834,22 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
834834
});
835835
},
836836
837+
initializeMailerTable: function() {
838+
const emailRows = document.querySelectorAll('.mailer-email-summary-table-row');
839+
840+
emailRows.forEach((emailRow) => {
841+
emailRow.addEventListener('click', () => {
842+
emailRow.addEventListener('click', () => {
843+
emailRows.forEach((row) => row.classList.remove('active'));
844+
emailRow.classList.add('active');
845+
846+
document.querySelectorAll('.mailer-email-details').forEach((emailDetails) => emailDetails.style.display = 'none');
847+
document.querySelector(emailRow.getAttribute('data-target')).style.display = 'block';
848+
});
849+
});
850+
});
851+
},
852+
837853
updateLogsTable: function() {
838854
const selectedType = document.querySelector('#log-filter-type input:checked').value;
839855
const priorities = document.querySelectorAll('#log-filter-priority input');

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

Lines changed: 170 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
9696
--color-warning: var(--yellow-700);
9797
--color-error: var(--red-600);
9898
--h2-border-color: var(--gray-200);
99+
--heading-code-background: var(--gray-100);
99100
--form-input-border-color: var(--gray-300);
100101
--button-background: var(--gray-100);
101102
--button-border-color: var(--gray-300);
@@ -151,6 +152,9 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
151152
--shadow: 0px 0px 1px rgba(128, 128, 128, .2);
152153
--border: 1px solid #e0e0e0;
153154
--background-error: var(--color-error);
155+
--mailer-email-table-wrapper-background: var(--gray-100);
156+
--mailer-email-table-active-row-background: #dbeafe;
157+
--mailer-email-table-active-row-color: var(--color-text);
154158

155159
--highlight-variable: #e36209;
156160
--highlight-string: #22863a;
@@ -220,6 +224,7 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
220224
--header-error-status-text-color: var(--red-200);
221225

222226
--h2-border-color: var(--gray-500);
227+
--heading-code-background: var(--gray-600);
223228
--form-input-border-color: var(--gray-400);
224229
--button-background: var(--gray-300);
225230
--button-border-color: var(--gray-500);
@@ -273,6 +278,9 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
273278
--shadow: 0px 0px 1px rgba(32, 32, 32, .2);
274279
--border: 1px solid #666;
275280
--background-error: #b0413e;
281+
--mailer-email-table-wrapper-background: var(--gray-900);
282+
--mailer-email-table-active-row-background: var(--gray-300);
283+
--mailer-email-table-active-row-color: var(--gray-800);
276284
--highlight-variable: #ffa657;
277285
--highlight-string: #7ee787;
278286
--highlight-comment: #8b949e;
@@ -402,6 +410,16 @@ code, pre {
402410
font-family: var(--font-family-monospace);
403411
font-size: 14px;
404412
}
413+
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
414+
color: inherit;
415+
font-weight: inherit;
416+
font-family: inherit;
417+
font-size: inherit;
418+
background: var(--heading-code-background);
419+
border-radius: 4px;
420+
padding: 0 3px;
421+
word-break: break-word;
422+
}
405423

406424
input, select {
407425
background-color: var(--page-background);
@@ -415,6 +433,19 @@ input[type="radio"], input[type="checkbox"] {
415433
box-shadow: none;
416434
}
417435

436+
/* Used to hide elements added for accessibility reasons (the !important modifier is needed here) */
437+
.visually-hidden {
438+
border: 0 !important;
439+
clip: rect(0, 0, 0, 0) !important;
440+
height: 1px !important;
441+
margin: -1px !important;
442+
overflow: hidden !important;
443+
padding: 0 !important;
444+
position: absolute !important;
445+
width: 1px !important;
446+
white-space: nowrap !important;
447+
}
448+
418449
{# Buttons (the colors of this element don't change based on the selected theme)
419450
------------------------------------------------------------------------- #}
420451
.btn {
@@ -646,7 +677,7 @@ table tbody td.num-col {
646677
.metrics {
647678
align-items: flex-start;
648679
display: flex;
649-
margin: 1em 0 0;
680+
margin: 1em 0;
650681
flex-wrap: wrap;
651682
}
652683
.metrics .metric {
@@ -658,7 +689,7 @@ table tbody td.num-col {
658689
box-shadow: inset 0 0 0 1px var(--metric-border-color), 0 0 0 5px var(--page-background);
659690
border-radius: 6px;
660691
color: var(--metric-value-color);
661-
display: flex;
692+
display: inline-flex;
662693
flex-direction: column-reverse;
663694
min-width: 60px;
664695
padding: 10px 15px;
@@ -758,7 +789,7 @@ table tbody td.num-col {
758789
}
759790

760791
.metric-divider {
761-
float: left;
792+
display: inline-flex;
762793
margin: 0 10px;
763794
min-height: 1px; {# required to apply 'margin' to an empty 'div' #}
764795
}
@@ -771,6 +802,7 @@ table tbody td.num-col {
771802
box-shadow: inset 0 0 0 1px var(--form-input-border-color), 0 0 0 5px var(--page-background);
772803
margin: 1em 0;
773804
padding: 10px;
805+
overflow-y: auto;
774806
}
775807
.card-block + .card-block {
776808
border-top: 1px solid var(--form-input-border-color);
@@ -1469,12 +1501,15 @@ tr.status-warning td {
14691501
box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 5px var(--page-background);
14701502
display: inline-flex;
14711503
flex-wrap: wrap;
1472-
font-size: 13px;
14731504
margin: 0 0 15px;
14741505
padding: 2px;
14751506
user-select: none;
14761507
-webkit-user-select: none;
14771508
}
1509+
.sf-tabs-sm .tab-navigation {
1510+
box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 4px var(--page-background);
1511+
margin: 0 0 10px;
1512+
}
14781513
.tab-navigation li {
14791514
cursor: pointer;
14801515
font-weight: 500;
@@ -1485,6 +1520,10 @@ tr.status-warning td {
14851520
text-align: center;
14861521
z-index: 1;
14871522
}
1523+
.sf-tabs-sm .tab-navigation li {
1524+
font-size: 13px;
1525+
padding: 2.5px 10px;
1526+
}
14881527
.tab-navigation li:before {
14891528
background: var(--tab-border-color);
14901529
bottom: 15%;
@@ -1642,6 +1681,10 @@ tr.status-warning td {
16421681
font-weight: bold;
16431682
padding: 1px 4px;
16441683
}
1684+
.badge-success {
1685+
background: var(--badge-success-background);
1686+
color: var(--badge-success-color);
1687+
}
16451688
.badge-warning {
16461689
background: var(--badge-warning-background);
16471690
color: var(--badge-warning-color);
@@ -1845,6 +1888,129 @@ tr.log-status-silenced > td:first-child:before {
18451888
margin: 0;
18461889
}
18471890

1891+
{# Mailer panel
1892+
========================================================================= #}
1893+
.mailer-email-summary-table-wrapper {
1894+
background: var(--mailer-email-table-wrapper-background);
1895+
border-bottom: 4px double var(--table-border-color);
1896+
border-radius: inherit;
1897+
border-bottom-left-radius: 0;
1898+
border-bottom-right-radius: 0;
1899+
margin: 0 -9px 10px -9px;
1900+
padding-bottom: 10px;
1901+
transform: translateY(-9px);
1902+
max-height: 265px;
1903+
overflow-y: auto;
1904+
}
1905+
.mailer-email-summary-table,
1906+
.mailer-email-summary-table tr,
1907+
.mailer-email-summary-table td {
1908+
border: 0;
1909+
border-radius: inherit;
1910+
border-bottom-left-radius: 0;
1911+
border-bottom-right-radius: 0;
1912+
box-shadow: none;
1913+
}
1914+
.mailer-email-summary-table th {
1915+
color: var(--color-muted);
1916+
font-size: 13px;
1917+
padding: 4px 10px;
1918+
}
1919+
.mailer-email-summary-table tr td,
1920+
.mailer-email-summary-table tr:last-of-type td {
1921+
border: solid var(--table-border-color);
1922+
border-width: 1px 0;
1923+
}
1924+
.mailer-email-summary-table-row {
1925+
margin: 5px 0;
1926+
}
1927+
.mailer-email-summary-table-row:hover {
1928+
cursor: pointer;
1929+
}
1930+
.mailer-email-summary-table-row.active {
1931+
background: var(--mailer-email-table-active-row-background);
1932+
color: var(--mailer-email-table-active-row-color);
1933+
}
1934+
.mailer-email-summary-table-row td {
1935+
font-family: var(--font-family-system);
1936+
font-size: inherit;
1937+
}
1938+
.mailer-email-details {
1939+
display: none;
1940+
}
1941+
.mailer-email-details.active {
1942+
display: block;
1943+
}
1944+
.mailer-transport-information {
1945+
border-bottom: 1px solid var(--form-input-border-color);
1946+
padding-bottom: 5px;
1947+
font-size: 14px;
1948+
margin: 5px 0 10px 5px;
1949+
}
1950+
.mailer-transport-information .badge {
1951+
font-size: inherit;
1952+
font-weight: inherit;
1953+
}
1954+
.mailer-message-subject {
1955+
font-size: 21px;
1956+
font-weight: bold;
1957+
margin: 5px;
1958+
}
1959+
.mailer-message-headers {
1960+
margin-bottom: 10px;
1961+
}
1962+
.mailer-message-headers p {
1963+
font-size: 14px;
1964+
margin: 2px 5px;
1965+
}
1966+
.mailer-message-header-secondary {
1967+
color: var(--color-muted);
1968+
}
1969+
.mailer-message-attachments-title {
1970+
align-items: center;
1971+
display: flex;
1972+
font-size: 14px;
1973+
font-weight: 600;
1974+
margin-bottom: 10px;
1975+
}
1976+
.mailer-message-attachments-title svg {
1977+
color: var(--color-muted);
1978+
margin-right: 5px;
1979+
height: 18px;
1980+
width: 18px;
1981+
}
1982+
.mailer-message-attachments-title span {
1983+
font-weight: normal;
1984+
margin-left: 4px;
1985+
}
1986+
.mailer-message-attachments-list {
1987+
list-style: none;
1988+
margin: 0 0 5px 20px;
1989+
padding: 0;
1990+
}
1991+
.mailer-message-attachments-list li {
1992+
align-items: center;
1993+
display: flex;
1994+
}
1995+
.mailer-message-attachments-list li svg {
1996+
margin-right: 5px;
1997+
height: 18px;
1998+
width: 18px;
1999+
}
2000+
.mailer-message-attachments-list li a {
2001+
margin-left: 5px;
2002+
}
2003+
.mailer-message-download-raw {
2004+
align-items: center;
2005+
display: flex;
2006+
padding: 5px 0 0 5px;
2007+
}
2008+
.mailer-message-download-raw svg {
2009+
height: 18px;
2010+
width: 18px;
2011+
margin-right: 3px;
2012+
}
2013+
18482014
{# Doctrine panel
18492015
========================================================================= #}
18502016
.sql-runnable {

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@
8787
letter-spacing: normal;
8888
width: auto;
8989
}
90+
.sf-toolbarreset svg rect {
91+
width: inherit;
92+
}
9093

9194
.sf-toolbarreset {
9295
background-color: var(--sf-toolbar-gray-800);
@@ -313,7 +316,7 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
313316

314317
.sf-toolbar-block-request .sf-toolbar-status {
315318
border-radius: 6px;
316-
color: var(--white);
319+
color: #fff;
317320
display: inline-block;
318321
flex-shrink: 0;
319322
font-size: 13px;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy