diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index dfceae52..68c7942a 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -5,7 +5,7 @@ import appStateManager from "../lib/appManagers/appStateManager"; import apiManager from "../lib/mtproto/mtprotoworker"; import { App, Modes } from "../lib/mtproto/mtproto_config"; import { RichTextProcessor } from '../lib/richtextprocessor'; -import { findUpTag } from "../helpers/dom"; +import { findUpTag, findUpClassName } from "../helpers/dom"; import Page from "./page"; import pageAuthCode from "./pageAuthCode"; import pageSignQR from './pageSignQR'; @@ -13,6 +13,8 @@ import InputField from "../components/inputField"; import CheckboxField from "../components/checkbox"; import Button from "../components/button"; import { isAppleMobile } from "../helpers/userAgent"; +import fastSmoothScroll from "../helpers/fastSmoothScroll"; +import { isTouchSupported } from "../helpers/touchSupport"; type Country = _Country & { li?: HTMLLIElement[] @@ -144,15 +146,46 @@ let onFirstMount = () => { selectWrapper.classList.remove('hide'); void selectWrapper.offsetWidth; // reflow selectWrapper.classList.add('active'); + + if(countryInput.value) { + countryInput.select(); // * select text + } + + fastSmoothScroll(page.pageEl.parentElement.parentElement, countryInput, 'start', 4); + + setTimeout(() => { + if(!mouseDownHandlerAttached) { + document.addEventListener('mousedown', onMouseDown, {capture: true}); + mouseDownHandlerAttached = true; + } + }, 0); }); - countryInput.addEventListener('blur', function(this: typeof countryInput, e) { + + let mouseDownHandlerAttached = false; + const onMouseDown = (e: MouseEvent) => { + /* if(findUpClassName(e.target, 'input-select')) { + return; + } */ + if(e.target === countryInput) { + return; + } + + hidePicker(); + document.removeEventListener('mousedown', onMouseDown, {capture: true}); + mouseDownHandlerAttached = false; + }; + + const hidePicker = () => { selectWrapper.classList.remove('active'); hideTimeout = window.setTimeout(() => { selectWrapper.classList.add('hide'); }, 200); + }; + /* false && countryInput.addEventListener('blur', function(this: typeof countryInput, e) { + hidePicker(); e.cancelBubble = true; - }, {capture: true}); + }, {capture: true}); */ countryInput.addEventListener('keyup', function(this: typeof countryInput, e) { if(e.ctrlKey || e.key == 'Control') return false; @@ -360,6 +393,12 @@ let onFirstMount = () => { })//.catch(tryAgain); }; + if(!isTouchSupported) { + setTimeout(() => { + telEl.focus(); + }, 0); + } + tryAgain(); }; diff --git a/src/scss/partials/pages/_pages.scss b/src/scss/partials/pages/_pages.scss index c1d4b654..c3c19815 100644 --- a/src/scss/partials/pages/_pages.scss +++ b/src/scss/partials/pages/_pages.scss @@ -40,10 +40,12 @@ min-height: 3rem; /* height: 105px; */ width: 100%; + } - /* @media screen and (min-height: 810px) { - height: 22vh; - } */ + @media screen and (max-height: 810px) { + &:after { + display: none; + } } } @@ -84,6 +86,10 @@ flex: 1 1 auto; display: flex; flex-direction: column; + + @media screen and (max-height: 810px) { + height: 700px; + } } } } @@ -201,4 +207,10 @@ .input-field { text-align: center; } +} + +.page-sign { + .btn-primary { + margin-top: 1.1875rem; // * verified with mockup + } } \ No newline at end of file