Switch to list instead of table

This commit is contained in:
AKORA 2024-10-07 15:19:20 +02:00
parent 0ea0745d19
commit dcf1a1c71f
2 changed files with 86 additions and 85 deletions

View file

@ -731,89 +731,84 @@
<span class="invalid-feedback d-block" data-i18n="optionsSitePreferencesManualAddHelp"></span>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-bordered">
<div class="table-responsive mt-3">
<ul id="sitePreferencesTable" class="list-group list-group-flush">
<caption data-i18n="optionsSitePreferencesTableCaption"></caption>
<thead>
<tr>
<th scope="col"><span data-i18n="optionsColumnPageURL"></span></th>
</tr>
</thead>
<tbody>
<tr class="empty">
<td colspan="5"><span data-i18n="optionsSitePreferencesNotFound"></span></td>
</tr>
<tr class="clone d-none">
<td class="text-nowrap">
<details>
<summary>
<span></span>
</summary>
<div class="form-group col-sm-3 pb-2">
<label for="ignore" data-i18n="optionsColumnIgnore"></label>
<select class="form-select form-select-sm" id="ignore" name="ignore" data-i18n="[title]optionsSitePreferencesSelect">
<option value="ignoreNothing" data-i18n="optionsSelectionNothing"></option>
<option value="ignoreNormal" data-i18n="optionsSelectionNormal"></option>
<option value="ignoreAutoSubmit" data-i18n="optionsSelectionAutoSubmit"></option>
<option value="ignoreFull" data-i18n="optionsSelectionFull"></option>
</select>
<li class="empty list-group-item">
<span data-i18n="optionsSitePreferencesNotFound"></span>
</li>
<li class="clone d-none list-group-item">
<details>
<summary>
<span></span>
</summary>
<div class="m-3">
<div class="form-group col-sm-3 mb-3">
<label for="ignore" class="form-label" data-i18n="optionsColumnIgnore"></label>
<select class="form-select form-select-sm" id="ignore" name="ignore" data-i18n="[title]optionsSitePreferencesSelect">
<option value="ignoreNothing" data-i18n="optionsSelectionNothing"></option>
<option value="ignoreNormal" data-i18n="optionsSelectionNormal"></option>
<option value="ignoreAutoSubmit" data-i18n="optionsSelectionAutoSubmit"></option>
<option value="ignoreFull" data-i18n="optionsSelectionFull"></option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<label for="usernameOnly" data-i18n="optionsColumnUsernameOnly"></label>
<input class="form-check-input" type="checkbox" id="usernameOnly" name="usernameOnly" value="false" data-i18n="[title]optionsColumnUsernameOnly">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label for="usernameOnly" data-i18n="optionsColumnUsernameOnly"></label>
<input class="form-check-input" type="checkbox" id="usernameOnly" name="usernameOnly" value="false" data-i18n="[title]optionsColumnUsernameOnly">
</div>
<div class="form-group">
<div class="form-check">
<label for="improvedFieldDetection" data-i18n="optionsColumnImprovedInputFieldDetection"></label>
<input class="form-check-input" type="checkbox" id="improvedFieldDetection" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label for="improvedFieldDetection" data-i18n="optionsColumnImprovedInputFieldDetection"></label>
<input class="form-check-input" type="checkbox" id="improvedFieldDetection" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection">
</div>
<div class="form-group">
<div class="form-check">
<label for="allowIframes" data-i18n="optionsColumnAllowIframes"></label>
<input class="form-check-input" type="checkbox" id="allowIframes" name="allowIframes" value="false" data-i18n="[title]optionsColumnAllowIframes">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label for="allowIframes" data-i18n="optionsColumnAllowIframes"></label>
<input class="form-check-input" type="checkbox" id="allowIframes" name="allowIframes" value="false" data-i18n="[title]optionsColumnAllowIframes">
</div>
<div class="form-group">
<div class="form-check">
<label for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
<input class="form-check-input" type="checkbox" id="autoSubmit" name="autoSubmit" value="false" data-i18n="[title]optionsColumnAutoSubmit">
<div class="form-text" data-i18n="optionsAutoSubmitHelpText"></div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<label for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
<input class="form-check-input" type="checkbox" id="autoSubmit" name="autoSubmit" value="false" data-i18n="[title]optionsColumnAutoSubmit">
<div class="form-text" data-i18n="optionsAutoSubmitHelpText"></div>
</div>
<div class="form-group">
<div class="form-check">
<label for="autoFillCredentials" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
<input class="form-check-input" type="checkbox" id="autoFillCredentials" name="autoFillCredentials" value="false" data-i18n="[title]optionsColumnAutoFillCredentials">
<div class="form-text" data-i18n="optionsAutoFillSingleEntryHelpText"></div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<label for="autoFillCredentials" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
<input class="form-check-input" type="checkbox" id="autoFillCredentials" name="autoFillCredentials" value="false" data-i18n="[title]optionsColumnAutoFillCredentials">
<div class="form-text" data-i18n="optionsAutoFillSingleEntryHelpText"></div>
</div>
<div class="form-group">
<div class="form-check">
<label for="autoFillTOTP" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
<input class="form-check-input" type="checkbox" id="autoFillTOTP" name="autoFillTOTP" value="false" data-i18n="[title]optionsColumnAutoFillTOTP">
<div class="form-text" data-i18n="optionsAutoFillSingleTotpHelpText"></div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<label for="autoFillTOTP" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
<input class="form-check-input" type="checkbox" id="autoFillTOTP" name="autoFillTOTP" value="false" data-i18n="[title]optionsColumnAutoFillTOTP">
<div class="form-text" data-i18n="optionsAutoFillSingleTotpHelpText"></div>
</div>
</div>
<button class="btn btn-sm delete btn-danger btn" data-i18n="[title]removeSitePreferencesButtonTitle">
<i class="fa fa-remove" aria-hidden="true"></i>
<span data-i18n="optionsButtonRemove"></span>
</button>
</details>
</td>
</tr>
</tbody>
</table>
<button id="deleteButton" class="btn btn-sm delete btn-danger btn mt-3" data-i18n="[title]removeSitePreferencesButtonTitle">
<i class="fa fa-remove" aria-hidden="true"></i>
<span data-i18n="optionsButtonRemove"></span>
</button>
</div>
</details>
</li>
</ul>
</div>
<div id="dialogDeleteSite" class="modal fade" tabindex="-1" role="dialog">

View file

@ -525,17 +525,17 @@ options.initSitePreferences = function() {
const removeButtonClicked = function(e) {
e.preventDefault();
const closestTr = this.closest('tr');
$('#dialogDeleteSite').setAttribute('url', closestTr.getAttribute('url'));
$('#dialogDeleteSite').setAttribute('tr-id', closestTr.getAttribute('id'));
$('#dialogDeleteSite .modal-body strong').textContent = closestTr.children[0].textContent;
const closestLi = this.closest('li');
$('#dialogDeleteSite').setAttribute('url', closestLi.getAttribute('url'));
$('#dialogDeleteSite').setAttribute('tr-id', closestLi.getAttribute('id'));
$('#dialogDeleteSite .modal-body strong').textContent = closestLi.children[0].textContent;
dialogDeleteSiteModal.show();
};
const checkboxClicked = function() {
const closestTr = this.closest('tr');
const url = closestTr.getAttribute('url');
const closestLi = this.closest('li');
const url = closestLi.getAttribute('url');
for (const site of options.settings['sitePreferences']) {
if (site.url === url) {
@ -559,8 +559,8 @@ options.initSitePreferences = function() {
};
const selectionChanged = function() {
const closestTr = this.closest('tr');
const url = closestTr.getAttribute('url');
const closestLi = this.closest('li');
const url = closestLi.getAttribute('url');
for (const site of options.settings['sitePreferences']) {
if (site.url === url) {
@ -576,10 +576,10 @@ options.initSitePreferences = function() {
row.setAttribute('url', url);
row.setAttribute('id', 'tr-scf' + newIndex);
const details = row.children[0].children[0];
const details = row.children[0];
details.children[0].children[0].textContent = url;
details.children[2].children[0].value = ignore;
details.children[2].children[0].addEventListener('change', selectionChanged);
details.querySelector('#ignore').value = ignore;
details.querySelector('#ignore').addEventListener('change', selectionChanged);
details.querySelector('#usernameOnly').checked = usernameOnly;
details.querySelector('#usernameOnly').addEventListener('change', checkboxClicked);
details.querySelector('#improvedFieldDetection').checked = improvedFieldDetection;
@ -592,9 +592,9 @@ options.initSitePreferences = function() {
details.querySelector('#autoFillCredentials').addEventListener('change', checkboxClicked);
details.querySelector('#autoFillTOTP').checked = autoFillTOTP;
details.querySelector('#autoFillTOTP').addEventListener('change', checkboxClicked);
details.children[8].addEventListener('click', removeButtonClicked);
details.querySelector('#deleteButton').addEventListener('click', removeButtonClicked);
$('#tab-site-preferences table tbody').append(row);
$('#tab-site-preferences #sitePreferencesTable').append(row);
};
$('#dialogDeleteSite .modal-footer button.yes').addEventListener('click', function(e) {
@ -649,11 +649,13 @@ options.initSitePreferences = function() {
}
const newIndex = options.settings['sitePreferences'].length + 1;
const rowClone = $('#tab-site-preferences table tr.clone').cloneNode(true);
const rowClone = $('#tab-site-preferences #sitePreferencesTable li.clone').cloneNode(true);
rowClone.classList.remove('clone', 'd-none');
addNewRow(rowClone, newIndex, value, IGNORE_NOTHING, false, false, false, false, false, false);
$('#tab-site-preferences table tbody tr.empty').hide();
$('#tab-site-preferences #sitePreferencesTable li.empty').hide();
options.settings['sitePreferences'].push({
url: value,
@ -666,7 +668,7 @@ options.initSitePreferences = function() {
manualUrl.value = '';
});
const rowClone = $('#tab-site-preferences table tr.clone').cloneNode(true);
const rowClone = $('#tab-site-preferences ul li.clone').cloneNode(true);
rowClone.classList.remove('clone', 'd-none');
let counter = 1;
if (options.settings['sitePreferences']) {
@ -686,6 +688,10 @@ options.initSitePreferences = function() {
++counter;
}
}
if (counter > 1) {
$('#tab-site-preferences #sitePreferencesTable li.empty').hide();
}
};
options.initAbout = function() {