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

Make displayName field more intuitive by collapsing it when focussed and empty. (fixes #319)

Browse source
This commit is contained in:
schlagmichdoch 2024-08-07 15:23:51 +02:00
parent 794e6304fe
commit 43c346894d
2 changed files with 22 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -201,8 +201,8 @@ class FooterUI {
this.$discoveryWrapper = $$('footer .discovery-wrapper'); this.$discoveryWrapper = $$('footer .discovery-wrapper');
this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e)); this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e)); this.$displayName.addEventListener('focus', e => this._onFocusDisplayName(e));
this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText)); this.$displayName.addEventListener('blur', e => this._onBlurDisplayName(e));
Events.on('display-name', e => this._onDisplayName(e.detail.displayName)); Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail)); Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
@ -259,9 +259,23 @@ class FooterUI {
} }
} }
_onKeyUpDisplayName(e) { _onFocusDisplayName(e) {
if (!e.target.innerText) {
// Fix z-position of cursor when div is completely empty (Firefox only)
e.target.innerText = "\n";
// On Chromium based browsers the cursor position is lost when adding sth. to the focused node. This adds it back.
let sel = window.getSelection();
sel.collapse(e.target.lastChild);
}
}
async _onBlurDisplayName(e) {
// fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = ''; if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) {
e.target.innerText = '';
}
await this._saveDisplayName(e.target.innerText)
} }
async _saveDisplayName(newDisplayName) { async _saveDisplayName(newDisplayName) {

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

@ -557,6 +557,10 @@ footer .logo {
position: relative; position: relative;
} }
#display-name:focus::before {
display: none;
}
html:not([dir="rtl"]) #display-name, html:not([dir="rtl"]) #display-name,
html:not([dir="rtl"]) .edit-pen { html:not([dir="rtl"]) .edit-pen {
margin-left: -1rem; margin-left: -1rem;