8000 [WebProfilerBundle] Update the mailer panel · symfony/symfony@eac5aa4 · GitHub
[go: up one dir, main page]
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(-- F438 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)
0