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", "cancel": "Cancel",
"edit-paired-devices-title": "Edit Paired Devices", "edit-paired-devices-title": "Edit Paired Devices",
"unpair": "Unpair", "unpair": "Unpair",
"paired-device-removed": "Paired device removed.",
"paired-devices-wrapper_data-empty": "No paired devices.", "paired-devices-wrapper_data-empty": "No paired devices.",
"auto-accept-instructions-1": "Activate", "auto-accept-instructions-1": "Activate",
"auto-accept": "auto-accept", "auto-accept": "auto-accept",

View file

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

View file

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