gib/Bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make it prettier

Browse Source
This commit is contained in:
Gabriel Brown 2025-02-28 09:44:56 -06:00
parent 537bf9d613
commit cdcd418239
2 changed files with 132 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/global.css
View File

@ -117,33 +117,50 @@ textarea {
}
/* --- Copy-button style adjustments --- */
.copy-button {
padding: 8px;
.copy-button, .copy-firefox, .copy-chrome {
padding: 6px;
color: var(--accent-color); /* Changed: Accent color instead of gray */
border-radius: 4px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.copy-button:hover {
.copy-button:hover, .copy-firefox:hover, .copy-chrome:hover {
background: var(--hover-bg-color); /* Changed: Hover bg darker */
border-radius: 8px;
}
.copy-button:active {
.copy-button:active, .copy-firefox:active, .copy-chrome:active {
background: var(--active-bg-color); /* Changed: Active state even darker */
}
.copy-button img {
.copy-button img, .copy-firefox img, .copy-chrome img {
width: 20px;
height: 20px;
}
/* Copy feedback unchanged (Green stands out in dark mode as well) */
.copy-button.copied {
.copy-button.copied, .copy-firefox.copied, .copy-chrome.copied {
background: var(--success-color);
color: white; /* Ensures contrast */
}
.copy-textbox, .firefox-textbox, .chrome-textbox {
padding: 6px 10px;
border: 1px solid var(--input-border-color);
border-radius: 4px;
background: var(--input-bg-color);
color: var(--text-color);
font-size: 14px;
width: 220px;
cursor: pointer;
}
.copy-textbox:focus, .firefox-textbox:focus, .chrome-textbox:focus {
outline: none;
border-color: var(--accent-color);
}
.settings-title {
margin-top: 36px;
margin-bottom: 24px;
margin-bottom: 16px;
font-size: 20px;
}
.settings-links-container {
@ -153,3 +170,41 @@ textarea {
align-items: center;
gap: 32px;
}
@media (max-width: 500px) {
.settings-links-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
}
}
.browser-link-container {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.browser-instruction {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: normal;
}
.form-table {
font-size: 14px;
margin: 16px auto;
text-align: left;
}
.form-table td {
padding: 8px 6px;
border: 1px solid var(--input-border-color);
}
.form-table td:first-child {
background-color: var(--input-bg-color);
width: 100px;
}

89
src/main.ts
View File

@ -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";