forked from potsda.mn/mobilizon
Improve UI for participations when message is too long
Add a button to make the details more discoverable Closes #452 Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
47cc3173ac
commit
02931ec0cd
|
@ -109,7 +109,7 @@
|
||||||
props.row.actor.name
|
props.row.actor.name
|
||||||
}}</span
|
}}</span
|
||||||
><br />
|
><br />
|
||||||
<span class="is-size-7 has-text-grey"
|
<span class="is-size-7 has-text-grey-dark"
|
||||||
>@{{ usernameWithDomain(props.row.actor) }}</span
|
>@{{ usernameWithDomain(props.row.actor) }}</span
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
|
@ -148,10 +148,11 @@
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
<b-table-column
|
<b-table-column
|
||||||
field="metadata.message"
|
field="metadata.message"
|
||||||
|
class="column-message"
|
||||||
:label="$t('Message')"
|
:label="$t('Message')"
|
||||||
v-slot="props"
|
v-slot="props"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
@click="toggleQueueDetails(props.row)"
|
@click="toggleQueueDetails(props.row)"
|
||||||
:class="{
|
:class="{
|
||||||
'ellipsed-message':
|
'ellipsed-message':
|
||||||
|
@ -159,11 +160,25 @@
|
||||||
}"
|
}"
|
||||||
v-if="props.row.metadata && props.row.metadata.message"
|
v-if="props.row.metadata && props.row.metadata.message"
|
||||||
>
|
>
|
||||||
|
<p>
|
||||||
{{ props.row.metadata.message | ellipsize }}
|
{{ props.row.metadata.message | ellipsize }}
|
||||||
</span>
|
</p>
|
||||||
<span v-else class="has-text-grey">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="button is-text"
|
||||||
|
v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
|
||||||
|
@click.stop="toggleQueueDetails(props.row)"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
openDetailedRows[props.row.id]
|
||||||
|
? $t("View less")
|
||||||
|
: $t("View more")
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p v-else class="has-text-grey-dark">
|
||||||
{{ $t("No message") }}
|
{{ $t("No message") }}
|
||||||
</span>
|
</p>
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
|
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
|
||||||
<span class="has-text-centered">
|
<span class="has-text-centered">
|
||||||
|
@ -177,7 +192,7 @@
|
||||||
</template>
|
</template>
|
||||||
<template slot="empty">
|
<template slot="empty">
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="content has-text-grey has-text-centered">
|
<div class="content has-text-grey-dark has-text-centered">
|
||||||
<p>{{ $t("No participant matches the filters") }}</p>
|
<p>{{ $t("No participant matches the filters") }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
@ -407,7 +422,12 @@ export default class Participants extends Vue {
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
this.queueTable.toggleDetails(row);
|
this.queueTable.toggleDetails(row);
|
||||||
|
if (row.id) {
|
||||||
|
this.openDetailedRows[row.id] = !this.openDetailedRows[row.id];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openDetailedRows: Record<string, boolean> = {};
|
||||||
|
|
||||||
async pushRouter(
|
async pushRouter(
|
||||||
routeName: string,
|
routeName: string,
|
||||||
|
@ -434,8 +454,24 @@ section {
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
|
.column-message {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
.ellipsed-message {
|
.ellipsed-message {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span.tag {
|
span.tag {
|
||||||
|
|
Loading…
Reference in a new issue