diff --git a/chrome-extension/live_transcription.js b/chrome-extension/live_transcription.js index 1a811db..51a6c46 100644 --- a/chrome-extension/live_transcription.js +++ b/chrome-extension/live_transcription.js @@ -33,6 +33,8 @@ const linesTranscriptDiv = document.getElementById("linesTranscript"); const timerElement = document.querySelector(".timer"); const themeRadios = document.querySelectorAll('input[name="theme"]'); const microphoneSelect = document.getElementById("microphoneSelect"); +const settingsToggle = document.getElementById("settingsToggle"); +const settingsDiv = document.querySelector(".settings"); @@ -614,6 +616,13 @@ recordButton.addEventListener("click", toggleRecording); if (microphoneSelect) { microphoneSelect.addEventListener("change", handleMicrophoneChange); } + +// Settings toggle functionality +settingsToggle.addEventListener("click", () => { + settingsDiv.classList.toggle("visible"); + settingsToggle.classList.toggle("active"); +}); + document.addEventListener('DOMContentLoaded', async () => { try { await enumerateMicrophones(); diff --git a/chrome-extension/popup.html b/chrome-extension/popup.html index ae9f0b3..088d384 100644 --- a/chrome-extension/popup.html +++ b/chrome-extension/popup.html @@ -9,7 +9,6 @@ -
+ +
@@ -34,6 +37,8 @@ +
+
@@ -41,26 +46,25 @@
- @@ -71,4 +75,4 @@ - \ No newline at end of file + diff --git a/chrome-extension/web/live_transcription.css b/chrome-extension/web/live_transcription.css index 01392d6..97c2c97 100644 --- a/chrome-extension/web/live_transcription.css +++ b/chrome-extension/web/live_transcription.css @@ -80,6 +80,41 @@ body { color: var(--text); } +.settings-toggle { + margin-top: 4px; + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + background-color: var(--button-bg); + cursor: pointer; + transition: all 0.3s ease; + /* border: 1px solid var(--button-border); */ + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.settings-toggle:hover { + background-color: var(--chip-bg); +} + +.settings-toggle img { + width: 24px; + height: 24px; + opacity: 0.7; + transition: opacity 0.2s ease, transform 0.3s ease; +} + +.settings-toggle:hover img { + opacity: 1; +} + +.settings-toggle.active img { + transform: rotate(80deg); +} + /* Record button */ #recordButton { width: 50px; @@ -177,16 +212,22 @@ body { .settings-container { display: flex; justify-content: center; - align-items: center; + align-items: flex-start; gap: 15px; margin-top: 20px; + flex-wrap: wrap; } .settings { - display: flex; + display: none; flex-wrap: wrap; align-items: flex-start; gap: 12px; + transition: opacity 0.3s ease; +} + +.settings.visible { + display: flex; } .field { @@ -406,58 +447,87 @@ label { } /* for smaller screens */ -@media (max-width: 768px) { +/* @media (max-width: 450px) { .settings-container { flex-direction: column; gap: 10px; + align-items: center; } - + .settings { justify-content: center; gap: 8px; + width: 100%; } - + .field { align-items: center; + width: 100%; } - + #websocketInput, #microphoneSelect { min-width: 200px; - max-width: 400px; + max-width: 100%; } - + .theme-selector-container { margin-top: 10px; } -} +} */ -@media (max-width: 480px) { +/* @media (max-width: 768px) and (min-width: 451px) { + .settings-container { + gap: 10px; + } + + .settings { + gap: 8px; + } + + #websocketInput, + #microphoneSelect { + min-width: 150px; + max-width: 300px; + } +} */ + +/* @media (max-width: 480px) { body { margin: 10px; } - + + .settings-toggle { + width: 35px; + height: 35px; + } + + .settings-toggle img { + width: 20px; + height: 20px; + } + .settings { flex-direction: column; align-items: center; gap: 6px; } - + #websocketInput, #microphoneSelect { max-width: 400px; } - + .segmented label { padding: 4px 8px; font-size: 12px; } - + .segmented img { width: 14px; height: 14px; } -} +} */ html @@ -466,4 +536,4 @@ html height: 600px; /* max: 600px */ border-radius: 10px; -} \ No newline at end of file +} diff --git a/chrome-extension/web/src/settings.svg b/chrome-extension/web/src/settings.svg new file mode 100644 index 0000000..7f14a28 --- /dev/null +++ b/chrome-extension/web/src/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file