mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-06-28 09:28:29 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

web/Omnibox: make the entire input bar focusable

Browse Source 
now it's possible to click through the omnibox icon
This commit is contained in:
wukko 2025-04-02 21:14:24 +06:00
parent 9c40a1f88e
commit fc42fd7a86
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
2 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/components/save/Omnibox.svelte
View File

@ -126,6 +126,9 @@
break; break;
} }
}; };
$: downloadable = validLink($link);
$: clearVisible = $link && !isLoading;
</script> </script>
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
@ -144,7 +147,8 @@
<div <div
id="input-container" id="input-container"
class:focused={isFocused} class:focused={isFocused}
class:downloadable={validLink($link)} class:downloadable
class:clear-visible={clearVisible}
> >
<OmniboxIcon loading={isLoading || isBotCheckOngoing} /> <OmniboxIcon loading={isLoading || isBotCheckOngoing} />
<input <input
@ -166,10 +170,10 @@
disabled={isDisabled} disabled={isDisabled}
/> />
{#if $link && !isLoading} {#if clearVisible}
<ClearButton click={() => ($link = "")} /> <ClearButton click={() => ($link = "")} />
{/if} {/if}
{#if validLink($link)} {#if downloadable}
<DownloadButton <DownloadButton
url={$link} url={$link}
bind:this={downloadButton} bind:this={downloadButton}
@ -229,19 +233,26 @@
display: flex; display: flex;
box-shadow: 0 0 0 1.5px var(--input-border) inset; box-shadow: 0 0 0 1.5px var(--input-border) inset;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 0 var(--input-padding);
align-items: center; align-items: center;
gap: var(--input-padding); gap: var(--input-padding);
font-size: 14px; font-size: 14px;
flex: 1; flex: 1;
} }
#input-container.clear-visible {
padding-right: var(--input-padding);
}
:global([dir="rtl"]) #input-container.clear-visible {
padding-right: unset;
padding-left: var(--input-padding);
}
#input-container.downloadable { #input-container.downloadable {
padding-right: 0; padding-right: 0;
} }
#input-container.downloadable:dir(rtl) { #input-container.downloadable:dir(rtl) {
padding-right: var(--input-padding);
padding-left: 0; padding-left: 0;
} }
@ -263,6 +274,7 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: var(--input-padding) 0; padding: var(--input-padding) 0;
padding-left: calc(var(--input-padding) + 28px);
height: 18px; height: 18px;
align-items: center; align-items: center;
@ -279,6 +291,14 @@
/* workaround for safari */ /* workaround for safari */
font-size: inherit; font-size: inherit;
/* prevents input from poking outside of rounded corners */
border-radius: var(--border-radius);
}
:global([dir="rtl"]) #link-area {
padding-left: unset;
padding-right: calc(var(--input-padding) + 28px);
} }
#link-area:focus-visible { #link-area:focus-visible {

9
web/src/components/save/OmniboxIcon.svelte
View File

@ -53,7 +53,14 @@
#input-icons { #input-icons {
display: flex; display: flex;
position: relative; position: absolute;
margin-left: var(--input-padding);
pointer-events: none;
}
:global([dir="rtl"]) #input-icons {
margin-left: unset;
margin-right: var(--input-padding);
} }
#input-icons :global(svg) { #input-icons :global(svg) {