mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-26 09:46:19 -04:00
Merge branch 'master' into translate
This commit is contained in:
schlagmichdoch
commit
16921cb855
12 changed files with 131 additions and 115 deletions
|
|
@ -35,6 +35,7 @@
|
|||
<meta property="og:image" content="images/logo_transparent_512x512.png">
|
||||
<!-- Resources -->
|
||||
<link rel="preload" href="lang/en.json" as="fetch">
|
||||
<link rel="preload" href="fonts/OpenSans/static/OpenSans-Medium.ttf" as="font" type="font/ttf" crossorigin>
|
||||
<link rel="stylesheet" type="text/css" href="styles/styles-main.css">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
|
|
@ -104,12 +105,12 @@
|
|||
<!-- Center -->
|
||||
<div id="center" class="opacity-0">
|
||||
<!-- Peers -->
|
||||
<x-peers class="center grow"></x-peers>
|
||||
<x-peers class="center grow-5"></x-peers>
|
||||
<x-no-peers class="center grow fade-in no-animation-on-load" data-i18n-key="instructions.no-peers" data-i18n-attrs="data-drop-bg">
|
||||
<h2 data-i18n-key="instructions.no-peers-title" data-i18n-attrs="text"></h2>
|
||||
<div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text"></div>
|
||||
</x-no-peers>
|
||||
<x-instructions class="fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
|
||||
<x-instructions class="grow fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
|
||||
<div class="shr-panel panel column" hidden>
|
||||
<div class="row">
|
||||
<div class="thumb center">
|
||||
|
|
@ -128,7 +129,7 @@
|
|||
</div>
|
||||
<div class="image-thumb" hidden></div>
|
||||
</div>
|
||||
<div class="share-descriptor column p1">
|
||||
<div class="share-descriptor column p-1">
|
||||
<span class="descriptor-item"></span>
|
||||
<span class="descriptor-other" hidden></span>
|
||||
</div>
|
||||
|
|
@ -179,7 +180,7 @@
|
|||
<x-dialog id="language-select-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="language-buttons p2">
|
||||
|
|
@ -276,10 +277,10 @@
|
|||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column">
|
||||
<div class="center key-qr-code pointer" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div>
|
||||
<h1 class="center key" dir="ltr">000 000</h1>
|
||||
|
|
@ -295,7 +296,7 @@
|
|||
<span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column fw">
|
||||
<div class="input-key-container six-chars" dir="ltr">
|
||||
<input type="tel" class="textarea center" aria-label="pair-key-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
|
||||
|
|
@ -321,7 +322,7 @@
|
|||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></div>
|
||||
|
|
@ -344,10 +345,10 @@
|
|||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column">
|
||||
<div class="center key-qr-code pointer" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div>
|
||||
<h1 class="center key" dir="ltr"></h1>
|
||||
|
|
@ -363,7 +364,7 @@
|
|||
<span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column fw">
|
||||
<div class="input-key-container" dir="ltr">
|
||||
<input type="text" class="textarea center" aria-label="room-id-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
|
||||
|
|
@ -390,10 +391,10 @@
|
|||
<x-dialog id="receive-request-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title"></h2>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column center file-description">
|
||||
<div>
|
||||
<span class="display-name badge"></span>
|
||||
|
|
@ -420,10 +421,10 @@
|
|||
<x-dialog id="receive-file-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title"></h2>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column center file-description">
|
||||
<div>
|
||||
<span class="display-name badge"></span>
|
||||
|
|
@ -452,10 +453,10 @@
|
|||
<form action="#">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="row center p2 display-name-wrapper">
|
||||
<div class="row center p-2 display-name-wrapper">
|
||||
<div class="column">
|
||||
<div class="text-center">
|
||||
<span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span>
|
||||
|
|
@ -463,7 +464,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p2">
|
||||
<div class="row p-2">
|
||||
<div class="column fw">
|
||||
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
|
||||
</div>
|
||||
|
|
@ -480,16 +481,16 @@
|
|||
<x-dialog id="receive-text-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="row center p2 display-name-wrapper">
|
||||
<div class="row center p-2 display-name-wrapper">
|
||||
<div class="text-center">
|
||||
<span class="display-name badge"></span>
|
||||
<span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<div class="column fw">
|
||||
<div id="text" class="textarea"></div>
|
||||
</div>
|
||||
|
|
@ -505,24 +506,24 @@
|
|||
<x-dialog id="share-text-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
|
||||
</div>
|
||||
<div class="row center p2 pb0">
|
||||
<div class="row center p-2 pb-0">
|
||||
<div class="column">
|
||||
<div class="text-center">
|
||||
<span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p2">
|
||||
<div class="row p-2">
|
||||
<div class="column fw">
|
||||
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p2 center">
|
||||
<span class="mx1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
|
||||
<label class="pointer switch mx1">
|
||||
<div class="row p-2 center">
|
||||
<span class="mx-1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
|
||||
<label class="pointer switch mx-1">
|
||||
<input type="checkbox">
|
||||
<div class="slider round"></div>
|
||||
</label>
|
||||
|
|
@ -537,10 +538,10 @@
|
|||
<x-dialog id="base64-paste-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<div class="row center p2">
|
||||
<div class="row center p-2">
|
||||
<h2 class="dialog-title"></h2>
|
||||
</div>
|
||||
<div class="row p2">
|
||||
<div class="row p-2">
|
||||
<button class="btn btn-rounded btn-grey center" id="base64-paste-btn" title="Paste"></button>
|
||||
<div class="textarea" title="CMD/⌘ + V" contenteditable hidden></div>
|
||||
</div>
|
||||
|
|
@ -576,7 +577,7 @@
|
|||
</svg>
|
||||
<div class="title-wrapper" dir="ltr">
|
||||
<h1>PairDrop</h1>
|
||||
<div class="font-subheading">v1.9.4</div>
|
||||
<div class="font-subheading">v1.10.0</div>
|
||||
</div>
|
||||
<div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text"></div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ class PairDrop {
|
|||
this.$headerInstallBtn = $('install');
|
||||
|
||||
this.deferredStyles = [
|
||||
"styles/deferred-styles.css"
|
||||
"styles/styles-deferred.css"
|
||||
];
|
||||
this.deferredScripts = [
|
||||
"scripts/browser-tabs-connector.js",
|
||||
|
|
|
|||
|
|
@ -125,9 +125,12 @@ class HeaderUI {
|
|||
}
|
||||
|
||||
async evaluateOverflowing() {
|
||||
// remove and reset bracket icon before evaluating
|
||||
// remove bracket icon before evaluating
|
||||
this.$expandBtn.setAttribute('hidden', true);
|
||||
// reset bracket icon rotation and header overflow
|
||||
this.$expandBtn.classList.add('flipped');
|
||||
this.$header.classList.remove('overflow-expanded');
|
||||
|
||||
|
||||
const rtlLocale = Localization.isCurrentLocaleRtl();
|
||||
let icon;
|
||||
|
|
@ -152,7 +155,7 @@ class HeaderUI {
|
|||
}
|
||||
else {
|
||||
// no overflowing
|
||||
// add overflowing-hidden class
|
||||
// remove overflowing-hidden class
|
||||
this.$header.classList.remove('overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
|
@ -169,6 +172,7 @@ class HeaderUI {
|
|||
this.$header.classList.remove('overflow-expanded');
|
||||
this.$expandBtn.classList.add('flipped');
|
||||
}
|
||||
Events.fire('header-changed');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ class PeersUI {
|
|||
Events.on('dragleave', _ => this._onDragEnd());
|
||||
Events.on('dragend', _ => this._onDragEnd());
|
||||
Events.on('resize', _ => this._evaluateOverflowingPeers());
|
||||
Events.on('header-changed', _ => this._evaluateOverflowingPeers());
|
||||
|
||||
Events.on('paste', e => this._onPaste(e));
|
||||
Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text));
|
||||
|
|
@ -277,22 +278,10 @@ class PeersUI {
|
|||
|
||||
if (files[0].type.split('/')[0] === 'image') {
|
||||
try {
|
||||
let image = files[0]
|
||||
let imageUrl = await getThumbnailAsDataUrl(files[0], 80, null, 0.9);
|
||||
|
||||
// Heic files can't be shown by browsers natively --> convert to jpeg
|
||||
if (image.type === "image/heif" || image.type === "image/heic") {
|
||||
let blob = await fileToBlob(image);
|
||||
image = await heic2any({
|
||||
blob,
|
||||
toType: "image/jpeg",
|
||||
quality: 0.9
|
||||
});
|
||||
}
|
||||
|
||||
let imageUrl = URL.createObjectURL(image);
|
||||
this.$shareModeImageThumb.style.backgroundImage = `url(${imageUrl})`;
|
||||
|
||||
await waitUntilImageIsLoaded(imageUrl);
|
||||
this.$shareModeImageThumb.removeAttribute('hidden');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -740,7 +729,7 @@ class Dialog {
|
|||
|
||||
hide() {
|
||||
this.$el.removeAttribute('show');
|
||||
if (!window.isMobile && this.$autoFocus) {
|
||||
if (!window.isMobile) {
|
||||
document.activeElement.blur();
|
||||
window.blur();
|
||||
}
|
||||
|
|
@ -1586,7 +1575,7 @@ class EditPairedDevicesDialog extends Dialog {
|
|||
<span class="center wrap">
|
||||
${autoAcceptString}
|
||||
</span>
|
||||
<label class="auto-accept switch pointer m1">
|
||||
<label class="auto-accept switch pointer m-1">
|
||||
<input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
|
||||
<div class="slider round"></div>
|
||||
</label>
|
||||
|
|
@ -2164,13 +2153,13 @@ class Base64Dialog extends Dialog {
|
|||
// ?base64text=hash#BASE64ENCODED
|
||||
// base64 encoded text is url hash which cannot be seen by the server and is faster (recommended)
|
||||
this.show();
|
||||
await this.processBase64Text(hash)
|
||||
await this.processBase64Text(hash);
|
||||
}
|
||||
else {
|
||||
// ?base64text=BASE64ENCODED
|
||||
// base64 encoded text is part of the url param. Seen by server and slow (not recommended)
|
||||
this.show();
|
||||
await this.processBase64Text(base64Text)
|
||||
await this.processBase64Text(base64Text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2185,7 +2174,7 @@ class Base64Dialog extends Dialog {
|
|||
else if (base64Zip === 'hash') {
|
||||
// ?base64zip=hash#BASE64ENCODED
|
||||
// base64 encoded zip file is url hash which cannot be seen by the server
|
||||
await this.processBase64Zip(hash)
|
||||
await this.processBase64Zip(hash);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2280,6 +2269,8 @@ class Base64Dialog extends Dialog {
|
|||
hide() {
|
||||
this.$pasteBtn.removeEventListener('click', _ => this._clickCallback());
|
||||
this.$fallbackTextarea.removeEventListener('input', _ => this._inputCallback());
|
||||
this.$fallbackTextarea.setAttribute('disabled', true);
|
||||
this.$fallbackTextarea.blur();
|
||||
super.hide();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const cacheVersion = 'v1.9.4';
|
||||
const cacheVersion = 'v1.10.0';
|
||||
const cacheTitle = `pairdrop-cache-${cacheVersion}`;
|
||||
const forceFetch = false; // FOR DEVELOPMENT: Set to true to always update assets instead of using cached versions
|
||||
const relativePathsToCache = [
|
||||
|
|
@ -6,7 +6,7 @@ const relativePathsToCache = [
|
|||
'index.html',
|
||||
'manifest.json',
|
||||
'styles/styles-main.css',
|
||||
'styles/deferred-styles.css',
|
||||
'styles/styles-deferred.css',
|
||||
'scripts/localization.js',
|
||||
'scripts/main.js',
|
||||
'scripts/network.js',
|
||||
|
|
|
|||
|
|
@ -672,19 +672,18 @@ x-dialog .dialog-subheader {
|
|||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.shr-panel .text-thumb svg {
|
||||
.shr-panel .thumb > .text-thumb > svg {
|
||||
width: 18px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.shr-panel .file-thumb svg {
|
||||
.shr-panel .thumb > .file-thumb > svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.shr-panel .thumb .image-thumb {
|
||||
.shr-panel .thumb > .image-thumb {
|
||||
background-size: cover;
|
||||
border-radius: 6px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
|
@ -30,24 +30,24 @@ html {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.p1 {
|
||||
.p-1 {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
.p-2 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pb0 {
|
||||
.pb-0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mx1 {
|
||||
.mx-1 {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.m1 {
|
||||
.m-1 {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -75,6 +75,11 @@ html {
|
|||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.grow-5 {
|
||||
display: flex;
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
.shrink {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
|
|
@ -138,6 +143,7 @@ header {
|
|||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
header.overflow-hidden {
|
||||
|
|
@ -193,19 +199,26 @@ header * {
|
|||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#theme-wrapper:hover .icon-button:not(.selected):hover:before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#theme-wrapper:hover .icon-button.selected::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
#theme-wrapper:hover .icon-button.selected:hover::before {
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
#theme-wrapper:hover .icon-button:not(.selected):hover:before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#theme-wrapper:hover .icon-button.selected::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
#theme-wrapper:before {
|
||||
opacity: 0.3 !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
#theme-wrapper .icon-button:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#theme-wrapper .icon-button:not(.selected) {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -239,6 +252,7 @@ html[dir="rtl"] #expand.flipped > .icon {
|
|||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url('../fonts/OpenSans/static/OpenSans-Medium.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -830,9 +844,11 @@ x-instructions {
|
|||
position: relative;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
margin: 50px 10px 0px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
min-height: max(6vh, 40px);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
x-instructions:not([drop-peer]):not([drop-bg]):before {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue