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

- Fix theme-wrapper size on touch devices

Browse source 
- Make x-instructor shrinkable on small screens
- Evaluate x-Peers overflow when header expand button is clicked
- Refactor padding/margin classnames
This commit is contained in:
schlagmichdoch 2023-12-12 13:39:55 +01:00
parent 1f1e029071
commit a5cc115fa6
4 changed files with 69 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

58
public/index.html
View file

@ -104,12 +104,12 @@
<!-- Center --> <!-- Center -->
<div id="center" class="opacity-0"> <div id="center" class="opacity-0">
<!-- Peers --> <!-- 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"> <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> <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> <div data-i18n-key="instructions.no-peers-subtitle" data-i18n-attrs="text"></div>
</x-no-peers> </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="shr-panel panel column" hidden>
<div class="row"> <div class="row">
<div class="thumb center"> <div class="thumb center">
@ -128,7 +128,7 @@
</div> </div>
<div class="image-thumb" hidden></div> <div class="image-thumb" hidden></div>
</div> </div>
<div class="share-descriptor column p1"> <div class="share-descriptor column p-1">
<span class="descriptor-item"></span> <span class="descriptor-item"></span>
<span class="descriptor-other" hidden></span> <span class="descriptor-other" hidden></span>
</div> </div>
@ -179,7 +179,7 @@
<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 p2"> <div class="row center p-2">
<h2 class="dialog-title" 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">
@ -264,10 +264,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 p2"> <div class="row center p-2">
<h2 class="dialog-title" 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 p2"> <div class="row center p-2">
<div class="column"> <div class="column">
<div class="center key-qr-code pointer" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div> <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> <h1 class="center key" dir="ltr">000 000</h1>
@ -283,7 +283,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 p2"> <div class="row center p-2">
<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>
@ -309,7 +309,7 @@
<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 p2"> <div class="row center p-2">
<h2 class="dialog-title" 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>
@ -332,10 +332,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 p2"> <div class="row center p-2">
<h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p2"> <div class="row center p-2">
<div class="column"> <div class="column">
<div class="center key-qr-code pointer" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div> <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> <h1 class="center key" dir="ltr"></h1>
@ -351,7 +351,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 p2"> <div class="row center p-2">
<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>
@ -378,10 +378,10 @@
<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 p2"> <div class="row center p-2">
<h2 class="dialog-title"></h2> <h2 class="dialog-title"></h2>
</div> </div>
<div class="row center p2"> <div class="row center p-2">
<div class="column center file-description"> <div class="column center file-description">
<div> <div>
<span class="display-name badge"></span> <span class="display-name badge"></span>
@ -408,10 +408,10 @@
<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 p2"> <div class="row center p-2">
<h2 class="dialog-title"></h2> <h2 class="dialog-title"></h2>
</div> </div>
<div class="row center p2"> <div class="row center p-2">
<div class="column center file-description"> <div class="column center file-description">
<div> <div>
<span class="display-name badge"></span> <span class="display-name badge"></span>
@ -440,10 +440,10 @@
<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 p2"> <div class="row center p-2">
<h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p2 display-name-wrapper"> <div class="row center p-2 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>
@ -451,7 +451,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row p2"> <div class="row p-2">
<div class="column fw"> <div class="column fw">
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div> <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
</div> </div>
@ -468,16 +468,16 @@
<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 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> <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 p2 display-name-wrapper"> <div class="row center p-2 display-name-wrapper">
<div class="text-center"> <div class="text-center">
<span class="display-name badge"></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>
<div class="row center p2"> <div class="row center p-2">
<div class="column fw"> <div class="column fw">
<div id="text" class="textarea"></div> <div id="text" class="textarea"></div>
</div> </div>
@ -493,24 +493,24 @@
<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 p2"> <div class="row center p-2">
<h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p2 pb0"> <div class="row center p-2 pb-0">
<div class="column"> <div class="column">
<div class="text-center"> <div class="text-center">
<span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="row p2"> <div class="row p-2">
<div class="column fw"> <div class="column fw">
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div> <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div>
</div> </div>
</div> </div>
<div class="row p2 center"> <div class="row p-2 center">
<span class="mx1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span> <span class="mx-1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
<label class="pointer switch mx1"> <label class="pointer switch mx-1">
<input type="checkbox"> <input type="checkbox">
<div class="slider round"></div> <div class="slider round"></div>
</label> </label>
@ -525,10 +525,10 @@
<x-dialog id="base64-paste-dialog"> <x-dialog id="base64-paste-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center p2"> <div class="row center p-2">
<h2 class="dialog-title"></h2> <h2 class="dialog-title"></h2>
</div> </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> <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 class="textarea" title="CMD/⌘ + V" contenteditable hidden></div>
</div> </div>

8
public/scripts/ui-main.js
View file

@ -125,9 +125,12 @@ class HeaderUI {
} }
async evaluateOverflowing() { async evaluateOverflowing() {
// remove and reset bracket icon before evaluating // remove bracket icon before evaluating
this.$expandBtn.setAttribute('hidden', true); this.$expandBtn.setAttribute('hidden', true);
// reset bracket icon rotation and header overflow
this.$expandBtn.classList.add('flipped'); this.$expandBtn.classList.add('flipped');
this.$header.classList.remove('overflow-expanded');
const rtlLocale = Localization.isCurrentLocaleRtl(); const rtlLocale = Localization.isCurrentLocaleRtl();
let icon; let icon;
@ -152,7 +155,7 @@ class HeaderUI {
} }
else { else {
// no overflowing // no overflowing
// add overflowing-hidden class // remove overflowing-hidden class
this.$header.classList.remove('overflow-hidden'); this.$header.classList.remove('overflow-hidden');
} }
} }
@ -169,6 +172,7 @@ class HeaderUI {
this.$header.classList.remove('overflow-expanded'); this.$header.classList.remove('overflow-expanded');
this.$expandBtn.classList.add('flipped'); this.$expandBtn.classList.add('flipped');
} }
Events.fire('header-changed');
} }
} }

3
public/scripts/ui.js
View file

@ -37,6 +37,7 @@ class PeersUI {
Events.on('dragleave', _ => this._onDragEnd()); Events.on('dragleave', _ => this._onDragEnd());
Events.on('dragend', _ => this._onDragEnd()); Events.on('dragend', _ => this._onDragEnd());
Events.on('resize', _ => this._evaluateOverflowingPeers()); Events.on('resize', _ => this._evaluateOverflowingPeers());
Events.on('header-changed', _ => this._evaluateOverflowingPeers());
Events.on('paste', e => this._onPaste(e)); Events.on('paste', e => this._onPaste(e));
Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text)); Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text));
@ -1586,7 +1587,7 @@ class EditPairedDevicesDialog extends Dialog {
<span class="center wrap"> <span class="center wrap">
${autoAcceptString} ${autoAcceptString}
</span> </span>
<label class="auto-accept switch pointer m1"> <label class="auto-accept switch pointer m-1">
<input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}> <input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
<div class="slider round"></div> <div class="slider round"></div>
</label> </label>

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

@ -30,24 +30,24 @@ html {
width: 100%; width: 100%;
} }
.p1 { .p-1 {
padding: 5px; padding: 5px;
} }
.p2 { .p-2 {
padding: 10px; padding: 10px;
} }
.pb0 { .pb-0 {
padding-bottom: 0; padding-bottom: 0;
} }
.mx1 { .mx-1 {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
.m1 { .m-1 {
margin: 5px; margin: 5px;
} }
@ -75,6 +75,11 @@ html {
flex-grow: 2; flex-grow: 2;
} }
.grow-5 {
display: flex;
flex-grow: 5;
}
.shrink { .shrink {
display: flex; display: flex;
flex-shrink: 1; flex-shrink: 1;
@ -138,6 +143,7 @@ header {
z-index: 20; z-index: 20;
top: 0; top: 0;
right: 0; right: 0;
min-height: 56px;
} }
header.overflow-hidden { header.overflow-hidden {
@ -193,17 +199,24 @@ header * {
margin-bottom: 8px; margin-bottom: 8px;
} }
#theme-wrapper:hover .icon-button:not(.selected):hover:before { @media (hover: hover) and (pointer: fine) {
#theme-wrapper:hover .icon-button:not(.selected):hover:before {
opacity: 0.3; opacity: 0.3;
}
#theme-wrapper:hover .icon-button.selected::before {
opacity: 0.3;
}
} }
#theme-wrapper:hover .icon-button.selected::before { @media (hover: none) and (pointer: coarse) {
opacity: 0.3; #theme-wrapper:before {
} opacity: 0.3 !important;
height: 40px !important;
}
@media (pointer: coarse) { #theme-wrapper .icon-button:before {
#theme-wrapper:hover .icon-button.selected:hover::before { opacity: 0;
opacity: 0.3;
} }
#theme-wrapper .icon-button:not(.selected) { #theme-wrapper .icon-button:not(.selected) {
@ -830,9 +843,11 @@ x-instructions {
position: relative; position: relative;
opacity: 0.5; opacity: 0.5;
text-align: center; text-align: center;
margin: 50px 10px 0px; margin-right: 10px;
margin-left: 10px;
min-height: max(6vh, 40px);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: end;
} }
x-instructions:not([drop-peer]):not([drop-bg]):before { x-instructions:not([drop-peer]):not([drop-bg]):before {