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
193
};
194
194
</script>
195
195
196
-
<div class="autogrowwrapper">
196
+
<div class="autogrowwrapper" style:--fs={fs ?? "1rem"}>
197
197
<textarea
198
198
rows="1"
199
199
bind:value
···
205
205
onbeforeinput={bi}
206
206
style:font-weight={bold ? "700" : "inherit"}
207
207
style:--theme={color}
208
-
style:font-size={fs ?? "1rem"}
208
+
style:font-size="var(--fs)"
209
209
{placeholder}
210
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}
211
229
{#if curemojiresults !== null && curemojinumber !== null}
212
230
<div bind:this={emojilist} class="emoji-selector">
213
231
{#each curemojiresults[0] as result, idx}
···
226
244
</div>
227
245
228
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
+
229
259
.emoji-selector {
230
260
width: 100%;
231
261
position: absolute;