preferences: Add X button to allow for conventional exit from preferences pages.

Addition of X button adds a conventional and convenient method to escape out from settings menu instead of workarounds.

Fixes: #1077

Author: manavmehta

app/common/typed-ipc.ts

@@ -83,6 +83,7 @@ export interface RendererMessage {
   "update-realm-icon": (serverURL: string, iconURL: string) => void;
   "update-realm-name": (serveRURL: string, realmName: string) => void;
   "webview-reload": () => void;
+  "exit-settings": () => void;
   zoomActualSize: () => void;
   zoomIn: () => void;
   zoomOut: () => void;

app/renderer/css/preference.css

@@ -86,6 +86,17 @@ td:nth-child(odd) {
   text-rendering: optimizeLegibility;
 }
 
+.exit-sign {
+  float: right;
+  position: relative;
+  top: 1px;
+  margin-left: 3px;
+  font-size: 2rem;
+  line-height: 1;
+  font-weight: 600;
+  cursor: pointer;
+}
+
 #content {
   display: flex;
   height: 100%;

app/renderer/js/main.ts

@@ -927,6 +927,22 @@ class ServerManagerView {
       });
     }
 
+    ipcRenderer.on("exit-settings", () => {
+      let lastActiveServerTabIndex = -1;
+
+      for (const tab of this.tabs) {
+        if (tab.props.role === "server") {
+          lastActiveServerTabIndex = tab.props.tabIndex;
+        }
+      }
+
+      console.log(typeof this.tabs[lastActiveServerTabIndex]);
+      if (lastActiveServerTabIndex >= 0) {
+        console.log("Tab to be focussed");
+        this.tabs[lastActiveServerTabIndex].webview.focus();
+      }
+    });
+
     ipcRenderer.on(
       "permission-request",
       (

app/renderer/js/pages/preference/base-section.ts

@@ -81,3 +81,10 @@ export function generateSelectHTML(
 export function reloadApp(): void {
   ipcRenderer.send("forward-message", "reload-viewer");
 }
+
+export function exitSettings(): void {
+  const exitButton = document.querySelector(".exit-sign")!;
+  exitButton.addEventListener("click", async () => {
+    ipcRenderer.send("forward-message", "exit-settings");
+  });
+}

app/renderer/js/pages/preference/connected-org-section.ts

@@ -3,7 +3,7 @@ import * as t from "../../../../common/translation-util";
 import {ipcRenderer} from "../../typed-ipc-renderer";
 import * as DomainUtil from "../../utils/domain-util";
 
-import {reloadApp} from "./base-section";
+import {exitSettings, reloadApp} from "./base-section";
 import {initFindAccounts} from "./find-accounts";
 import {initServerInfoForm} from "./server-info-form";
 
@@ -17,6 +17,7 @@ export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
   const servers = DomainUtil.getDomains();
   props.$root.innerHTML = html`
     <div class="settings-pane" id="server-settings-pane">
+      <span class="exit-sign">×</span>
       <div class="page-title">${t.__("Connected organizations")}</div>
       <div class="title" id="existing-servers">
         ${t.__("All the connected orgnizations will appear here.")}
@@ -32,6 +33,8 @@ export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
     </div>
   `.html;
 
+  exitSettings();
+
   const $serverInfoContainer = document.querySelector(
     "#server-info-container",
   )!;

app/renderer/js/pages/preference/general-section.ts

@@ -14,7 +14,11 @@ import * as t from "../../../../common/translation-util";
 import supportedLocales from "../../../../translations/supported-locales.json";
 import {ipcRenderer} from "../../typed-ipc-renderer";
 
-import {generateSelectHTML, generateSettingOption} from "./base-section";
+import {
+  exitSettings,
+  generateSelectHTML,
+  generateSettingOption,
+} from "./base-section";
 
 const {app, dialog, session} = remote;
 const currentBrowserWindow = remote.getCurrentWindow();
@@ -26,6 +30,7 @@ interface GeneralSectionProps {
 export function initGeneralSection(props: GeneralSectionProps): void {
   props.$root.innerHTML = html`
     <div class="settings-pane">
+      <span class="exit-sign">×</span>
       <div class="title">${t.__("Appearance")}</div>
       <div id="appearance-option-settings" class="settings-card">
         <div class="setting-row" id="tray-option">
@@ -211,6 +216,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
     </div>
   `.html;
 
+  exitSettings();
   updateTrayOption();
   updateBadgeOption();
   updateSilentOption();

app/renderer/js/pages/preference/network-section.ts

@@ -3,7 +3,7 @@ import {html} from "../../../../common/html";
 import * as t from "../../../../common/translation-util";
 import {ipcRenderer} from "../../typed-ipc-renderer";
 
-import {generateSettingOption} from "./base-section";
+import {exitSettings, generateSettingOption} from "./base-section";
 
 interface NetworkSectionProps {
   $root: Element;
@@ -12,6 +12,7 @@ interface NetworkSectionProps {
 export function initNetworkSection(props: NetworkSectionProps): void {
   props.$root.innerHTML = html`
     <div class="settings-pane">
+      <span class="exit-sign">×</span>
       <div class="title">${t.__("Proxy")}</div>
       <div id="appearance-option-settings" class="settings-card">
         <div class="setting-row" id="use-system-settings">
@@ -55,6 +56,8 @@ export function initNetworkSection(props: NetworkSectionProps): void {
     </div>
   `.html;
 
+  exitSettings();
+
   const $proxyPAC: HTMLInputElement = document.querySelector(
     "#proxy-pac-option .setting-input-value",
   )!;

app/renderer/js/pages/preference/shortcuts-section.ts

@@ -2,6 +2,8 @@ import {html} from "../../../../common/html";
 import * as t from "../../../../common/translation-util";
 import * as LinkUtil from "../../utils/link-util";
 
+import {exitSettings} from "./base-section";
+
 interface ShortcutsSectionProps {
   $root: Element;
 }
@@ -12,6 +14,7 @@ export function initShortcutsSection(props: ShortcutsSectionProps): void {
 
   props.$root.innerHTML = html`
     <div class="settings-pane">
+      <span class="exit-sign">×</span>
       <div class="settings-card tip">
         <p>
           <b><i class="material-icons md-14">settings</i>${t.__("Tip")}: </b
@@ -222,6 +225,8 @@ export function initShortcutsSection(props: ShortcutsSectionProps): void {
     </div>
   `.html;
 
+  exitSettings();
+
   const link = "https://zulip.com/help/keyboard-shortcuts";
   const externalCreateNewOrgElement =
     document.querySelector("#open-hotkeys-link")!;