From 71c69f5e97539ad2dcbf191b2027aee7a6aae19c Mon Sep 17 00:00:00 2001 From: aryanshridhar Date: Mon, 16 Nov 2020 23:50:47 +0530 Subject: [PATCH 1/5] server_form: Added autocomplete function to url. Autocompletes when the user passes only org url, in the server url input. Fixes #1012 --- .../js/pages/preference/new-server-form.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/app/renderer/js/pages/preference/new-server-form.ts b/app/renderer/js/pages/preference/new-server-form.ts index 2d7fe4db7..1b7fec31c 100644 --- a/app/renderer/js/pages/preference/new-server-form.ts +++ b/app/renderer/js/pages/preference/new-server-form.ts @@ -60,7 +60,9 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { $saveServerButton.textContent = "Connecting..."; let serverConf; try { - serverConf = await DomainUtil.checkDomain($newServerUrl.value.trim()); + serverConf = await DomainUtil.checkDomain( + await autoComplete($newServerUrl.value.trim()), + ); } catch (error: unknown) { $saveServerButton.textContent = "Connect"; await dialog.showMessageBox({ @@ -78,6 +80,17 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { onChange(); } + async function autoComplete(url: string): Promise { + const pattern = /^[a-zA-Z\d-]*$/; + let serverUrl = url.trim(); + + if (pattern.test(serverUrl)) { + serverUrl = "https://" + serverUrl + ".zulipchat.com"; + } + + return serverUrl; + } + $saveServerButton.addEventListener("click", async () => { await submitFormHandler(); }); From 2ecc9d5a842d193d27429039c739f3f3bd2fa4d6 Mon Sep 17 00:00:00 2001 From: manila <3621543+manila@users.noreply.github.com> Date: Mon, 18 Apr 2022 21:01:46 -0700 Subject: [PATCH 2/5] new_server_form: Add autocomplete domain in new server form input. --- app/renderer/css/preference.css | 27 ++++++++++++++- .../js/pages/preference/new-server-form.ts | 33 +++++++++++++++---- 2 files changed, 53 insertions(+), 7 deletions(-) diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css index 89f1c0436..c8a79c498 100644 --- a/app/renderer/css/preference.css +++ b/app/renderer/css/preference.css @@ -238,7 +238,8 @@ img.server-info-icon { max-width: 450px; } -.setting-input-value:focus { +.setting-input-value:focus, +label.setting-input-value:focus-within { border: rgb(78 191 172 / 100%) 2px solid; } @@ -246,6 +247,30 @@ img.server-info-icon { border: rgb(239 83 80 / 100%) 2px solid; } +.setting-input-add-server, +.add-server-domain, +.server-url-size-calc { + outline: 0; + margin: 0; + padding: 0; + border: 0; + float: left; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; + background: inherit; +} + +.setting-input-add-server { + color: rgb(34 44 49 / 100%); +} + +.server-url-size-calc { + visibility: hidden; + height: 0; +} + .manual-proxy-block { width: 96%; } diff --git a/app/renderer/js/pages/preference/new-server-form.ts b/app/renderer/js/pages/preference/new-server-form.ts index 1b7fec31c..128d4eeac 100644 --- a/app/renderer/js/pages/preference/new-server-form.ts +++ b/app/renderer/js/pages/preference/new-server-form.ts @@ -17,11 +17,16 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
${t.__("Organization URL")}
- +
@@ -53,8 +58,15 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { $root.textContent = ""; $root.append($newServerForm); const $newServerUrl: HTMLInputElement = $newServerForm.querySelector( - "input.setting-input-value", + "input.setting-input-add-server", )!; + const $serverDomain: HTMLSpanElement = $newServerForm.querySelector( + "span.add-server-domain", + )!; + const $urlSizeCalc: HTMLSpanElement = $newServerForm.querySelector( + "span.server-url-size-calc", + )!; + const urlValidationPattern = /^[a-zA-Z\d-]*$/; async function submitFormHandler(): Promise { $saveServerButton.textContent = "Connecting..."; @@ -99,6 +111,15 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { await submitFormHandler(); } }); + $newServerUrl.addEventListener("input", async () => { + const url = $newServerUrl.value; + $urlSizeCalc.textContent = url; + $newServerUrl.style.width = `${$urlSizeCalc.offsetWidth}px`; + + $serverDomain.textContent = urlValidationPattern.test(url) + ? ".zulipchat.com" + : ""; + }); // Open create new org link in default browser const link = "https://zulip.com/new/"; From 4081195058ba033fdecf56b049cb70b18591be82 Mon Sep 17 00:00:00 2001 From: manila <3621543+manila@users.noreply.github.com> Date: Thu, 5 May 2022 20:21:17 -0700 Subject: [PATCH 3/5] new_server_form: Move inline styles to preference.css stylesheet. Fixes: #1012 --- app/renderer/css/preference.css | 1 + app/renderer/js/pages/preference/new-server-form.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css index c8a79c498..146a49b0b 100644 --- a/app/renderer/css/preference.css +++ b/app/renderer/css/preference.css @@ -263,6 +263,7 @@ label.setting-input-value:focus-within { } .setting-input-add-server { + width: 34ch; color: rgb(34 44 49 / 100%); } diff --git a/app/renderer/js/pages/preference/new-server-form.ts b/app/renderer/js/pages/preference/new-server-form.ts index 128d4eeac..20f641b9d 100644 --- a/app/renderer/js/pages/preference/new-server-form.ts +++ b/app/renderer/js/pages/preference/new-server-form.ts @@ -22,7 +22,6 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { class="setting-input-add-server" autofocus placeholder="your-organization.zulipchat.com" - style="width: 34ch" /> From 32d5d984cd81b1adf8c2426c3599c9e0b5f5c84f Mon Sep 17 00:00:00 2001 From: manila <3621543+manila@users.noreply.github.com> Date: Fri, 6 May 2022 01:18:29 -0700 Subject: [PATCH 4/5] preference.css: Add style to greyout uneditable part of autocompleted url when input focused. --- app/renderer/css/preference.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css index 146a49b0b..dbc79d467 100644 --- a/app/renderer/css/preference.css +++ b/app/renderer/css/preference.css @@ -258,13 +258,16 @@ label.setting-input-value:focus-within { font-family: inherit; font-size: inherit; line-height: inherit; - color: inherit; + color: rgb(34 44 49 / 100%); background: inherit; } .setting-input-add-server { width: 34ch; - color: rgb(34 44 49 / 100%); +} + +.setting-input-add-server:focus + .add-server-domain { + color: inherit; } .server-url-size-calc { From 3dc83543f734fef7f45bf93d3b2fdcf4b17c5a8f Mon Sep 17 00:00:00 2001 From: manila <3621543+manila@users.noreply.github.com> Date: Fri, 6 May 2022 01:27:28 -0700 Subject: [PATCH 5/5] new_server_form: Trim whitespace if any is added by the user. --- app/renderer/js/pages/preference/new-server-form.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/renderer/js/pages/preference/new-server-form.ts b/app/renderer/js/pages/preference/new-server-form.ts index 20f641b9d..96c60a4f3 100644 --- a/app/renderer/js/pages/preference/new-server-form.ts +++ b/app/renderer/js/pages/preference/new-server-form.ts @@ -111,6 +111,7 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void { } }); $newServerUrl.addEventListener("input", async () => { + $newServerUrl.value = $newServerUrl.value.trim(); const url = $newServerUrl.value; $urlSizeCalc.textContent = url; $newServerUrl.style.width = `${$urlSizeCalc.offsetWidth}px`;