indicate peer color meaning via underlines
This commit is contained in:
parent
b8411eb99b
commit
89d5ae3a02
3 changed files with 15 additions and 5 deletions
|
@ -86,7 +86,7 @@
|
|||
<use xlink:href="#wifi-tethering" />
|
||||
</svg>
|
||||
<div id="displayName" placeholder=" "></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">
|
||||
|
|
|
@ -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());
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in a new issue