web/save: dynamic paste text & component clean up
This commit is contained in:
parent
9aa2de9bfd
commit
ddb52cfef7
2 changed files with 32 additions and 9 deletions
|
@ -1,12 +1,10 @@
|
|||
<script lang="ts">
|
||||
export let id: string;
|
||||
export let text: string = "Button";
|
||||
export let click = () => { alert('no function assigned') };
|
||||
</script>
|
||||
|
||||
<button id={id} class="button" on:click={click}>
|
||||
<slot></slot>
|
||||
{text}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -67,18 +67,20 @@
|
|||
|
||||
<div id="action-container">
|
||||
<Switcher settingId="save-downloadMode">
|
||||
<ActionButton id="auto-mode-button" text="auto">
|
||||
<IconSparkles />
|
||||
<ActionButton id="auto-mode-button">
|
||||
<IconSparkles /> auto
|
||||
</ActionButton>
|
||||
<ActionButton id="audio-mode-button" text="audio">
|
||||
<IconMusic />
|
||||
<ActionButton id="audio-mode-button">
|
||||
<IconMusic /> audio
|
||||
</ActionButton>
|
||||
<ActionButton id="mute-mode-button" text="mute">
|
||||
<IconMute />
|
||||
<ActionButton id="mute-mode-button">
|
||||
<IconMute /> mute
|
||||
</ActionButton>
|
||||
</Switcher>
|
||||
<ActionButton id="paste-button" click={pasteClipboard} text="paste">
|
||||
<ActionButton id="paste-button" click={pasteClipboard}>
|
||||
<IconClipboard />
|
||||
<span id="paste-desktop-text">paste</span>
|
||||
<span id="paste-mobile-text">paste and download</span>
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -155,4 +157,27 @@
|
|||
#action-container {
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue