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

refactor: use .btn class; use querySelector

Browse source 
- use .btn class as selector to all clickable icons
- use querySelector for selecting icons
This commit is contained in:
Ayo 2023-07-23 19:03:09 +02:00 committed by Ayo Ayco
parent f6e8ae9453
commit 4a41624015
1 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/AddressBar.astro
View file

@ -11,14 +11,14 @@ const { url } = Astro.props;
<div class="address-bar"> <div class="address-bar">
<form> <form>
<button aria-label="Back" class="left-buttons" type="button" id="app-back" name="app-back" onclick="history.go(-1); return false;" hidden> <button aria-label="Back" class="btn left-buttons" type="button" id="app-back" name="app-back" onclick="history.go(-1); return false;" hidden>
<Icon name="ic:round-arrow-back-ios" /> <Icon name="ic:round-arrow-back-ios" />
</button> </button>
<input type="url" id="app-url" name="url" value={url ?? ''} placeholder={placeholder} required /> <input type="url" id="app-url" name="url" value={url ?? ''} placeholder={placeholder} required />
<button aria-label="Submit" class="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="right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden> <button aria-label="Home" class="btn right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
<Icon name="mdi:home" /> <Icon name="mdi:home" />
</button> </button>
<div aria-label="Settings" class="btn right-buttons"> <div aria-label="Settings" class="btn right-buttons">
@ -29,27 +29,27 @@ const { url } = Astro.props;
</div> </div>
<script> <script>
const backLink = document.getElementById('app-back') as HTMLButtonElement; const backLink = document.querySelector<HTMLButtonElement>('#app-back');
const homeLink = document.getElementById('app-home') as HTMLButtonElement; const homeLink = document.querySelector<HTMLButtonElement>('#app-home');
const urlInput = document.getElementById('app-url') as HTMLInputElement; const submitBtn = document.querySelector<HTMLButtonElement>('#submit');
const submitBtn = document.getElementById('submit') as HTMLButtonElement; 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'); 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'); homeLink?.setAttribute('disabled', 'true');
} }
urlInput.addEventListener('input', (e) => { urlInput?.addEventListener('input', (e) => {
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
if (target.value === '') { if (target.value === '') {
submitBtn.setAttribute('disabled', 'true'); submitBtn?.setAttribute('disabled', 'true');
} else { } else {
submitBtn.removeAttribute('disabled'); submitBtn?.removeAttribute('disabled');
} }
}); });
@ -81,17 +81,17 @@ const { url } = Astro.props;
border-radius: 5px; border-radius: 5px;
border: 1px solid #eee; border: 1px solid #eee;
font-size: normal; font-size: normal;
padding: 0 0.5rem; padding: 0.5rem;
color: #555; color: #555;
} }
button, div.btn{ .btn{
display: block; display: block;
border: 0px; border: 0px;
height: 100%; height: 100%;
vertical-align:middle; vertical-align:middle;
background-color: transparent; background-color: transparent;
padding: 0px; padding: 0.5rem 0;
color: black; color: black;
svg { svg {
@ -110,11 +110,11 @@ const { url } = Astro.props;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
button svg:hover, div.btn svg:hover { .btn svg:hover {
color: blue !important; color: blue !important;
} }
button[disabled="true"] svg { .btn[disabled="true"] svg {
color: #ccc !important; color: #ccc !important;
cursor: default !important; cursor: default !important;
} }