rucki
33 lines
3.3 KiB
HTML
33 lines
3.3 KiB
HTML
{% extends 'core/base.html' %}
|
||
{% block content %}
|
||
<form class="card item-card shadow-sm position-relative" method="post" enctype="multipart/form-data" x-data="quickComposer([{% for tag in tags %}'{{ tag.name|escapejs }}'{% if not forloop.last %},{% endif %}{% endfor %}])">
|
||
{% csrf_token %}
|
||
<input type="hidden" name="next" value="{{ next_url }}">
|
||
<div class="card-body vstack gap-3">
|
||
<div class="d-flex justify-content-between align-items-center gap-2 sticky-top bg-white py-2" style="z-index:5">
|
||
<h1 class="h5 m-0">{% if requested_kind == 'todo' %}Aufgabe erstellen{% elif requested_kind == 'link' %}Link erstellen{% elif requested_kind == 'journal' %}Journal-Eintrag erstellen{% else %}Notiz erstellen{% endif %}</h1>
|
||
<div class="d-flex gap-2"><button class="btn btn-success px-3 py-2" title="Speichern">✓</button><a class="btn btn-danger px-3 py-2" href="{{ next_url }}" title="Abbrechen">×</a></div>
|
||
</div>
|
||
<div class="mobile-tag-picker">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary" @click="showTags=true">Tags hinzufügen</button>
|
||
<div class="mobile-tag-backdrop" x-show="showTags" @click="showTags=false" x-cloak></div>
|
||
<div class="mobile-tag-popup card shadow" x-show="showTags" x-cloak>
|
||
<div class="card-body"><div class="d-flex justify-content-between align-items-center mb-2"><strong>Tag auswählen</strong><button type="button" class="btn-close" @click="showTags=false"></button></div><div class="d-flex flex-wrap gap-2">{% for tag in tags %}<button type="button" class="btn btn-sm btn-outline-secondary" @click="addToken('#{{ tag.name|escapejs }}')">#{{ tag.name }}</button>{% endfor %}</div></div>
|
||
</div>
|
||
</div>
|
||
<textarea class="form-control" name="content" rows="14" placeholder="Text … #tag [[ ![[" x-model="text" @keydown="onKeydown($event)" @input="onInput($event)" @paste="handlePaste($event)"></textarea>
|
||
<div class="slash-menu list-group shadow" x-show="open" @click.outside="open=false" x-cloak>
|
||
<template x-for="(cmd, idx) in filtered" :key="cmd.token"><button type="button" class="list-group-item list-group-item-action" :class="{'active': idx === active}" @mouseenter="active=idx" @mousedown.prevent="insert(cmd.token)"><strong x-text="cmd.token"></strong> <span class="text-muted" x-text="cmd.label"></span></button></template>
|
||
</div>
|
||
<div>
|
||
<label class="form-label">Bild hinzufügen</label>
|
||
<input class="form-control desktop-file" type="file" name="files" multiple accept="image/*,.pdf,.txt,.md" x-ref="fileInput" @change="previewFile($event)">
|
||
<div class="mobile-media gap-2"><label class="btn btn-outline-secondary flex-fill mb-0">Galerie<input class="d-none" type="file" name="files" multiple accept="image/*" @change="previewFile($event)"></label><label class="btn btn-outline-secondary flex-fill mb-0">Foto<input class="d-none" type="file" name="files" accept="image/*" capture="environment" @change="previewFile($event)"></label></div>
|
||
<div class="form-text">Mit <code>![[</code> können Bilder im Text eingefügt werden.</div>
|
||
</div>
|
||
<template x-if="preview"><div class="small"><span class="text-muted">Bildvorschau:</span><br><img :src="preview" class="img-thumbnail mt-1" style="max-height:180px"></div></template>
|
||
<button class="btn btn-dark align-self-start d-none d-md-inline-block">Speichern</button>
|
||
</div>
|
||
</form>
|
||
{% endblock %}
|