diff options
| -rw-r--r-- | locale/en_GB.json | 2 | ||||
| -rw-r--r-- | routes/note_fragment.php | 16 | ||||
| -rw-r--r-- | static/misc.css | 4 | ||||
| -rw-r--r-- | static/pills.css | 17 | ||||
| -rw-r--r-- | static/skeleton.css | 4 | ||||
| -rw-r--r-- | templates/attachment_pill.php | 22 | ||||
| -rw-r--r-- | templates/note.php | 6 |
7 files changed, 63 insertions, 8 deletions
diff --git a/locale/en_GB.json b/locale/en_GB.json index c7bccdf..57c0fa1 100644 --- a/locale/en_GB.json +++ b/locale/en_GB.json @@ -81,6 +81,8 @@ "writeNote.mentions.placeholder": "someone@social.example", "writeNote.attachments.label": "Attached files", "writeNote.attachments.add.action": "Add a file", + "writeNote.attachments.remove.action": "Remove", + "writeNote.attachments.altText.label": "Image description", "writeReply.label": "Write a reply", "writeReply.action": "Reply", "followRequests.pageTitle": "Pending follow requests", diff --git a/routes/note_fragment.php b/routes/note_fragment.php index 02655ec..be1c33f 100644 --- a/routes/note_fragment.php +++ b/routes/note_fragment.php @@ -109,9 +109,11 @@ Router::getInstance()->mount('/fragment/note', function (array $args) { $note->mentions[] = Actor::find($uid); } $index = 0; - foreach (($_POST['attachments'] ?? []) as $oid) { - $obj = StorageObject::findByOid($oid); - $note->attachments[] = NoteAttachment::fromStorageObject($obj, $index++, $obj->filename); + $attachments = $_POST['attachments'] ?? []; + $altTexts = $_POST['altTexts'] ?? []; + for ($i = 0; $i < count($attachments); $i++) { + $obj = StorageObject::findByOid($attachments[$i]); + $note->attachments[] = NoteAttachment::fromStorageObject($obj, $index++, $altTexts[$i] ?: null); } $note->save(); $note->publish(); @@ -145,6 +147,12 @@ Router::getInstance()->mount('/fragment/note/attachmentPill', function (array $a // store the file and return a pill for it // TODO: allow other providers $obj = StorageObject::createFromUpload(FilesystemStorage::class, $_FILES['file']); - render_template('attachment_pill', ['type' => 'file', 'oid' => $obj->oid, 'name' => $obj->filename]); + $type = str_starts_with($obj->mimetype, 'image/') ? 'image' : 'file'; + render_template('attachment_pill', [ + 'type' => $type, + 'oid' => $obj->oid, + 'name' => $obj->filename, + 'href' => $obj->getUrl() + ]); } });
\ No newline at end of file diff --git a/static/misc.css b/static/misc.css index 8013403..d9a491c 100644 --- a/static/misc.css +++ b/static/misc.css @@ -23,6 +23,10 @@ button.secondary { font-size: inherit; font-family: inherit; font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + &:disabled { opacity: 80%; cursor: default; diff --git a/static/pills.css b/static/pills.css index af670b8..45f9218 100644 --- a/static/pills.css +++ b/static/pills.css @@ -47,3 +47,20 @@ } } } + +.imageAttachmentPill { + grid-auto-flow: row; + padding: var(--spacing-single); + + .pillInfo { + display: flex; + align-items: center; + gap: var(--spacing-single); + max-width: 300px; + } + + img { + max-width: 300px; + border-radius: var(--border-radius); + } +} diff --git a/static/skeleton.css b/static/skeleton.css index bc08f7b..2965c2d 100644 --- a/static/skeleton.css +++ b/static/skeleton.css @@ -133,8 +133,10 @@ main { #leftPane, #rightPane { position: sticky; - top: 72px; + top: 56px; height: max-content; + max-height: calc(100vh - 56px); + overflow-y: auto; } @media (width < 1200px) { #leftPane, diff --git a/templates/attachment_pill.php b/templates/attachment_pill.php index 76fc590..6fff74d 100644 --- a/templates/attachment_pill.php +++ b/templates/attachment_pill.php @@ -16,7 +16,29 @@ $type ??= 'add'; <span class="pillIcon material-symbols attach-file"></span> <span class="pillText"><?= $name ?></span> <input type="hidden" name="attachments[]" value="<?= $oid ?>"> + <input type="hidden" name="altTexts[]" value="<?= $name ?>"> <span class="pillIcon material-symbols close-small"></span> </button> +<?php elseif ($type == 'image'): ?> + + <div class="inlinePill imageAttachmentPill"> + <div class="row pillInfo"> + <span class="pillIcon material-symbols attach-file"></span> + <span class="pillText"><?= $name ?></span> + </div> + <img src="<?= $href ?>"> + <input type="hidden" name="attachments[]" value="<?= $oid ?>"> + <div class="row"> + <label for="altText-<?= $oid ?>"><?= __('writeNote.attachments.altText.label') ?></label> + <textarea id="altText-<?= $oid ?>" name="altTexts[]"></textarea> + </div> + <div class="row"> + <button type="button" class="secondary" _="on click remove closest .inlinePill"> + <span class="material-symbols close-small"></span> + <?= __('writeNote.attachments.remove.action') ?> + </button> + </div> + </div> + <?php endif; ?>
\ No newline at end of file diff --git a/templates/note.php b/templates/note.php index f9eef45..b43e63e 100644 --- a/templates/note.php +++ b/templates/note.php @@ -79,12 +79,12 @@ if ($user != null) { <?php foreach ($note->attachments as $attachment): ?> <div> <?php if (str_starts_with($attachment->type, 'image/')): ?> - <img src="<?= $attachment->href ?>" alt="<?= $attachment->description ?? '' ?>" - title="<?= $attachment->description ?? '' ?>"> + <img src="<?= $attachment->href ?>" alt="<?= htmlspecialchars($attachment->description ?? '') ?>" + title="<?= htmlspecialchars($attachment->description ?? '') ?>"> <?php else: ?> <a class="file" href="<?= $attachment->href ?>" target="_blank"> <span class="material-symbols attach-file"></span> - <span><?= $attachment->description ?? basename($attachment->href) ?></span> + <span><?= htmlspecialchars($attachment->description ?? basename($attachment->href)) ?></span> </a> <?php endif; ?> </div> |