Increase text input font size to 16px to prevent automatic zooming on iOS devices; Remove spellcheck and autocapitalize prevention and change receive text style

This commit is contained in:
schlagmichdoch 2023-11-20 05:27:22 +01:00
parent ddeafd1b46
commit f53832ead1
4 changed files with 21 additions and 14 deletions

View file

@ -418,7 +418,7 @@
</div>
<div class="row">
<div class="column fw">
<div id="text-input" class="textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div id="text-input" class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
</div>
</div>
<div class="button-row row-reverse">
@ -444,7 +444,7 @@
</div>
<div class="row center">
<div class="column fw">
<div id="text" class="textarea fw"></div>
<div id="text" class="fw"></div>
</div>
</div>
<div class="row-reverse center button-row">

View file

@ -71,6 +71,7 @@
"send-message-title": "Send Message",
"send-message-to": "Send a Message to",
"message_title": "Insert message to send",
"message_placeholder": "Message",
"send": "Send",
"receive-text-title": "Message Received",
"copy": "Copy",

View file

@ -434,7 +434,7 @@ class PeerUI {
<div class="name font-subheading"></div>
<div class="device-name font-body2"></div>
<div class="status font-body2"></div>
<span class="connection-hash font-body2" dir="ltr" title="${ Localization.getTranslation("peer-ui.connection-hash") }"></span>
<div class="connection-hash font-body2" dir="ltr" title="${ Localization.getTranslation("peer-ui.connection-hash") }"></div>
</div>
</label>`;
@ -1796,6 +1796,8 @@ class SendTextDialog extends Dialog {
_onChange(e) {
if (this._textInputEmpty()) {
this.$submit.setAttribute('disabled', '');
// remove remaining whitespace on Firefox on text deletion
this.$text.innerText = "";
} else {
this.$submit.removeAttribute('disabled');
}

View file

@ -558,12 +558,10 @@ x-peer[status] x-icon {
}
.device-name {
font-size: 14px;
white-space: nowrap;
}
.connection-hash {
font-size: 12px;
white-space: nowrap;
}
@ -615,7 +613,7 @@ footer .logo {
}
.discovery-wrapper {
font-size: 12px;
font-size: 14px;
margin: 10px auto auto;
border: 3px solid var(--border-color);
border-radius: 0.5rem;
@ -662,6 +660,10 @@ footer .logo {
border-color: var(--public-room-color);
}
.known-as-wrapper {
font-size: 16px; /* prevents auto-zoom on edit */
}
#display-name {
position: relative;
display: inline-block;
@ -1036,23 +1038,25 @@ x-dialog .dialog-subheader {
padding-bottom: 0;
}
#text-input {
min-height: 200px;
width: 100%;
#send-text-dialog,
#receive-text-dialog {
font-size: 16px; /* prevents auto-zoom on edit */
}
#text-input:before {
opacity: 0.5;
}
/* Receive Text Dialog */
#receive-text-dialog #text {
width: 100%;
word-break: break-all;
max-height: calc(100vh - 393px);
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
overflow-y: scroll;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
white-space: pre-wrap;
}
#receive-text-dialog #text a {
@ -1202,7 +1206,7 @@ button::-moz-focus-inner {
outline: none;
padding: 16px 24px;
border-radius: 8px;
font-size: 14px;
font-size: inherit;
font-family: inherit;
background: #f1f3f4;
display: block;