mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 15:26:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

indicate peer color meaning via underlines

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -86,7 +86,7 @@
<use xlink:href="#wifi-tethering" /> <use xlink:href="#wifi-tethering" />
</svg> </svg>
<div id="displayName" placeholder="&nbsp;"></div> <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> </footer>
<!-- Pair Device Dialog --> <!-- Pair Device Dialog -->
<x-dialog id="pairDeviceDialog"> <x-dialog id="pairDeviceDialog">

6
public/scripts/ui.js
View file

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

12
public/styles.css
View file

@ -3,6 +3,7 @@
:root { :root {
--icon-size: 24px; --icon-size: 24px;
--primary-color: #4285f4; --primary-color: #4285f4;
--paired-device-color: #00a69c;
--peer-width: 120px; --peer-width: 120px;
color-scheme: light dark; color-scheme: light dark;
} }
@ -288,7 +289,7 @@ x-peer x-icon {
} }
x-peer:not(.type-ip) x-icon { x-peer:not(.type-ip) x-icon {
background: #00a69c; background: var(--paired-device-color);
} }
x-peer:not([status]):hover x-icon, x-peer:not([status]):hover x-icon,
@ -379,6 +380,15 @@ footer .logo {
footer .font-body2 { footer .font-body2 {
color: var(--primary-color); 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 */ /* Dialog */