ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: initial SettingsPopover

Browse source
This commit is contained in:
Ayo 2023-07-24 08:15:44 +02:00 committed by Ayo Ayco
parent 4a41624015
commit d794633ed5
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/AddressBar.astro
View file

@ -1,5 +1,6 @@
--- ---
import Icon from 'astro-iconify'; import Icon from 'astro-iconify';
import SettingsPopover from './SettingsPopover.astro';
export interface Props { export interface Props {
url: string | null; url: string | null;
@ -18,9 +19,9 @@ const { url } = Astro.props;
<button aria-label="Submit" class="btn right-buttons" type="submit" id="submit"> <button aria-label="Submit" class="btn right-buttons" type="submit" id="submit">
<Icon name="ri:ai-generate" /> <Icon name="ri:ai-generate" />
</button> </button>
<button aria-label="Home" class="btn right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden> <a aria-label="Home" class="btn right-buttons" type="button" id="app-home" href="/" hidden>
<Icon name="mdi:home" /> <Icon name="mdi:home" />
</button> </a>
<div aria-label="Settings" class="btn right-buttons"> <div aria-label="Settings" class="btn right-buttons">
<input type="checkbox" id="settings-toggle" hidden> <input type="checkbox" id="settings-toggle" hidden>
<label for="settings-toggle"><Icon name="mdi:cog" /></label> <label for="settings-toggle"><Icon name="mdi:cog" /></label>
@ -28,20 +29,19 @@ const { url } = Astro.props;
</form> </form>
</div> </div>
<SettingsPopover toggleId="settings-toggle" />
<script> <script>
const backLink = document.querySelector<HTMLButtonElement>('#app-back'); const backLink = document.querySelector<HTMLButtonElement>('#app-back');
const homeLink = document.querySelector<HTMLButtonElement>('#app-home');
const submitBtn = document.querySelector<HTMLButtonElement>('#submit'); const submitBtn = document.querySelector<HTMLButtonElement>('#submit');
const urlInput = document.querySelector<HTMLInputElement>('#app-url'); const urlInput = document.querySelector<HTMLInputElement>('#app-url');
// if js is enabled, show the back button and github link // if js is enabled, show the back button and github link
backLink?.removeAttribute('hidden'); backLink?.removeAttribute('hidden');
homeLink?.removeAttribute('hidden');
if (urlInput?.value === '') { if (urlInput?.value === '') {
backLink?.setAttribute('disabled', 'true'); backLink?.setAttribute('disabled', 'true');
submitBtn?.setAttribute('disabled', 'true'); submitBtn?.setAttribute('disabled', 'true');
homeLink?.setAttribute('disabled', 'true');
} }
urlInput?.addEventListener('input', (e) => { urlInput?.addEventListener('input', (e) => {

13
src/components/SettingsPopover.astro Normal file
View file

@ -0,0 +1,13 @@
---
export interface Props {
toggleId: string;
}
const { toggleId } = Astro.props;
---
<form hidden>
<div class="field">
<input type="checkbox" id="settings-1" name="settings-1" checked />
<label for="settings-1">Option 1</label>
</div>
</form>