indicate peer color meaning via underlines

This commit is contained in:
schlagmichdoch 2023-02-08 04:06:15 +01:00
parent b8411eb99b
commit 89d5ae3a02
3 changed files with 15 additions and 5 deletions

View file

@ -86,7 +86,7 @@
<use xlink:href="#wifi-tethering" />
</svg>
<div id="displayName" placeholder="&nbsp;"></div>
<div class="font-body2">You can be discovered by everyone on this network</div>
<div class="font-body2">You can be discovered by everyone <span id="on-this-network">on this network</span><span id="and-by-paired-devices" hidden> and by <span id="paired-devices">paired devices</span></span></div>
</footer>
<!-- Pair Device Dialog -->
<x-dialog id="pairDeviceDialog">

View file

@ -702,7 +702,7 @@ class PairDeviceDialog extends Dialog {
this.$roomKey = this.$el.querySelector('#roomKey');
this.$qrCode = this.$el.querySelector('#roomKeyQrCode');
this.$clearSecretsBtn = $('clear-pair-devices');
this.$footerInstructions = $$('footer>.font-body2');
this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
let createJoinForm = this.$el.querySelector('form');
createJoinForm.addEventListener('submit', _ => this._onSubmit());
@ -902,10 +902,10 @@ class PairDeviceDialog extends Dialog {
PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
if (roomSecrets.length > 0) {
this.$clearSecretsBtn.removeAttribute('hidden');
this.$footerInstructions.innerText = "You can be discovered on this network and by paired devices";
this.$footerInstructionsPairedDevices.removeAttribute('hidden');
} else {
this.$clearSecretsBtn.setAttribute('hidden', '');
this.$footerInstructions.innerText = "You can be discovered by everyone on this network";
this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
}
}).catch(_ => PersistentStorage.logBrowserNotCapable());
}

View file

@ -3,6 +3,7 @@
:root {
--icon-size: 24px;
--primary-color: #4285f4;
--paired-device-color: #00a69c;
--peer-width: 120px;
color-scheme: light dark;
}
@ -288,7 +289,7 @@ x-peer x-icon {
}
x-peer:not(.type-ip) x-icon {
background: #00a69c;
background: var(--paired-device-color);
}
x-peer:not([status]):hover x-icon,
@ -379,6 +380,15 @@ footer .logo {
footer .font-body2 {
color: var(--primary-color);
text-underline-position: under;
}
#on-this-network {
text-decoration: underline solid var(--primary-color) 4px;
}
#paired-devices {
text-decoration: underline solid var(--paired-device-color) 4px;
}
/* Dialog */