moth11.net
frontend for xcvr appview
file input button prototype
+32
-2
src/lib/components/AutoGrowTextArea.svelte
+32
-2
src/lib/components/AutoGrowTextArea.svelte
···
193
};
194
</script>
195
196
-
<div class="autogrowwrapper">
197
<textarea
198
rows="1"
199
bind:value
···
205
onbeforeinput={bi}
206
style:font-weight={bold ? "700" : "inherit"}
207
style:--theme={color}
208
-
style:font-size={fs ?? "1rem"}
209
{placeholder}
210
></textarea>
211
{#if curemojiresults !== null && curemojinumber !== null}
212
<div bind:this={emojilist} class="emoji-selector">
213
{#each curemojiresults[0] as result, idx}
···
226
</div>
227
228
<style>
229
.emoji-selector {
230
width: 100%;
231
position: absolute;
···
193
};
194
</script>
195
196
+
<div class="autogrowwrapper" style:--fs={fs ?? "1rem"}>
197
<textarea
198
rows="1"
199
bind:value
···
205
onbeforeinput={bi}
206
style:font-weight={bold ? "700" : "inherit"}
207
style:--theme={color}
208
+
style:font-size="var(--fs)"
209
{placeholder}
210
></textarea>
211
+
{#if value === ""}
212
+
<label class="media-upload-button" for="media-upload"
213
+
>...or upload an image</label
214
+
>
215
+
<input
216
+
onchange={(event) => {
217
+
if (
218
+
event.currentTarget.files &&
219
+
event.currentTarget.files.length > 0
220
+
) {
221
+
imageHandler?.(event.currentTarget.files[0]);
222
+
}
223
+
}}
224
+
id="media-upload"
225
+
type="file"
226
+
accept="image/*"
227
+
/>
228
+
{/if}
229
{#if curemojiresults !== null && curemojinumber !== null}
230
<div bind:this={emojilist} class="emoji-selector">
231
{#each curemojiresults[0] as result, idx}
···
244
</div>
245
246
<style>
247
+
#media-upload {
248
+
display: none;
249
+
}
250
+
.media-upload-button {
251
+
position: absolute;
252
+
top: 0;
253
+
right: 0;
254
+
margin: 0;
255
+
font-size: var(--fs);
256
+
border: none;
257
+
}
258
+
259
.emoji-selector {
260
width: 100%;
261
position: absolute;
+1
src/lib/components/Transmitter.svelte
+1
src/lib/components/Transmitter.svelte