mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-26 03:58:45 +02:00
N°6934 - Symfony 6.4 - upgrade Symfony bundles to 6.4 (#580)
* Update Symfony lib to version ~6.4.0 * Update code missing return type * Add an iTop general configuration entry to store application secret (Symfony mandatory parameter) * Use dependency injection in ExceptionListener & UserProvider classes
This commit is contained in:
bdalsass
@@ -1,23 +1,63 @@
|
||||
<style>
|
||||
:root {
|
||||
--settings-modal-shadow: 0 0 0 1px var(--gray-400), 5px 5px 20px 0 var(--gray-800);
|
||||
--settings-modal-header-background: var(--gray-200);
|
||||
--settings-modal-content-background: var(--gray-100);
|
||||
--settings-option-background: var(--page-background);
|
||||
--settings-option-border-color: var(--gray-300);
|
||||
--settings-option-color: var(--color-text);
|
||||
--settings-option-icon-color: var(--gray-400);
|
||||
--settings-option-active-border-color: #3b82f6;
|
||||
--settings-option-active-background: #eff6ff;
|
||||
--settings-option-active-color: var(--color-text);
|
||||
--settings-option-active-icon-color: var(--gray-400);
|
||||
}
|
||||
.theme-dark {
|
||||
--settings-modal-shadow: 0 0 0 1px var(--gray-600), 5px 5px 10px 0 var(--gray-900);
|
||||
--settings-modal-header-background: var(--gray-800);
|
||||
--settings-modal-content-background: var(--gray-700);
|
||||
--settings-option-background: transparent;
|
||||
--settings-option-border-color: var(--gray-500);
|
||||
--settings-option-color: var(--color-text);
|
||||
--settings-option-icon-color: var(--gray-300);
|
||||
--settings-option-active-border-color: #93c5fd;
|
||||
--settings-option-active-background: var(--gray-700);
|
||||
--settings-option-active-color: var(--color-text);
|
||||
--settings-option-active-icon-color: #93c5fd;
|
||||
}
|
||||
|
||||
#open-settings {
|
||||
color: var(--color-muted);
|
||||
display: block;
|
||||
margin: 15px 15px 5px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
#open-settings .icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
#open-settings .icon, #open-settings svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.modal-wrap {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
-webkit-transition-property: opacity, visibility;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.70);
|
||||
display: flex;
|
||||
backdrop-filter: blur(2px);
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
opacity: 0;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: opacity, visibility;
|
||||
transition-timing-function: ease-in-out;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 100000;
|
||||
@@ -27,8 +67,9 @@
|
||||
visibility: visible;
|
||||
}
|
||||
.modal-wrap .modal-container {
|
||||
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
|
||||
color: var(--base-6);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--settings-modal-shadow);
|
||||
color: var(--color-text);
|
||||
margin: 1em;
|
||||
max-width: 94%;
|
||||
width: 600px;
|
||||
@@ -36,19 +77,20 @@
|
||||
|
||||
.modal-wrap .modal-header {
|
||||
align-items: center;
|
||||
background: var(--table-header);
|
||||
background: var(--settings-modal-header-background);
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
.modal-wrap .modal-header h3 {
|
||||
color: var(--base-6);
|
||||
margin: 0;
|
||||
}
|
||||
.modal-wrap .modal-header .close-modal {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--base-4);
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
@@ -57,32 +99,85 @@
|
||||
.modal-wrap .modal-header .close-modal:hover { opacity: 1; }
|
||||
|
||||
.modal-wrap .modal-content {
|
||||
background: var(--base-1);
|
||||
background: var(--settings-modal-content-background);
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
margin: 0;
|
||||
padding: 15px 30px;
|
||||
width: 100%;
|
||||
z-index: 100000;
|
||||
}
|
||||
.modal-content h4 {
|
||||
border-bottom: var(--border);
|
||||
margin: 0 0 15px;
|
||||
padding: 0 0 5px;
|
||||
font-size: 18px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.modal-content input, .modal-content .form-help {
|
||||
margin-left: 15px;
|
||||
.modal-content .settings-group + h4 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.modal-content label {
|
||||
.modal-content .settings-group {
|
||||
border: 1px solid var(--settings-option-border-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.modal-content .settings-group label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
margin-left: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-content .form-help {
|
||||
color: var(--color-muted);
|
||||
.modal-content .settings-group label input {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-content .settings-group:has(input:focus-visible) {
|
||||
outline: 2px dotted var(--settings-option-active-border-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.modal-content .settings-group label input:checked + p {
|
||||
box-shadow: inset 0 0 0 2px var(--settings-option-active-border-color);
|
||||
background-color: var(--settings-option-active-background);
|
||||
color: var(--settings-option-active-color);
|
||||
}
|
||||
.modal-content .settings-group label input:checked + p svg {
|
||||
color: var(--settings-option-active-icon-color);
|
||||
}
|
||||
.modal-content .settings-group label p {
|
||||
align-items: center;
|
||||
background: var(--settings-option-background);
|
||||
|
||||
color: var(--settings-option-color);
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
margin: 5px 0 15px 33px;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.modal-content .form-help + h4 {
|
||||
margin-top: 45px;
|
||||
.modal-content .settings-group label:first-child p {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.modal-content .settings-group label:last-child p {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.modal-content .settings-group label + label p {
|
||||
border-left: 1px solid var(--settings-option-border-color);
|
||||
}
|
||||
.modal-content label p span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.modal-content label p abbr {
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.modal-content label svg {
|
||||
color: var(--settings-option-icon-color);
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -92,51 +187,69 @@
|
||||
#sidebar:hover #open-settings, #sidebar.expanded #open-settings {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
#open-settings:before {
|
||||
content: '\2699';
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
#sidebar:hover #open-settings:before, #sidebar.expanded #open-settings:before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href="#" id="open-settings">Settings</a>
|
||||
<a href="#" id="open-settings">
|
||||
<span class="icon">{{ source('@WebProfiler/Icon/settings.svg') }}</span>
|
||||
Profiler settings
|
||||
</a>
|
||||
|
||||
<div class="modal-wrap" id="profiler-settings">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h3>Configuration Settings</h3>
|
||||
<button class="close-modal">×</button>
|
||||
<button aria-label="Close" class="close-modal">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<h4>Theme</h4>
|
||||
|
||||
<input class="config-option" type="radio" name="theme" value="auto" id="settings-theme-auto">
|
||||
<label for="settings-theme-auto">Auto</label>
|
||||
<p class="form-help"><strong>Default theme</strong>. It switches between Light and Dark automatically to match the operating system theme.</p>
|
||||
<div class="settings-group">
|
||||
<label for="settings-theme-auto">
|
||||
<input class="config-option" type="radio" name="theme" value="auto" id="settings-theme-auto">
|
||||
<p>
|
||||
{{ source('@WebProfiler/Icon/settings-theme-system.svg') }}
|
||||
<span>System / OS</span>
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<input class="config-option" type="radio" name="theme" value="light" id="settings-theme-light">
|
||||
<label for="settings-theme-light">Light</label>
|
||||
<p class="form-help">Provides greatest readability, but requires a well-lit environment.</p>
|
||||
<label for="settings-theme-light">
|
||||
<input class="config-option" type="radio" name="theme" value="light" id="settings-theme-light">
|
||||
<p>
|
||||
{{ source('@WebProfiler/Icon/settings-theme-light.svg') }}
|
||||
<span>Light</span>
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<input class="config-option" type="radio" name="theme" value="dark" id="settings-theme-dark">
|
||||
<label for="settings-theme-dark">Dark</label>
|
||||
<p class="form-help">Reduces eye fatigue. Ideal for low light environments.</p>
|
||||
<label for="settings-theme-dark">
|
||||
<input class="config-option" type="radio" name="theme" value="dark" id="settings-theme-dark">
|
||||
<p>
|
||||
{{ source('@WebProfiler/Icon/settings-theme-dark.svg') }}
|
||||
<span>Dark</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h4>Page Width</h4>
|
||||
|
||||
<input class="config-option" type="radio" name="width" value="normal" id="settings-width-normal">
|
||||
<label for="settings-width-normal">Normal</label>
|
||||
<p class="form-help">Fixed page width. Improves readability.</p>
|
||||
<div class="settings-group">
|
||||
<label for="settings-width-normal">
|
||||
<input class="config-option" type="radio" name="width" value="normal" id="settings-width-normal">
|
||||
<p>
|
||||
{{ source('@WebProfiler/Icon/settings-width-fixed.svg') }}
|
||||
<span>Fixed width</span>
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<input class="config-option" type="radio" name="width" value="full" id="settings-width-full">
|
||||
<label for="settings-width-full">Full-page</label>
|
||||
<p class="form-help">Dynamic page width. As wide as the browser window.</p>
|
||||
<label for="settings-width-full">
|
||||
<input class="config-option" type="radio" name="width" value="full" id="settings-width-full">
|
||||
<p>
|
||||
{{ source('@WebProfiler/Icon/settings-width-fitted.svg') }}
|
||||
<span>Fit to window</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,7 +257,6 @@
|
||||
<script>
|
||||
(function() {
|
||||
const configOptions = document.querySelectorAll('.config-option');
|
||||
const allSettingValues = ['theme-auto', 'theme-ligh', 'theme-dark', 'width-normal', 'width-full'];
|
||||
[...configOptions].forEach(option => {
|
||||
option.addEventListener('change', function (event) {
|
||||
const optionName = option.name;
|
||||
@@ -160,10 +272,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
if ('theme-auto' === settingValue) {
|
||||
document.body.classList.add((matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light'));
|
||||
} else {
|
||||
document.body.classList.add(settingValue);
|
||||
const resolvedSettingValue = 'theme-auto' === settingValue
|
||||
? (matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light')
|
||||
: settingValue;
|
||||
document.body.classList.add(resolvedSettingValue);
|
||||
|
||||
if (resolvedSettingValue.startsWith('theme-')) {
|
||||
document.body.style.colorScheme = resolvedSettingValue.endsWith('-light') ? 'light' : 'dark';
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -171,22 +286,30 @@
|
||||
const openModalButton = document.getElementById('open-settings');
|
||||
const modalWindow = document.getElementById('profiler-settings');
|
||||
const closeModalButton = document.getElementsByClassName('close-modal')[0];
|
||||
const modalWrapper = document.getElementsByClassName('modal-wrap')[0]
|
||||
const modalWrapper = document.getElementsByClassName('modal-wrap')[0];
|
||||
const closeModal = () => {
|
||||
modalWindow.classList.remove('visible');
|
||||
setTimeout(() => openModalButton.focus(), 30);
|
||||
};
|
||||
|
||||
openModalButton.addEventListener('click', function(event) {
|
||||
document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/theme') || 'theme-auto')).checked = 'checked';
|
||||
document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/width') || 'width-normal')).checked = 'checked';
|
||||
|
||||
modalWindow.classList.toggle('visible');
|
||||
setTimeout(() => closeModalButton.focus(), 30);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
closeModalButton.addEventListener('click', function() {
|
||||
modalWindow.classList.remove('visible');
|
||||
});
|
||||
closeModalButton.addEventListener('click', closeModal);
|
||||
modalWrapper.addEventListener('click', function(event) {
|
||||
if (event.target == event.currentTarget) {
|
||||
modalWindow.classList.remove('visible');
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
modalWrapper.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Esc' || event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user