blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/save: dynamic paste text & component clean up

Browse source
This commit is contained in:
wukko 2024-06-17 19:03:26 +06:00
parent 9aa2de9bfd
commit ddb52cfef7
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/buttons/ActionButton.svelte
View file

@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
export let id: string; export let id: string;
export let text: string = "Button";
export let click = () => { alert('no function assigned') }; export let click = () => { alert('no function assigned') };
</script> </script>
<button id={id} class="button" on:click={click}> <button id={id} class="button" on:click={click}>
<slot></slot> <slot></slot>
{text}
</button> </button>
<style> <style>

39
web/src/components/save/Omnibox.svelte
View file

@ -67,18 +67,20 @@
<div id="action-container"> <div id="action-container">
<Switcher settingId="save-downloadMode"> <Switcher settingId="save-downloadMode">
<ActionButton id="auto-mode-button" text="auto"> <ActionButton id="auto-mode-button">
<IconSparkles /> <IconSparkles /> auto
</ActionButton> </ActionButton>
<ActionButton id="audio-mode-button" text="audio"> <ActionButton id="audio-mode-button">
<IconMusic /> <IconMusic /> audio
</ActionButton> </ActionButton>
<ActionButton id="mute-mode-button" text="mute"> <ActionButton id="mute-mode-button">
<IconMute /> <IconMute /> mute
</ActionButton> </ActionButton>
</Switcher> </Switcher>
<ActionButton id="paste-button" click={pasteClipboard} text="paste"> <ActionButton id="paste-button" click={pasteClipboard}>
<IconClipboard /> <IconClipboard />
<span id="paste-desktop-text">paste</span>
<span id="paste-mobile-text">paste and download</span>
</ActionButton> </ActionButton>
</div> </div>
</div> </div>
@ -155,4 +157,27 @@
#action-container { #action-container {
justify-content: space-between; justify-content: space-between;
} }
#paste-mobile-text {
display: none;
}
@media screen and (max-width: 440px) {
#action-container {
flex-direction: column;
gap: 5px;
}
#action-container :global(.button) {
width: 100%
}
#paste-mobile-text {
display: block;
}
#paste-desktop-text {
display: none;
}
}
</style> </style>