Make it prettier
This commit is contained in:
89
src/main.ts
89
src/main.ts
@@ -25,26 +25,54 @@ function noSearchDefaultPageRender() {
|
||||
<img src="/clipboard.svg" alt="Copy" />
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="settings-title">Search Settings Links</h3>
|
||||
<h3 class="settings-title">How to add Bang! Search Engine</h3>
|
||||
<p style="margin-bottom: 8px; font-size: 14px;">
|
||||
Below are links to the search engine settings in your browser.
|
||||
<br />
|
||||
Copy the URL for the browser engine you are using & paste it into a new tab.
|
||||
<br />
|
||||
From there you should see an option to add a search engine. Copy the link above
|
||||
& fill out the form as follows.
|
||||
</p>
|
||||
<table class="form-table">
|
||||
<tr>
|
||||
<td><b>Name:</b></td>
|
||||
<td>Bang!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Engine URL:</b></td>
|
||||
<td>https://bang.gbrown.org?q=%s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Alias:</b></td>
|
||||
<td>@bang</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="settings-links-container">
|
||||
<h3>
|
||||
<a href="about:preferences#search" target="_blank">
|
||||
<img
|
||||
src="/firefox.svg"
|
||||
alt="Firefox"
|
||||
width="30"
|
||||
/>
|
||||
</a>
|
||||
</h3>
|
||||
<h3>
|
||||
<a href="chrome://settings/searchEngines" target="_blank">
|
||||
<img
|
||||
src="/chrome.svg"
|
||||
alt="Chrome"
|
||||
width="30"
|
||||
/>
|
||||
</a>
|
||||
</h3>
|
||||
<div class="browser-link-container">
|
||||
<img src="/firefox.svg" alt="Firefox" width="24" />
|
||||
<input
|
||||
type="text"
|
||||
readonly value="about:preferences#search"
|
||||
class="firefox-textbox"
|
||||
title="Click to copy Firefox settings URL"
|
||||
/>
|
||||
<button class="copy-firefox">
|
||||
<img src="/clipboard.svg" alt="Copy" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="browser-link-container">
|
||||
<img src="/chrome.svg" alt="Chrome" width="24" />
|
||||
<input
|
||||
type="text"
|
||||
readonly value="chrome://settings/searchEngines"
|
||||
class="chrome-textbox"
|
||||
title="Click to copy Chrome settings URL"
|
||||
/>
|
||||
<button class="copy-chrome">
|
||||
<img src="/clipboard.svg" alt="Copy" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,15 +81,36 @@ function noSearchDefaultPageRender() {
|
||||
const copyButton = app.querySelector<HTMLButtonElement>(".copy-button")!;
|
||||
const copyIcon = copyButton.querySelector("img")!;
|
||||
const urlInput = app.querySelector<HTMLInputElement>(".url-input")!;
|
||||
const copyFirefox = app.querySelector<HTMLInputElement>(".copy-firefox")!;
|
||||
const copyFirefoxIcon = copyFirefox.querySelector("img")!;
|
||||
const firefoxInput = app.querySelector<HTMLInputElement>(".firefox-textbox")!;
|
||||
const copyChrome = app.querySelector<HTMLInputElement>(".copy-chrome")!;
|
||||
const copyChromeIcon = copyChrome.querySelector("img")!;
|
||||
const chromeInput = app.querySelector<HTMLInputElement>(".chrome-textbox")!;
|
||||
|
||||
copyButton.addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(urlInput.value);
|
||||
copyIcon.src = "/clipboard-check.svg";
|
||||
|
||||
setTimeout(() => {
|
||||
copyIcon.src = "/clipboard.svg";
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
copyFirefox.addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(firefoxInput.value);
|
||||
copyFirefoxIcon.src = "/clipboard-check.svg";
|
||||
setTimeout(() => {
|
||||
copyFirefoxIcon.src = "/clipboard.svg";
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
copyChrome.addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(chromeInput.value);
|
||||
copyChromeIcon.src = "/clipboard-check.svg";
|
||||
setTimeout(() => {
|
||||
copyChromeIcon.src = "/clipboard.svg";
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "sg";
|
||||
|
Reference in New Issue
Block a user