display poll indicators in drafts

This commit is contained in:
Henry Jameson 2024-12-31 12:52:29 +02:00
parent bc2da26dda
commit f653ac4a62
4 changed files with 56 additions and 8 deletions

View file

@ -5,6 +5,15 @@ import StatusContent from 'src/components/status_content/status_content.vue'
import Gallery from 'src/components/gallery/gallery.vue' import Gallery from 'src/components/gallery/gallery.vue'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faPollH
} from '@fortawesome/free-solid-svg-icons'
library.add(
faPollH
)
const Draft = { const Draft = {
components: { components: {
PostStatusForm, PostStatusForm,

View file

@ -27,7 +27,8 @@
/> />
</div> </div>
<div class="status-preview"> <div class="status-preview">
<p>{{ draft.status }}</p> <p v-if="draft.status">{{ draft.status }}</p>
<p v-else class="faint">{{ $t('drafts.empty') }}</p>
<gallery <gallery
v-if="draft.files?.length !== 0" v-if="draft.files?.length !== 0"
class="attachments media-body" class="attachments media-body"
@ -39,6 +40,18 @@
@play="$emit('mediaplay', attachment.id)" @play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)" @pause="$emit('mediapause', attachment.id)"
/> />
<div
v-if="draft.poll.options"
class="poll-indicator-container"
:title="$t('drafts.poll_tooltip')"
>
<div class="poll-indicator">
<FAIcon
icon="poll-h"
size="3x"
/>
</div>
</div>
</div> </div>
</div> </div>
<div v-if="editing"> <div v-if="editing">
@ -88,12 +101,6 @@
<style lang="scss"> <style lang="scss">
.Draft { .Draft {
position: relative; position: relative;
line-height: 1.1;
font-size: initial;
a {
color: var(--link);
}
.status-content { .status-content {
padding: 0.5em; padding: 0.5em;
@ -102,8 +109,11 @@
.status-preview { .status-preview {
display: grid; display: grid;
grid-template-columns: 1fr 10em; grid-template-columns: 1fr;
grid-auto-columns: 10em;
grid-auto-flow: column;
grid-gap: 0.5em; grid-gap: 0.5em;
align-items: start;
max-width: 100%; max-width: 100%;
p { p {
@ -111,6 +121,32 @@
white-space: normal; white-space: normal;
overflow-x: hidden; overflow-x: hidden;
} }
.poll-indicator-container {
border-radius: var(--roundness);
display: grid;
justify-items: center;
align-items: center;
align-self: start;
height: 0;
padding-bottom: 62.5%;
position: relative;
}
.poll-indicator {
box-sizing: border-box;
border: 1px solid var(--border);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
justify-items: center;
align-items: center;
width: 100%;
height: 100%;
}
} }
.actions { .actions {

View file

@ -13,6 +13,7 @@
<List <List
v-else v-else
:items="drafts" :items="drafts"
:non-interactive="true"
> >
<template #item="{ item: draft }"> <template #item="{ item: draft }">
<Draft <Draft

View file

@ -1514,6 +1514,8 @@
"drafts": { "drafts": {
"drafts": "Drafts", "drafts": "Drafts",
"no_drafts": "You have no drafts", "no_drafts": "You have no drafts",
"empty": "(No content)",
"poll_tooltip": "Draft contains a poll",
"continue": "Continue composing", "continue": "Continue composing",
"save": "Save without posting", "save": "Save without posting",
"abandon": "Abandon draft", "abandon": "Abandon draft",