mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-06-20 13:10:47 -04:00
implement auto_accept (#91) and manual unpairing via new Edit Paired Devices Dialog and a BrowserTabsConnector
This commit is contained in:
schlagmichdoch
parent
0ac3c5a11f
commit
241ea4f988
11 changed files with 1442 additions and 441 deletions
|
|
@ -19,6 +19,10 @@ body {
|
|||
overflow-x: hidden;
|
||||
overscroll-behavior: none;
|
||||
overflow-y: hidden;
|
||||
/* Only allow selection on message and pair key */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -215,6 +219,14 @@ hr {
|
|||
color: white;
|
||||
}
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
min-width: 13px;
|
||||
}
|
||||
|
||||
x-noscript {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
|
|
@ -273,7 +285,7 @@ x-noscript {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 425px) {
|
||||
header:has(#clear-pair-devices:not([hidden]))~#center {
|
||||
header:has(#edit-pair-devices:not([hidden]))~#center {
|
||||
--footer-height: 150px;
|
||||
}
|
||||
}
|
||||
|
|
@ -442,8 +454,6 @@ x-no-peers[drop-bg] * {
|
|||
/* Peer */
|
||||
|
||||
x-peer {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 8px;
|
||||
align-content: start;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -530,7 +540,6 @@ x-peer[status] x-icon {
|
|||
.status,
|
||||
.device-name,
|
||||
.connection-hash {
|
||||
height: 18px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -691,6 +700,12 @@ x-dialog x-paper {
|
|||
height: 625px;
|
||||
}
|
||||
|
||||
#pair-device-dialog ::-moz-selection,
|
||||
#pair-device-dialog ::selection {
|
||||
color: black;
|
||||
background: var(--paired-device-color);
|
||||
}
|
||||
|
||||
x-dialog:not([show]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -712,7 +727,7 @@ x-dialog .font-subheading {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* PairDevicesDialog */
|
||||
/* Pair Devices Dialog */
|
||||
|
||||
#key-input-container {
|
||||
width: 100%;
|
||||
|
|
@ -720,7 +735,7 @@ x-dialog .font-subheading {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#key-input-container>input {
|
||||
#key-input-container > input {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 30px;
|
||||
|
|
@ -736,15 +751,18 @@ x-dialog .font-subheading {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#key-input-container>input + * {
|
||||
#key-input-container > input + * {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#key-input-container>input:nth-of-type(4) {
|
||||
#key-input-container > input:nth-of-type(4) {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
#room-key {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
font-size: 50px;
|
||||
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
|
||||
display: inline-block;
|
||||
|
|
@ -756,14 +774,106 @@ x-dialog .font-subheading {
|
|||
margin: 16px;
|
||||
}
|
||||
|
||||
#pair-device-dialog hr {
|
||||
margin: 40px -24px;
|
||||
x-dialog hr {
|
||||
margin: 40px -24px 30px -24px;
|
||||
border: solid 1.25px var(--border-color);
|
||||
}
|
||||
|
||||
#pair-device-dialog x-background {
|
||||
padding: 16px!important;
|
||||
}
|
||||
|
||||
/* Edit Paired Devices Dialog */
|
||||
.paired-devices-wrapper:empty:before {
|
||||
content: "No paired devices.";
|
||||
}
|
||||
|
||||
.paired-devices-wrapper:empty {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.paired-devices-wrapper {
|
||||
border-top: solid 4px var(--paired-device-color);
|
||||
border-bottom: solid 4px var(--paired-device-color);
|
||||
max-height: 65vh;
|
||||
overflow: scroll;
|
||||
background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
|
||||
linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
|
||||
/* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .3), rgba(var(--text-color), 0)),
|
||||
radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .3), rgba(var(--text-color), 0)) 0 100%;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 80px, 100% 80px, 100% 24px, 100% 24px;
|
||||
|
||||
/* Opera doesn't support this in the shorthand */
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
}
|
||||
|
||||
.paired-device {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.paired-device:not(:last-child) {
|
||||
border-bottom: solid 4px var(--paired-device-color);
|
||||
}
|
||||
|
||||
.paired-device > .display-name,
|
||||
.paired-device > .device-name {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
border-bottom: solid 2px rgba(128, 128, 128, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
.paired-device span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paired-device > .button-wrapper {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paired-device > .button-wrapper > label,
|
||||
.paired-device > .button-wrapper > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.paired-device > .button-wrapper > :not(:last-child) {
|
||||
border-right: solid 1px rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
|
||||
.paired-device > .button-wrapper > :not(:first-child) {
|
||||
border-left: solid 1px rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
|
||||
.paired-device * {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.paired-device > .auto-accept {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Receive Dialog */
|
||||
|
||||
x-dialog .row {
|
||||
|
|
@ -812,7 +922,7 @@ x-paper > div:last-child > .button:not(:last-child) {
|
|||
}
|
||||
|
||||
/* Send Text Dialog */
|
||||
|
||||
/* Todo: add pair underline to send / receive dialogs displayName */
|
||||
x-dialog .dialog-subheader {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
|
@ -830,9 +940,9 @@ x-dialog .dialog-subheader {
|
|||
max-height: calc(100vh - 393px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
user-select: all;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
white-space: pre-wrap;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
|
@ -1034,8 +1144,6 @@ button::-moz-focus-inner {
|
|||
|
||||
#about x-background {
|
||||
position: absolute;
|
||||
top: calc(28px - 250px);
|
||||
right: calc(36px - 250px);
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -1178,23 +1286,6 @@ x-peers:empty~x-instructions {
|
|||
}
|
||||
}
|
||||
|
||||
#websocket-fallback {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
#websocket-fallback>span {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
#websocket-fallback > span > span {
|
||||
border-bottom: solid 4px var(--ws-peer-color);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media screen and (max-width: 360px) {
|
||||
x-dialog x-paper {
|
||||
|
|
@ -1337,3 +1428,9 @@ x-dialog x-paper {
|
|||
background: #bfbfbf;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-moz-selection,
|
||||
::selection {
|
||||
color: black;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue