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

Revert some "airy" changes and rewrite style sheets to make dialogs centered but scrollable on small screens; Brighten public-room-color slightly

Browse source
This commit is contained in:
schlagmichdoch 2023-11-29 17:42:19 +01:00
parent a8242cecf7
commit 69c8b91239
4 changed files with 58 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

68
public/index.html
View file

@ -166,9 +166,9 @@
<span data-i18n-key="footer.discovery" data-i18n-attrs="text"></span> <span data-i18n-key="footer.discovery" data-i18n-attrs="text"></span>
</div> </div>
<div class="row center"> <div class="row center">
<span class="badge badge-gradient badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span> <span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span>
<span class="badge badge-gradient badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span> <span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span>
<span class="badge badge-gradient badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span> <span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
</div> </div>
</div> </div>
</div> </div>
@ -177,8 +177,8 @@
<x-dialog id="language-select-dialog"> <x-dialog id="language-select-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<h2 class="center" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="language-buttons"> <div class="language-buttons">
<button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button> <button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button>
@ -262,10 +262,10 @@
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<h2 class="center" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center"> <div class="row center p1">
<div class="column"> <div class="column">
<div class="center key-qr-code" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div> <div class="center key-qr-code" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div>
<h1 class="center key" dir="ltr">000 000</h1> <h1 class="center key" dir="ltr">000 000</h1>
@ -281,7 +281,7 @@
<span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
<div class="row center"> <div class="row center p1">
<div class="column fw"> <div class="column fw">
<div class="input-key-container six-chars" dir="ltr"> <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> <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>
@ -307,8 +307,8 @@
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<h2 class="center" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></div> <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></div>
<div class="font-subheading center"> <div class="font-subheading center">
@ -330,12 +330,10 @@
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<div class="column"> <h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
<h2 class="center" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
</div>
</div> </div>
<div class="row center"> <div class="row center p1">
<div class="column"> <div class="column">
<div class="center key-qr-code" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div> <div class="center key-qr-code" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div>
<h1 class="center key" dir="ltr"></h1> <h1 class="center key" dir="ltr"></h1>
@ -351,7 +349,7 @@
<span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
<div class="row center"> <div class="row center p1">
<div class="column fw"> <div class="column fw">
<div class="input-key-container" dir="ltr"> <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> <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>
@ -376,15 +374,13 @@
<x-dialog id="receive-request-dialog"> <x-dialog id="receive-request-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<div class="column"> <h2 class="dialog-title"></h2>
<h2 class="center"></h2>
</div>
</div> </div>
<div class="row center p1"> <div class="row center p1">
<div class="column center file-description"> <div class="column center file-description">
<div> <div>
<span class="display-name badge badge-gradient"></span> <span class="display-name badge"></span>
<span data-i18n-key="dialogs.would-like-to-share" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.would-like-to-share" data-i18n-attrs="text"></span>
</div> </div>
<div class="row file-name"> <div class="row file-name">
@ -408,15 +404,13 @@
<x-dialog id="receive-file-dialog"> <x-dialog id="receive-file-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<div class="column"> <h2 class="dialog-title"></h2>
<h2 class="center"></h2>
</div>
</div> </div>
<div class="row center p1"> <div class="row center p1">
<div class="column center file-description"> <div class="column center file-description">
<div> <div>
<span class="display-name badge badge-gradient"></span> <span class="display-name badge"></span>
<span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
</div> </div>
<div class="row file-name"> <div class="row file-name">
@ -442,16 +436,14 @@
<form action="#"> <form action="#">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<div class="column"> <h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
<h2 class="center" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
</div>
</div> </div>
<div class="row center p1 display-name-wrapper"> <div class="row center p1 display-name-wrapper">
<div class="column"> <div class="column">
<div class="text-center"> <div class="text-center">
<span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span>
<span class="display-name badge badge-gradient"></span> <span class="display-name badge"></span>
</div> </div>
</div> </div>
</div> </div>
@ -472,12 +464,12 @@
<x-dialog id="receive-text-dialog"> <x-dialog id="receive-text-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<h2 class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p1 display-name-wrapper"> <div class="row center p1 display-name-wrapper">
<div class="text-center"> <div class="text-center">
<span class="display-name badge badge-gradient"></span> <span class="display-name badge"></span>
<span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
@ -497,10 +489,8 @@
<x-dialog id="share-text-dialog"> <x-dialog id="share-text-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center"> <div class="row center p1">
<div class="column"> <h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
<h2 class="center" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
</div>
</div> </div>
<div class="row center p1"> <div class="row center p1">
<div class="column"> <div class="column">

16
public/scripts/ui.js
View file

@ -688,10 +688,13 @@ class PeerUI {
class Dialog { class Dialog {
constructor(id) { constructor(id) {
this.$el = $(id); this.$el = $(id);
this.$el.querySelectorAll('[close]').forEach(el => { this.$autoFocus = this.$el.querySelector('[autofocus]');
this.$xBackground = this.$el.querySelector('x-background');
this.$closeBtns = this.$el.querySelectorAll('[close]');
this.$closeBtns.forEach(el => {
el.addEventListener('click', _ => this.hide()) el.addEventListener('click', _ => this.hide())
}); });
this.$autoFocus = this.$el.querySelector('[autofocus]');
Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail)); Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
} }
@ -701,8 +704,15 @@ class Dialog {
} }
show() { show() {
if (this.$xBackground) {
this.$xBackground.scrollTop = 0;
}
this.$el.setAttribute('show', true); this.$el.setAttribute('show', true);
if (!window.isMobile && this.$autoFocus) this.$autoFocus.focus();
if (!window.isMobile && this.$autoFocus) {
this.$autoFocus.focus();
}
} }
isShown() { isShown() {

36
public/styles/deferred-styles.css
View file

@ -13,7 +13,7 @@
overflow: auto; overflow: auto;
resize: none; resize: none;
line-height: 16px; line-height: 16px;
max-height: 300px; max-height: 350px;
word-break: break-word; word-break: break-word;
word-wrap: anywhere; word-wrap: anywhere;
} }
@ -276,38 +276,30 @@ x-dialog x-background {
z-index: 30; z-index: 30;
transition: opacity 300ms; transition: opacity 300ms;
will-change: opacity; will-change: opacity;
overflow: overlay; padding: 10px 5px 20px;
overflow: scroll
} }
x-dialog x-paper { x-dialog x-paper {
position: relative;
display: flex; display: flex;
margin: auto;
flex-direction: column; flex-direction: column;
width: calc(100vw - 10px); width: 400px;
z-index: 3; z-index: 3;
border-radius: 30px; border-radius: 30px;
max-width: 400px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
transition: transform 300ms; transition: transform 300ms;
will-change: transform; will-change: transform;
} }
#pair-device-dialog x-paper,
#edit-paired-devices-dialog x-paper,
#public-room-dialog x-paper,
#language-select-dialog x-paper {
position: absolute;
top: max(50%, 350px);
margin-top: -328.5px;
}
x-paper > .row:first-of-type { x-paper > .row:first-of-type {
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
x-paper > .row:first-of-type h2 { x-paper .dialog-title {
color: white; color: white;
} }
@ -383,15 +375,15 @@ x-dialog a {
user-select: text; user-select: text;
display: inline-block; display: inline-block;
font-size: 45px; font-size: 45px;
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 20px); letter-spacing: 18px;
text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 28px))); text-indent: 15px;
margin: 10px 0; margin: 10px 0;
} }
.key-qr-code { .key-qr-code {
width: fit-content; width: fit-content;
align-self: center; align-self: center;
margin-top: 15px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -413,8 +405,8 @@ x-dialog hr {
} }
.hr-note { .hr-note {
margin-top: 23px; margin-top: 13px;
margin-bottom: 31px; margin-bottom: 21px;
} }
.hr-note hr { .hr-note hr {
@ -436,10 +428,6 @@ x-dialog hr {
text-transform: uppercase; text-transform: uppercase;
} }
#pair-device-dialog x-background {
padding: 16px!important;
}
/* Edit Paired Devices Dialog */ /* Edit Paired Devices Dialog */
.paired-devices-wrapper:empty:before { .paired-devices-wrapper:empty:before {
content: attr(data-empty); content: attr(data-empty);

12
public/styles/styles-main.css
View file

@ -181,7 +181,7 @@ h1 {
} }
h2 { h2 {
font-size: 24px; font-size: 22px;
font-weight: 400; font-weight: 400;
letter-spacing: -.012em; letter-spacing: -.012em;
line-height: 32px; line-height: 32px;
@ -434,10 +434,6 @@ footer .logo {
white-space: nowrap; white-space: nowrap;
} }
.badge-gradient {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 80%, white) 0%, var(--badge-color) 50%);
}
.badge-room-ip { .badge-room-ip {
--badge-color: var(--primary-color); --badge-color: var(--primary-color);
} }
@ -840,7 +836,7 @@ body {
/* Constant colors */ /* Constant colors */
--primary-color: #4285f4; --primary-color: #4285f4;
--paired-device-color: #00a69c; --paired-device-color: #00a69c;
--public-room-color: #db8500; --public-room-color: #ed9d01;
--accent-color: var(--primary-color); --accent-color: var(--primary-color);
--ws-peer-color: #ff6b6b; --ws-peer-color: #ff6b6b;
--btn-disabled-color: #5B5B66; --btn-disabled-color: #5B5B66;
@ -867,7 +863,7 @@ body {
/* Dark theme colors */ /* Dark theme colors */
body.dark-theme { body.dark-theme {
--text-color: 238,238,238; --text-color: 238,238,238;
--dialog-bg-color: #121212; --dialog-bg-color: #141414;
--bg-color: 0,0,0; --bg-color: 0,0,0;
--bg-color-secondary: #262628; --bg-color-secondary: #262628;
--border-color: rgb(91, 91, 91); --border-color: rgb(91, 91, 91);
@ -885,7 +881,7 @@ body.dark-theme {
/* defaults to dark theme */ /* defaults to dark theme */
body { body {
--text-color: 238,238,238; --text-color: 238,238,238;
--dialog-bg-color: #121212; --dialog-bg-color: #141414;
--bg-color-secondary: #262628; --bg-color-secondary: #262628;
--bg-color: 0,0,0; --bg-color: 0,0,0;
--border-color: rgb(91, 91, 91); --border-color: rgb(91, 91, 91);