paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-01 20:43:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

preference: Use querySelector relative to $root.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2022-02-09 23:22:00 -08:00
parent e16811065d
commit f9f2b20e90
7 changed files with 67 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,11 +11,13 @@ interface ConnectedOrgSectionProps {
$root: Element;
}
export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
props.$root.textContent = "";
export function initConnectedOrgSection({
$root,
}: ConnectedOrgSectionProps): void {
$root.textContent = "";
const servers = DomainUtil.getDomains();
props.$root.innerHTML = html`
$root.innerHTML = html`
<div class="settings-pane" id="server-settings-pane">
<div class="page-title">${t.__("Connected organizations")}</div>
<div class="title" id="existing-servers">
@@ -32,13 +34,11 @@ export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
</div>
`.html;
const $serverInfoContainer = document.querySelector(
"#server-info-container",
)!;
const $existingServers = document.querySelector("#existing-servers")!;
const $serverInfoContainer = $root.querySelector("#server-info-container")!;
const $existingServers = $root.querySelector("#existing-servers")!;
const $newOrgButton: HTMLButtonElement =
document.querySelector("#new-org-button")!;
const $findAccountsContainer = document.querySelector(
$root.querySelector("#new-org-button")!;
const $findAccountsContainer = $root.querySelector(
"#find-accounts-container",
)!;

76
app/renderer/js/pages/preference/general-section.ts
View File

@@ -23,8 +23,8 @@ interface GeneralSectionProps {
$root: Element;
}
export function initGeneralSection(props: GeneralSectionProps): void {
props.$root.innerHTML = html`
export function initGeneralSection({$root}: GeneralSectionProps): void {
$root.innerHTML = html`
<div class="settings-pane">
<div class="title">${t.__("Appearance")}</div>
<div id="appearance-option-settings" class="settings-card">
@@ -251,7 +251,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateTrayOption(): void {
generateSettingOption({
$element: document.querySelector("#tray-option .setting-control")!,
$element: $root.querySelector("#tray-option .setting-control")!,
value: ConfigUtil.getConfigItem("trayIcon", true),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("trayIcon", true);
@@ -264,7 +264,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateMenubarOption(): void {
generateSettingOption({
$element: document.querySelector("#menubar-option .setting-control")!,
$element: $root.querySelector("#menubar-option .setting-control")!,
value: ConfigUtil.getConfigItem("autoHideMenubar", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("autoHideMenubar", false);
@@ -277,7 +277,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateBadgeOption(): void {
generateSettingOption({
$element: document.querySelector("#badge-option .setting-control")!,
$element: $root.querySelector("#badge-option .setting-control")!,
value: ConfigUtil.getConfigItem("badgeOption", true),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("badgeOption", true);
@@ -290,7 +290,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateDockBouncing(): void {
generateSettingOption({
$element: document.querySelector("#dock-bounce-option .setting-control")!,
$element: $root.querySelector("#dock-bounce-option .setting-control")!,
value: ConfigUtil.getConfigItem("dockBouncing", true),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("dockBouncing", true);
@@ -302,9 +302,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateFlashTaskbar(): void {
generateSettingOption({
$element: document.querySelector(
"#flash-taskbar-option .setting-control",
)!,
$element: $root.querySelector("#flash-taskbar-option .setting-control")!,
value: ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem(
@@ -319,7 +317,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function autoUpdateOption(): void {
generateSettingOption({
$element: document.querySelector("#autoupdate-option .setting-control")!,
$element: $root.querySelector("#autoupdate-option .setting-control")!,
disabled: EnterpriseUtil.configItemExists("autoUpdate"),
value: ConfigUtil.getConfigItem("autoUpdate", true),
clickHandler: () => {
@@ -337,7 +335,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function betaUpdateOption(): void {
generateSettingOption({
$element: document.querySelector("#betaupdate-option .setting-control")!,
$element: $root.querySelector("#betaupdate-option .setting-control")!,
value: ConfigUtil.getConfigItem("betaUpdate", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("betaUpdate", false);
@@ -351,7 +349,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateSilentOption(): void {
generateSettingOption({
$element: document.querySelector("#silent-option .setting-control")!,
$element: $root.querySelector("#silent-option .setting-control")!,
value: ConfigUtil.getConfigItem("silent", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("silent", true);
@@ -368,7 +366,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function showDesktopNotification(): void {
generateSettingOption({
$element: document.querySelector(
$element: $root.querySelector(
"#show-notification-option .setting-control",
)!,
value: ConfigUtil.getConfigItem("showNotification", true),
@@ -382,7 +380,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateSidebarOption(): void {
generateSettingOption({
$element: document.querySelector("#sidebar-option .setting-control")!,
$element: $root.querySelector("#sidebar-option .setting-control")!,
value: ConfigUtil.getConfigItem("showSidebar", true),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("showSidebar", true);
@@ -395,9 +393,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateStartAtLoginOption(): void {
generateSettingOption({
$element: document.querySelector(
"#startAtLogin-option .setting-control",
)!,
$element: $root.querySelector("#startAtLogin-option .setting-control")!,
value: ConfigUtil.getConfigItem("startAtLogin", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("startAtLogin", false);
@@ -410,7 +406,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updateQuitOnCloseOption(): void {
generateSettingOption({
$element: document.querySelector("#quitOnClose-option .setting-control")!,
$element: $root.querySelector("#quitOnClose-option .setting-control")!,
value: ConfigUtil.getConfigItem("quitOnClose", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("quitOnClose", false);
@@ -422,7 +418,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function enableSpellchecker(): void {
generateSettingOption({
$element: document.querySelector(
$element: $root.querySelector(
"#enable-spellchecker-option .setting-control",
)!,
value: ConfigUtil.getConfigItem("enableSpellchecker", true),
@@ -431,8 +427,8 @@ export function initGeneralSection(props: GeneralSectionProps): void {
ConfigUtil.setConfigItem("enableSpellchecker", newValue);
enableSpellchecker();
const spellcheckerLanguageInput: HTMLElement =
document.querySelector("#spellcheck-langs")!;
const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
$root.querySelector("#spellcheck-langs")!;
const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
spellcheckerLanguageInput.style.display =
spellcheckerLanguageInput.style.display === "none" ? "" : "none";
spellcheckerNote.style.display =
@@ -443,7 +439,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function enableErrorReporting(): void {
generateSettingOption({
$element: document.querySelector(
$element: $root.querySelector(
"#enable-error-reporting .setting-control",
)!,
value: ConfigUtil.getConfigItem("errorReporting", true),
@@ -472,11 +468,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
}
function setLocale(): void {
const langDiv: HTMLSelectElement = document.querySelector(".lang-div")!;
const langDiv: HTMLSelectElement = $root.querySelector(".lang-div")!;
const langListHTML = generateSelectHTML(supportedLocales, "lang-menu");
langDiv.innerHTML += langListHTML.html;
// `langMenu` is the select-option dropdown menu formed after executing the previous command
const langMenu: HTMLSelectElement = document.querySelector(".lang-menu")!;
const langMenu: HTMLSelectElement = $root.querySelector(".lang-menu")!;
// The next three lines set the selected language visible on the dropdown button
let language = ConfigUtil.getConfigItem("appLanguage", "en");
@@ -491,9 +487,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function minimizeOnStart(): void {
generateSettingOption({
$element: document.querySelector(
"#start-minimize-option .setting-control",
)!,
$element: $root.querySelector("#start-minimize-option .setting-control")!,
value: ConfigUtil.getConfigItem("startMinimized", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("startMinimized", false);
@@ -504,7 +498,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
}
function addCustomCSS(): void {
const customCSSButton = document.querySelector(
const customCSSButton = $root.querySelector(
"#add-custom-css .custom-css-button",
)!;
customCSSButton.addEventListener("click", async () => {
@@ -514,14 +508,13 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function showCustomCSSPath(): void {
if (!ConfigUtil.getConfigItem("customCSS", null)) {
const cssPATH: HTMLElement =
document.querySelector("#remove-custom-css")!;
const cssPATH: HTMLElement = $root.querySelector("#remove-custom-css")!;
cssPATH.style.display = "none";
}
}
function removeCustomCSS(): void {
const removeCSSButton = document.querySelector("#css-delete-action")!;
const removeCSSButton = $root.querySelector("#css-delete-action")!;
removeCSSButton.addEventListener("click", () => {
ConfigUtil.setConfigItem("customCSS", "");
ipcRenderer.send("forward-message", "hard-reload");
@@ -539,7 +532,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
);
if (!canceled) {
ConfigUtil.setConfigItem("downloadsPath", filePaths[0]);
const downloadFolderPath: HTMLElement = document.querySelector(
const downloadFolderPath: HTMLElement = $root.querySelector(
".download-folder-path",
)!;
downloadFolderPath.textContent = filePaths[0];
@@ -547,7 +540,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
}
function downloadFolder(): void {
const downloadFolder = document.querySelector(
const downloadFolder = $root.querySelector(
"#download-folder .download-folder-button",
)!;
downloadFolder.addEventListener("click", async () => {
@@ -557,7 +550,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function updatePromptDownloadOption(): void {
generateSettingOption({
$element: document.querySelector("#prompt-download .setting-control")!,
$element: $root.querySelector("#prompt-download .setting-control")!,
value: ConfigUtil.getConfigItem("promptDownload", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("promptDownload", false);
@@ -588,7 +581,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
}
function factoryReset(): void {
const factoryResetButton = document.querySelector(
const factoryResetButton = $root.querySelector(
"#factory-reset-option .factory-reset-button",
)!;
factoryResetButton.addEventListener("click", async () => {
@@ -599,7 +592,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
function initSpellChecker(): void {
// The elctron API is a no-op on macOS and macOS default spellchecker is used.
if (process.platform === "darwin") {
const note: HTMLElement = document.querySelector("#note")!;
const note: HTMLElement = $root.querySelector("#note")!;
note.append(t.__("On macOS, the OS spellchecker is used."));
note.append(document.createElement("br"));
note.append(
@@ -608,12 +601,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
),
);
} else {
const note: HTMLElement = document.querySelector("#note")!;
const note: HTMLElement = $root.querySelector("#note")!;
note.append(
t.__("You can select a maximum of 3 languages for spellchecking."),
);
const spellDiv: HTMLElement =
document.querySelector("#spellcheck-langs")!;
const spellDiv: HTMLElement = $root.querySelector("#spellcheck-langs")!;
spellDiv.innerHTML += html`
<div class="setting-description">${t.__("Spellchecker Languages")}</div>
<input name="spellcheck" placeholder="Enter Languages" />
@@ -646,7 +638,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
[...languagePairs].sort((a, b) => (a[0] < b[0] ? -1 : 1)),
);
const tagField: HTMLInputElement = document.querySelector(
const tagField: HTMLInputElement = $root.querySelector(
"input[name=spellcheck]",
)!;
const tagify = new Tagify(tagField, {
@@ -688,8 +680,8 @@ export function initGeneralSection(props: GeneralSectionProps): void {
// Do not display the spellchecker input and note if it is disabled
if (!ConfigUtil.getConfigItem("enableSpellchecker", true)) {
const spellcheckerLanguageInput: HTMLElement =
document.querySelector("#spellcheck-langs")!;
const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
$root.querySelector("#spellcheck-langs")!;
const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
spellcheckerLanguageInput.style.display = "none";
spellcheckerNote.style.display = "none";
}

6
app/renderer/js/pages/preference/nav.ts
View File

@@ -47,7 +47,7 @@ export default class PreferenceNav {
registerListeners(): void {
for (const navItem of this.navItems) {
const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
$item.addEventListener("click", () => {
this.props.onItemSelected(navItem);
});
@@ -65,12 +65,12 @@ export default class PreferenceNav {
}
activate(navItem: NavItem): void {
const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
$item.classList.add("active");
}
deactivate(navItem: NavItem): void {
const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
$item.classList.remove("active");
}
}

22
app/renderer/js/pages/preference/network-section.ts
View File

@@ -9,8 +9,8 @@ interface NetworkSectionProps {
$root: Element;
}
export function initNetworkSection(props: NetworkSectionProps): void {
props.$root.innerHTML = html`
export function initNetworkSection({$root}: NetworkSectionProps): void {
$root.innerHTML = html`
<div class="settings-pane">
<div class="title">${t.__("Proxy")}</div>
<div id="appearance-option-settings" class="settings-card">
@@ -55,17 +55,17 @@ export function initNetworkSection(props: NetworkSectionProps): void {
</div>
`.html;
const $proxyPAC: HTMLInputElement = document.querySelector(
const $proxyPAC: HTMLInputElement = $root.querySelector(
"#proxy-pac-option .setting-input-value",
)!;
const $proxyRules: HTMLInputElement = document.querySelector(
const $proxyRules: HTMLInputElement = $root.querySelector(
"#proxy-rules-option .setting-input-value",
)!;
const $proxyBypass: HTMLInputElement = document.querySelector(
const $proxyBypass: HTMLInputElement = $root.querySelector(
"#proxy-bypass-option .setting-input-value",
)!;
const $proxySaveAction = document.querySelector("#proxy-save-action")!;
const $manualProxyBlock = props.$root.querySelector(".manual-proxy-block")!;
const $proxySaveAction = $root.querySelector("#proxy-save-action")!;
const $manualProxyBlock = $root.querySelector(".manual-proxy-block")!;
toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
updateProxyOption();
@@ -92,9 +92,7 @@ export function initNetworkSection(props: NetworkSectionProps): void {
function updateProxyOption(): void {
generateSettingOption({
$element: document.querySelector(
"#use-system-settings .setting-control",
)!,
$element: $root.querySelector("#use-system-settings .setting-control")!,
value: ConfigUtil.getConfigItem("useSystemProxy", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
@@ -118,9 +116,7 @@ export function initNetworkSection(props: NetworkSectionProps): void {
},
});
generateSettingOption({
$element: document.querySelector(
"#use-manual-settings .setting-control",
)!,
$element: $root.querySelector("#use-manual-settings .setting-control")!,
value: ConfigUtil.getConfigItem("useManualProxy", false),
clickHandler: () => {
const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);

12
app/renderer/js/pages/preference/new-server-form.ts
View File

@@ -14,7 +14,7 @@ interface NewServerFormProps {
onChange: () => void;
}
export function initNewServerForm(props: NewServerFormProps): void {
export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
const $newServerForm = generateNodeFromHTML(html`
<div class="server-input-container">
<div class="title">${t.__("Organization URL")}</div>
@@ -52,8 +52,8 @@ export function initNewServerForm(props: NewServerFormProps): void {
`);
const $saveServerButton: HTMLButtonElement =
$newServerForm.querySelector("#connect")!;
props.$root.textContent = "";
props.$root.append($newServerForm);
$root.textContent = "";
$root.append($newServerForm);
const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
"input.setting-input-value",
)!;
@@ -77,7 +77,7 @@ export function initNewServerForm(props: NewServerFormProps): void {
}
await DomainUtil.addDomain(serverConf);
props.onChange();
onChange();
}
$saveServerButton.addEventListener("click", async () => {
@@ -91,14 +91,14 @@ export function initNewServerForm(props: NewServerFormProps): void {
// Open create new org link in default browser
const link = "https://zulip.com/new/";
const externalCreateNewOrgElement = document.querySelector(
const externalCreateNewOrgElement = $root.querySelector(
"#open-create-org-link",
)!;
externalCreateNewOrgElement.addEventListener("click", async () => {
await LinkUtil.openBrowser(new URL(link));
});
const networkSettingsId = document.querySelector(".server-network-option")!;
const networkSettingsId = $root.querySelector(".server-network-option")!;
networkSettingsId.addEventListener("click", () => {
ipcRenderer.send("forward-message", "open-network-settings");
});

8
app/renderer/js/pages/preference/servers-section.ts
View File

@@ -8,10 +8,8 @@ interface ServersSectionProps {
$root: Element;
}
export function initServersSection(props: ServersSectionProps): void {
props.$root.textContent = "";
props.$root.innerHTML = html`
export function initServersSection({$root}: ServersSectionProps): void {
$root.innerHTML = html`
<div class="add-server-modal">
<div class="modal-container">
<div class="settings-pane" id="server-settings-pane">
@@ -21,7 +19,7 @@ export function initServersSection(props: ServersSectionProps): void {
</div>
</div>
`.html;
const $newServerContainer = document.querySelector("#new-server-container")!;
const $newServerContainer = $root.querySelector("#new-server-container")!;
initNewServerForm({
$root: $newServerContainer,

6
app/renderer/js/pages/preference/shortcuts-section.ts
View File

@@ -7,10 +7,10 @@ interface ShortcutsSectionProps {
}
// eslint-disable-next-line complexity
export function initShortcutsSection(props: ShortcutsSectionProps): void {
export function initShortcutsSection({$root}: ShortcutsSectionProps): void {
const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
props.$root.innerHTML = html`
$root.innerHTML = html`
<div class="settings-pane">
<div class="settings-card tip">
<p>
@@ -224,7 +224,7 @@ export function initShortcutsSection(props: ShortcutsSectionProps): void {
const link = "https://zulip.com/help/keyboard-shortcuts";
const externalCreateNewOrgElement =
document.querySelector("#open-hotkeys-link")!;
$root.querySelector("#open-hotkeys-link")!;
externalCreateNewOrgElement.addEventListener("click", async () => {
await LinkUtil.openBrowser(new URL(link));
});