Show placeholder when paired device is removed to prevent removing multiple devices

This commit is contained in:
schlagmichdoch 2023-12-09 17:37:00 +01:00
parent b5535c7ace
commit 2a97a8e5d9
3 changed files with 16 additions and 17 deletions

View file

@ -60,6 +60,7 @@
"cancel": "Cancel",
"edit-paired-devices-title": "Edit Paired Devices",
"unpair": "Unpair",
"paired-device-removed": "Paired device removed.",
"paired-devices-wrapper_data-empty": "No paired devices.",
"auto-accept-instructions-1": "Activate",
"auto-accept": "auto-accept",

View file

@ -1545,6 +1545,7 @@ class EditPairedDevicesDialog extends Dialog {
}
async _initDOM() {
const pairedDeviceRemovedString = Localization.getTranslation("dialogs.paired-device-removed");
const unpairString = Localization.getTranslation("dialogs.unpair").toUpperCase();
const autoAcceptString = Localization.getTranslation("dialogs.auto-accept").toLowerCase();
const roomSecretsEntries = await PersistentStorage.getAllRoomSecretEntries();
@ -1553,6 +1554,7 @@ class EditPairedDevicesDialog extends Dialog {
.forEach(roomSecretsEntry => {
let $pairedDevice = document.createElement('div');
$pairedDevice.classList.add("paired-device");
$pairedDevice.setAttribute('placeholder', pairedDeviceRemovedString);
$pairedDevice.innerHTML = `
<div class="display-name">
@ -1565,17 +1567,17 @@ class EditPairedDevicesDialog extends Dialog {
${roomSecretsEntry.device_name}
</span>
</div>
<div class="button-wrapper">
<div class="row center">
<span class="p1">
<div class="button-wrapper row fw center wrap">
<div class="center grow">
<span class="center wrap">
${autoAcceptString}
</span>
<label class="auto-accept pointer switch">
<label class="auto-accept switch pointer m1">
<input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
<div class="slider round"></div>
</label>
</div>
<button class="btn" type="button">${unpairString}</button>
<button class="btn grow" type="button">${unpairString}</button>
</div>`
$pairedDevice
@ -1599,11 +1601,10 @@ class EditPairedDevicesDialog extends Dialog {
.then(roomSecret => {
Events.fire('room-secrets-deleted', [roomSecret]);
Events.fire('evaluate-number-room-secrets');
e.target.parentNode.parentNode.remove();
$pairedDevice.innerText = "";
});
})
this.$pairedDevicesWrapper.html = "";
this.$pairedDevicesWrapper.appendChild($pairedDevice)
})
}

View file

@ -505,6 +505,10 @@ x-dialog hr {
align-items: center;
}
.paired-device:empty {
padding: 47px;
}
.paired-device:not(:last-child) {
border-bottom: solid 4px var(--paired-device-color);
}
@ -521,17 +525,10 @@ x-dialog hr {
opacity: 1;
}
.paired-device > .button-wrapper {
display: flex;
height: 36px;
width: 100%;
}
.paired-device > .button-wrapper > * {
width: 50%;
padding-left: 6px;
padding-right: 6px;
height: 36px;
min-height: 38px;
padding-left: 5px;
padding-right: 5px;
}
.paired-device > .button-wrapper > :not(:last-child) {